/* ══════════════════════════════════════════════════════════════════════
   CERAMIC DESIGN SYSTEM — Unified & Optimized
   Generated: 2026-03-24
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 01. FONTS (@font-face) ─── */

@font-face {
    src: url(/themes/_include/ceramic/fonts/SuisseIntl-Bold-WebS.woff2) format(woff2);
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-family: "__font-suisse-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/SuisseIntl-SemiBold-WebS.woff2) format(woff2);
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    font-family: "__font-suisse-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/SuisseIntl-Medium-WebS.woff2) format(woff2);
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    font-family: "__font-suisse-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/SuisseIntl-Book-WebS.woff2) format(woff2);
    font-style: normal;
    font-display: swap;
    font-weight: 450;
    font-family: "__font-suisse-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/SuisseIntl-Regular-WebS.woff2) format(woff2);
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    font-family: "__font-suisse-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/sohne-mono-buch.woff2) format(woff2);
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-family: "__font-sohne-mono-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/sohne-mono-kraftig.woff2) format(woff2);
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    font-family: "__font-sohne-mono-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/Geist-Regular-subset.woff2) format(woff2);
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-family: "__font-geist-numbers-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/Geist-Medium-subset.woff2) format(woff2);
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    font-family: "__font-geist-numbers-v1"
}

@font-face {
    src: url(/themes/_include/ceramic/fonts/Geist-SemiBold-subset.woff2) format(woff2);
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    font-family: "__font-geist-numbers-v1"
}

/* ─── 02. CUSTOM PROPERTIES (@property) ─── */

@property --_ceramic-icon-stroke {
    syntax: "<color>";
    inherits: true;
    initial-value: currentColor
}

@property --start-fade-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 0
}

@property --end-fade-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 0
}

@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

/* ─── 03. DESIGN TOKENS (:root, html, html.dark) ─── */

:root {

    --ceramic-slate-50: #f8fafc;
    --ceramic-slate-100: #f1f5f9;
    --ceramic-slate-200: #e2e8f0;
    --ceramic-slate-300: #cbd5e1;
    --ceramic-slate-400: #94a3b8;
    --ceramic-slate-500: #64748b;
    --ceramic-slate-600: #475569;
    --ceramic-slate-700: #334155;
    --ceramic-slate-800: #1e293b;
    --ceramic-slate-900: #0f172a;
    --ceramic-slate-950: #020617;
    /* ceramic-gray — 5rrrrr reference (subtle blue-violet undertone) */
    --ceramic-gray-50: #fafafb;
    --ceramic-gray-100: #f6f6f7;
    --ceramic-gray-150: #f0f0f1;
    --ceramic-gray-200: #ececee;
    --ceramic-gray-300: #dbdbe0;
    --ceramic-gray-400: #c7c7cf;
    --ceramic-gray-500: #adadb7;
    --ceramic-gray-600: #90909d;
    --ceramic-gray-700: #767684;
    --ceramic-gray-800: #5f5f6f;
    --ceramic-gray-900: #4c4c5c;
    --ceramic-gray-1000: #3d3d4a;
    --ceramic-gray-1100: #33333e;
    --ceramic-gray-1200: #2b2b34;
    --ceramic-gray-1300: #232328;
    --ceramic-gray-1400: #1b1b1f;
    --ceramic-gray-1500: #111113;
    --ceramic-zinc-50: #fafafa;
    --ceramic-zinc-100: #f4f4f5;
    --ceramic-zinc-200: #e4e4e7;
    --ceramic-zinc-300: #d4d4d8;
    --ceramic-zinc-400: #a1a1aa;
    --ceramic-zinc-500: #71717a;
    --ceramic-zinc-600: #52525b;
    --ceramic-zinc-700: #3f3f46;
    --ceramic-zinc-800: #27272a;
    --ceramic-zinc-900: #1c1c20;
    --ceramic-zinc-950: #09090B;
    --ceramic-zinc-975: #0c0c0e;
    --ceramic-zinc-1000: #09090b;
    --ceramic-neutral-50: #fafafa;
    --ceramic-neutral-100: #f5f5f5;
    --ceramic-neutral-200: #e5e5e5;
    --ceramic-neutral-300: #d4d4d4;
    --ceramic-neutral-400: #a3a3a3;
    --ceramic-neutral-500: #737373;
    --ceramic-neutral-600: #525252;
    --ceramic-neutral-700: #404040;
    --ceramic-neutral-800: #262626;
    --ceramic-neutral-900: #171717;
    --ceramic-neutral-1000: #141414;
    --ceramic-neutral-1100: #101010;
    --ceramic-neutral-1200: #0d0d0d;
    --ceramic-neutral-1300: #0a0a0a;
    --ceramic-stone-50: #fafaf9;
    --ceramic-stone-100: #f5f5f4;
    --ceramic-stone-200: #e7e5e4;
    --ceramic-stone-300: #d6d3d1;
    --ceramic-stone-400: #a8a29e;
    --ceramic-stone-500: #78716c;
    --ceramic-stone-600: #57534e;
    --ceramic-stone-700: #44403c;
    --ceramic-stone-800: #292524;
    --ceramic-stone-900: #1c1917;
    --ceramic-stone-1000: #17150f;
    --ceramic-stone-1100: #13120e;
    --ceramic-stone-1200: #0f0e0d;
    --ceramic-stone-1300: #0c0a09;
    --ceramic-purple-50: #f5f3ff;
    --ceramic-purple-100: #e3e0ff;
    --ceramic-purple-200: #ccc8ff;
    --ceramic-purple-300: #bab0ff;
    --ceramic-purple-400: #a698ff;
    --ceramic-purple-500: #9280ff;
    --ceramic-purple-600: #846bff;
    --ceramic-purple-700: #6c47ff;
    --ceramic-purple-800: #5f15fe;
    --ceramic-purple-900: #4d06d1;
    --ceramic-purple-1000: #3707a6;
    --ceramic-purple-1100: #27057c;
    --ceramic-purple-1200: #1c045f;
    --ceramic-purple-1300: #16034b;
    --ceramic-violet-50: #f5f3ff;
    --ceramic-violet-100: #ede9fe;
    --ceramic-violet-200: #ddd6fe;
    --ceramic-violet-300: #c4b5fd;
    --ceramic-violet-400: #a78bfa;
    --ceramic-violet-500: #8b5cf6;
    --ceramic-violet-600: #7c3aed;
    --ceramic-violet-700: #6d28d9;
    --ceramic-violet-800: #5b21b6;
    --ceramic-violet-900: #4c1d95;
    --ceramic-violet-1000: #3d1878;
    --ceramic-violet-1100: #301465;
    --ceramic-violet-1200: #250f52;
    --ceramic-violet-1300: #1e0d42;
    --ceramic-indigo-50: #eef2ff;
    --ceramic-indigo-100: #e0e7ff;
    --ceramic-indigo-200: #c7d2fe;
    --ceramic-indigo-300: #a5b4fc;
    --ceramic-indigo-400: #818cf8;
    --ceramic-indigo-500: #6366f1;
    --ceramic-indigo-600: #4f46e5;
    --ceramic-indigo-700: #4338ca;
    --ceramic-indigo-800: #3730a3;
    --ceramic-indigo-900: #312e81;
    --ceramic-indigo-1000: #282569;
    --ceramic-indigo-1100: #201d55;
    --ceramic-indigo-1200: #191643;
    --ceramic-indigo-1300: #141235;
    --ceramic-fuchsia-50: #fdf4ff;
    --ceramic-fuchsia-100: #fae8ff;
    --ceramic-fuchsia-200: #f5d0fe;
    --ceramic-fuchsia-300: #f0abfc;
    --ceramic-fuchsia-400: #e879f9;
    --ceramic-fuchsia-500: #d946ef;
    --ceramic-fuchsia-600: #c026d3;
    --ceramic-fuchsia-700: #a21caf;
    --ceramic-fuchsia-800: #86198f;
    --ceramic-fuchsia-900: #701a75;
    --ceramic-fuchsia-1000: #5c1560;
    --ceramic-fuchsia-1100: #49114d;
    --ceramic-fuchsia-1200: #3a0d3e;
    --ceramic-fuchsia-1300: #2e0a31;
    --ceramic-pink-50: #fdf2f8;
    --ceramic-pink-100: #fce7f3;
    --ceramic-pink-200: #fbcfe8;
    --ceramic-pink-300: #f9a8d4;
    --ceramic-pink-400: #f472b6;
    --ceramic-pink-500: #ec4899;
    --ceramic-pink-600: #db2777;
    --ceramic-pink-700: #be185d;
    --ceramic-pink-800: #9d174d;
    --ceramic-pink-900: #831843;
    --ceramic-pink-1000: #6d1437;
    --ceramic-pink-1100: #58102c;
    --ceramic-pink-1200: #460d23;
    --ceramic-pink-1300: #37091c;
    --ceramic-rose-50: #fff1f2;
    --ceramic-rose-100: #ffe4e6;
    --ceramic-rose-200: #fecdd3;
    --ceramic-rose-300: #fda4af;
    --ceramic-rose-400: #fb7185;
    --ceramic-rose-500: #f43f5e;
    --ceramic-rose-600: #e11d48;
    --ceramic-rose-700: #be123c;
    --ceramic-rose-800: #9f1239;
    --ceramic-rose-900: #881337;
    --ceramic-rose-1000: #71102e;
    --ceramic-rose-1100: #5b0d25;
    --ceramic-rose-1200: #48091e;
    --ceramic-rose-1300: #380718;
    --ceramic-green-50: #eefbf3;
    --ceramic-green-100: #c4f3d9;
    --ceramic-green-200: #8ae8b4;
    --ceramic-green-300: #5cdd96;
    --ceramic-green-400: #3ccc7e;
    --ceramic-green-500: #2ab368;
    --ceramic-green-600: #239b5a;
    --ceramic-green-700: #1c844c;
    --ceramic-green-800: #166d3f;
    --ceramic-green-900: #115933;
    --ceramic-green-1000: #0d4829;
    --ceramic-green-1100: #0a3920;
    --ceramic-green-1200: #072c18;
    --ceramic-green-1300: #042011;
    --ceramic-red-50: #fef5f5;
    --ceramic-red-100: #fde1e1;
    --ceramic-red-200: #f9c4c4;
    --ceramic-red-300: #f4a3a3;
    --ceramic-red-400: #ec7d7d;
    --ceramic-red-500: #e56363;
    --ceramic-red-600: #d14d4d;
    --ceramic-red-700: #b83c3c;
    --ceramic-red-800: #9c3030;
    --ceramic-red-900: #832626;
    --ceramic-red-1000: #6d1e1e;
    --ceramic-red-1100: #591717;
    --ceramic-red-1200: #481313;
    --ceramic-red-1300: #3a0e0e;
    --ceramic-red-1400: #2a0606;
    --ceramic-red-1500: #1e0303;
    --ceramic-orange: #d46a22;
    --ceramic-orange-50: #fff7f0;
    --ceramic-orange-100: #ffe3c6;
    --ceramic-orange-200: #fdcc9e;
    --ceramic-orange-300: #f9b272;
    --ceramic-orange-400: #f59852;
    --ceramic-orange-500: #ee7e34;
    --ceramic-orange-600: #d46a22;
    --ceramic-orange-700: #b7581a;
    --ceramic-orange-800: #9a4814;
    --ceramic-orange-900: #80380e;
    --ceramic-orange-1000: #6b2c09;
    --ceramic-orange-1100: #582308;
    --ceramic-orange-1200: #471c07;
    --ceramic-orange-1300: #381505;
    --ceramic-amber-50: #fff8eb;
    --ceramic-amber-100: #ffedd1;
    --ceramic-amber-200: #fdd8a0;
    --ceramic-amber-300: #fcc06b;
    --ceramic-amber-400: #fba93e;
    --ceramic-amber-500: #E07D00;
    --ceramic-amber-600: #db7408;
    --ceramic-amber-700: #b6580b;
    --ceramic-amber-800: #934310;
    --ceramic-amber-900: #793710;
    --ceramic-amber-1000: #5f2904;
    --ceramic-amber-1100: #522807;
    --ceramic-amber-1200: #412005;
    --ceramic-amber-1300: #331a04;
    --ceramic-yellow-50: #fefce8;
    --ceramic-yellow-100: #fef48c;
    --ceramic-yellow-200: #f5e046;
    --ceramic-yellow-300: #e5ca2e;
    --ceramic-yellow-400: #cfb518;
    --ceramic-yellow-500: #bfa008;
    --ceramic-yellow-600: #a68a07;
    --ceramic-yellow-700: #8e7506;
    --ceramic-yellow-800: #776205;
    --ceramic-yellow-900: #645004;
    --ceramic-yellow-1000: #523f03;
    --ceramic-yellow-1100: #403003;
    --ceramic-yellow-1200: #302304;
    --ceramic-yellow-1300: #241902;
    --ceramic-lime-50: #f7fee7;
    --ceramic-lime-100: #ecfccb;
    --ceramic-lime-200: #d9f99d;
    --ceramic-lime-300: #bef264;
    --ceramic-lime-400: #a3e635;
    --ceramic-lime-500: #84cc16;
    --ceramic-lime-600: #65a30d;
    --ceramic-lime-700: #4d7c0f;
    --ceramic-lime-800: #3f6212;
    --ceramic-lime-900: #365314;
    --ceramic-lime-1000: #2d4410;
    --ceramic-lime-1100: #24360c;
    --ceramic-lime-1200: #1c2909;
    --ceramic-lime-1300: #161f07;
    --ceramic-emerald-50: #ecfdf5;
    --ceramic-emerald-100: #d1fae5;
    --ceramic-emerald-200: #a7f3d0;
    --ceramic-emerald-300: #6ee7b7;
    --ceramic-emerald-400: #34d399;
    --ceramic-emerald-500: #10b981;
    --ceramic-emerald-600: #059669;
    --ceramic-emerald-700: #047857;
    --ceramic-emerald-800: #065f46;
    --ceramic-emerald-900: #064e3b;
    --ceramic-emerald-1000: #054032;
    --ceramic-emerald-1100: #043328;
    --ceramic-emerald-1200: #032820;
    --ceramic-emerald-1300: #021f18;
    --ceramic-teal-50: #f0fdfa;
    --ceramic-teal-100: #ccfbf1;
    --ceramic-teal-200: #99f6e4;
    --ceramic-teal-300: #5eead4;
    --ceramic-teal-400: #2dd4bf;
    --ceramic-teal-500: #14b8a6;
    --ceramic-teal-600: #0d9488;
    --ceramic-teal-700: #0f766e;
    --ceramic-teal-800: #115e59;
    --ceramic-teal-900: #134e4a;
    --ceramic-teal-1000: #10403d;
    --ceramic-teal-1100: #0d3331;
    --ceramic-teal-1200: #0a2827;
    --ceramic-teal-1300: #081f1e;
    --ceramic-cyan-50: #ecfeff;
    --ceramic-cyan-100: #cffafe;
    --ceramic-cyan-200: #a5f3fc;
    --ceramic-cyan-300: #67e8f9;
    --ceramic-cyan-400: #22d3ee;
    --ceramic-cyan-500: #06b6d4;
    --ceramic-cyan-600: #0891b2;
    --ceramic-cyan-700: #0e7490;
    --ceramic-cyan-800: #155e75;
    --ceramic-cyan-900: #164e63;
    --ceramic-cyan-1000: #134052;
    --ceramic-cyan-1100: #103342;
    --ceramic-cyan-1200: #0d2834;
    --ceramic-cyan-1300: #0a1f28;
    --ceramic-sky-50: #f0f9ff;
    --ceramic-sky-100: #e0f2fe;
    --ceramic-sky-200: #bae6fd;
    --ceramic-sky-300: #7dd3fc;
    --ceramic-sky-400: #38bdf8;
    --ceramic-sky-500: #0ea5e9;
    --ceramic-sky-600: #0284c7;
    --ceramic-sky-700: #0369a1;
    --ceramic-sky-800: #075985;
    --ceramic-sky-900: #0c4a6e;
    --ceramic-sky-1000: #0a3d5b;
    --ceramic-sky-1100: #083149;
    --ceramic-sky-1200: #06263a;
    --ceramic-sky-1300: #051d2d;
    --ceramic-blue-50: #f6faff;
    --ceramic-blue-100: #daeafe;
    --ceramic-blue-200: #b4d5fe;
    --ceramic-blue-300: #8dc2fd;
    --ceramic-blue-400: #73acfa;
    --ceramic-blue-500: #6694f8;
    --ceramic-blue-600: #307ff6;
    --ceramic-blue-700: #236dd7;
    --ceramic-blue-800: #1c5bb6;
    --ceramic-blue-900: #1744a6;
    --ceramic-blue-1000: #0f318e;
    --ceramic-blue-1100: #0e2369;
    --ceramic-blue-1200: #0b1c49;
    --ceramic-blue-1300: #0c1637;
    --ceramic-white: #fff;
    --ceramic-black: #000;

    /* ===== 5rrrrr Brand Colors ===== */
    --brand-primary: #E07D00;
    --brand-primary-light: #FFE18D;
    --brand-primary-dark: #E07D00;
    --brand-secondary: #09090B;
    --brand-secondary-light: #18181B;
    --brand-secondary-dark: #000000;
    --brand-accent: #F70100;
    --brand-accent-light: #FF3333;
    --brand-accent-dark: #CC0100;

    /* Star Amber — Logo & Reviews (overrides generic ceramic-amber for 5rrrrr) */
    --star-amber-50: #FFFBEB;
    --star-amber-100: #FEF3C7;
    --star-amber-200: #FDE68A;
    --star-amber-300: #FCD34D;
    --star-amber-400: #FFBE0B;
    --star-amber-500: #E07D00;
    --star-amber-600: #F19314;
    --star-amber-700: #D97706;
    --star-amber-800: #92400E;
    --star-amber-900: #78350F;

    /* Rating Stars */
    --rating-5: #04DA8D;
    --rating-4: #73CF11;
    --rating-3: #FFB800;
    --rating-2: #FF8A00;
    --rating-1: #F70100;

    /* Review Sentiment */
    --review-positive: #04DA8D;
    --review-neutral: #FFB800;
    --review-negative: #F70100;

    /* Brand Gradients */
    --brand-gradient: linear-gradient(135deg, #E07D00, #FFBE0B);
    --brand-gradient-reverse: linear-gradient(135deg, #FFBE0B, #E07D00);
    --hero-gradient: linear-gradient(135deg, #E07D00 0%, #FFBE0B 50%, #FFD700 100%);

    /* Surfaces */
    --brand-bg-light: #F8FAFB;
    --brand-bg-card: #FFFFFF;
    --brand-bg-dark: #0E0E0F;
}

html {
    --ceramic-primary: var(--ceramic-slate-900);
    --ceramic-secondary: var(--ceramic-slate-700);
    --ceramic-dimmed: var(--ceramic-slate-400);
    --ceramic-positive: var(--ceramic-green-700);
    --ceramic-negative: var(--ceramic-red-700);
    --ceramic-warning: var(--ceramic-orange-500);
    --ceramic-brand: var(--color-brand);
    --ceramic-info: var(--ceramic-blue-700);
    --ceramic-bg-main: var(--ceramic-white);
    --ceramic-bg-menu: var(--ceramic-white);
    --ceramic-bg-separator: var(--ceramic-gray-200);
    --clerk-neutral: var(--ceramic-black);
    --clerk-color-border: var(--ceramic-black);
    --stripe-color-background: var(--ceramic-white);
    --stripe-color-primary: var(--ceramic-primary);
    --stripe-input-label: var(--ceramic-primary);
    --stripe-tab-background: color-mix(in srgb, var(--ceramic-gray-1100) 8%, transparent);
    --stripe-tab-color: var(--ceramic-primary);
    --stripe-tab-selected-background: var(--ceramic-white);
    --shiki-foreground: #131316;
    --shiki-token-function: #6C47FF;
    --shiki-token-keyword: #6C47FF;
    --shiki-token-string: #00AEE3;
    --shiki-token-string-expression: #00AEE3;
    --shiki-token-constant: #22C543;
    --shiki-token-parameter: #22C543;
    --shiki-token-link: #22C543;
    --shiki-token-comment: #6B6C78;
    --shiki-token-punctuation: #747686;

    --shiki-light-foreground: #131316;
    --shiki-light-token-function: #6C47FF;
    --shiki-light-token-keyword: #6C47FF;
    --shiki-light-token-string: #00AEE3;
    --shiki-light-token-string-expression: #00AEE3;
    --shiki-light-token-constant: #22C543;
    --shiki-light-token-parameter: #22C543;
    --shiki-light-token-link: #22C543;
    --shiki-light-token-comment: #6B6C78;
    --shiki-light-token-punctuation: #747686;
    --fill-light: white;
    --fill-dark: black;

    /* ═══ Text Color Roles (semantic) — RGB triplets for opacity modifier support ═══ */
    /* Usage: text-role-primary → solid color, text-role-primary/60 → 60% opacity */
    /* Text role hierarchy — Tailwind slate (cool blue-gray).
       ~+50 RGB steps per level. Slate gives professional contrast on
       both cream (light) and dark backgrounds. */
    --text-primary: var(--ceramic-slate-900);
    --text-primary-rgb: 15 23 42; /* #0F172A */
    --text-secondary: var(--ceramic-slate-700);
    --text-secondary-rgb: 51 65 85; /* #334155 */
    --text-tertiary: var(--ceramic-slate-500);
    --text-tertiary-rgb: 100 116 139; /* #64748B */
    --text-dimmed: var(--ceramic-slate-400);
    --text-dimmed-rgb: 148 163 184; /* #94A3B8 */
    --text-disabled: var(--ceramic-slate-300);
    --text-disabled-rgb: 203 213 225; /* #CBD5E1 */

    /* ═══ Ceramic cream sub-palette (Claude.ai warm backgrounds) ═══
       HSL source: Claude CSS custom properties `--bg-000..--bg-400`.
       Registered as --ceramic-cream-* so Tailwind CDN generates
       `bg-ceramic-cream-100` etc. Used for sidebar, header, active
       pills, hover surfaces. */
    --ceramic-cream-0: #FFFFFF; /* content (pure white) */
    --ceramic-cream-100: #FAF9F5; /* sidebar / header (vellum) */
    --ceramic-cream-200: #F4F2EA; /* slightly darker section */
    --ceramic-cream-300: #EDEBE2; /* active pill / hover */
    --ceramic-cream-400: #E5E2D4; /* pressed / elevated */
    --claude-brand: #D97757; /* Claude orange (reference, KRON = yellow) */
    --text-code: var(--ceramic-orange-700);
    --text-code-rgb: 183 88 26; /* #B7581A */
    --text-brand: var(--ceramic-brand);
    --text-brand-rgb: 224 125 0; /* #E07D00 */
    --text-inverse: #fff;
    --text-inverse-rgb: 255 255 255;
    --text-success-rgb: 13 72 41; /* #0D4829 */
    --text-error-rgb: 109 30 30; /* #6D1E1E */
    --text-warning-rgb: 107 44 9; /* #6B2C09 */
    --text-info-rgb: 18 35 104; /* #122368 */
    --text-link-rgb: 37 99 235; /* blue-600 */

    /* ═══ Background Color Roles (semantic) — neutral gray + transparency ═══ */
    --bg-page: rgba(247, 247, 247, 0.92); /* #f7f7f7 */
    --bg-page-rgb: 247 247 247;
    --bg-surface: rgba(245, 245, 245, 0.90); /* #f5f5f5 */
    --bg-surface-rgb: 245 245 245;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-rgb: 255 255 255;
    --bg-elevated: rgba(237, 237, 237, 0.92); /* #ededed */
    --bg-elevated-rgb: 237 237 237;
    --bg-subtle: rgba(245, 245, 245, 0.85); /* #f5f5f5 */
    --bg-subtle-rgb: 245 245 245;
    --bg-overlay: rgba(0, 0, 0, 0.40);
    --bg-overlay-rgb: 0 0 0;
    --bg-hover: rgba(237, 237, 237, 0.88); /* #ededed */
    --bg-hover-rgb: 237 237 237;
    --bg-active: rgba(224, 224, 224, 0.90); /* #e0e0e0 */
    --bg-active-rgb: 224 224 224;
    --bg-input: rgba(255, 255, 255, 0.95);
    --bg-input-rgb: 255 255 255;
    --bg-sidebar: rgba(250, 250, 250, 0.90); /* #fafafa */
    --bg-sidebar-rgb: 250 250 250;
    --bg-separator: rgba(224, 224, 224, 0.80); /* #e0e0e0 */
    --bg-separator-rgb: 224 224 224;
    --bg-disabled: rgba(237, 237, 237, 0.85); /* #ededed */
    --bg-disabled-rgb: 237 237 237;

    /* ═══ Glass Material System (light) — frosted white on light bg ═══ */
    --bg-glass-thin: rgba(255, 255, 255, 0.60);
    --bg-glass-regular: rgba(255, 255, 255, 0.70);
    --bg-glass-thick: rgba(255, 255, 255, 0.80);
    --bg-glass-accent: rgba(255, 255, 255, 0.90);
    --border-glass: rgba(0, 0, 0, 0.06);
    --border-glass-strong: rgba(0, 0, 0, 0.12);
    --shadow-glass: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-glass-deep: 0 4px 24px -4px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.08);

    /* ═══ Border Color Roles (semantic) — RGB triplets ═══ */
    --border-default: var(--ceramic-gray-200);
    --border-default-rgb: 232 227 220; /* #E8E3DC */
    --border-subtle: var(--ceramic-gray-100);
    --border-subtle-rgb: 242 239 234; /* #F2EFEA */
    --border-strong: var(--ceramic-gray-400);
    --border-strong-rgb: 192 186 179; /* #C0BAB3 */
    --border-input: var(--ceramic-gray-300);
    --border-input-rgb: 216 210 202; /* #D8D2CA */
    --border-disabled: var(--ceramic-gray-200);
    --border-disabled-rgb: 232 227 220;
    --border-success: #c4f3d9;
    --border-success-rgb: 196 243 217;
    --border-error: #f9c4c4;
    --border-error-rgb: 249 196 196;
    --border-warning: #ffe3c6;
    --border-warning-rgb: 255 227 198;
    --border-info: #C0D5FF;
    --border-info-rgb: 192 213 255;

    /* ═══ Ring Color Roles (semantic) — RGB triplets ═══ */
    --ring-focus: var(--ceramic-brand);
    --ring-focus-rgb: 224 125 0; /* #E07D00 */
    --ring-error: #d14d4d;
    --ring-error-rgb: 209 77 77;

    /* ═══ Status Text Color Roles (semantic) ═══ */
    --text-success: #0D4829;
    --text-error: #6D1E1E;
    --text-warning: #6B2C09;
    --text-info: #122368;
    --text-link: var(--ceramic-blue-600);

    /* ═══ Status Background Color Roles (semantic) ═══ */
    --bg-success: #eefbf3;
    --bg-error: #fef5f5;
    --bg-warning: #fff7f0;
    --bg-info: #EBF1FF;
    --bg-popover: var(--ceramic-white);
    --bg-tooltip: var(--ceramic-gray-1200);
    --bg-skeleton: var(--ceramic-gray-200);
    --bg-stripe: var(--ceramic-gray-50);

    /* ═══ Accent Palette (default: orange) ═══ */
    --accent-50: var(--ceramic-orange-50);
    --accent-100: var(--ceramic-orange-100);
    --accent-200: var(--ceramic-orange-200);
    --accent-300: var(--ceramic-orange-300);
    --accent-400: var(--ceramic-orange-400);
    --accent-500: var(--ceramic-orange-500);
    --accent-600: var(--ceramic-orange-600);
    --accent-700: var(--ceramic-orange-700);
    --accent-800: var(--ceramic-orange-800);
    --accent-900: var(--ceramic-orange-900);
    --accent-1000: var(--ceramic-orange-1000);
    --accent-1100: var(--ceramic-orange-1100);
}

html.dark {
    --ceramic-primary: var(--ceramic-gray-100);
    --ceramic-secondary: var(--ceramic-gray-500);
    --ceramic-dimmed: var(--ceramic-gray-800);
    --ceramic-positive: var(--ceramic-green-400);
    --ceramic-negative: var(--ceramic-red-600);
    --ceramic-warning: var(--ceramic-orange-500);
    --ceramic-brand: var(--color-brand);
    --ceramic-orange: var(--ceramic-orange-500);
    --ceramic-info: var(--ceramic-blue-600);
    --ceramic-bg-main: var(--ceramic-gray-1400);
    --ceramic-bg-menu: var(--ceramic-gray-1200);
    --ceramic-bg-separator: var(--ceramic-gray-1400);
    --clerk-neutral: var(--ceramic-white);
    --clerk-color-border: var(--ceramic-white);
    --stripe-color-background: var(--ceramic-gray-1100);
    --stripe-color-primary: var(--ceramic-primary);
    --stripe-input-label: var(--ceramic-primary);
    --stripe-tab-background: var(--ceramic-gray-1100);
    --stripe-tab-color: var(--ceramic-primary);
    --stripe-tab-selected-background: var(--ceramic-gray-800);
    --stripe-block-background: var(--ceramic-gray-1400);
    --stripe-block-border: var(--ceramic-gray-700);


    --shiki-foreground: #fff;
    --shiki-token-function: #BAB1FF;
    --shiki-token-keyword: #BAB1FF;
    --shiki-token-string: #5DE3FF;
    --shiki-token-string-expression: #5DE3FF;
    --shiki-token-constant: #86EF9B;
    --shiki-token-parameter: #86EF9B;
    --shiki-token-link: #86EF9B;
    --shiki-token-comment: #9394A1;
    --shiki-token-punctuation: #B7B8C2;
    --shiki-light-foreground: #131316;
    --shiki-light-token-function: #6C47FF;
    --shiki-light-token-keyword: #6C47FF;
    --shiki-light-token-string: #00AEE3;
    --shiki-light-token-string-expression: #00AEE3;
    --shiki-light-token-constant: #22C543;
    --shiki-light-token-parameter: #22C543;
    --shiki-light-token-link: #22C543;
    --shiki-light-token-comment: #9394A1;
    --shiki-light-token-punctuation: #747686;
    --fill-light: black;
    --fill-dark: white;

    /* ═══ Text Color Roles (dark) — contrast-boosted + RGB triplets ═══ */
    --text-primary: #fff;
    --text-primary-rgb: 255 255 255;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-secondary-rgb: 255 255 255; /* base white, opacity via /modifier */
    --text-tertiary: rgba(255, 255, 255, 0.55);
    --text-tertiary-rgb: 255 255 255;
    --text-dimmed: rgba(255, 255, 255, 0.38);
    --text-dimmed-rgb: 255 255 255;
    --text-disabled: rgba(255, 255, 255, 0.28);
    --text-disabled-rgb: 255 255 255;
    --text-code: var(--ceramic-orange-400);
    --text-code-rgb: 245 152 82; /* #F59852 */
    --text-brand: var(--ceramic-brand);
    --text-brand-rgb: 224 125 0;
    --text-inverse: var(--ceramic-gray-900);
    --text-inverse-rgb: 77 73 69; /* #4D4945 */
    --text-success-rgb: 60 204 126; /* #3ccc7e */
    --text-error-rgb: 229 99 99; /* #e56363 */
    --text-warning-rgb: 238 126 52; /* #EE7E34 */
    --text-info-rgb: 125 211 252; /* #7dd3fc */
    --text-link-rgb: 125 211 252;

    /* ═══ Background Color Roles (dark) — Raycast white-overlay model ═══ */
    /* page = SOLID dark base. All other layers = white overlay stacking. */
    /* Depth: page(solid) → surface(white 2%) → card(white 5%) → elevated(white 8%) → popover(white 10% + blur) */
    --bg-page: #07080a; /* solid — blocks bg image */
    --bg-page-rgb: 7 8 10;
    --bg-surface: rgba(255, 255, 255, 0.02); /* white 2% */
    --bg-surface-rgb: 15 15 18; /* effective color for /N modifiers */
    --bg-card: rgba(255, 255, 255, 0.05); /* white 5% */
    --bg-card-rgb: 20 20 24;
    --bg-elevated: rgba(255, 255, 255, 0.08); /* white 8% */
    --bg-elevated-rgb: 28 28 33;
    --bg-subtle: rgba(255, 255, 255, 0.03); /* white 3% */
    --bg-subtle-rgb: 12 12 15;
    --bg-overlay: rgba(0, 0, 0, 0.60); /* modal backdrop */
    --bg-overlay-rgb: 0 0 0;
    --bg-hover: rgba(255, 255, 255, 0.08); /* white 8% */
    --bg-hover-rgb: 28 28 33;
    --bg-active: rgba(255, 255, 255, 0.12); /* white 12% */
    --bg-active-rgb: 38 38 44;
    --bg-input: rgba(255, 255, 255, 0.05); /* white 5% — same as card */
    --bg-input-rgb: 20 20 24;
    --bg-sidebar: rgba(12, 12, 15, 0.95); /* near-solid dark panel */
    --bg-sidebar-rgb: 12 12 15;
    --bg-separator: rgba(255, 255, 255, 0.08); /* white 8% */
    --bg-separator-rgb: 38 38 44;
    --bg-disabled: rgba(255, 255, 255, 0.03); /* white 3% */
    --bg-disabled-rgb: 15 15 18;

    /* ═══ Glass Material System (dark) — Raycast-matched ═══ */
    --bg-glass-thin: rgba(255, 255, 255, 0.03); /* subtle lift — input bg */
    --bg-glass-regular: rgba(255, 255, 255, 0.05); /* card bg */
    --bg-glass-thick: rgba(255, 255, 255, 0.10); /* popover, active item — Raycast: --controlBackground */
    --bg-glass-accent: rgba(255, 255, 255, 0.15); /* strong accent */
    --border-glass: hsla(270, 2%, 56%, 0.15); /* Raycast: slightly purple-tinted glass border */
    --border-glass-strong: hsla(270, 2%, 56%, 0.25); /* dialog/composer border */

    /* ═══ Card Gradient (dark) — Raycast signature ═══ */
    --bg-card-gradient: linear-gradient(137deg, rgba(17, 18, 20, 0.75) 4.87%, rgba(12, 13, 15, 0.9) 75.88%);
    --bg-card-gradient-solid: linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%);
    --bg-footer-gradient: linear-gradient(180deg, rgba(7, 8, 10, 0.8) 0.1%, #07080a 32.45%);

    /* ═══ Blur Levels (dark) — Raycast uses 6 tiers ═══ */
    --blur-xs: blur(2px); /* minimal — rare usage */
    --blur-sm: blur(10px); /* subtle glass */
    --blur-md: blur(16px); /* light frosted */
    --blur-lg: blur(24px); /* card glass, medium frosted */
    --blur-xl: blur(36px); /* popover, heavy frosted */
    --blur-2xl: blur(48px); /* very heavy frosted — modal overlay */

    /* ═══ Shadow System (dark) — Raycast exact reference ═══ */
    /* Raycast: inset 0.5px shine + outer ring 0.5px + deep ambient */
    --shadow-glass: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3), 0 4px 16px 0 rgba(0, 0, 0, 0.32), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-glass-deep: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 4px 40px 8px rgba(0, 0, 0, 0.4);
    --shadow-glass-shine: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
    --shadow-glass-inset: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3); /* card inner relief — Raycast */
    --shadow-glass-subtle: 0 0 2px 0 rgba(255, 255, 255, 0.19); /* very subtle top light */
    --shadow-glass-halo: 0 0 40px 20px rgba(255, 255, 255, 0.03); /* subtle ambient halo */

    /* ═══ Glow Effects (dark) — Raycast color-tinted glows ═══ */
    --glow-brand: 0 0 20px 5px rgba(224, 125, 0, 0.08); /* brand orange glow */
    --glow-success: 0 0 20px 0 rgba(60, 204, 126, 0.10); /* emerald glow */
    --glow-error: 0 0 20px 0 rgba(229, 99, 99, 0.10); /* coral glow */
    --glow-info: 0 0 16px -7px rgba(125, 211, 252, 0.10); /* cyan glow */
    --glow-warm: 0 0 20px 5px rgba(215, 201, 175, 0.05); /* warm ambient glow */

    /* ═══ Mask Gradients (dark) — Raycast fade edges ═══ */
    --mask-fade-right: linear-gradient(90deg, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0.1));
    --mask-fade-bottom: linear-gradient(180deg, #d9d9d9 60%, rgba(217, 217, 217, 0) 90%);
    --mask-fade-radial: radial-gradient(circle at top left, #fff 29.33%, rgba(255, 255, 255, 0) 60%);

    /* ═══ Decorative Gradients (dark) — Raycast effects ═══ */
    --gradient-rainbow: conic-gradient(from 137deg at 50% 50%, #0294fe -55.68deg, #ff2136 113.23deg, #9b4dff 195deg, #0294fe 304.32deg, #ff2136 473.23deg);
    --gradient-subtle-color: radial-gradient(85.77% 49.97% at 51% 5.12%, rgba(255, 150, 150, 0.11) 0, rgba(222, 226, 255, 0.08) 45.83%, rgba(241, 242, 255, 0.02) 100%);
    --gradient-shine: linear-gradient(92.74deg, rgba(255, 255, 255, 0) 4.57%, rgba(255, 255, 255, 0.06) 65.86%, rgba(255, 255, 255, 0) 95.43%);
    --gradient-depth: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 4.5%, rgba(255, 255, 255, 0.03) 99.51%);

    /* ═══ Border Color Roles (dark) — Raycast-matched + RGB triplets ═══ */
    --border-default: rgba(255, 255, 255, 0.06);
    --border-default-rgb: 255 255 255;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-subtle-rgb: 255 255 255;
    --border-strong: rgba(255, 255, 255, 0.20);
    --border-strong-rgb: 255 255 255;
    --border-input: rgba(255, 255, 255, 0.10);
    --border-input-rgb: 255 255 255;
    --border-disabled: var(--ceramic-gray-900);
    --border-disabled-rgb: 77 73 69; /* #4D4945 */
    --border-success: rgba(60, 204, 126, 0.20);
    --border-success-rgb: 60 204 126;
    --border-error: rgba(229, 99, 99, 0.20);
    --border-error-rgb: 229 99 99;
    --border-warning: rgba(238, 126, 52, 0.20);
    --border-warning-rgb: 238 126 52;
    --border-info: rgba(125, 211, 252, 0.20);
    --border-info-rgb: 125 211 252;

    /* ═══ Ring Color Roles (dark) + RGB ═══ */
    --ring-focus: var(--ceramic-brand);
    --ring-focus-rgb: 224 125 0;
    --ring-error: #d14d4d;
    --ring-error-rgb: 209 77 77;

    /* ═══ Status Text Color Roles (dark) — Raycast-matched ═══ */
    --text-success: #3ccc7e; /* Ceramic emerald — matches green-400 */
    --text-error: #e56363; /* Ceramic soft coral — matches red-500 */
    --text-warning: #ee7e34; /* Ceramic tangerine — matches orange-500 */
    --text-info: #7dd3fc; /* Raycast cyan — was #335CFF */
    --text-link: #7dd3fc; /* Raycast: same cyan for links */

    /* ═══ Status Background Color Roles (dark) — Raycast uses faint/muted tones ═══ */
    --bg-success: rgba(60, 204, 126, 0.10); /* emerald at 10% */
    --bg-error: rgba(229, 99, 99, 0.08); /* soft coral at 8% */
    --bg-warning: rgba(238, 126, 52, 0.10); /* tangerine at 10% */
    --bg-info: rgba(125, 211, 252, 0.10); /* info at 10% */
    --bg-popover: rgba(255, 255, 255, 0.10); /* 10% white — dropdown/popover, use with blur(36px) */
    --bg-tooltip: rgba(26, 26, 31, 0.95); /* always dark — Raycast-style */
    --bg-skeleton: rgba(255, 255, 255, 0.06);
    --bg-stripe: rgba(255, 255, 255, 0.03);

    /* ═══ Button Overrides (dark) ═══ */
    --button-secondary-bg: rgba(255, 255, 255, 0.08); /* glass-style secondary button */

}

/* ═══ Accent Palette Variants ═══ */
html[data-accent="blue"] {
    --accent-50: var(--ceramic-blue-50);
    --accent-100: var(--ceramic-blue-100);
    --accent-200: var(--ceramic-blue-200);
    --accent-300: var(--ceramic-blue-300);
    --accent-400: var(--ceramic-blue-400);
    --accent-500: var(--ceramic-blue-500);
    --accent-600: var(--ceramic-blue-600);
    --accent-700: var(--ceramic-blue-700);
    --accent-800: var(--ceramic-blue-800);
    --accent-900: var(--ceramic-blue-900);
    --ceramic-brand: var(--ceramic-blue-600);
    --brand-primary: var(--ceramic-blue-600);
    --text-brand: var(--ceramic-blue-600);
    --text-link: var(--ceramic-blue-600);
    --ring-focus: var(--ceramic-blue-500);
}

html[data-accent="purple"] {
    --accent-50: var(--ceramic-purple-50);
    --accent-100: var(--ceramic-purple-100);
    --accent-200: var(--ceramic-purple-200);
    --accent-300: var(--ceramic-purple-300);
    --accent-400: var(--ceramic-purple-400);
    --accent-500: var(--ceramic-purple-500);
    --accent-600: var(--ceramic-purple-600);
    --accent-700: var(--ceramic-purple-700);
    --accent-800: var(--ceramic-purple-800);
    --accent-900: var(--ceramic-purple-900);
    --ceramic-brand: var(--ceramic-purple-600);
    --brand-primary: var(--ceramic-purple-600);
    --text-brand: var(--ceramic-purple-600);
    --text-link: var(--ceramic-purple-600);
    --ring-focus: var(--ceramic-purple-500);
}

html[data-accent="green"] {
    --accent-50: var(--ceramic-green-50);
    --accent-100: var(--ceramic-green-100);
    --accent-200: var(--ceramic-green-200);
    --accent-300: var(--ceramic-green-300);
    --accent-400: var(--ceramic-green-400);
    --accent-500: var(--ceramic-green-500);
    --accent-600: var(--ceramic-green-600);
    --accent-700: var(--ceramic-green-700);
    --accent-800: var(--ceramic-green-800);
    --accent-900: var(--ceramic-green-900);
    --ceramic-brand: var(--ceramic-green-600);
    --brand-primary: var(--ceramic-green-600);
    --text-brand: var(--ceramic-green-600);
    --text-link: var(--ceramic-green-600);
    --ring-focus: var(--ceramic-green-500);
}

/* Dark mode accent overrides — lighter brand for readability */
html.dark[data-accent="blue"] {
    --ceramic-brand: var(--ceramic-blue-500);
    --brand-primary: var(--ceramic-blue-500);
    --text-brand: var(--ceramic-blue-400);
    --text-link: var(--ceramic-blue-400);
    --ring-focus: var(--ceramic-blue-500);
}

html.dark[data-accent="purple"] {
    --ceramic-brand: var(--ceramic-purple-500);
    --brand-primary: var(--ceramic-purple-500);
    --text-brand: var(--ceramic-purple-400);
    --text-link: var(--ceramic-purple-400);
    --ring-focus: var(--ceramic-purple-500);
}

html.dark[data-accent="green"] {
    --ceramic-brand: var(--ceramic-green-500);
    --brand-primary: var(--ceramic-green-500);
    --text-brand: var(--ceramic-green-400);
    --text-link: var(--ceramic-green-400);
    --ring-focus: var(--ceramic-green-500);
}

/* ═══ Text Role Utility Classes ═══ */
/* Base classes use var(--text-X) which has built-in dark mode opacity */
/* /N variants use rgb(--text-X-rgb / N) for custom opacity */
.text-role-primary {
    color: var(--text-primary);
}

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

.text-role-tertiary {
    color: var(--text-tertiary);
}

.text-role-dimmed {
    color: var(--text-dimmed);
}

.text-role-disabled {
    color: var(--text-disabled);
}

.text-role-code {
    color: var(--text-code);
}

.text-role-brand {
    color: var(--text-brand);
}

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

/* Placeholder variants */
.placeholder\:text-role-dimmed::placeholder {
    color: var(--text-dimmed);
}

.placeholder\:text-role-tertiary::placeholder {
    color: var(--text-tertiary);
}

/* ═══ Background Role Utility Classes ═══ */
/* Base classes use var(--bg-X) which has built-in dark mode rgba */
.bg-role-page {
    background-color: var(--bg-page);
}

.bg-role-surface {
    background-color: var(--bg-surface);
}

.bg-role-card {
    background-color: var(--bg-card);
}

.bg-role-elevated {
    background-color: var(--bg-elevated);
}

.bg-role-subtle {
    background-color: var(--bg-subtle);
}

.bg-role-overlay {
    background-color: var(--bg-overlay);
}

.bg-role-hover {
    background-color: var(--bg-hover);
}

.bg-role-active {
    background-color: var(--bg-active);
}

.bg-role-input {
    background-color: var(--bg-input);
}

.bg-role-sidebar {
    background-color: var(--bg-sidebar);
}

.bg-role-separator {
    background-color: var(--bg-separator);
}

/* .main-content background removed — BG image layer covers full layout */
.bg-role-disabled {
    background-color: var(--bg-disabled);
}

/* Hover variants */
.hover\:bg-role-hover:hover {
    background-color: var(--bg-hover);
}

.hover\:bg-role-active:hover {
    background-color: var(--bg-active);
}

.hover\:bg-role-subtle:hover {
    background-color: var(--bg-subtle);
}

.hover\:bg-role-surface:hover {
    background-color: var(--bg-surface);
}

.hover\:bg-role-separator:hover {
    background-color: var(--bg-separator);
}

/* ═══ Border Role Utility Classes ═══ */
.border-role-default {
    border-color: var(--border-default);
}

.border-role-subtle {
    border-color: var(--border-subtle);
}

.border-role-strong {
    border-color: var(--border-strong);
}

.border-role-input {
    border-color: var(--border-input);
}

.border-role-disabled {
    border-color: var(--border-disabled);
}

.border-role-success {
    border-color: var(--border-success);
}

.border-role-error {
    border-color: var(--border-error);
}

.border-role-warning {
    border-color: var(--border-warning);
}

.border-role-info {
    border-color: var(--border-info);
}

/* Border hover variants */
.hover\:border-role-strong:hover {
    border-color: var(--border-strong);
}

.hover\:border-role-default:hover {
    border-color: var(--border-default);
}

/* ═══ Divide Role Utility Classes ═══ */
.divide-role-default > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-default);
}

.divide-role-subtle > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-subtle);
}

/* Alpha variants for divide-role — added 2026-04-09 */
.divide-role-default\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-default-rgb) / 0.10);
}

.divide-role-default\/20 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-default-rgb) / 0.20);
}

.divide-role-default\/30 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-default-rgb) / 0.30);
}

.divide-role-default\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-default-rgb) / 0.50);
}

.divide-role-default\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-default-rgb) / 0.60);
}

.divide-role-default\/80 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-default-rgb) / 0.80);
}

.divide-role-subtle\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-subtle-rgb) / 0.10);
}

.divide-role-subtle\/20 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-subtle-rgb) / 0.20);
}

.divide-role-subtle\/30 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-subtle-rgb) / 0.30);
}

.divide-role-subtle\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-subtle-rgb) / 0.50);
}

.divide-role-subtle\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-subtle-rgb) / 0.60);
}

.divide-role-subtle\/80 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--border-subtle-rgb) / 0.80);
}

/* ═══ Ring Role Utility Classes ═══ */
.ring-role-default {
    --tw-ring-color: var(--border-default);
}

.ring-role-focus {
    --tw-ring-color: var(--ring-focus);
}

.ring-role-error {
    --tw-ring-color: var(--ring-error);
}

/* Focus ring variants */
.focus\:ring-role-focus:focus {
    --tw-ring-color: var(--ring-focus);
}

.focus-within\:ring-role-focus:focus-within {
    --tw-ring-color: var(--ring-focus);
}

.focus\:ring-role-error:focus {
    --tw-ring-color: var(--ring-error);
}

/* ═══ Status Text Role Utility Classes ═══ */
.text-role-success {
    color: var(--text-success);
}

.text-role-error {
    color: var(--text-error);
}

.text-role-warning {
    color: var(--text-warning);
}

.text-role-info {
    color: var(--text-info);
}

.text-role-link {
    color: var(--text-link);
}

/* Hover variants for text */
.hover\:text-role-link:hover {
    color: var(--text-link);
    opacity: 0.8;
}

.hover\:text-role-brand:hover {
    color: rgb(var(--text-brand-rgb) / 0.8);
}

.hover\:text-role-error:hover {
    color: var(--text-error);
}

/* ═══ Status Background Role Utility Classes ═══ */
.bg-role-success {
    background-color: var(--bg-success);
}

.bg-role-error {
    background-color: var(--bg-error);
}

.bg-role-warning {
    background-color: var(--bg-warning);
}

.bg-role-info {
    background-color: var(--bg-info);
}

.bg-role-popover {
    background-color: var(--bg-popover);
}

.bg-role-tooltip {
    background-color: var(--bg-tooltip);
}

.bg-role-skeleton {
    background-color: var(--bg-skeleton);
}

.bg-role-stripe {
    background-color: var(--bg-stripe);
}

/* ═══ Opacity Modifier Variants — pre-generated for admin CDN JIT ═══ */
/* text-role-XXX/N opacity — used 570+ times across project */

/* text-role-primary opacity */
.text-role-primary\/80 {
    color: rgb(var(--text-primary-rgb) / 0.80);
}

.text-role-primary\/85 {
    color: rgb(var(--text-primary-rgb) / 0.85);
}

/* text-role-secondary opacity */
.text-role-secondary\/25 {
    color: rgb(var(--text-secondary-rgb) / 0.25);
}

.text-role-secondary\/30 {
    color: rgb(var(--text-secondary-rgb) / 0.30);
}

.text-role-secondary\/40 {
    color: rgb(var(--text-secondary-rgb) / 0.40);
}

.text-role-secondary\/75 {
    color: rgb(var(--text-secondary-rgb) / 0.75);
}

/* text-role-tertiary opacity */
.text-role-tertiary\/30 {
    color: rgb(var(--text-tertiary-rgb) / 0.30);
}

.text-role-tertiary\/40 {
    color: rgb(var(--text-tertiary-rgb) / 0.40);
}

.text-role-tertiary\/45 {
    color: rgb(var(--text-tertiary-rgb) / 0.45);
}

.text-role-tertiary\/50 {
    color: rgb(var(--text-tertiary-rgb) / 0.50);
}

.text-role-tertiary\/60 {
    color: rgb(var(--text-tertiary-rgb) / 0.60);
}

.text-role-tertiary\/70 {
    color: rgb(var(--text-tertiary-rgb) / 0.70);
}

/* text-role-dimmed opacity */
.text-role-dimmed\/30 {
    color: rgb(var(--text-dimmed-rgb) / 0.30);
}

.text-role-dimmed\/40 {
    color: rgb(var(--text-dimmed-rgb) / 0.40);
}

.text-role-dimmed\/50 {
    color: rgb(var(--text-dimmed-rgb) / 0.50);
}

.text-role-dimmed\/60 {
    color: rgb(var(--text-dimmed-rgb) / 0.60);
}

.text-role-dimmed\/70 {
    color: rgb(var(--text-dimmed-rgb) / 0.70);
}

.text-role-dimmed\/90 {
    color: rgb(var(--text-dimmed-rgb) / 0.90);
}

/* text-role-disabled opacity */
.text-role-disabled\/10 {
    color: rgb(var(--text-disabled-rgb) / 0.10);
}

.text-role-disabled\/40 {
    color: rgb(var(--text-disabled-rgb) / 0.40);
}

/* text-role-brand opacity */
.text-role-brand\/80 {
    color: rgb(var(--text-brand-rgb) / 0.80);
}

.hover\:text-role-brand\/80:hover {
    color: rgb(var(--text-brand-rgb) / 0.80);
}

/* text-role-error opacity */
.text-role-error\/40 {
    color: rgb(var(--text-error-rgb) / 0.40);
}

.text-role-error\/70 {
    color: rgb(var(--text-error-rgb) / 0.70);
}

/* text-role-warning opacity */
.text-role-warning\/85 {
    color: rgb(var(--text-warning-rgb) / 0.85);
}

/* placeholder variants with opacity */
.placeholder\:text-role-dimmed\/70::placeholder {
    color: rgb(var(--text-dimmed-rgb) / 0.70);
}

.placeholder\:text-role-tertiary\/50::placeholder {
    color: rgb(var(--text-tertiary-rgb) / 0.50);
}

.placeholder\:text-role-tertiary\/60::placeholder {
    color: rgb(var(--text-tertiary-rgb) / 0.60);
}

.placeholder\:text-role-tertiary\/70::placeholder {
    color: rgb(var(--text-tertiary-rgb) / 0.70);
}

/* bg-role-XXX/N opacity variants */
.bg-role-surface\/30 {
    background-color: rgb(var(--bg-surface-rgb) / 0.30);
}

.bg-role-surface\/50 {
    background-color: rgb(var(--bg-surface-rgb) / 0.50);
}

.bg-role-surface\/70 {
    background-color: rgb(var(--bg-surface-rgb) / 0.70);
}

.bg-role-card\/10 {
    background-color: rgb(var(--bg-card-rgb) / 0.10);
}

.bg-role-card\/20 {
    background-color: rgb(var(--bg-card-rgb) / 0.20);
}

.bg-role-card\/40 {
    background-color: rgb(var(--bg-card-rgb) / 0.40);
}

.bg-role-card\/50 {
    background-color: rgb(var(--bg-card-rgb) / 0.50);
}

.bg-role-card\/60 {
    background-color: rgb(var(--bg-card-rgb) / 0.60);
}

.bg-role-card\/70 {
    background-color: rgb(var(--bg-card-rgb) / 0.70);
}

.bg-role-card\/80 {
    background-color: rgb(var(--bg-card-rgb) / 0.80);
}

.bg-role-card\/90 {
    background-color: rgb(var(--bg-card-rgb) / 0.90);
}

.bg-role-subtle\/20 {
    background-color: rgb(var(--bg-subtle-rgb) / 0.20);
}

.bg-role-subtle\/50 {
    background-color: rgb(var(--bg-subtle-rgb) / 0.50);
}

.bg-role-subtle\/60 {
    background-color: rgb(var(--bg-subtle-rgb) / 0.60);
}

.bg-role-subtle\/80 {
    background-color: rgb(var(--bg-subtle-rgb) / 0.80);
}

.bg-role-elevated\/50 {
    background-color: rgb(var(--bg-elevated-rgb) / 0.50);
}

.bg-role-elevated\/60 {
    background-color: rgb(var(--bg-elevated-rgb) / 0.60);
}

.bg-role-elevated\/80 {
    background-color: rgb(var(--bg-elevated-rgb) / 0.80);
}

.bg-role-hover\/30 {
    background-color: rgb(var(--bg-hover-rgb) / 0.30);
}

.bg-role-hover\/50 {
    background-color: rgb(var(--bg-hover-rgb) / 0.50);
}

.bg-role-hover\/80 {
    background-color: rgb(var(--bg-hover-rgb) / 0.80);
}

.hover\:bg-role-hover\/30:hover {
    background-color: rgb(var(--bg-hover-rgb) / 0.30);
}

.hover\:bg-role-hover\/50:hover {
    background-color: rgb(var(--bg-hover-rgb) / 0.50);
}

.hover\:bg-role-hover\/80:hover {
    background-color: rgb(var(--bg-hover-rgb) / 0.80);
}

.hover\:bg-role-subtle\/50:hover {
    background-color: rgb(var(--bg-subtle-rgb) / 0.50);
}

.hover\:bg-role-subtle\/80:hover {
    background-color: rgb(var(--bg-subtle-rgb) / 0.80);
}

.hover\:bg-role-surface\/50:hover {
    background-color: rgb(var(--bg-surface-rgb) / 0.50);
}

.hover\:bg-role-separator\/20:hover {
    background-color: rgb(var(--bg-separator-rgb) / 0.20);
}

.bg-role-separator\/20 {
    background-color: rgb(var(--bg-separator-rgb) / 0.20);
}

.bg-role-separator\/25 {
    background-color: rgb(var(--bg-separator-rgb) / 0.25);
}

.bg-role-separator\/50 {
    background-color: rgb(var(--bg-separator-rgb) / 0.50);
}

.bg-role-separator\/80 {
    background-color: rgb(var(--bg-separator-rgb) / 0.80);
}

.bg-role-dimmed\/50 {
    background-color: rgb(var(--text-dimmed-rgb) / 0.50);
}

.bg-role-active\/90 {
    background-color: rgb(var(--bg-active-rgb) / 0.90);
}

.bg-role-error\/50 {
    background-color: rgb(var(--text-error-rgb) / 0.50);
}

/* border-role-XXX/N opacity variants */
.border-role-default\/20 {
    border-color: rgb(var(--border-default-rgb) / 0.20);
}

.border-role-default\/30 {
    border-color: rgb(var(--border-default-rgb) / 0.30);
}

.border-role-default\/40 {
    border-color: rgb(var(--border-default-rgb) / 0.40);
}

.border-role-default\/50 {
    border-color: rgb(var(--border-default-rgb) / 0.50);
}

.border-role-default\/60 {
    border-color: rgb(var(--border-default-rgb) / 0.60);
}

.border-role-default\/70 {
    border-color: rgb(var(--border-default-rgb) / 0.70);
}

.border-role-default\/80 {
    border-color: rgb(var(--border-default-rgb) / 0.80);
}

.border-role-subtle\/50 {
    border-color: rgb(var(--border-subtle-rgb) / 0.50);
}

.border-role-subtle\/60 {
    border-color: rgb(var(--border-subtle-rgb) / 0.60);
}

.border-role-subtle\/80 {
    border-color: rgb(var(--border-subtle-rgb) / 0.80);
}

.border-role-strong\/2 {
    border-color: rgb(var(--border-strong-rgb) / 0.02);
}

.border-role-strong\/5 {
    border-color: rgb(var(--border-strong-rgb) / 0.05);
}

.border-role-strong\/20 {
    border-color: rgb(var(--border-strong-rgb) / 0.20);
}

.border-role-strong\/50 {
    border-color: rgb(var(--border-strong-rgb) / 0.50);
}

/* ring-role-XXX/N opacity variants (full 10-step set for blade usage) */
.ring-role-default\/10 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.10);
}

.ring-role-default\/20 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.20);
}

.ring-role-default\/30 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.30);
}

.ring-role-default\/40 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.40);
}

.ring-role-default\/50 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.50);
}

.ring-role-default\/60 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.60);
}

.ring-role-default\/70 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.70);
}

.ring-role-default\/80 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.80);
}

.ring-role-default\/90 {
    --tw-ring-color: rgb(var(--border-default-rgb) / 0.90);
}

/* ═══ Glass Material Utility Classes (Raycast-inspired blur levels) ═══ */
.glass-thin {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: var(--bg-glass-thin);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-glass);
}

.glass-regular {
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    background-color: var(--bg-glass-regular);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-glass);
}

.glass-thick {
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    background-color: var(--bg-glass-thick);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-glass);
}

.glass-accent {
    backdrop-filter: blur(100px) saturate(1.2);
    -webkit-backdrop-filter: blur(100px) saturate(1.2);
    background-color: var(--bg-glass-accent);
    border: 1px solid var(--border-glass-strong);
    box-shadow: var(--shadow-glass-deep);
}

.shadow-glass {
    box-shadow: var(--shadow-glass);
}

.shadow-glass-deep {
    box-shadow: var(--shadow-glass-deep);
}

.shadow-glass-shine {
    box-shadow: var(--shadow-glass-shine);
}

.shadow-glass-inset {
    box-shadow: var(--shadow-glass-inset);
}

.shadow-glass-subtle {
    box-shadow: var(--shadow-glass-subtle);
}

.shadow-glass-halo {
    box-shadow: var(--shadow-glass-halo);
}

/* ═══ Glow Effects — color-tinted ambient glows ═══ */
.glow-brand {
    box-shadow: var(--glow-brand);
}

.glow-success {
    box-shadow: var(--glow-success);
}

.glow-error {
    box-shadow: var(--glow-error);
}

.glow-info {
    box-shadow: var(--glow-info);
}

.glow-warm {
    box-shadow: var(--glow-warm);
}

.bg-role-glass-thin {
    background-color: var(--bg-glass-thin);
}

.bg-role-glass-regular {
    background-color: var(--bg-glass-regular);
}

.bg-role-glass-thick {
    background-color: var(--bg-glass-thick);
}

.bg-role-glass-accent {
    background-color: var(--bg-glass-accent);
}

/* ═══ Card Gradient — Raycast signature ═══ */
.bg-card-gradient {
    background: var(--bg-card-gradient);
}

.bg-card-gradient-solid {
    background: var(--bg-card-gradient-solid);
}

.bg-footer-gradient {
    background: var(--bg-footer-gradient);
}

/* ═══ Blur Utilities — 6 Raycast tiers ═══ */
.backdrop-blur-xs {
    backdrop-filter: var(--blur-xs);
    -webkit-backdrop-filter: var(--blur-xs);
}

.backdrop-blur-sm {
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.backdrop-blur-md {
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.backdrop-blur-lg {
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
}

.backdrop-blur-xl {
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
}

.backdrop-blur-2xl {
    backdrop-filter: var(--blur-2xl);
    -webkit-backdrop-filter: var(--blur-2xl);
}

/* ═══ Decorative Gradients ═══ */
.gradient-rainbow {
    background: var(--gradient-rainbow);
}

.gradient-subtle-color {
    background: var(--gradient-subtle-color);
}

.gradient-shine {
    background: var(--gradient-shine);
}

.gradient-depth {
    background: var(--gradient-depth);
}

/* ═══ Mask Gradients — fade edges ═══ */
.mask-fade-right {
    -webkit-mask-image: var(--mask-fade-right);
    mask-image: var(--mask-fade-right);
}

.mask-fade-bottom {
    -webkit-mask-image: var(--mask-fade-bottom);
    mask-image: var(--mask-fade-bottom);
}

.mask-fade-radial {
    -webkit-mask-image: var(--mask-fade-radial);
    mask-image: var(--mask-fade-radial);
}

/* ═══ Dark Mode Backdrop Blur — Raycast-level glass ═══ */
.dark .bg-role-popover,
[data-mode="dark"] .bg-role-popover {
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
}

.dark .bg-role-sidebar,
[data-mode="dark"] .bg-role-sidebar {
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

.dark .bg-role-overlay,
[data-mode="dark"] .bg-role-overlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Accent utility classes */
.text-accent-50 {
    color: var(--accent-50);
}

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

.text-accent-200 {
    color: var(--accent-200);
}

.text-accent-300 {
    color: var(--accent-300);
}

.text-accent-400 {
    color: var(--accent-400);
}

.text-accent-500 {
    color: var(--accent-500);
}

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

.text-accent-700 {
    color: var(--accent-700);
}

.text-accent-800 {
    color: var(--accent-800);
}

.text-accent-900 {
    color: var(--accent-900);
}

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

.bg-accent-100 {
    background-color: var(--accent-100);
}

.bg-accent-200 {
    background-color: var(--accent-200);
}

.bg-accent-300 {
    background-color: var(--accent-300);
}

.bg-accent-400 {
    background-color: var(--accent-400);
}

.bg-accent-500 {
    background-color: var(--accent-500);
}

.bg-accent-600 {
    background-color: var(--accent-600);
}

.bg-accent-700 {
    background-color: var(--accent-700);
}

.bg-accent-800 {
    background-color: var(--accent-800);
}

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

.border-accent-200 {
    border-color: var(--accent-200);
}

.border-accent-300 {
    border-color: var(--accent-300);
}

.border-accent-500 {
    border-color: var(--accent-500);
}

.border-accent-600 {
    border-color: var(--accent-600);
}

.ring-accent-200 {
    --tw-ring-color: var(--accent-200);
}

.ring-accent-500 {
    --tw-ring-color: var(--accent-500);
}

html.stone .\[html\.stone_\&\]\:text-ceramic-primary {
    color: black;
}

/* ─── Brand Mark: 5R★ ─── */
.brand-5r {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

:root {
    --sh-class: var(--ceramic-white);
    --sh-identifier: var(--ceramic-white);
    --sh-sign: var(--ceramic-white);
    --sh-property: var(--ceramic-purple-300);
    --sh-entity: var(--ceramic-green-100);
    --sh-jsxliterals: var(--ceramic-white);
    --sh-string: #5DE3FF;
    --sh-keyword: var(--ceramic-purple-300);
    --sh-comment: var(--ceramic-gray-600)
}

html :where(.initial\:bg-ceramic-black) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-black) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

html :where(.initial\:bg-ceramic-brand) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

html :where(.initial\:bg-ceramic-gray-200) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

html :where(.initial\:bg-ceramic-menu) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-menu) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

html :where(.initial\:bg-ceramic-primary) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

html :where(.initial\:text-ceramic-label-2) {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500
}

html :where(.initial\:text-ceramic-secondary) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-secondary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

html :where(.initial\:dark\:bg-ceramic-gray-1200:is(.dark *)) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

html :where(.initial\:dark\:bg-ceramic-gray-800:is(.dark *)) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-800) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

/* ─── 04. BASE RESETS ─── */

:focus {
    outline: none
}

svg {
    flex-shrink: 0;
}

/* ─── 05. BACKGROUND UTILITIES (bg-ceramic-*) ─── */

:root:has(.\[\:root\:has\(\&\)\]\:bg-ceramic-gray-200) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

:where(.\[\:where\(\&\)\]\:bg-ceramic-gray-1100) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

:where(.\[\:where\(\&\)\]\:bg-ceramic-menu) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-menu) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.\!bg-ceramic-brand {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important
}

.\*\:before\:bg-ceramic-gray-1100 > :before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.\*\:before\:bg-ceramic-gray-500 > :before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.accent-ceramic-brand {
    accent-color: var(--ceramic-brand);
}

.after\:bg-ceramic-bg-separator:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.after\:bg-ceramic-brand:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.after\:bg-ceramic-gray-50:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.after\:bg-ceramic-main:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-main) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.after\:bg-ceramic-secondary:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-secondary) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.after\:bg-ceramic-white:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-white) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.aria-\[current\=page\]\:before\:bg-ceramic-gray-200[aria-current=page]:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.aria-expanded\:bg-ceramic-white[aria-expanded=true] {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-white) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.before\:bg-ceramic-bg-separator:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.before\:bg-ceramic-brand:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.before\:bg-ceramic-gray-100:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.before\:bg-ceramic-main:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-main) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.before\:bg-ceramic-white:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-white) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-\[var\(--button-secondary-bg\,var\(--ceramic-white\)\)\] {
    background-color: var(--button-secondary-bg, var(--ceramic-white));
}

.bg-\[var\(--button-secondary-bg\2c theme\(colors\.ceramic\.white\)\)\] {
    background-color: var(--button-secondary-bg, color-mix(in srgb, var(--ceramic-white) 100%, transparent))
}

.bg-ceramic-bg {
    background-color: var(--ceramic-bg-main);
}

.bg-ceramic-bg-main {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-main) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-bg-separator {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-black {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-black) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-black\/40 {
    background-color: color-mix(in srgb, var(--ceramic-black) 40%, transparent)
}

.bg-ceramic-black\/8 {
    background-color: color-mix(in srgb, var(--ceramic-black) 8%, transparent)
}

.bg-ceramic-blue {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-blue-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-blue-100 {
    background-color: var(--ceramic-blue-100);
}

.bg-ceramic-blue-50 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-blue-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-blue-500 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-blue-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-blue-500\/\[\.04\] {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 4%, transparent);
}

.bg-ceramic-blue-500\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 6%, transparent);
}

.bg-ceramic-blue-500\/\[\.08\] {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 8%, transparent);
}

.bg-ceramic-blue-500\/10 {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 10%, transparent);
}

.bg-ceramic-blue\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-blue) 6%, transparent);
}

.bg-ceramic-blue\/4 {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 4%, transparent);
}

.bg-ceramic-brand {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-brand\/\[\.05\] {
    background-color: color-mix(in srgb, var(--ceramic-brand) 5%, transparent);
}

.bg-ceramic-brand\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-brand) 6%, transparent);
}

.bg-ceramic-brand\/\[\.08\] {
    background-color: color-mix(in srgb, var(--ceramic-brand) 8%, transparent);
}

.bg-ceramic-brand\/10 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
}

.bg-ceramic-brand\/15 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 15%, transparent);
}

.bg-ceramic-brand\/20 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.bg-ceramic-brand\/24 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 24%, transparent);
}

.bg-ceramic-brand\/4 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 4%, transparent);
}

.bg-ceramic-brand\/40 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.bg-ceramic-brand\/5 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 5%, transparent);
}

.bg-ceramic-brand\/60 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 60%, transparent);
}

.bg-ceramic-dimmed {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

/* ═══ bg-ceramic-gray-* in @layer base so Tailwind dark: variants (in @layer utilities) win ═══ */
@layer base {

    .bg-ceramic-gray-100 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-1100 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-1300 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-1300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-1400 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-1400) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-150 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-150) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-1500 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-1500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-1600 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-1600) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-1700 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-1700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-200 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-300 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-400 {
        background-color: color-mix(in srgb, var(--ceramic-gray-400) 100%, transparent);
    }

    .bg-ceramic-gray-50 {
        background-color: color-mix(in srgb, var(--ceramic-brand) 0%, var(--ceramic-gray-50) 95%);
    }

    .bg-ceramic-gray-700 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-700\/12 {
        background-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent)
    }

    .bg-ceramic-gray-700\/4 {
        background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent)
    }

    .bg-ceramic-gray-700\/8 {
        background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
    }

    .bg-ceramic-gray-800 {
        --tw-bg-opacity: 1;
        background-color: color-mix(in srgb, var(--ceramic-gray-800) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
    }

    .bg-ceramic-gray-900 {
        background-color: color-mix(in srgb, var(--ceramic-gray-900) 100%, transparent);
    }

    .bg-ceramic-gray\/\[\.06\] {
        background-color: color-mix(in srgb, var(--ceramic-gray) 6%, transparent);
    }

    .bg-ceramic-gray\/12 {
        background-color: color-mix(in srgb, var(--ceramic-gray) 12%, transparent);
    }

    .bg-ceramic-gray\/4 {
        background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent);
    }

}

/* end @layer base — bg-ceramic-gray-* */

.bg-ceramic-green {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-green-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-green-100 {
    background-color: var(--ceramic-green-100);
}

.bg-ceramic-green-400 {
    background-color: var(--ceramic-green-400);
}

.bg-ceramic-green-500 {
    background-color: var(--ceramic-green-500, #2ab368);
}

.bg-ceramic-green-500\/\[\.04\] {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 4%, transparent);
}

.bg-ceramic-green-500\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 6%, transparent);
}

.bg-ceramic-green-500\/\[\.08\] {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.bg-ceramic-green-500\/\[0\.03\] {
    --tw-bg-opacity: 0.03;
    background-color: color-mix(in srgb, var(--ceramic-green-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-green-500\/10 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 10%, transparent);
}

.bg-ceramic-green-600 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-green-600) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-green-700 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-green-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-green\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-green) 6%, transparent);
}

.bg-ceramic-green\/07 {
    background-color: color-mix(in srgb, var(--ceramic-green-700) 70%, transparent);
}

.bg-ceramic-green\/16 {
    background-color: color-mix(in srgb, var(--ceramic-green) 16%, transparent);
}

.bg-ceramic-green\/4 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 4%, transparent);
}

.bg-ceramic-green\/7 {
    background-color: color-mix(in srgb, var(--ceramic-green-700) 7%, transparent)
}

.bg-ceramic-info {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-info) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-main {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-main) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-menu {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-menu) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-negative {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-negative\/8 {
    background-color: color-mix(in srgb, var(--ceramic-negative) 8%, transparent)
}

.bg-ceramic-orange {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-orange-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-orange-100 {
    background-color: var(--ceramic-orange-100);
}

.bg-ceramic-orange-400 {
    background-color: var(--ceramic-orange-400);
}

.bg-ceramic-orange-50 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-orange-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-orange-50\/50 {
    background-color: color-mix(in srgb, var(--ceramic-orange-50) 50%, transparent);
}

.bg-ceramic-orange-500 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-orange-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-orange-500\/\[\.04\] {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 4%, transparent);
}

.bg-ceramic-orange-500\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 6%, transparent);
}

.bg-ceramic-orange-500\/10 {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 10%, transparent);
}

.bg-ceramic-orange-600 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-orange-600) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-orange-600\/4 {
    background-color: color-mix(in srgb, var(--ceramic-orange-600) 4%, transparent)
}

.bg-ceramic-orange-700 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-orange-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-orange\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-orange) 6%, transparent);
}

.bg-ceramic-orange\/4 {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 4%, transparent);
}

.bg-ceramic-positive {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-positive) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-positive\/4 {
    background-color: color-mix(in srgb, var(--ceramic-positive) 4%, transparent)
}

.bg-ceramic-positive\/8 {
    background-color: color-mix(in srgb, var(--ceramic-positive) 8%, transparent)
}

.bg-ceramic-primary {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-purple-200 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-purple-300 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-purple-50 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-purple-500 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-purple-500\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-purple-500) 6%, transparent);
}

.bg-ceramic-purple-500\/\[\.08\] {
    background-color: color-mix(in srgb, var(--ceramic-purple-500) 8%, transparent);
}

.bg-ceramic-purple-600\/12 {
    background-color: color-mix(in srgb, var(--ceramic-purple-600) 12%, transparent)
}

.bg-ceramic-purple-700 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-purple\/4 {
    background-color: color-mix(in srgb, var(--ceramic-purple-700) 4%, transparent)
}

.bg-ceramic-red {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-red-400 {
    background-color: var(--ceramic-red-400);
}

.bg-ceramic-red-50 {
    background-color: var(--ceramic-red-50, #fef5f5);
}

.bg-ceramic-red-50\/50 {
    background-color: color-mix(in srgb, var(--ceramic-red-50) 50%, transparent);
}

.bg-ceramic-red-500 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-red-500\/\[\.04\] {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 4%, transparent);
}

.bg-ceramic-red-500\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 6%, transparent);
}

.bg-ceramic-red-500\/10 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 10%, transparent);
}

.bg-ceramic-red-600 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-600) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-red-700 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-red\/\[\.06\] {
    background-color: color-mix(in srgb, var(--ceramic-red) 6%, transparent);
}

.bg-ceramic-red\/4 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 4%, transparent);
}

.bg-ceramic-secondary {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-secondary) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-secondary\/40 {
    --tw-bg-opacity: 0.4;
    background-color: color-mix(in srgb, var(--ceramic-secondary) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-separator {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-warning {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-warning) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-warning\/4 {
    background-color: color-mix(in srgb, var(--ceramic-warning) 4%, transparent)
}

.bg-ceramic-white {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-white) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.bg-ceramic-white\/10 {
    background-color: color-mix(in srgb, var(--ceramic-white) 10%, transparent)
}

.bg-ceramic-zinc-100 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-1000 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-1000) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-200 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-300 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-300) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-400 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-400) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-50 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-500 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-600 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-600) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-700 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-800 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-800) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-900 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-900) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ceramic-zinc-900\/50 {
    background-color: color-mix(in srgb, var(--ceramic-zinc-900) 50%, transparent);
}

.bg-ceramic-zinc-950 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-zinc-950) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.data-\[readonly\]\:bg-ceramic-gray\/8[data-readonly] {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.data-\[slot\=separator\]\:\*\:bg-ceramic-gray-200 > [data-slot=separator] {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.even\:bg-ceramic-gray-50:nth-child(even) {
    background-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.first\:bg-ceramic-brand\/2:first-child {
    background-color: color-mix(in srgb, var(--ceramic-brand) 2%, transparent)
}

.group\/switch[data-selected] .group-data-\[selected\]\/switch\:bg-ceramic-brand {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.has-\[\:checked\]\:bg-ceramic-brand\/5:has(:checked) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 5%, transparent)
}

.has-\[\:checked\]\:bg-ceramic-gray-50:has(:checked) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.has-\[\[data-slot\=input\]\:-moz-read-only\]\:bg-ceramic-gray\/8:has([data-slot=input]:-moz-read-only) {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.has-\[\[data-slot\=input\]\:read-only\]\:bg-ceramic-gray\/8:has([data-slot=input]:read-only) {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.peer\/radio:checked ~ .peer-checked\/radio\:bg-ceramic-brand {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.read-only\:bg-ceramic-gray\/8:-moz-read-only {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.read-only\:bg-ceramic-gray\/8:read-only {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

/* ─── 06. TEXT UTILITIES (text-ceramic-*) ─── */

.\!text-ceramic-dimmed {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}

.\!text-ceramic-green-600 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-green-600) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}

.\!text-ceramic-negative {
    --tw-text-opacity: 1;
    color: color-mix(
            in srgb,
            var(--ceramic-negative) calc(var(--tw-text-opacity, 1) * 100%),
            transparent
    );
}

.\[\&_a\]\:text-ceramic-brand a {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.\[\&_p\]\:text-ceramic-secondary p {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-secondary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.aria-expanded\:text-ceramic-primary[aria-expanded=true] {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.before\:text-ceramic-white::before {
    color: var(--ceramic-white);
}

.data-\[slot\=checkbox-label\]\:\*\*\:text-ceramic-body-2 [data-slot=checkbox-label],
.data-\[slot\=radio-label\]\:\*\*\:text-ceramic-body-2 [data-slot=radio-label] {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400
}

.data-\[type\=literal\]\:text-ceramic-dimmed[data-type=literal] {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.disabled\:text-ceramic-dimmed:disabled {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.group:disabled .group-disabled\:text-ceramic-dimmed {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.placeholder\:text-ceramic-dimmed::-moz-placeholder {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.placeholder\:text-ceramic-dimmed::placeholder {
    color: var(--ceramic-dimmed);
}

.placeholder\:text-ceramic-secondary\/50::placeholder {
    color: color-mix(in srgb, var(--ceramic-secondary) 50%, transparent);
}

.placeholder\:text-ceramic-secondary\/60::placeholder {
    color: color-mix(in srgb, var(--ceramic-secondary) 60%, transparent);
}

.placeholder\:text-ceramic-secondary\/70::placeholder {
    color: color-mix(in srgb, var(--ceramic-secondary) 70%, transparent);
}

.text-ceramic-amber-400 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-amber-400) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-amber-500 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-amber-500) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-amber-600 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-amber-600) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-black {
    color: var(--ceramic-black)
}

.text-ceramic-black\/\[\.06\] {
    color: color-mix(in srgb, var(--ceramic-black) 6%, transparent)
}

.text-ceramic-black\/4 {
    color: color-mix(in srgb, var(--ceramic-black) 4%, transparent)
}

.text-ceramic-blue-400 {
    color: color-mix(in srgb, var(--ceramic-blue-400) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-blue-500 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-blue-500) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-blue-600 {
    color: color-mix(in srgb, var(--ceramic-blue-600) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-blue-700 {
    color: var(--ceramic-blue-700);
}

.text-ceramic-body-1 {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 400
}

.text-ceramic-body-2 {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400
}

.text-ceramic-body-3 {
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .01em;
    font-weight: 400
}

.text-ceramic-body-4 {
    font-size: .6875rem;
    line-height: .875rem;
    font-weight: 400
}

.text-ceramic-brand {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-destructive {
    color: color-mix(in srgb, var(--ceramic-negative) 100%, transparent);
}

.text-ceramic-dimmed {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-gray-1000 {
    color: var(--ceramic-gray-1000);
}

.text-ceramic-gray-1100 {
    color: var(--ceramic-gray-1100);
}

.text-ceramic-gray-1200 {
    color: var(--ceramic-gray-1200);
}

.text-ceramic-gray-1300 {
    color: var(--ceramic-gray-1300);
}

.text-ceramic-gray-300 {
    color: var(--ceramic-gray-300);
}

.text-ceramic-gray-400 {
    color: var(--ceramic-gray-400);
}

.text-ceramic-gray-500 {
    color: var(--ceramic-gray-500);
}

.text-ceramic-gray-600 {
    color: var(--ceramic-gray-600);
}

.text-ceramic-gray-700 {
    color: var(--ceramic-gray-700);
}

.text-ceramic-gray-700\/50 {
    color: color-mix(in srgb, var(--ceramic-gray-700) 50%, transparent)
}

.text-ceramic-gray-800 {
    color: var(--ceramic-gray-800);
}

.text-ceramic-gray-900 {
    color: var(--ceramic-gray-900);
}

.text-ceramic-green-400 {
    color: color-mix(in srgb, var(--ceramic-green-400) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-green-500 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-positive) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-green-600 {
    color: color-mix(in srgb, var(--ceramic-green-600) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-heading-2 {
    font-size: 2rem;
    line-height: 2.25rem;
    letter-spacing: -.02em;
    font-weight: 500
}

.text-ceramic-heading-3 {
    font-size: 1.75rem;
    line-height: 2.125rem;
    letter-spacing: -.015em;
    font-weight: 500
}

.text-ceramic-heading-4 {
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -.01em;
    font-weight: 500
}

.text-ceramic-heading-5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.01em;
    font-weight: 500
}

.text-ceramic-heading-6 {
    font-size: 1.0625rem;
    line-height: 1.5rem;
    font-weight: 500
}

.text-ceramic-info {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-info) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-label-1 {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 500
}

.text-ceramic-label-2 {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500
}

.text-ceramic-label-3 {
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500
}

.text-ceramic-label-4 {
    font-size: .6875rem;
    line-height: .875rem;
    letter-spacing: .015em;
    font-weight: 500
}

.text-ceramic-label-5 {
    font-size: .625rem;
    line-height: .8125rem;
    font-weight: 500
}

.text-ceramic-negative {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-orange-400 {
    color: color-mix(in srgb, var(--ceramic-orange-400) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-orange-500 {
    color: var(--ceramic-orange-500);
}

.text-ceramic-orange-600 {
    color: color-mix(in srgb, var(--ceramic-orange-600) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-orange-700 {
    color: var(--ceramic-orange-700);
}

.text-ceramic-positive {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-positive) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-primary {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-purple-400 {
    color: var(--ceramic-purple-400);
}

.text-ceramic-purple-500 {
    color: var(--ceramic-purple-500);
}

.text-ceramic-purple-600 {
    color: var(--ceramic-purple-600);
}

.text-ceramic-purple-700\/80 {
    color: color-mix(
            in srgb,
            var(--ceramic-purple-700) 80%,
            transparent
    );
}

.text-ceramic-purple,
.text-ceramic-purple-700 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-red-300 {
    color: var(--ceramic-red-300, #f4a3a3);
}

.text-ceramic-red-400 {
    color: var(--ceramic-red-400, #ec7d7d);
}

.text-ceramic-red-500 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-red-500) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-red-600 {
    color: color-mix(in srgb, var(--ceramic-red-600) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-red-700 {
    color: var(--ceramic-red-700, #b83c3c);
}

.text-ceramic-secondary {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-secondary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-secondary\/80 {
    color: color-mix(in srgb, var(--ceramic-secondary) 80%, transparent)
}

.text-ceramic-tertiary {
    color: color-mix(in srgb, var(--ceramic-dimmed) 100%, transparent);
}

.text-ceramic-title-4 {
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-weight: 600;
}

.text-ceramic-warning {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-warning) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-white {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-white) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.text-ceramic-zinc-100 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-100) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-1000 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-1000) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-200 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-200) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-300 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-300) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-400 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-400) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-50 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-50) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-500 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-500) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-600 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-600) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-700 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-700) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-800 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-800) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-900 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-900) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ceramic-zinc-950 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-zinc-950) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

[data-selected].data-\[selected\]\:text-ceramic-primary {
    color: var(--ceramic-primary);
}

/* ─── 07. BORDER UTILITIES (border-ceramic-*) ─── */

.\[\&\:has\(\+\[data-slot\=card-footer\]\)\]\:border-ceramic-bg-separator:has(+[data-slot=card-footer]) {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.\[\&\>div\]\:border-ceramic-bg-separator > div {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.\[\&\>tr\]\:border-ceramic-black\/7 > tr {
    border-color: color-mix(in srgb, var(--ceramic-black) 7%, transparent)
}

.after\:border-ceramic-bg-separator::after {
    border-color: var(--ceramic-bg-separator);
}

.after\:border-ceramic-bg-separator:after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.before\:border-ceramic-bg-separator:before {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.before\:border-ceramic-black\/7:before {
    content: var(--tw-content);
    border-color: color-mix(in srgb, var(--ceramic-black) 7%, transparent)
}

.before\:border-ceramic-purple-700:before {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-b-ceramic-black\/7 {
    border-bottom-color: color-mix(in srgb, var(--ceramic-black) 7%, transparent)
}

.border-ceramic-amber\/56 {
    border-color: color-mix(in srgb, var(--ceramic-amber-700) 56%, transparent);
}

.border-ceramic-bg-separator {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-ceramic-bg-separator\/50 {
    --tw-border-opacity: 0.5;
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-border-opacity) * 100%), transparent)
}

.border-ceramic-bg-separator\/60 {
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) 60%, transparent);
}

.border-ceramic-black\/5 {
    border-color: color-mix(in srgb, var(--ceramic-black) 5%, transparent)
}

.border-ceramic-black\/6 {
    border-color: color-mix(in srgb, var(--ceramic-black) 6%, transparent)
}

.border-ceramic-black\/7 {
    border-color: color-mix(in srgb, var(--ceramic-black) 7%, transparent)
}

.border-ceramic-blue-500\/15 {
    border-color: color-mix(in srgb, var(--ceramic-blue-500) 15%, transparent);
}

.border-ceramic-blue-500\/20 {
    border-color: color-mix(in srgb, var(--ceramic-blue-500) 20%, transparent);
}

.border-ceramic-blue-500\/30 {
    border-color: color-mix(in srgb, var(--ceramic-blue-500) 30%, transparent);
}

.border-ceramic-blue\/56 {
    border-color: color-mix(in srgb, var(--ceramic-blue-700) 56%, transparent);
}

.border-ceramic-brand {
    border-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.border-ceramic-brand\/15 {
    border-color: color-mix(in srgb, var(--ceramic-brand) 15%, transparent);
}

.border-ceramic-brand\/20 {
    border-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.border-ceramic-brand\/30 {
    border-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.border-ceramic-brand\/40 {
    border-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.border-ceramic-brand\/50 {
    border-color: color-mix(in srgb, var(--ceramic-brand) 50%, transparent);
}

.border-ceramic-brand\/60 {
    border-color: color-mix(in srgb, var(--ceramic-brand) 60%, transparent);
}

.border-ceramic-cyan\/56 {
    border-color: color-mix(in srgb, var(--ceramic-cyan-700) 56%, transparent);
}

.border-ceramic-dimmed {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-ceramic-emerald\/56 {
    border-color: color-mix(in srgb, var(--ceramic-emerald-700) 56%, transparent);
}

.border-ceramic-fuchsia\/56 {
    border-color: color-mix(in srgb, var(--ceramic-fuchsia-700) 56%, transparent);
}

.border-ceramic-gray {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-gray-1100 {
    border-color: var(--ceramic-gray-1100);
}

.border-ceramic-gray-1200 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-1200) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-ceramic-gray-1500 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-1500) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-ceramic-gray-200 {
    border-color: var(--ceramic-gray-200, #ececee);
}

.border-ceramic-gray-300 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-300) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-ceramic-gray-400 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-400) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-ceramic-gray-700\/24 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.border-ceramic-gray-700\/8 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.border-ceramic-gray\/24 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.border-ceramic-gray\/56 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 56%, transparent);
}

.border-ceramic-gray\/8 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.border-ceramic-green-500\/15 {
    border-color: color-mix(in srgb, var(--ceramic-green-500) 15%, transparent);
}

.border-ceramic-green-500\/20 {
    border-color: color-mix(in srgb, var(--ceramic-green-500) 20%, transparent);
}

.border-ceramic-green-500\/30 {
    border-color: color-mix(in srgb, var(--ceramic-green-500) 30%, transparent);
}

.border-ceramic-green\/56 {
    border-color: color-mix(in srgb, var(--ceramic-green-700) 56%, transparent);
}

.border-ceramic-indigo\/56 {
    border-color: color-mix(in srgb, var(--ceramic-indigo-700) 56%, transparent);
}

.border-ceramic-lime\/56 {
    border-color: color-mix(in srgb, var(--ceramic-lime-700) 56%, transparent);
}

.border-ceramic-negative\/20 {
    border-color: color-mix(in srgb, var(--ceramic-negative) 20%, transparent)
}

.border-ceramic-neutral\/56 {
    border-color: color-mix(in srgb, var(--ceramic-neutral-700) 56%, transparent);
}

.border-ceramic-orange-100\/90 {
    border-color: color-mix(in srgb, var(--ceramic-orange-100) 90%, transparent)
}

.border-ceramic-orange-500\/15 {
    border-color: color-mix(in srgb, var(--ceramic-orange-500) 15%, transparent);
}

.border-ceramic-orange-500\/20 {
    border-color: color-mix(in srgb, var(--ceramic-orange-500) 20%, transparent);
}

.border-ceramic-orange-600\/8 {
    border-color: color-mix(in srgb, var(--ceramic-orange-600) 8%, transparent)
}

.border-ceramic-orange\/56 {
    border-color: color-mix(in srgb, var(--ceramic-orange-700) 56%, transparent);
}

.border-ceramic-pink\/56 {
    border-color: color-mix(in srgb, var(--ceramic-pink-700) 56%, transparent);
}

.border-ceramic-positive\/20 {
    border-color: color-mix(in srgb, var(--ceramic-positive) 20%, transparent)
}

.border-ceramic-positive\/8 {
    border-color: color-mix(in srgb, var(--ceramic-positive) 8%, transparent)
}

.border-ceramic-purple {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.border-ceramic-purple-500\/15 {
    border-color: color-mix(in srgb, var(--ceramic-purple-500) 15%, transparent);
}

.border-ceramic-purple-500\/20 {
    border-color: color-mix(in srgb, var(--ceramic-purple-500) 20%, transparent);
}

.border-ceramic-purple-500\/30 {
    border-color: color-mix(in srgb, var(--ceramic-purple-500) 30%, transparent);
}

.border-ceramic-purple\/4 {
    border-color: color-mix(in srgb, var(--ceramic-purple-700) 4%, transparent)
}

.border-ceramic-purple\/56 {
    border-color: color-mix(in srgb, var(--ceramic-purple-700) 56%, transparent);
}

.border-ceramic-red-100\/90 {
    border-color: color-mix(in srgb, var(--ceramic-red-100) 90%, transparent)
}

.border-ceramic-red-500\/15 {
    border-color: color-mix(in srgb, var(--ceramic-red-500) 15%, transparent);
}

.border-ceramic-red-500\/20 {
    border-color: color-mix(in srgb, var(--ceramic-red-500) 20%, transparent);
}

.border-ceramic-red\/56 {
    border-color: color-mix(in srgb, var(--ceramic-red-700) 56%, transparent);
}

.border-ceramic-rose\/56 {
    border-color: color-mix(in srgb, var(--ceramic-rose-700) 56%, transparent);
}

.border-ceramic-secondary\/50 {
    border-color: color-mix(in srgb, var(--ceramic-secondary) 50%, transparent)
}

.border-ceramic-sky\/56 {
    border-color: color-mix(in srgb, var(--ceramic-sky-700) 56%, transparent);
}

.border-ceramic-slate-200 {
    border-color: var(--ceramic-slate-200);
}

.border-ceramic-slate\/56 {
    border-color: color-mix(in srgb, var(--ceramic-slate-700) 56%, transparent);
}

.border-ceramic-stone\/56 {
    border-color: color-mix(in srgb, var(--ceramic-stone-700) 56%, transparent);
}

.border-ceramic-teal\/56 {
    border-color: color-mix(in srgb, var(--ceramic-teal-700) 56%, transparent);
}

.border-ceramic-violet\/56 {
    border-color: color-mix(in srgb, var(--ceramic-violet-700) 56%, transparent);
}

.border-ceramic-warning\/8 {
    border-color: color-mix(in srgb, var(--ceramic-warning) 8%, transparent)
}

.border-ceramic-yellow\/56 {
    border-color: color-mix(in srgb, var(--ceramic-yellow-700) 56%, transparent);
}

.border-ceramic-zinc-100 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-100) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-1000 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-1000) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-200 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-200) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-300 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-300) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-400 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-400) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-50 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-50) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-500 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-500) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-600 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-600) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-700 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-700) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-800 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-800) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-800\/50 {
    border-color: color-mix(in srgb, var(--ceramic-zinc-800) 50%, transparent);
}

.border-ceramic-zinc-900 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-900) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc-950 {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-950) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-ceramic-zinc\/56 {
    border-color: color-mix(in srgb, var(--ceramic-zinc-700) 56%, transparent);
}

.border-t-ceramic-bg-separator {
    --tw-border-opacity: 1;
    border-top-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

/* ─── 08. RING UTILITIES (ring-ceramic-*) ─── */

.\!ring-ceramic-negative {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(
            in srgb,
            var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%),
            transparent
    );
}

.after\:ring-ceramic-black\/12:after {
    content: var(--tw-content);
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 12%, transparent)
}

.after\:ring-ceramic-black\/8::after {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 8%, transparent);
}

.after\:ring-ceramic-black\/8:after {
    content: var(--tw-content);
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 8%, transparent)
}

.data-\[readonly\]\:ring-ceramic-gray\/24[data-readonly] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.has-\[\:checked\]\:ring-ceramic-brand\/20:has(:checked) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent)
}

.has-\[\:checked\]\:ring-ceramic-gray\/12:has(:checked) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray) 12%, transparent)
}

.has-\[\[data-slot\=input\]\:-moz-read-only\]\:ring-ceramic-gray\/24:has([data-slot=input]:-moz-read-only) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.has-\[\[data-slot\=input\]\:read-only\]\:ring-ceramic-gray\/24:has([data-slot=input]:read-only) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.read-only\:ring-ceramic-gray\/24:-moz-read-only {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.read-only\:ring-ceramic-gray\/24:read-only {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.ring-\[\#191C21\]\/4 {
    --tw-ring-color: rgb(25 28 33/0.04);
}

.ring-black\/7\.5 {
    --tw-ring-color: rgb(0 0 0/0.075);
}

.ring-ceramic-amber\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-amber-700) 12%, transparent);
}

.ring-ceramic-bg-separator {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.ring-ceramic-black\/\[0\.42\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 42%, transparent)
}

.ring-ceramic-black\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 12%, transparent)
}

.ring-ceramic-black\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 16%, transparent)
}

.ring-ceramic-black\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 24%, transparent)
}

.ring-ceramic-black\/32 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 32%, transparent)
}

.ring-ceramic-black\/6 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 6%, transparent)
}

.ring-ceramic-black\/7 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 7%, transparent)
}

.ring-ceramic-black\/8 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 8%, transparent)
}

.ring-ceramic-blue-500\/\[\.08\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 8%, transparent);
}

.ring-ceramic-blue-500\/\[\.16\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 16%, transparent);
}

.ring-ceramic-blue-500\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 16%, transparent);
}

.ring-ceramic-blue-500\/20 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 20%, transparent);
}

.ring-ceramic-blue\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-700) 12%, transparent);
}

.ring-ceramic-blue\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 16%, transparent);
}

.ring-ceramic-blue\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-700) 24%, transparent);
}

.ring-ceramic-brand {
    --tw-ring-color: var(--ceramic-brand);
}

.ring-ceramic-brand\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 16%, transparent);
}

.ring-ceramic-brand\/20 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.ring-ceramic-brand\/30 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.ring-ceramic-brand\/40 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.ring-ceramic-brand\/50 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 50%, transparent);
}

.ring-ceramic-cyan\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-cyan-700) 12%, transparent);
}

.ring-ceramic-emerald\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-emerald-700) 12%, transparent);
}

.ring-ceramic-emerald\/15 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-emerald-700) 15%, transparent);
}

.ring-ceramic-gray-100 {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.ring-ceramic-gray-1000\/88 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1000) 88%, transparent)
}

.ring-ceramic-gray-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.ring-ceramic-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-300) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.ring-ceramic-gray-50 {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.ring-ceramic-gray-500\/\[0\.08\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-500) 8%, transparent)
}

.ring-ceramic-gray-700\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent)
}

.ring-ceramic-gray-700\/48 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent)
}

.ring-ceramic-gray-700\/8 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.ring-ceramic-gray\/10 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 10%, transparent);
}

.ring-ceramic-gray\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent);
}

.ring-ceramic-gray\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 16%, transparent);
}

.ring-ceramic-gray\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent);
}

.ring-ceramic-gray\/6 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 6%, transparent)
}

.ring-ceramic-gray\/8 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent);
}

.ring-ceramic-green-500\/\[\.08\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.ring-ceramic-green-500\/\[\.16\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 16%, transparent);
}

.ring-ceramic-green-500\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 16%, transparent);
}

.ring-ceramic-green-500\/20 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 20%, transparent);
}

.ring-ceramic-green\/07 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-600) 70%, transparent)
}

.ring-ceramic-green\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-700) 12%, transparent);
}

.ring-ceramic-green\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 16%, transparent);
}

.ring-ceramic-green\/20 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-700) 20%, transparent);
}

.ring-ceramic-green\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-700) 24%, transparent);
}

.ring-ceramic-indigo\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-indigo-700) 12%, transparent);
}

.ring-ceramic-lime\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-lime-700) 12%, transparent);
}

.ring-ceramic-negative {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.ring-ceramic-neutral\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-neutral-700) 12%, transparent);
}

.ring-ceramic-orange-500\/\[\.08\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-500) 8%, transparent);
}

.ring-ceramic-orange-500\/\[\.16\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-500) 16%, transparent);
}

.ring-ceramic-orange\/07 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-700) 7%, transparent)
}

.ring-ceramic-orange\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-700) 12%, transparent);
}

.ring-ceramic-orange\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-500) 16%, transparent);
}

.ring-ceramic-orange\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-700) 24%, transparent);
}

.ring-ceramic-pink\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-pink-700) 12%, transparent);
}

.ring-ceramic-pink\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-pink-700) 24%, transparent);
}

.ring-ceramic-purple-600\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-600) 16%, transparent)
}

.ring-ceramic-purple-600\/50 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-600) 50%, transparent);
}

.ring-ceramic-purple-700 {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.ring-ceramic-purple\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-700) 12%, transparent);
}

.ring-ceramic-purple\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-700) 16%, transparent)
}

.ring-ceramic-purple\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-700) 24%, transparent);
}

.ring-ceramic-red-200 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-200), transparent);
}

.ring-ceramic-red-300 {
    --tw-ring-color: var(--ceramic-red-300, #f4a3a3);
}

.ring-ceramic-red-500\/\[\.08\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.ring-ceramic-red-500\/\[\.16\] {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 16%, transparent);
}

.ring-ceramic-red-500\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 16%, transparent);
}

.ring-ceramic-red-500\/20 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 20%, transparent);
}

.ring-ceramic-red-800 {
    --tw-ring-color: var(--ceramic-red-800, #991b1b);
}

.ring-ceramic-red\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-700) 12%, transparent);
}

.ring-ceramic-red\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 16%, transparent);
}

.ring-ceramic-red\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-700) 24%, transparent);
}

.ring-ceramic-rose\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-rose-700) 12%, transparent);
}

.ring-ceramic-sky\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-sky-700) 12%, transparent);
}

.ring-ceramic-slate\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-slate-700) 12%, transparent);
}

.ring-ceramic-stone\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-stone-700) 12%, transparent);
}

.ring-ceramic-stone\/16 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-stone-700) 16%, transparent)
}

.ring-ceramic-teal\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-teal-700) 12%, transparent);
}

.ring-ceramic-teal\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-teal-700) 24%, transparent);
}

.ring-ceramic-violet\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-violet-700) 12%, transparent);
}

.ring-ceramic-white {
    --tw-ring-color: var(--ceramic-white);
}

.ring-ceramic-white\/10 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 10%, transparent)
}

.ring-ceramic-yellow\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-yellow-700) 12%, transparent);
}

.ring-ceramic-yellow\/24 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-yellow-700) 24%, transparent);
}

.ring-ceramic-zinc-700 {
    --tw-ring-color: var(--ceramic-zinc-700);
}

.ring-ceramic-zinc-900\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-zinc-900) 12%, transparent);
}

.ring-ceramic-zinc-900\/6 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-zinc-900) 6%, transparent);
}

.ring-ceramic-zinc-900\/8 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-zinc-900) 8%, transparent);
}

.ring-ceramic-zinc\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-zinc-700) 12%, transparent);
}

/* ─── 09. SHADOW UTILITIES (shadow-ceramic-*) ─── */

.\!shadow-\[inset_0_1px_1px_theme\(colors\.ceramic\.white\/\.08\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.purple\.700\)\] {
    --tw-shadow: inset 0 1px 1px color-mix(in srgb, var(--ceramic-white) 8%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-purple-700) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.after\:shadow-\[0_0_8px_-2px_theme\(colors\.ceramic\.white\/0\.10\)_inset\2c 0_3px_1px_-2px_theme\(colors\.ceramic\.white\/0\.08\)_inset\2c 0_4px_4px_-3px_theme\(colors\.ceramic\.black\/0\.32\)\2c 0px_0px_0px_1px_\#7166F8\]:after {
    content: var(--tw-content);
    --tw-shadow: 0 0 8px -2px color-mix(in srgb, var(--ceramic-white) 10%, transparent) inset, 0 3px 1px -2px color-mix(in srgb, var(--ceramic-white) 8%, transparent) inset, 0 4px 4px -3px color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0px 0px 0px 1px #7166F8;
    --tw-shadow-colored: inset 0 0 8px -2px var(--tw-shadow-color), inset 0 3px 1px -2px var(--tw-shadow-color), 0 4px 4px -3px var(--tw-shadow-color), 0px 0px 0px 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.drop-shadow-\[0_1px_2px_theme\(colors\.ceramic\.black\/\.2\)\] {
    --tw-drop-shadow: drop-shadow(0 1px 2px color-mix(in srgb, var(--ceramic-black) 20%, transparent));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow-\[0_1px_2px_theme\(colors\.ceramic\.black\/\.2\)\],
.grayscale {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.peer\/radio:checked ~ .peer-checked\/radio\:shadow-\[0_4px_4px_-3px_theme\(colors\.ceramic\.black\/\.32\)\] {
    --tw-shadow: 0 4px 4px -3px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_0_1px_rgba\(25\2c 28\2c 33\2c \.08\)\2c 0_16px_36px_-6px_theme\(colors\.ceramic\.black\/\.07\)\2c 0_6px_16px_-2px_theme\(colors\.ceramic\.black\/\.2\)\] {
    --tw-shadow: 0 0 0 1px rgba(25, 28, 33, .08), 0 16px 36px -6px color-mix(in srgb, var(--ceramic-black) 7%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 16px 36px -6px var(--tw-shadow-color), 0 6px 16px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_0_1px_rgba\(25\2c 28\2c 33\2c 0\.04\)\2c 0_1px_2px_rgba\(25\2c 28\2c 33\2c 0\.06\)\2c 0_0_2px_theme\(colors\.ceramic\.black\/0\.08\)\] {
    --tw-shadow: 0 0 0 1px rgba(25, 28, 33, 0.04), 0 1px 2px rgba(25, 28, 33, 0.06), 0 0 2px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color), 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_0_1px_rgba\(25\2c 28\2c 33\2c 0\.04\)\2c 0_1px_2px_rgba\(25\2c 28\2c 33\2c 0\.06\)\2c 0px_0px_2px_theme\(colors\.ceramic\.black\/0\.08\)\] {
    --tw-shadow: 0 0 0 1px rgba(25, 28, 33, 0.04), 0 1px 2px rgba(25, 28, 33, 0.06), 0px 0px 2px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color), 0px 0px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_0_1px_theme\(colors\.ceramic\.black\/0\.06\)\2c 0_1px_2px_rgba\(25\2c 28\2c 33\2c 0\.06\)\2c 0px_0px_2px_theme\(colors\.ceramic\.black\/0\.08\)\] {
    --tw-shadow: 0 0 0 1px color-mix(in srgb, var(--ceramic-black) 6%, transparent), 0 1px 2px rgba(25, 28, 33, 0.06), 0px 0px 2px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color), 0px 0px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_1px_theme\(colors\.ceramic\.black\/\.25\)\2c 0_2px_3px_theme\(colors\.ceramic\.black\/\.1\)\] {
    --tw-shadow: 0 0 1px color-mix(in srgb, var(--ceramic-black) 25%, transparent), 0 2px 3px color-mix(in srgb, var(--ceramic-black) 10%, transparent);
    --tw-shadow-colored: 0 0 1px var(--tw-shadow-color), 0 2px 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_1\.5px_2px_0_theme\(colors\.ceramic\.black\/0\.32\)\2c 0_0_0_1px_theme\(colors\.ceramic\.white\/0\.1\)\2c 0_-1px_0_0_theme\(colors\.ceramic\.white\/0\.04\)\] {
    --tw-shadow: 0 1.5px 2px 0 color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-white) 10%, transparent), 0 -1px 0 0 color-mix(in srgb, var(--ceramic-white) 4%, transparent);
    --tw-shadow-colored: 0 1.5px 2px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 -1px 0 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_1px_0_theme\(colors\.ceramic\.black\/0\.02\)\2c _0_2px_3px_-1px_theme\(colors\.ceramic\.black\/0\.08\)\] {
    --tw-shadow: 0 1px 0 color-mix(in srgb, var(--ceramic-black) 2%, transparent), 0 2px 3px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color), 0 2px 3px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_1px_1px_theme\(colors\.ceramic\.black\/0\.03\)\2c 0_2px_2px_theme\(colors\.ceramic\.black\/0\.03\)\2c 0_4px_4px_theme\(colors\.ceramic\.black\/0\.03\)\] {
    --tw-shadow: 0 1px 1px color-mix(in srgb, var(--ceramic-black) 3%, transparent), 0 2px 2px color-mix(in srgb, var(--ceramic-black) 3%, transparent), 0 4px 4px color-mix(in srgb, var(--ceramic-black) 3%, transparent);
    --tw-shadow-colored: 0 1px 1px var(--tw-shadow-color), 0 2px 2px var(--tw-shadow-color), 0 4px 4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_1px_2px_0_rgba\(25\2c 28\2c 33\2c \.06\)\2c 0_0_2px_0_theme\(colors\.ceramic\.black\/\.08\)\] {
    --tw-shadow: 0 1px 2px 0 rgba(25, 28, 33, .06), 0 0 2px 0 color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 0 0 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_1px_2px_rgba\(25\2c 28\2c 33\2c \.06\)\2c 0_0_2px_theme\(colors\.ceramic\.black\/\.08\)\] {
    --tw-shadow: 0 1px 2px rgba(25, 28, 33, .06), 0 0 2px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.06\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.04\)\] {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 6%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_0_0_1px_rgba\(25\2c 28\2c 33\2c \.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\] {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 0 0 1px rgba(25, 28, 33, .2), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\] {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/0\.06\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.04\)\] {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 6%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/0\.10\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.06\)\] {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_32px_72px_-12px_rgba\(25\2c 28\2c 33\2c \.2\)\2c 0_16px_32px_-6px_theme\(colors\.ceramic\.black\/\.2\)\] {
    --tw-shadow: 0 32px 72px -12px rgba(25, 28, 33, .2), 0 16px 32px -6px color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: 0 32px 72px -12px var(--tw-shadow-color), 0 16px 32px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/0\.20\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.06\)\] {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/0\.20\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.32\)\] {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0px_1px_1px_theme\(colors\.ceramic\.black\/0\.05\)\] {
    --tw-shadow: 0px 1px 1px color-mix(in srgb, var(--ceramic-black) 5%, transparent);
    --tw-shadow-colored: 0px 1px 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0px_1px_2px_rgba\(25\2c 28\2c 33\2c 0\.06\)\2c 0px_0px_2px_theme\(colors\.ceramic\.black\/0\.08\)\] {
    --tw-shadow: 0px 1px 2px rgba(25, 28, 33, 0.06), 0px 0px 2px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color), 0px 0px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0px_2px_2px_-1px_theme\(colors\.ceramic\.black\/0\.06\)\2c 0px_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.04\)\] {
    --tw-shadow: 0px 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 6%, transparent), 0px 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0px 2px 2px -1px var(--tw-shadow-color), 0px 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0px_2px_3px_theme\(colors\.ceramic\.black\/0\.04\)\2c 0px_24px_68px_rgba\(47\2c 48\2c 55\2c 0\.05\)\2c 0px_4px_6px_rgba\(34\2c 42\2c 53\2c 0\.04\)\2c 0px_1px_1px_theme\(colors\.ceramic\.black\/0\.05\)\] {
    --tw-shadow: 0px 2px 3px color-mix(in srgb, var(--ceramic-black) 4%, transparent), 0px 24px 68px rgba(47, 48, 55, 0.05), 0px 4px 6px rgba(34, 42, 53, 0.04), 0px 1px 1px color-mix(in srgb, var(--ceramic-black) 5%, transparent);
    --tw-shadow-colored: 0px 2px 3px var(--tw-shadow-color), 0px 24px 68px var(--tw-shadow-color), 0px 4px 6px var(--tw-shadow-color), 0px 1px 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0px_32px_72px_-12px_theme\(colors\.ceramic\.black\/0\.2\)\2c 0px_16px_32px_-6px_theme\(colors\.ceramic\.black\/0\.2\)\] {
    --tw-shadow: 0px 32px 72px -12px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0px 16px 32px -6px color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: 0px 32px 72px -12px var(--tw-shadow-color), 0px 16px 32px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[4px_0px_0\2c -4px_0px_0\],
.shadow-\[inset_0_-1px_0_0_var\(--ceramic-bg-separator\)\] {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_-1px_0_0_var\(--ceramic-bg-separator\)\] {
    --tw-shadow: inset 0 -1px 0 0 var(--ceramic-bg-separator);
    --tw-shadow-colored: inset 0 -1px 0 0 var(--tw-shadow-color)
}

.shadow-\[inset_0_0_0_1px_\#2f3037\2c inset_0_2px_0_theme\(colors\.ceramic\.white\/\.12\)\2c inset_0_0_2px_2px_theme\(colors\.ceramic\.white\/\.06\)\2c 0_16px_36px_-6px_theme\(colors\.ceramic\.black\/\.36\)\2c 0_6px_16px_-2px_theme\(colors\.ceramic\.black\/\.2\)\] {
    --tw-shadow: inset 0 0 0 1px #2f3037, inset 0 2px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent), inset 0 0 2px 2px color-mix(in srgb, var(--ceramic-white) 6%, transparent), 0 16px 36px -6px color-mix(in srgb, var(--ceramic-black) 36%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), inset 0 2px 0 var(--tw-shadow-color), inset 0 0 2px 2px var(--tw-shadow-color), 0 16px 36px -6px var(--tw-shadow-color), 0 6px 16px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_1px_0\.5px_0_var\(--button-secondary-shadow-1\2c theme\(colors\.ceramic\.white\/\.05\)\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.06\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.04\)\2c 0_0_0_1px_theme\(colors\.ceramic\.black\/\.1\)\] {
    --tw-shadow: inset 0 1px 0.5px 0 var(--button-secondary-shadow-1, color-mix(in srgb, var(--ceramic-white) 5%, transparent)), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 6%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-black) 10%, transparent);
    --tw-shadow-colored: inset 0 1px 0.5px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_rgba\(253\2c 114\2c 36\2c \.88\)\] {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px rgba(253, 114, 36, .88);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.blue\.600\)\] {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-blue-600) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.brand\.700\)\] {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.brand\)\] {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent),
    0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent),
    0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color),
    0 2px 2px -1px var(--tw-shadow-color),
    0 4px 4px -2px var(--tw-shadow-color),
    0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

.shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.purple\.700\)\] {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-purple-700) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-3px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.red\.600\)\] {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -3px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-red-600) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -3px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-ceramic-black\/3 {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-black) 3%, transparent);
    --tw-shadow: var(--tw-shadow-colored)
}

.shadow-ceramic-black\/7 {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-black) 7%, transparent);
    --tw-shadow: var(--tw-shadow-colored)
}

.shadow-ceramic-card {
    box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--ceramic-zinc-900) 6%, transparent);
}

.shadow-ceramic-gray-1500\/30 {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-gray-1500) 30%, transparent);
    --tw-shadow: var(--tw-shadow-colored);
}

.shadow-ceramic-gray\/25 {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-gray-700) 25%, transparent);
    --tw-shadow: var(--tw-shadow-colored)
}

.shadow-ceramic-orange {
    box-shadow: inset 0 1px 0.5px 0 color-mix(in srgb, var(--ceramic-white) 5%, transparent),
    0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 6%, transparent),
    0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ceramic-black) 10%, transparent);
}

.shadow-ceramic-white {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-white) 100%, transparent);
    --tw-shadow: var(--tw-shadow-colored)
}

/* ─── 10. GRADIENT & DIVIDE UTILITIES ─── */

.\[\&_\.line\]\:after\:bg-gradient-to-l .line::after {
    content: var(--tw-content);
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.\[\&_\.line\]\:before\:bg-gradient-to-r .line::before {
    content: var(--tw-content);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.\[background-image\:linear-gradient\(to_bottom\2c transparent_calc\(56px-1px\)\2c theme\(colors\.ceramic\.gray\.700\/8\)\)\2c linear-gradient\(to_right\2c transparent_calc\(56px-1px\)\2c _theme\(colors\.ceramic\.gray\.700\/8\)\)\] {
    background-image: linear-gradient(to bottom, transparent calc(56px - 1px), color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)), linear-gradient(to right, transparent calc(56px - 1px), color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent))
}

.\[background-image\:linear-gradient\(to_bottom\2c transparent_calc\(56px-1px\)\2c theme\(colors\.ceramic\.gray\.900\)\)\2c linear-gradient\(to_right\2c transparent_calc\(56px-1px\)\2c theme\(colors\.ceramic\.gray\.900\)\)\] {
    background-image: linear-gradient(to bottom, transparent calc(56px - 1px), color-mix(in srgb, var(--ceramic-gray-900) 100%, transparent)), linear-gradient(to right, transparent calc(56px - 1px), color-mix(in srgb, var(--ceramic-gray-900) 100%, transparent))
}

.\[background-image\:linear-gradient\(to_right\2c theme\(colors\.ceramic\.gray\.900\/0\.24\)\2c theme\(colors\.ceramic\.gray\.900\/0\.24\)\)\] {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--ceramic-gray-900) 24%, transparent), color-mix(in srgb, var(--ceramic-gray-900) 24%, transparent))
}

.\[background-image\:repeating-linear-gradient\(-45deg\2c theme\(colors\.ceramic\.gray\.200\/\.25\)\2c theme\(colors\.ceramic\.gray\.200\/\.25\)_6px\2c transparent_6px\2c transparent_12px\)\] {
    background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ceramic-gray-200) 25%, transparent), color-mix(in srgb, var(--ceramic-gray-200) 25%, transparent) 6px, transparent 6px, transparent 12px)
}

.\*\:after\:bg-gradient-to-l > :after {
    content: var(--tw-content);
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.\*\:after\:from-ceramic-gray-1100 > :after {
    content: var(--tw-content);
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-1100) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1100) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.\*\:before\:from-ceramic-gray-1100 > :before {
    content: var(--tw-content);
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-1100) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1100) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.after\:\[background\:linear-gradient\(0deg\2c transparent_0\%\2c theme\(colors\.ceramic\.white\/0\.2\)_100\%\)\2c \#6C47FF\]:after {
    content: var(--tw-content);
    background: linear-gradient(0deg, transparent 0, color-mix(in srgb, var(--ceramic-white) 20%, transparent) 100%), #6C47FF
}

.after\:from-ceramic-white\/20::after {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 20%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.after\:from-ceramic-white\/20:after {
    content: var(--tw-content);
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 20%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.before\:\[background\:linear-gradient\(white\2c white\)_padding-box\2c linear-gradient\(60deg\2c theme\(colors\.ceramic\.black\/0\)_20\%\2c theme\(colors\.orange\.900\)\2c theme\(colors\.sky\.300\)\2c theme\(colors\.ceramic\.purple\.500\)\)_border-box\]:before {
    content: var(--tw-content);
    background: linear-gradient(white, white) padding-box, linear-gradient(60deg, color-mix(in srgb, var(--ceramic-black) 0%, transparent) 20%, color-mix(in srgb, var(--orange-900) 100%, transparent), #5DE3FF, color-mix(in srgb, var(--ceramic-purple-500) 100%, transparent)) border-box
}

.before\:from-ceramic-bg-separator:before {
    content: var(--tw-content);
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-bg-separator) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-bg-separator) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.before\:from-ceramic-black\/0::before {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-black) 0%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.before\:from-ceramic-black\/0:before {
    content: var(--tw-content);
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-black) 0%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.before\:from-ceramic-white\/10::before {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 10%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.before\:from-ceramic-white\/10:before {
    content: var(--tw-content);
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 10%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.before\:from-ceramic-white\/20::before {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 20%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.before\:from-ceramic-white\/20:before {
    content: var(--tw-content);
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 20%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.before\:to-ceramic-black\/\[\.02\]::before, .before\:to-ceramic-black\/\[0\.02\]::before {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 2%, transparent) var(--tw-gradient-to-position);
}

.before\:to-ceramic-black\/\[\.02\]:before {
    content: var(--tw-content);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 2%, transparent) var(--tw-gradient-to-position)
}

.before\:to-ceramic-black\/\[0\.02\]::before {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 2%, transparent);
}

.before\:to-ceramic-black\/\[0\.02\]:before {
    content: var(--tw-content);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 2%, transparent) var(--tw-gradient-to-position)
}

.before\:to-ceramic-black\/\[0\.03\]::before {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 3%, transparent) var(--tw-gradient-to-position);
}

.divide-ceramic-bg-separator > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-bg-separator) calc(var(--tw-divide-opacity, 1) * 100%), transparent)
}

.divide-ceramic-gray-1100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ceramic-gray-1100);
}

.divide-ceramic-orange-600\/8 > :not([hidden]) ~ :not([hidden]) {
    border-color: color-mix(in srgb, var(--ceramic-orange-600) 8%, transparent)
}

.divide-ceramic-positive\/8 > :not([hidden]) ~ :not([hidden]) {
    border-color: color-mix(in srgb, var(--ceramic-positive) 8%, transparent)
}

.divide-ceramic-zinc-800\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: color-mix(in srgb, var(--ceramic-zinc-800) 50%, transparent);
}

.from-ceramic-bg-separator {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-bg-separator) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-bg-separator) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-black\/\[\.02\] {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-black) 2%, transparent) var(--tw-gradient-from-position);
}

.from-ceramic-black\/0 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-black) 0%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-black\/3 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-black) 3%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-brand\/10 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, color-mix(in srgb, var(--ceramic-brand) 0%, transparent));
}

.from-ceramic-brand\/5 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-brand) 5%, transparent);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, color-mix(in srgb, var(--ceramic-brand) 0%, transparent));
}

.from-ceramic-gray-1100 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-1100) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1100) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-gray-1200 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-1200) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1200) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-gray-50 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-50) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-50) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-light {
    --tw-gradient-from: var(--ceramic-bg-main);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.from-ceramic-orange-100\/35 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-orange-100) 35%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-purple-700 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-purple-700) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-purple-700) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-red-100\/50 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-red-100) 50%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-white {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-white) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-white\/10 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 10%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-ceramic-white\/12 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 12%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.to-ceramic-bg-separator {
    --tw-gradient-to: var(--ceramic-bg-separator) var(--tw-gradient-to-position);
}

.to-ceramic-black\/\[\.02\] {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 2%, transparent) var(--tw-gradient-to-position)
}

.to-ceramic-black\/2 {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 2%, transparent) var(--tw-gradient-to-position)
}

.to-ceramic-gray-50 {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-50) 100%, transparent) var(--tw-gradient-to-position)
}

.to-ceramic-gray-900 {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-900) 100%, transparent) var(--tw-gradient-to-position)
}

.to-ceramic-white {
    --tw-gradient-to: var(--ceramic-white) var(--tw-gradient-to-position);
}

.to-ceramic-white\/0 {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-white) 0%, transparent) var(--tw-gradient-to-position)
}

.via-ceramic-brand {
    --tw-gradient-via: var(--ceramic-orange-500);
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.via-ceramic-brand\/10 {
    --tw-gradient-via: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
    --tw-gradient-via-position: ;
}

.via-ceramic-brand\/30 {
    --tw-gradient-via: color-mix(in srgb, var(--ceramic-orange-500) 30%, transparent);
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.via-ceramic-brand\/5 {
    --tw-gradient-via: color-mix(in srgb, var(--ceramic-brand) 5%, transparent);
}

.via-ceramic-brand\/50 {
    --tw-gradient-via: color-mix(in srgb, var(--ceramic-orange-500) 50%, transparent);
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.via-ceramic-brand\/70 {
    --tw-gradient-via: color-mix(in srgb, var(--ceramic-orange-500) 70%, transparent);
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

/* ─── 11. STAR AMBER & BRAND UTILITIES ─── */

.bg-brand-accent {
    background-color: var(--brand-accent);
}

.bg-brand-primary {
    background-color: var(--brand-primary);
}

.bg-brand-primary\/12 {
    background-color: color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.bg-brand-primary\/15 {
    background-color: color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

.bg-brand-primary\/8 {
    background-color: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.bg-brand-secondary {
    background-color: var(--brand-secondary);
}

.bg-rating-1 {
    background-color: var(--rating-1);
}

.bg-rating-2 {
    background-color: var(--rating-2);
}

.bg-rating-3 {
    background-color: var(--rating-3);
}

.bg-rating-4 {
    background-color: var(--rating-4);
}

.bg-rating-5 {
    background-color: var(--rating-5);
}

.bg-star-amber-300 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--star-amber-300) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-star-amber-400 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--star-amber-400) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-star-amber-50 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--star-amber-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-star-amber-500 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--star-amber-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-star-amber-500\/\[\.06\] {
    background-color: color-mix(in srgb, var(--star-amber-500) 6%, transparent);
}

.bg-star-amber-500\/\[\.08\] {
    background-color: color-mix(in srgb, var(--star-amber-500) 8%, transparent);
}

.bg-star-amber-500\/10 {
    background-color: color-mix(in srgb, var(--star-amber-500) 10%, transparent);
}

.bg-star-amber-600 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--star-amber-600) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-star-amber-700 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--star-amber-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-star-amber-700\/10 {
    background-color: color-mix(in srgb, var(--star-amber-700) 10%, transparent);
}

.bg-star-amber-800 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--star-amber-800) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.border-star-amber-500\/15 {
    border-color: color-mix(in srgb, var(--star-amber-500) calc(0.15 * 100%), transparent);
}

.border-star-amber-500\/20 {
    border-color: color-mix(in srgb, var(--star-amber-500) calc(0.20 * 100%), transparent);
}

.border-star-amber-500\/30 {
    border-color: color-mix(in srgb, var(--star-amber-500) calc(0.30 * 100%), transparent);
}

.dark\:bg-star-amber-300:is(.dark *) {
    background-color: var(--star-amber-300);
}

.dark\:bg-star-amber-400:is(.dark *) {
    background-color: var(--star-amber-400);
}

.dark\:bg-star-amber-50:is(.dark *) {
    background-color: var(--star-amber-50);
}

.dark\:bg-star-amber-500:is(.dark *) {
    background-color: var(--star-amber-500);
}

.dark\:bg-star-amber-500\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--star-amber-500) 10%, transparent);
}

.dark\:bg-star-amber-600:is(.dark *) {
    background-color: var(--star-amber-600);
}

.dark\:bg-star-amber-700:is(.dark *) {
    background-color: var(--star-amber-700);
}

.dark\:bg-star-amber-700\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--star-amber-700) 10%, transparent);
}

.dark\:bg-star-amber-800:is(.dark *) {
    background-color: var(--star-amber-800);
}

.dark\:border-star-amber-500\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--star-amber-500) 15%, transparent);
}

.dark\:border-star-amber-500\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--star-amber-500) 20%, transparent);
}

.dark\:border-star-amber-500\/30:is(.dark *) {
    border-color: color-mix(in srgb, var(--star-amber-500) 30%, transparent);
}

.dark\:hover\:border-star-amber-500\/20:is(.dark *):hover {
    border-color: color-mix(in srgb, var(--star-amber-500) 20%, transparent);
}

.dark\:hover\:border-star-amber-500\/30:is(.dark *):hover {
    border-color: color-mix(in srgb, var(--star-amber-500) 30%, transparent);
}

.dark\:hover\:text-star-amber-500:is(.dark *):hover {
    color: var(--star-amber-500);
}

.dark\:stroke-star-amber-500\/\[\.06\]:is(.dark *) {
    stroke: color-mix(in srgb, var(--star-amber-500) 6%, transparent);
}

.dark\:text-star-amber-400:is(.dark *) {
    color: var(--star-amber-400);
}

.dark\:text-star-amber-500:is(.dark *) {
    color: var(--star-amber-500);
}

.dark\:text-star-amber-600:is(.dark *) {
    color: var(--star-amber-600);
}

.dark\:text-star-amber-700:is(.dark *) {
    color: var(--star-amber-700);
}

.dark\:to-star-amber-500\/30:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, var(--star-amber-500) 30%, transparent) var(--tw-gradient-to-position);
}

.focus\:ring-star-amber-500\/40:focus {
    --tw-ring-color: color-mix(in srgb, var(--star-amber-500) 40%, transparent);
}

.hover\:border-star-amber-500\/20:hover {
    border-color: color-mix(in srgb, var(--star-amber-500) calc(0.20 * 100%), transparent);
}

.hover\:border-star-amber-500\/30:hover {
    border-color: color-mix(in srgb, var(--star-amber-500) calc(0.30 * 100%), transparent);
}

.hover\:text-star-amber-500:hover {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--star-amber-500) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.ring-star-amber-500\/\[\.16\] {
    --tw-ring-color: color-mix(in srgb, var(--star-amber-500) 16%, transparent);
}

.ring-star-amber-500\/15 {
    --tw-ring-color: color-mix(in srgb, var(--star-amber-500) 15%, transparent);
}

.ring-star-amber-500\/20 {
    --tw-ring-color: color-mix(in srgb, var(--star-amber-500) 20%, transparent);
}

.ring-star-amber-500\/40 {
    --tw-ring-color: color-mix(in srgb, var(--star-amber-500) 40%, transparent);
}

.stroke-star-amber-200\/40 {
    stroke: color-mix(in srgb, var(--star-amber-200) 40%, transparent);
}

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

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

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

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

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

.text-rating-1 {
    color: var(--rating-1);
}

.text-rating-2 {
    color: var(--rating-2);
}

.text-rating-3 {
    color: var(--rating-3);
}

.text-rating-4 {
    color: var(--rating-4);
}

.text-rating-5 {
    color: var(--rating-5);
}

.text-star-amber-400 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--star-amber-400) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-star-amber-500 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--star-amber-500) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-star-amber-600 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--star-amber-600) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-star-amber-700 {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--star-amber-700) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

/* ─── 12. INTERACTIVE STATES (hover, focus, active) ─── */

.group\/button:hover .group-hover\/button\:drop-shadow-\[0_1px_2px_theme\(colors\.ceramic\.black\/\.2\)\] {
    --tw-drop-shadow: drop-shadow(0 1px 2px color-mix(in srgb, var(--ceramic-black) 20%, transparent));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.dark\:hover\:bg-white-brand:is(.dark *:hover) {
    background-color: color-mix(
            in srgb,
            var(--ceramic-brand) 1%,
            var(--ceramic-white) 2%
    );
}

.dark\:hover\:bg-ceramic-gray-1200:is(.dark *:hover) {
    background-color: var(--ceramic-gray-1200);
}

.focus\:ring-ceramic-brand\/20:focus {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent)
}

.hover\:bg-ceramic-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.data-\[focus-visible\]\:-outline-ceramic-focus-\[3px\][data-focus-visible] {
    outline: 3px solid var(--ceramic-focus);
    outline-offset: -3px;
}

.button-hover-active\:before\:opacity-0:hover::before,
.button-hover-active\:before\:opacity-0:active::before {
    opacity: 0;
}

.button-hover-active\:bg-ceramic-gray-50:hover,
.button-hover-active\:bg-ceramic-gray-50:active {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.dark\:button-hover-active\:bg-\[var\(--button-secondary-bg\,theme\(colors\.ceramic\.gray\.1100\)\)\]:is(.dark *):hover,
.dark\:button-hover-active\:bg-\[var\(--button-secondary-bg\,theme\(colors\.ceramic\.gray\.1100\)\)\]:is(.dark *):active {
    background-color: var(--button-secondary-bg, var(--ceramic-gray-1100));
}

.outline-ceramic-focus {
    outline-offset: 2px
}

.outline-ceramic-focus,
.outline-ceramic-focus-\[-0\.0625rem\] {
    outline-style: solid;
    outline-width: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.outline-ceramic-focus-\[-0\.0625rem\] {
    outline-offset: -.0625rem
}

.outline-ceramic-focus-\[3px\] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 3px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.ceramic-focus-outline-offset-0 {
    --_ceramic-focus-outline-offset: 0px
}

.\[--data-table-cell-bg-hover\:theme\(colors\.ceramic\.gray\.700\/0\.04\)\] {
    --data-table-cell-bg-hover: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent)
}

.\[--data-table-focus-ring-color\:var\(--ceramic-brand\)\] {
    --data-table-focus-ring-color: var(--ceramic-brand)
}

.\[--menu-icon-hover-color\:theme\(colors\.ceramic\.negative\)\] {
    --menu-icon-hover-color: color-mix(in srgb, var(--ceramic-negative) 100%, transparent)
}

.\[--menu-icon-hover-color\:theme\(colors\.ceramic\.primary\)\] {
    --menu-icon-hover-color: color-mix(in srgb, var(--ceramic-primary) 100%, transparent)
}

.\[--menu-icon-hover-color\:theme\(colors\.ceramic\.purple\.800\)\] {
    --menu-icon-hover-color: color-mix(in srgb, var(--ceramic-purple-800) 100%, transparent)
}

.before\:outline-ceramic-focus:before {
    content: var(--tw-content);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.focus-within\:bg-ceramic-gray-700\/4:focus-within {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent)
}

.border-ceramic-brand:hover {
    border-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
    box-shadow: 0 0 20px 3px color-mix(in srgb, var(--ceramic-brand) 35%, transparent);
}

.border-ceramic-brand-hover {
    border-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
    box-shadow: 0 0 20px 3px color-mix(in srgb, var(--ceramic-brand) 35%, transparent);
}

.focus-visible\:bg-ceramic-dimmed:focus-visible {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.focus-visible\:bg-ceramic-gray-700\/4:focus-visible {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent)
}

.focus-visible\:bg-ceramic-gray-700\/8:focus-visible {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent)
}

.focus-visible\:text-ceramic-brand:focus-visible {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.focus-visible\:text-ceramic-primary:focus-visible {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.focus-visible\:text-ceramic-purple:focus-visible {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.focus-visible\:ring-ceramic-brand:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.focus-visible\:ring-ceramic-gray-200:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.focus-visible\:outline-ceramic-focus:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.focus-visible\:outline-ceramic-focus-\[-0\.0625rem\]:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -.0625rem;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.focus-visible\:outline-ceramic-focus-\[-3px\]:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -3px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.focus-visible\:outline-ceramic-focus-\[-8px\]:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -8px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.focus-visible\:after\:ring-ceramic-gray-200:focus-visible:after {
    content: var(--tw-content);
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.focus-visible\:after\:outline-ceramic-focus-0:focus-visible:after {
    content: var(--tw-content);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 0;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.group:focus-within .group-focus-within\:text-ceramic-primary {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.group:focus-visible .group-focus-visible\:outline-ceramic-focus {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.peer\/radio:focus-visible ~ .peer-focus-visible\/radio\:outline-ceramic-focus-\[3px\] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 3px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.has-\[\[data-slot\=input\]\[data-focused\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_0_0_3px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.04\)\]:has([data-slot=input][data-focused]:not(:-moz-read-only)) {
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.has-\[\[data-slot\=input\]\[data-focused\]\:not\(\:read-only\)\]\:shadow-\[0_0_0_3px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.04\)\]:has([data-slot=input][data-focused]:not(:read-only)) {
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]:has([data-slot=input][data-focused][data-focus-visible]:not(:-moz-read-only)) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]:has([data-slot=input][data-focused][data-focus-visible]:not(:read-only)) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.has-\[\[data-slot\=input\]\[data-hovered\]\:not\(\:-moz-read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]:has([data-slot=input][data-hovered]:not(:-moz-read-only):not([data-focused]):not([data-disabled]):not([data-invalid])) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.has-\[\[data-slot\=input\]\[data-hovered\]\:not\(\:read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]:has([data-slot=input][data-hovered]:not(:read-only):not([data-focused]):not([data-disabled]):not([data-invalid])) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]:has([data-slot=input][data-invalid]:not(:-moz-read-only)) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]:has([data-slot=input][data-invalid]:not(:read-only)) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:ring-ceramic-brand:has([data-slot=input][data-focused][data-focus-visible]:not(:-moz-read-only)) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:ring-ceramic-brand:has([data-slot=input][data-focused][data-focus-visible]:not(:read-only)) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!ring-ceramic-negative:has([data-slot=input][data-invalid]:not(:-moz-read-only)) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:read-only\)\]\:\!ring-ceramic-negative:has([data-slot=input][data-invalid]:not(:read-only)) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.has-\[\*\:focus-visible\]\:outline-ceramic-focus:has(:focus-visible) {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.focus-within\:has-\[a\:focus-visible\]\:bg-ceramic-gray-700\/4:has(a:focus-visible):focus-within {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent)
}

.data-\[focused\]\:bg-ceramic-gray-100[data-focused] {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.data-\[focused\]\:bg-ceramic-gray-800\/5[data-focused] {
    background-color: color-mix(in srgb, var(--ceramic-gray-800) 5%, transparent)
}

.data-\[hovered\]\:bg-ceramic-gray-100[data-hovered] {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.data-\[hovered\]\:bg-ceramic-gray-50[data-hovered] {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.data-\[hovered\]\:bg-ceramic-gray-800\/5[data-hovered] {
    background-color: color-mix(in srgb, var(--ceramic-gray-800) 5%, transparent)
}

.data-\[focused\]\:text-ceramic-primary[data-focused],
.data-\[hovered\]\:text-ceramic-primary[data-hovered],
.data-\[selected\]\:text-ceramic-primary[data-selected] {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.data-\[focused\]\:ring-ceramic-gray-200[data-focused] {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.data-\[focus-visible\]\:-outline-ceramic-focus-2[data-focus-visible] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.data-\[focus-visible\]\:outline-ceramic-focus[data-focus-visible] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.data-\[focus-visible\]\:outline-ceramic-focus-\[-3px\][data-focus-visible] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -3px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.data-\[focus-visible\]\:outline-ceramic-focus-\[0\][data-focus-visible] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 0;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.data-\[focus-visible\]\:outline-ceramic-focus-\[3px\][data-focus-visible] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 3px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.data-\[hovered\]\:ceramic-icon-stroke-secondary[data-hovered] {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-secondary) 100%, transparent)
}

.after\:data-\[focus-visible\]\:outline-ceramic-focus[data-focus-visible]:after {
    content: var(--tw-content);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.group\/checkbox[data-hovered] .group-data-\[hovered\]\/checkbox\:bg-ceramic-gray-100 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/segment-bar-item[data-hovered] .group-data-\[hovered\]\/segment-bar-item\:bg-ceramic-gray-1000 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1000) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/switch[data-hovered] .group-data-\[hovered\]\/switch\:bg-ceramic-gray-400 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-400) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/checkbox[data-invalid] .group-data-\[invalid\]\/checkbox\:bg-ceramic-red-100 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/checkbox[data-invalid][data-hovered] .group-data-\[invalid\]\/checkbox\:group-data-\[hovered\]\/checkbox\:bg-ceramic-red-200 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/switch[data-selected][data-hovered] .group-data-\[selected\]\/switch\:group-data-\[hovered\]\/switch\:bg-ceramic-purple-800 {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-800) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/listbox-item[data-focused] .group-data-\[focused\]\/listbox-item\:text-ceramic-primary {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.group\/tab[data-hovered=true] .group-data-\[hovered\=true\]\/tab\:text-ceramic-primary,
.group\/tab[data-selected=true] .group-data-\[selected\=true\]\/tab\:text-ceramic-primary {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.group\/checkbox[data-hovered] .group-data-\[hovered\]\/checkbox\:\!shadow-\[inset_0_1px_1px_theme\(colors\.ceramic\.white\/\.08\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_\#6038FF\] {
    --tw-shadow: inset 0 1px 1px color-mix(in srgb, var(--ceramic-white) 8%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px #6038FF;
    --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.group\/checkbox[data-hovered] .group-data-\[hovered\]\/checkbox\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_0_0_1px_rgba\(25\2c 28\2c 33\2c \.28\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\] {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 0 0 1px rgba(25, 28, 33, .28), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.group\/checkbox[data-invalid] .group-data-\[invalid\]\/checkbox\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_0_0_1px_theme\(colors\.ceramic\.negative\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\] {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-negative) 100%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.group\/switch[data-selected][data-hovered] .group-data-\[selected\]\/switch\:group-data-\[hovered\]\/switch\:ring-ceramic-purple-800 {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-800) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.group\/checkbox[data-focus-visible] .group-data-\[focus-visible\]\/checkbox\:outline-ceramic-focus-\[3px\],
.group\/switch[data-focus-visible] .group-data-\[focus-visible\]\/switch\:outline-ceramic-focus-\[3px\] {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 3px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.group\/tag-remove[data-focus-visible] .group-data-\[focus-visible\]\/tag-remove\:outline-ceramic-focus,
.group\/tag[data-focus-visible] .group-data-\[focus-visible\]\/tag\:outline-ceramic-focus {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.rac-hover-active\:bg-ceramic-gray-50:is([data-hovered],
[data-pressed]) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:text-ceramic-blue-600:is([data-hovered],
[data-pressed]) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-blue-600) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:text-ceramic-green-600:is([data-hovered],
[data-pressed]) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-green-600) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:text-ceramic-orange-600:is([data-hovered],
[data-pressed]) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-orange-600) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:text-ceramic-primary:is([data-hovered],
[data-pressed]) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:text-ceramic-purple-800:is([data-hovered],
[data-pressed]) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-purple-800) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:text-ceramic-red-800:is([data-hovered],
[data-pressed]) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-red-800) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:ceramic-icon-fill-gray\/24:is([data-hovered],
[data-pressed]) {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.rac-hover-active\:ceramic-icon-fill-white\/16:is([data-hovered],
[data-pressed]) {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:hover\:bg-ceramic-gray-1100:is(.dark *):hover {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.filter-box:hover {
    border-color: var(--ceramic-brand);
}

.hover\:border-ceramic-brand:hover {
    border-color: var(--ceramic-brand);
}

.hover\:dark\:ring-ceramic-gray-1000:is(.dark *):hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(
            in srgb,
            var(--ceramic-gray-1000) calc(var(--tw-ring-opacity, 1) * 100%),
            transparent
    );
}

.dark\:\[--menu-icon-hover-color\:theme\(colors\.ceramic\.purple\.700\)\]:is(.dark *) {
    --menu-icon-hover-color: color-mix(in srgb, var(--ceramic-purple-700) 100%, transparent)
}

.dark\:focus-visible\:ring-ceramic-gray-700:focus-visible:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:focus-visible\:after\:ring-ceramic-gray-700:focus-visible:is(.dark *):after {
    content: var(--tw-content);
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_0_0_3px_rgba\(61\2c 61\2c 74\2c \.4\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.16\)\]:has([data-slot=input][data-focused]:not(:-moz-read-only)):is(.dark *) {
    --tw-shadow: 0 0 0 3px rgba(61, 61, 74, .4), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\:not\(\:read-only\)\]\:shadow-\[0_0_0_3px_rgba\(61\2c 61\2c 74\2c \.4\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.16\)\]:has([data-slot=input][data-focused]:not(:read-only)):is(.dark *) {
    --tw-shadow: 0 0 0 3px rgba(61, 61, 74, .4), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\]:has([data-slot=input][data-focused][data-focus-visible]:not(:-moz-read-only)):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\]:has([data-slot=input][data-focused][data-focus-visible]:not(:read-only)):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:has-\[\[data-slot\=input\]\[data-hovered\]\:not\(\:-moz-read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.32\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\]:has([data-slot=input][data-hovered]:not(:-moz-read-only):not([data-focused]):not([data-disabled]):not([data-invalid])):is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:has-\[\[data-slot\=input\]\[data-hovered\]\:not\(\:read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.32\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\]:has([data-slot=input][data-hovered]:not(:read-only):not([data-focused]):not([data-disabled]):not([data-invalid])):is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\]:has([data-slot=input][data-invalid]:not(:-moz-read-only)):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.dark\:has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\]:has([data-slot=input][data-invalid]:not(:read-only)):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\:not\(\:-moz-read-only\)\]\:ring-ceramic-black\/88:has([data-slot=input][data-focused]:not(:-moz-read-only)):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 88%, transparent)
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\:not\(\:read-only\)\]\:ring-ceramic-black\/88:has([data-slot=input][data-focused]:not(:read-only)):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 88%, transparent)
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:ring-ceramic-brand:has([data-slot=input][data-focused][data-focus-visible]:not(:-moz-read-only)):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:has-\[\[data-slot\=input\]\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:ring-ceramic-brand:has([data-slot=input][data-focused][data-focus-visible]:not(:read-only)):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:has-\[\[data-slot\=input\]\[data-hovered\]\:not\(\:-moz-read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:ring-ceramic-gray\/48:has([data-slot=input][data-hovered]:not(:-moz-read-only):not([data-focused]):not([data-disabled]):not([data-invalid])):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent)
}

.dark\:has-\[\[data-slot\=input\]\[data-hovered\]\:not\(\:read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:ring-ceramic-gray\/48:has([data-slot=input][data-hovered]:not(:read-only):not([data-focused]):not([data-disabled]):not([data-invalid])):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent)
}

.dark\:has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!ring-ceramic-negative:has([data-slot=input][data-invalid]:not(:-moz-read-only)):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.dark\:has-\[\[data-slot\=input\]\[data-invalid\]\:not\(\:read-only\)\]\:\!ring-ceramic-negative:has([data-slot=input][data-invalid]:not(:read-only)):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.dark\:data-\[focused\]\:bg-ceramic-gray-1300[data-focused]:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:data-\[hovered\]\:bg-ceramic-gray-1200[data-hovered]:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:data-\[hovered\]\:bg-ceramic-gray-1300[data-hovered]:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:data-\[focused\]\:ring-ceramic-black\/12[data-focused]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 12%, transparent)
}

.group\/checkbox[data-hovered] .dark\:group-data-\[hovered\]\/checkbox\:bg-ceramic-gray-1100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/segment-bar-item[data-hovered] .dark\:group-data-\[hovered\]\/segment-bar-item\:bg-ceramic-gray-100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/switch[data-hovered] .dark\:group-data-\[hovered\]\/switch\:bg-ceramic-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-900) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/checkbox[data-invalid] .dark\:group-data-\[invalid\]\/checkbox\:bg-ceramic-red-1100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/checkbox[data-invalid][data-hovered] .dark\:group-data-\[invalid\]\/checkbox\:group-data-\[hovered\]\/checkbox\:bg-ceramic-red-1000:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-1000) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/switch[data-selected][data-hovered] .dark\:group-data-\[selected\]\/switch\:group-data-\[hovered\]\/switch\:bg-ceramic-purple-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-600) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/checkbox[data-hovered] .dark\:group-data-\[hovered\]\/checkbox\:\!shadow-\[inset_0_1px_1px_theme\(colors\.ceramic\.white\/0\)\2c 0_-1px_0_theme\(colors\.ceramic\.white\/\.2\)\2c 0_0_0_1px_\#775cff\2c 0_0_0_2px_theme\(colors\.ceramic\.black\/\.16\)\]:is(.dark *) {
    --tw-shadow: inset 0 1px 1px color-mix(in srgb, var(--ceramic-white) 0%, transparent), 0 -1px 0 color-mix(in srgb, var(--ceramic-white) 20%, transparent), 0 0 0 1px #775cff, 0 0 0 2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color), 0 -1px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.group\/checkbox[data-hovered] .dark\:group-data-\[hovered\]\/checkbox\:shadow-\[0_-1px_1px_theme\(colors\.ceramic\.white\/\.12\)\2c 0_0px_0px_1px_\#383842\2c 0_0_0_2px_theme\(colors\.ceramic\.black\/\.16\)\]:is(.dark *) {
    --tw-shadow: 0 -1px 1px color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 0px 0px 1px #383842, 0 0 0 2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 -1px 1px var(--tw-shadow-color), 0 0px 0px 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.group\/checkbox[data-invalid] .dark\:group-data-\[invalid\]\/checkbox\:shadow-\[0_-1px_1px_theme\(colors\.ceramic\.white\/\.12\)\2c 0_0_0_1px_theme\(colors\.ceramic\.negative\)\2c 0_0_0_2px_theme\(colors\.ceramic\.black\/\.16\)\]:is(.dark *) {
    --tw-shadow: 0 -1px 1px color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-negative) 100%, transparent), 0 0 0 2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 -1px 1px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.group\/switch[data-selected][data-hovered] .dark\:group-data-\[selected\]\/switch\:group-data-\[hovered\]\/switch\:ring-ceramic-purple-500:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-500) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.group\/switch[data-hovered] .group-data-\[hovered\]\/switch\:dark\:ring-ceramic-white\/24:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 24%, transparent)
}

.dark\:rac-hover-active\:bg-ceramic-brand:is([data-hovered],
[data-pressed]):is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-bg-opacity, 1) * 90%), transparent)
}

.dark\:rac-hover-active\:bg-ceramic-gray-1100:is([data-hovered],
[data-pressed]):is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:rac-hover-active\:text-ceramic-blue-700:is([data-hovered],
[data-pressed]):is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-blue-700) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.rac-hover-active\:before\:opacity-0:is([data-hovered],
[data-pressed]):before {
    content: var(--tw-content);
    opacity: 0
}

.hover\:text-ceramic-white:hover {
    color: var(--ceramic-white);
}

.hover\:ceramic-icon-fill-white\/12:hover {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 12%, transparent);
}

.hover\:ceramic-icon-fill-white\/16:hover {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 16%, transparent);
}

.hover\:before\:from-ceramic-white\/20:hover::before {
    background-image: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--ceramic-white) 20%, transparent),
            transparent
    );
}

.hover\:before\:to-transparent:hover::before {
    background-image: linear-gradient(to bottom, transparent, transparent);
}

.hover\:shadow-ceramic-orange:hover {
    box-shadow: inset 0 1px 0.5px 0 color-mix(in srgb, var(--ceramic-white) 5%, transparent),
    0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 6%, transparent),
    0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ceramic-black) 10%, transparent);
}

.dark\:hover\:bg-ceramic-orange-700:is(.dark *:hover) {
    background-color: var(--ceramic-orange-700);
}

.dark\:hover\:text-ceramic-white:is(.dark *:hover) {
    color: var(--ceramic-white);
}

.dark\:hover\:ceramic-icon-fill-white\/12:is(.dark *:hover) {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 12%, transparent);
}

.rac-hover-active\:bg-ceramic-brand[data-rac-hover-active="true"] {
    background-color: var(--ceramic-brand);
}

.rac-hover-active\:text-ceramic-white[data-rac-hover-active="true"] {
    color: var(--ceramic-white);
}

.rac-hover-active\:ceramic-icon-fill-white\/16[data-rac-hover-active="true"] {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 16%, transparent);
}

.data-\[focus-visible\]\:bg-ceramic-brand[data-focus-visible] {
    background-color: var(--ceramic-brand);
}

.data-\[focus-visible\]\:text-ceramic-white[data-focus-visible] {
    color: var(--ceramic-white);
}

.data-\[focus-visible\]\:ceramic-icon-fill-white\/16[data-focus-visible] {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 16%, transparent);
}

.dark\:hover\:bg-ceramic-gray-1100:is(.dark *:hover) {
    background-color: var(--ceramic-gray-1100);
}

.hover\:ceramic-icon-fill-gray\/16:hover {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-gray-700) 16%, transparent);
}

.hover\:ceramic-icon-fill-gray\/24:hover {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent);
}

.group:is([data-hovered],
[data-pressed]) .group-rac-hover-active\/button\:drop-shadow-none {
    --tw-drop-shadow: drop-shadow(0 0 #0000);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.dark\:rac-hover-active\:text-ceramic-green-700:is([data-hovered],
[data-pressed]):is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-green-700) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:rac-hover-active\:text-ceramic-orange-700:is([data-hovered],
[data-pressed]):is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-orange-700) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.hover\:shadow-button-primary:hover {
    box-shadow: inset 0 1px 1px 0 rgb(255 255 255 / 0.12),
    0 2px 2px -1px rgb(0 0 0 / 0.16),
    0 4px 4px -2px rgb(0 0 0 / 0.24),
    0 0 0 1px var(--ceramic-brand);
}

.hover\:shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.brand\)\]:hover {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent),
    0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent),
    0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color),
    0 2px 2px -1px var(--tw-shadow-color),
    0 4px 4px -2px var(--tw-shadow-color),
    0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

.dark .dark\:hover\:shadow-button-primary-dark:hover {
    box-shadow: inset 0 1px 0.5px 0 rgb(255 255 255 / 0.16),
    0 2px 2px -1px rgb(0 0 0 / 0.16),
    0 4px 4px -2px rgb(0 0 0 / 0.24),
    0 0 0 1px rgb(0 0 0 / 0.12);
}

.group:hover .group-hover\:bg-ceramic-brand {
    background-color: var(--ceramic-brand);
}

.group:hover .group-hover\:text-ceramic-white {
    color: var(--ceramic-white);
}

.group:hover .group-hover\:ceramic-icon-fill-white\/12 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 12%, transparent);
}

.group:hover .group-hover\:before\:from-ceramic-white\/20::before {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 20%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group:hover .group-hover\:before\:from-0\%::before {
    --tw-gradient-from-position: 0%;
}

.group:hover .group-hover\:before\:to-transparent::before {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.group:hover .group-hover\:shadow-\[inset_0_1px_1px_0_theme\(colors\.ceramic\.white\/\.12\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.brand\)\] {
    --tw-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent),
    0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent),
    0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
    --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color),
    0 2px 2px -1px var(--tw-shadow-color),
    0 4px 4px -2px var(--tw-shadow-color),
    0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-white {
    color: #fff;
}

.dark .group:hover .dark\:group-hover\:before\:to-transparent::before {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.dark .group:hover .dark\:group-hover\:shadow-\[inset_0_1px_0\.5px_0_theme\(colors\.ceramic\.white\/\.16\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.black\/\.12\)\] {
    --tw-shadow: inset 0 1px 0.5px 0 color-mix(in srgb, var(--ceramic-white) 16%, transparent),
    0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent),
    0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ceramic-black) 12%, transparent);
    --tw-shadow-colored: inset 0 1px 0.5px 0 var(--tw-shadow-color),
    0 2px 2px -1px var(--tw-shadow-color),
    0 4px 4px -2px var(--tw-shadow-color),
    0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

.dark .group:hover .dark\:group-hover\:bg-ceramic-orange-700 {
    background-color: var(--ceramic-orange-700);
}

.dark .group:hover .dark\:group-hover\:text-ceramic-white {
    color: var(--ceramic-white);
}

.dark .group:hover .dark\:group-hover\:text-white {
    color: #fff;
}

.dark\:rac-hover-active\:text-ceramic-primary:is([data-hovered],
[data-pressed]):is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:rac-hover-active\:text-ceramic-purple-700:is([data-hovered],
[data-pressed]):is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:rac-hover-active\:ceramic-icon-fill-white\/16:is([data-hovered],
[data-pressed]):is(.dark *) {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:rac-hover-active\:ceramic-icon-stroke-\[currentColor\]:is([data-hovered],
[data-pressed]):is(.dark *) {
    --_ceramic-icon-stroke: currentColor
}

@media (hover: hover) and (pointer: fine) {
    @media (min-width: 640px) {
        .group:hover .group-hover\:sm\:stroke-ceramic-brand {
            stroke: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
        }
    }
}

.\[\&_a\:hover\]\:text-ceramic-primary a:hover {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.\[\&hover\:not\(\[data-readonly\]\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]hover:not([data-readonly]):not([data-focused]):not([data-disabled]):not([data-invalid]) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&hover\:not\(\[data-readonly\]\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.32\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\]hover:not([data-readonly]):not([data-focused]):not([data-disabled]):not([data-invalid]):is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&hover\:not\(\[data-readonly\]\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:ring-ceramic-gray\/48hover:not([data-readonly]):not([data-focused]):not([data-disabled]):not([data-invalid]):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent)
}

.\[\&\[data-focused\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_0_0_3px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.04\)\][data-focused]:not(:-moz-read-only) {
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-focused\]\:not\(\:read-only\)\]\:shadow-\[0_0_0_3px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.04\)\][data-focused]:not(:read-only) {
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-focused\]\:not\(\:-moz-read-only\)\]\:ring-1[data-focused]:not(:-moz-read-only) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.\[\&\[data-focused\]\:not\(\:read-only\)\]\:ring-1[data-focused]:not(:read-only) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.\[\&\[data-focused\]\:not\(\:-moz-read-only\)\]\:ring-\[\#191C21\]\/12[data-focused]:not(:-moz-read-only) {
    --tw-ring-color: rgb(25 28 33/0.12)
}

.\[\&\[data-focused\]\:not\(\:read-only\)\]\:ring-\[\#191C21\]\/12[data-focused]:not(:read-only) {
    --tw-ring-color: rgb(25 28 33/0.12)
}

.dark\:\[\&\[data-focused\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_0_0_3px_rgba\(61\2c 61\2c 74\2c \.4\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.16\)\][data-focused]:not(:-moz-read-only):is(.dark *) {
    --tw-shadow: 0 0 0 3px rgba(61, 61, 74, .4), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-focused\]\:not\(\:read-only\)\]\:shadow-\[0_0_0_3px_rgba\(61\2c 61\2c 74\2c \.4\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.16\)\][data-focused]:not(:read-only):is(.dark *) {
    --tw-shadow: 0 0 0 3px rgba(61, 61, 74, .4), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-focused\]\:not\(\:-moz-read-only\)\]\:ring-ceramic-black\/88[data-focused]:not(:-moz-read-only):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 88%, transparent)
}

.dark\:\[\&\[data-focused\]\:not\(\:read-only\)\]\:ring-ceramic-black\/88[data-focused]:not(:read-only):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 88%, transparent)
}

.\[\&\[data-focused\]\:not\(\[data-readonly\]\)\]\:shadow-\[0_0_0_3px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.04\)\][data-focused]:not([data-readonly]) {
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 4%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-focused\]\:not\(\[data-readonly\]\)\]\:ring-1[data-focused]:not([data-readonly]) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.\[\&\[data-focused\]\:not\(\[data-readonly\]\)\]\:ring-\[\#191C21\]\/12[data-focused]:not([data-readonly]) {
    --tw-ring-color: rgb(25 28 33/0.12)
}

.dark\:\[\&\[data-focused\]\:not\(\[data-readonly\]\)\]\:shadow-\[0_0_0_3px_rgba\(61\2c 61\2c 74\2c \.4\)\2c 0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.08\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.16\)\][data-focused]:not([data-readonly]):is(.dark *) {
    --tw-shadow: 0 0 0 3px rgba(61, 61, 74, .4), 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-focused\]\:not\(\[data-readonly\]\)\]\:ring-ceramic-black\/88[data-focused]:not([data-readonly]):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 88%, transparent)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-focused][data-focus-visible]:not(:-moz-read-only) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-focused][data-focus-visible]:not(:read-only) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:ring-2[data-focused][data-focus-visible]:not(:-moz-read-only) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:ring-2[data-focused][data-focus-visible]:not(:read-only) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:ring-ceramic-brand[data-focused][data-focus-visible]:not(:-moz-read-only) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:ring-ceramic-brand[data-focused][data-focus-visible]:not(:read-only) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-focused][data-focus-visible]:not(:-moz-read-only):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-focused][data-focus-visible]:not(:read-only):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:-moz-read-only\)\]\:ring-ceramic-brand[data-focused][data-focus-visible]:not(:-moz-read-only):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:\[\&\[data-focused\]\[data-focus-visible\]\:not\(\:read-only\)\]\:ring-ceramic-brand[data-focused][data-focus-visible]:not(:read-only):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\[data-readonly\]\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-focused][data-focus-visible]:not([data-readonly]) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\[data-readonly\]\)\]\:ring-2[data-focused][data-focus-visible]:not([data-readonly]) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.\[\&\[data-focused\]\[data-focus-visible\]\:not\(\[data-readonly\]\)\]\:ring-ceramic-brand[data-focused][data-focus-visible]:not([data-readonly]) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:\[\&\[data-focused\]\[data-focus-visible\]\:not\(\[data-readonly\]\)\]\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-focused][data-focus-visible]:not([data-readonly]):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-focused\]\[data-focus-visible\]\:not\(\[data-readonly\]\)\]\:ring-ceramic-brand[data-focused][data-focus-visible]:not([data-readonly]):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.\[\&\[data-hovered\]\:not\(\:-moz-read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-hovered]:not(:-moz-read-only):not([data-focused]):not([data-disabled]):not([data-invalid]) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-hovered\]\:not\(\:read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.1\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-hovered]:not(:read-only):not([data-focused]):not([data-disabled]):not([data-invalid]) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 10%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.\[\&\[data-hovered\]\:not\(\:-moz-read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:ring-\[\#191c21\]\/\[\.24\][data-hovered]:not(:-moz-read-only):not([data-focused]):not([data-disabled]):not([data-invalid]) {
    --tw-ring-color: rgb(25 28 33/.24)
}

.\[\&\[data-hovered\]\:not\(\:read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:ring-\[\#191c21\]\/\[\.24\][data-hovered]:not(:read-only):not([data-focused]):not([data-disabled]):not([data-invalid]) {
    --tw-ring-color: rgb(25 28 33/.24)
}

.dark\:\[\&\[data-hovered\]\:not\(\:-moz-read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.32\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-hovered]:not(:-moz-read-only):not([data-focused]):not([data-disabled]):not([data-invalid]):is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-hovered\]\:not\(\:read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.32\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-hovered]:not(:read-only):not([data-focused]):not([data-disabled]):not([data-invalid]):is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:\[\&\[data-hovered\]\:not\(\:-moz-read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:ring-ceramic-gray\/48[data-hovered]:not(:-moz-read-only):not([data-focused]):not([data-disabled]):not([data-invalid]):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent)
}

.dark\:\[\&\[data-hovered\]\:not\(\:read-only\)\:not\(\[data-focused\]\)\:not\(\[data-disabled\]\)\:not\(\[data-invalid\]\)\]\:ring-ceramic-gray\/48[data-hovered]:not(:read-only):not([data-focused]):not([data-disabled]):not([data-invalid]):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent)
}

.\[\&\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-invalid]:not(:-moz-read-only) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.\[\&\[data-invalid\]\:not\(\:read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-invalid]:not(:read-only) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.\[\&\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!ring-2[data-invalid]:not(:-moz-read-only) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important
}

.\[\&\[data-invalid\]\:not\(\:read-only\)\]\:\!ring-2[data-invalid]:not(:read-only) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important
}

.\[\&\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!ring-ceramic-negative[data-invalid]:not(:-moz-read-only) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.\[\&\[data-invalid\]\:not\(\:read-only\)\]\:\!ring-ceramic-negative[data-invalid]:not(:read-only) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.dark\:\[\&\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-invalid]:not(:-moz-read-only):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.dark\:\[\&\[data-invalid\]\:not\(\:read-only\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-invalid]:not(:read-only):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.dark\:\[\&\[data-invalid\]\:not\(\:-moz-read-only\)\]\:\!ring-ceramic-negative[data-invalid]:not(:-moz-read-only):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.dark\:\[\&\[data-invalid\]\:not\(\:read-only\)\]\:\!ring-ceramic-negative[data-invalid]:not(:read-only):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.\[\&\[data-invalid\]\:not\(\[data-readonly\]\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\][data-invalid]:not([data-readonly]) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.\[\&\[data-invalid\]\:not\(\[data-readonly\]\)\]\:\!ring-2[data-invalid]:not([data-readonly]) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important
}

.\[\&\[data-invalid\]\:not\(\[data-readonly\]\)\]\:\!ring-ceramic-negative[data-invalid]:not([data-readonly]) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.dark\:\[\&\[data-invalid\]\:not\(\[data-readonly\]\)\]\:\!shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/\.2\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.32\)\][data-invalid]:not([data-readonly]):is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.dark\:\[\&\[data-invalid\]\:not\(\[data-readonly\]\)\]\:\!ring-ceramic-negative[data-invalid]:not([data-readonly]):is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-negative) calc(var(--tw-ring-opacity, 1) * 100%), transparent) !important
}

.hover\:border-\[var\(--ceramic-brand\)\]:hover {
    border-color: var(--ceramic-brand);
}

.dark\:hover\:border-\[var\(--ceramic-brand\)\]:hover:is(.dark *) {
    border-color: var(--ceramic-brand);
}

.focus\:ring-ceramic-brand:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

.hover\:bg-ceramic-brand\/20:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.hover\:bg-ceramic-brand\/90:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 90%, transparent);
}

.hover\:bg-ceramic-gray-200:hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-200) 100%, transparent);
}

.hover\:bg-ceramic-gray-50\/50:hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-50) 50%, transparent);
}

.hover\:text-ceramic-brand-hover:hover {
    color: color-mix(in srgb, var(--ceramic-brand) 85%, transparent);
}

.hover\:text-ceramic-gray-700:hover {
    color: color-mix(in srgb, var(--ceramic-gray-700) 100%, transparent);
}

.focus-visible\:bg-ceramic-gray\/4:focus-visible {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent);
}

.focus-visible\:ring-ceramic-gray\/12:focus-visible {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent);
}

.group:hover .group-hover\:ring-ceramic-brand\/20 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.dark\:hover\:bg-ceramic-gray-1500\/30:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 30%, transparent);
}

.dark\:hover\:bg-ceramic-gray\/12:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent);
}

.dark\:hover\:bg-ceramic-green-700:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-green-700) 100%, transparent);
}

.dark\:hover\:text-ceramic-gray-200:is(.dark *):hover {
    color: color-mix(in srgb, var(--ceramic-gray-200) 100%, transparent);
}

.dark\:focus-visible\:bg-ceramic-gray\/12:is(.dark *):focus-visible {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent);
}

.dark\:rac-hover-active\:bg-ceramic-gray-50:is([data-hovered], [data-pressed], :active):is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-50) 100%, transparent);
}

.button-hover-active\:text-ceramic-orange-600:is(:hover, :active, [data-hovered], [data-pressed]) {
    color: color-mix(in srgb, var(--ceramic-orange-600) 100%, transparent);
}

.button-hover-active\:text-ceramic-purple-800:is(:hover, :active, [data-hovered], [data-pressed]) {
    color: color-mix(in srgb, var(--ceramic-purple-800) 100%, transparent);
}

.button-hover-active\:text-ceramic-blue-600:is(:hover, :active, [data-hovered], [data-pressed]) {
    color: color-mix(in srgb, var(--ceramic-blue-600) 100%, transparent);
}

.button-hover-active\:text-ceramic-primary:is(:hover, :active, [data-hovered], [data-pressed]) {
    color: color-mix(in srgb, var(--ceramic-primary) 100%, transparent);
}

.button-hover-active\:bg-ceramic-gray-50:is(:hover, :active, [data-hovered], [data-pressed]) {
    background-color: color-mix(in srgb, var(--ceramic-gray-50) 100%, transparent);
}

.dark\:button-hover-active\:text-ceramic-orange-700:is(:hover, :active, [data-hovered], [data-pressed]):is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-orange-700) 100%, transparent);
}

.dark\:button-hover-active\:text-ceramic-purple-700:is(:hover, :active, [data-hovered], [data-pressed]):is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-purple-700) 100%, transparent);
}

.dark\:button-hover-active\:text-ceramic-blue-700:is(:hover, :active, [data-hovered], [data-pressed]):is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-blue-700) 100%, transparent);
}

.dark\:button-hover-active\:text-ceramic-primary:is(:hover, :active, [data-hovered], [data-pressed]):is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-primary) 100%, transparent);
}

.hover\:bg-ceramic-zinc-900\/50:hover {
    background-color: color-mix(in srgb, var(--ceramic-zinc-900) 50%, transparent);
}

.hover\:border-ceramic-zinc-700:hover {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-zinc-700) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.focus-within\:shadow-ceramic-brand\/3:focus-within {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-brand) 3%, transparent);
    --tw-shadow: var(--tw-shadow-colored);
}

.dark\:focus-within\:shadow-ceramic-brand\/10:focus-within:is(.dark *) {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
    --tw-shadow: var(--tw-shadow-colored);
}

.hover\:bg-ceramic-brand\/\[\.03\]:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 3%, transparent);
}

.dark\:hover\:bg-ceramic-brand\/\[\.04\]:hover:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 4%, transparent);
}

.hover\:text-ceramic-red-500:hover {
    color: color-mix(in srgb, var(--ceramic-red-500) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.hover\:text-ceramic-red-700:hover {
    color: color-mix(in srgb, var(--ceramic-red-700) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.hover\:bg-ceramic-red-500\/10:hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 10%, transparent);
}

.hover\:bg-ceramic-blue-500\/10:hover {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 10%, transparent);
}

.hover\:text-ceramic-blue-500:hover {
    color: color-mix(in srgb, var(--ceramic-blue-500) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.dark\:hover\:bg-ceramic-white\/\[0\.02\]:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-white) calc(0.02 * 100%), transparent);
}

.dark\:hover\:bg-ceramic-zinc-900\/50:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-zinc-900) 50%, transparent);
}

.dark\:hover\:border-ceramic-zinc-700:is(.dark *):hover {
    border-color: var(--ceramic-zinc-700);
}

.hover\:bg-ceramic-brand:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
}

.hover\:bg-ceramic-brand\/10:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
}

.hover\:border-ceramic-brand\/30:hover {
    border-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.hover\:border-ceramic-brand\/40:hover {
    border-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.group:hover .group-hover\:text-ceramic-brand {
    color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
}

.group:hover .group-hover\:bg-ceramic-brand\/10 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
}

.group:hover .group-hover\:ring-ceramic-brand\/30 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.group:hover .group-hover\:ring-ceramic-brand\/40 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.focus\:border-ceramic-brand:focus {
    border-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
}

.focus\:ring-ceramic-brand\/30:focus {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.hover\:bg-ceramic-red-50:hover {
    background-color: var(--ceramic-red-50, #fef5f5);
}

.hover\:bg-ceramic-red-600:hover {
    background-color: var(--ceramic-red-600, #dc2626);
}

.hover\:bg-ceramic-red-700:hover {
    background-color: var(--ceramic-red-700, #b83c3c);
}

.hover\:bg-ceramic-brand\/\[0\.02\]:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 2%, transparent);
}

.hover\:bg-ceramic-main:hover {
    background-color: var(--ceramic-bg-main);
}

.hover\:bg-ceramic-zinc-900:hover {
    background-color: var(--ceramic-zinc-900);
}

.hover\:ring-ceramic-white:hover {
    --tw-ring-color: var(--ceramic-white);
}

.hover\:text-ceramic-brand\/80:hover {
    color: color-mix(in srgb, var(--ceramic-brand) 80%, transparent);
}

.hover\:text-ceramic-orange-600:hover {
    color: var(--ceramic-orange-600);
}

.hover\:text-ceramic-orange-700:hover {
    color: var(--ceramic-orange-700);
}

.focus\:ring-ceramic-red-500\/30:focus {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 30%, transparent);
}

.rac-hover-active\:text-ceramic-green-600[data-hovered], [data-pressed] .rac-hover-active\:text-ceramic-green-600 {
    color: var(--ceramic-green-600);
}

.rac-hover-active\:text-ceramic-purple-800[data-hovered], [data-pressed] .rac-hover-active\:text-ceramic-purple-800 {
    color: var(--ceramic-purple-800);
}

[data-hovered].data-\[hovered\]\:text-ceramic-primary {
    color: var(--ceramic-primary);
}

.dark\:hover\:bg-ceramic-brand\/\[\.04\]:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 4%, transparent);
}

.dark\:hover\:bg-ceramic-red-500\/10:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 10%, transparent);
}

.dark\:hover\:bg-ceramic-zinc-800:is(.dark *):hover {
    background-color: var(--ceramic-zinc-800);
}

.dark\:hover\:bg-ceramic-zinc-900:is(.dark *):hover {
    background-color: var(--ceramic-zinc-900);
}

.dark\:hover\:text-ceramic-orange-700:is(.dark *):hover {
    color: var(--ceramic-orange-700);
}

.dark\:rac-hover-active\:bg-ceramic-brand:is(.dark *)[data-hovered], .dark\:rac-hover-active\:bg-ceramic-brand:is(.dark *)[data-pressed] {
    background-color: var(--ceramic-brand);
}

.dark\:rac-hover-active\:text-ceramic-green-700:is(.dark *)[data-hovered], .dark\:rac-hover-active\:text-ceramic-green-700:is(.dark *)[data-pressed] {
    color: var(--ceramic-green-700);
}

.dark\:rac-hover-active\:text-ceramic-purple-700:is(.dark *)[data-hovered], .dark\:rac-hover-active\:text-ceramic-purple-700:is(.dark *)[data-pressed] {
    color: var(--ceramic-purple-700);
}

/* ─── 13. DARK MODE OVERRIDES ─── */

:where(.\[\:where\(\&\)\]\:dark\:ring-ceramic-white\/4:is(.dark *)) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 4%, transparent);
}

.after\:dark\:bg-ceramic-gray-1300:is(.dark *):after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.before\:dark\:bg-ceramic-gray-1400:is(.dark *):before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1400) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark .border-ceramic-gray {
    border-color: color-mix(in srgb, var(--ceramic-gray-1400) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.dark .dark\:placeholder\:text-ceramic-gray-700::placeholder {
    color: var(--ceramic-gray-800);
}

.dark .text-\[var\(--ceramic-purple-400\)\]\/80 {
    color: color-mix(in srgb, var(--ceramic-purple-400) 80%, transparent);
}

.dark\:-moz-read-only\:bg-ceramic-white\/8:-moz-read-only:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent)
}

.dark\:-moz-read-only\:ring-ceramic-white\/16:-moz-read-only:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:\!bg-ceramic-orange-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-orange-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important
}

.dark\:\!bg-ceramic-purple-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important
}

.dark\:\!shadow-\[inset_0_1px_1px_theme\(colors\.ceramic\.white\/0\)\2c 0_-1px_0_theme\(colors\.ceramic\.white\/\.32\)\2c 0_0_0_1px_\#775cff\2c 0_0_0_2px_theme\(colors\.ceramic\.black\/\.16\)\]:is(.dark *) {
    --tw-shadow: inset 0 1px 1px color-mix(in srgb, var(--ceramic-white) 0%, transparent), 0 -1px 0 color-mix(in srgb, var(--ceramic-white) 32%, transparent), 0 0 0 1px #775cff, 0 0 0 2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color), 0 -1px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

.dark\:\[\&\>td\]\:border-b-ceramic-white\/7 > td:is(.dark *) {
    border-bottom-color: color-mix(in srgb, var(--ceramic-white) 7%, transparent)
}

.dark\:\[\&\>tr\]\:border-ceramic-white\/7 > tr:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 7%, transparent)
}

.dark\:\[background-image\:linear-gradient\(to_bottom\2c transparent_calc\(56px-1px\)\2c theme\(colors\.ceramic\.gray\.700\)\)\2c linear-gradient\(to_right\2c transparent_calc\(56px-1px\)\2c theme\(colors\.ceramic\.gray\.700\)\)\]:is(.dark *) {
    background-image: linear-gradient(to bottom, transparent calc(56px - 1px), color-mix(in srgb, var(--ceramic-gray-700) 100%, transparent)), linear-gradient(to right, transparent calc(56px - 1px), color-mix(in srgb, var(--ceramic-gray-700) 100%, transparent))
}

.dark\:\[background-image\:linear-gradient\(to_right\2c theme\(colors\.ceramic\.gray\.700\/0\.24\)\2c theme\(colors\.ceramic\.gray\.700\/0\.24\)\)\]:is(.dark *) {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent), color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent))
}

.dark\:\[background-image\:repeating-linear-gradient\(-45deg\2c theme\(colors\.ceramic\.gray\.700\/\.02\)\2c theme\(colors\.ceramic\.gray\.700\/\.02\)_6px\2c transparent_6px\2c transparent_12px\)\]:is(.dark *) {
    background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ceramic-gray-700) 2%, transparent), color-mix(in srgb, var(--ceramic-gray-700) 2%, transparent) 6px, transparent 6px, transparent 12px)
}

.dark\:after\:bg-ceramic-gray-1400:is(.dark *):after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1400) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:after\:ring-ceramic-white\/4:is(.dark *):after {
    content: var(--tw-content);
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 4%, transparent)
}

.dark\:after\:ring-ceramic-white\/8:is(.dark *):after {
    content: var(--tw-content);
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent)
}

.dark\:after\:shadow-\[0_0_8px_-2px_theme\(colors\.ceramic\.white\/0\.10\)_inset\2c 0_3px_1px_-2px_theme\(colors\.ceramic\.white\/0\.08\)_inset\2c 0_4px_4px_-3px_theme\(colors\.ceramic\.black\/0\.16\)\2c 0px_0px_0px_1px_theme\(colors\.ceramic\.black\/0\.36\)\]:is(.dark *):after {
    content: var(--tw-content);
    --tw-shadow: 0 0 8px -2px color-mix(in srgb, var(--ceramic-white) 10%, transparent) inset, 0 3px 1px -2px color-mix(in srgb, var(--ceramic-white) 8%, transparent) inset, 0 4px 4px -3px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0px 0px 0px 1px color-mix(in srgb, var(--ceramic-black) 36%, transparent);
    --tw-shadow-colored: inset 0 0 8px -2px var(--tw-shadow-color), inset 0 3px 1px -2px var(--tw-shadow-color), 0 4px 4px -3px var(--tw-shadow-color), 0px 0px 0px 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:aria-\[current\=page\]\:before\:bg-ceramic-gray-1100[aria-current=page]:is(.dark *):before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:before\:\[background\:linear-gradient\(theme\(colors\.ceramic\.gray\.1500\)\2c theme\(colors\.ceramic\.gray\.1500\)\)_padding-box\2c linear-gradient\(60deg\2c theme\(colors\.ceramic\.black\/0\)_20\%\2c theme\(colors\.orange\.900\)\2c theme\(colors\.sky\.300\)\2c theme\(colors\.ceramic\.purple\.500\)\)_border-box\]:is(.dark *):before {
    content: var(--tw-content);
    background: linear-gradient(color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent), color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent)) padding-box, linear-gradient(60deg, color-mix(in srgb, var(--ceramic-black) 0%, transparent) 20%, color-mix(in srgb, var(--orange-900) 100%, transparent), #5DE3FF, color-mix(in srgb, var(--ceramic-purple-500) 100%, transparent)) border-box
}

.dark\:before\:bg-black\/60:is(.dark *)::before {
    content: var(--tw-content);
    background-color: rgb(0 0 0 / 0.6);
}

.dark\:before\:bg-ceramic-gray-1200:is(.dark *):before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:before\:bg-ceramic-gray-1400:is(.dark *):before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1400) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:before\:bg-default\/60:is(.dark *)::before {
    content: var(--tw-content);
    background-color: rgb(var(--bg-body-rgb)/ 0.6);
}

.dark\:before\:bg-default\/70:is(.dark *)::before {
    content: var(--tw-content);
    background-color: rgb(var(--bg-body-rgb)/ 0.7);
}

.dark\:before\:bg-default\/80:is(.dark *)::before {
    content: var(--tw-content);
    background-color: rgb(var(--bg-body-rgb)/ 0.9);
}

.dark\:before\:border-ceramic-white\/7:is(.dark *):before {
    content: var(--tw-content);
    border-color: color-mix(in srgb, var(--ceramic-white) 7%, transparent)
}

.dark\:before\:to-ceramic-black\/\[0\.12\]:is(.dark *)::before {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 12%, transparent) var(--tw-gradient-to-position);
}

.dark\:before\:to-ceramic-black\/\[0\.12\]:is(.dark *):before {
    content: var(--tw-content);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 12%, transparent) var(--tw-gradient-to-position)
}

.dark\:bg-\[var\(--button-secondary-bg\2c theme\(colors\.ceramic\.gray\.1100\)\)\]:is(.dark *) {
    background-color: var(--button-secondary-bg, color-mix(in srgb, var(--ceramic-gray-1100) 100%, transparent))
}

.dark\:bg-ceramic-black:is(.dark *) {
    background-color: var(--ceramic-black);
}

.dark\:bg-ceramic-black\/8:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-black) 8%, transparent);
}

.dark\:bg-ceramic-blue-500\/\[\.04\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 4%, transparent);
}

.dark\:bg-ceramic-blue-500\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 6%, transparent);
}

.dark\:bg-ceramic-blue-500\/\[\.08\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 8%, transparent);
}

.dark\:bg-ceramic-blue-500\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 10%, transparent);
}

.dark\:bg-ceramic-blue\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue) 6%, transparent);
}

.dark\:bg-ceramic-blue\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-700) 12%, transparent)
}

.dark\:bg-ceramic-blue\/2:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-700) 2%, transparent)
}

.dark\:bg-ceramic-blue\/24:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue) 24%, transparent);
}

.dark\:bg-ceramic-blue\/4:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-700) 4%, transparent)
}

.dark\:bg-ceramic-brand:is(.dark *) {
    background-color: var(--ceramic-brand);
}

.dark\:bg-ceramic-brand\/\[\.03\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 3%, transparent);
}

.dark\:bg-ceramic-brand\/\[\.04\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 4%, transparent);
}

.dark\:bg-ceramic-brand\/\[\.05\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 5%, transparent);
}

.dark\:bg-ceramic-brand\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 6%, transparent);
}

.dark\:bg-ceramic-brand\/\[0\.02\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 2%, transparent);
}

.dark\:bg-ceramic-brand\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
}

.dark\:bg-ceramic-brand\/15:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 15%, transparent);
}

.dark\:bg-ceramic-brand\/16:is(.dark *) {
    background-color: color-mix(in srgb,
    var(--ceramic-brand) 16%,
    transparent
    );
}

.dark\:bg-ceramic-brand\/20:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.dark\:bg-ceramic-brand\/24:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 24%, transparent);
}

.dark\:bg-ceramic-brand\/30:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.dark\:bg-ceramic-brand\/40:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.dark\:bg-ceramic-brand\/60:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 60%, transparent);
}

.dark\:bg-ceramic-gray-100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-1000:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1000) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-1100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-1200:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-1200\/50:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1200) 50%, transparent)
}

.dark\:bg-ceramic-gray-1300:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-1300\/50:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) 50%, transparent)
}

.dark\:bg-ceramic-gray-1400:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1400) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-1400\/50:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1400) 50%, transparent);
}

.dark\:bg-ceramic-gray-1500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(
            in srgb,
            var(--ceramic-brand) 0%,
            var(--ceramic-gray-1500) calc(var(--tw-bg-opacity, 1) * 95%)
    );
}

.dark\:bg-ceramic-gray-1500\/36:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 36%, transparent)
}

.dark\:bg-ceramic-gray-1600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1600) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-1700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-200:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-300:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-400:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-400) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-700\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent)
}

.dark\:bg-ceramic-gray-700\/4:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent)
}

.dark\:bg-ceramic-gray-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-800) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-900) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-gray\/1000:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1000) 8%, transparent)
}

.dark\:bg-ceramic-gray\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray) 12%, transparent);
}

.dark\:bg-ceramic-gray\/16:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray) 16%, transparent);
}

.dark\:bg-ceramic-gray\/20:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray) 20%, transparent);
}

.dark\:bg-ceramic-gray\/24:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray) 24%, transparent);
}

.dark\:bg-ceramic-gray\/4:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray) 4%, transparent);
}

.dark\:bg-ceramic-gray\/8:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray) 8%, transparent);
}

.dark\:bg-ceramic-green-500\/\[\.04\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 4%, transparent);
}

.dark\:bg-ceramic-green-500\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 6%, transparent);
}

.dark\:bg-ceramic-green-500\/\[\.08\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.dark\:bg-ceramic-green-500\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 10%, transparent);
}

.dark\:bg-ceramic-green-700:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-700) 100%, transparent);
}

.dark\:bg-ceramic-green\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green) 6%, transparent);
}

.dark\:bg-ceramic-green\/16:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green) 16%, transparent);
}

.dark\:bg-ceramic-green\/4:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green) 4%, transparent);
}

.dark\:bg-ceramic-orange-50\/50:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-50) 50%, transparent);
}

.dark\:bg-ceramic-orange-500\/\[\.04\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 4%, transparent);
}

.dark\:bg-ceramic-orange-500\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 6%, transparent);
}

.dark\:bg-ceramic-orange-500\/\[\.08\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 8%, transparent);
}

.dark\:bg-ceramic-orange-500\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-500) 10%, transparent);
}

.dark\:bg-ceramic-orange-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-orange-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-orange\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange) 6%, transparent);
}

.dark\:bg-ceramic-orange\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange) 12%, transparent);
}

.dark\:bg-ceramic-orange\/16:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-700) 16%, transparent);
}

.dark\:bg-ceramic-orange\/24:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange) 24%, transparent);
}

.dark\:bg-ceramic-primary:is(.dark *) {
    background-color: var(--ceramic-primary);
}

.dark\:bg-ceramic-purple-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-purple\/24:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-purple-700) 24%, transparent)
}

.dark\:bg-ceramic-purple\/4:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-purple-700) 4%, transparent)
}

.dark\:bg-ceramic-purple\/8:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-purple-700) 8%, transparent)
}

.dark\:bg-ceramic-red-1500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-red-1500) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:bg-ceramic-red-50\/50:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-50) 50%, transparent);
}

.dark\:bg-ceramic-red-500\/\[\.04\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 4%, transparent);
}

.dark\:bg-ceramic-red-500\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 6%, transparent);
}

.dark\:bg-ceramic-red-500\/\[\.08\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.dark\:bg-ceramic-red-500\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 10%, transparent);
}

.dark\:bg-ceramic-red-600:is(.dark *) {
    background-color: var(--ceramic-red-600);
}

.dark\:bg-ceramic-red\/\[\.06\]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red) 6%, transparent);
}

.dark\:bg-ceramic-red\/16:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-700) 16%, transparent)
}

.dark\:bg-ceramic-red\/24:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red) 24%, transparent);
}

.dark\:bg-ceramic-red\/4:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red) 4%, transparent);
}

.dark\:bg-ceramic-white\/7:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-white) 7%, transparent)
}

.dark\:bg-ceramic-zinc-100:is(.dark *) {
    background-color: var(--ceramic-zinc-100);
}

.dark\:bg-ceramic-zinc-1000:is(.dark *) {
    background-color: var(--ceramic-zinc-1000);
}

.dark\:bg-ceramic-zinc-200:is(.dark *) {
    background-color: var(--ceramic-zinc-200);
}

.dark\:bg-ceramic-zinc-300:is(.dark *) {
    background-color: var(--ceramic-zinc-300);
}

.dark\:bg-ceramic-zinc-400:is(.dark *) {
    background-color: var(--ceramic-zinc-400);
}

.dark\:bg-ceramic-zinc-50:is(.dark *) {
    background-color: var(--ceramic-zinc-50);
}

.dark\:bg-ceramic-zinc-500:is(.dark *) {
    background-color: var(--ceramic-zinc-500);
}

.dark\:bg-ceramic-zinc-600:is(.dark *) {
    background-color: var(--ceramic-zinc-600);
}

.dark\:bg-ceramic-zinc-700:is(.dark *) {
    background-color: var(--ceramic-zinc-700);
}

.dark\:bg-ceramic-zinc-800:is(.dark *) {
    background-color: var(--ceramic-zinc-800);
}

.dark\:bg-ceramic-zinc-900:is(.dark *) {
    background-color: var(--ceramic-zinc-900);
}

.dark\:bg-ceramic-zinc-900\/30:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-zinc-900) 30%, transparent);
}

.dark\:bg-ceramic-zinc-900\/50:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-zinc-900) 50%, transparent);
}

.dark\:bg-ceramic-zinc-950:is(.dark *) {
    background-color: var(--ceramic-zinc-950);
}

.dark\:bg-white-brand:is(.dark *) {
    background-color: color-mix(
            in srgb,
            var(--ceramic-brand) 1%,
            var(--ceramic-white) 2%
    );
}

.dark\:border-ceramic-amber\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-amber-700) 40%, transparent);
}

.dark\:border-ceramic-bg-separator:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: color-mix(
            in srgb,
            var(--ceramic-bg-separator) calc(var(--tw-border-opacity, 1) * 100%),
            transparent
    );
}

.dark\:border-ceramic-black:is(.dark *) {
    border-color: var(--ceramic-black);
}

.dark\:border-ceramic-black\/10:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-black) 10%, transparent);
}

.dark\:border-ceramic-black\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-black) 20%, transparent);
}

.dark\:border-ceramic-blue-500\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-blue-500) 15%, transparent);
}

.dark\:border-ceramic-blue-500\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-blue-500) 20%, transparent);
}

.dark\:border-ceramic-blue\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-blue-700) 40%, transparent);
}

.dark\:border-ceramic-brand\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-brand) 15%, transparent);
}

.dark\:border-ceramic-brand\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.dark\:border-ceramic-brand\/30:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.dark\:border-ceramic-brand\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.dark\:border-ceramic-brand\/50:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-brand) 50%, transparent);
}

.dark\:border-ceramic-brand\/60:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-brand) 60%, transparent);
}

.dark\:border-ceramic-cyan\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-cyan-700) 40%, transparent);
}

.dark\:border-ceramic-emerald\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-emerald-700) 40%, transparent);
}

.dark\:border-ceramic-fuchsia\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-fuchsia-700) 40%, transparent);
}

.dark\:border-ceramic-gray-1100:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-1100) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.dark\:border-ceramic-gray-1200:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-1200) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.dark\:border-ceramic-gray-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-800) calc(var(--tw-border-opacity, 1) * 100%), transparent)
}

.dark\:border-ceramic-gray-900:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: color-mix(in srgb, var(--ceramic-gray-900) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.dark\:border-ceramic-gray:is(.dark *) {
    border-color: var(--ceramic-gray);
}

.dark\:border-ceramic-gray\/10:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-gray) 10%, transparent);
}

.dark\:border-ceramic-gray\/12:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-gray) 12%, transparent);
}

.dark\:border-ceramic-gray\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-gray) 15%, transparent);
}

.dark\:border-ceramic-gray\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-gray) 20%, transparent);
}

.dark\:border-ceramic-gray\/4:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-gray) 4%, transparent);
}

.dark\:border-ceramic-gray\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-gray) 40%, transparent);
}

.dark\:border-ceramic-gray\/8:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-gray) 8%, transparent);
}

.dark\:border-ceramic-green-500\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-green-500) 15%, transparent);
}

.dark\:border-ceramic-green-500\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-green-500) 20%, transparent);
}

.dark\:border-ceramic-green\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-green-700) 40%, transparent);
}

.dark\:border-ceramic-indigo\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-indigo-700) 40%, transparent);
}

.dark\:border-ceramic-lime\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-lime-700) 40%, transparent);
}

.dark\:border-ceramic-neutral\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-neutral-700) 40%, transparent);
}

.dark\:border-ceramic-orange-500\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-orange-500) 15%, transparent);
}

.dark\:border-ceramic-orange-500\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-orange-500) 20%, transparent);
}

.dark\:border-ceramic-orange-700\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-orange-700) 40%, transparent)
}

.dark\:border-ceramic-orange\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-orange-700) 40%, transparent);
}

.dark\:border-ceramic-pink\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-pink-700) 40%, transparent);
}

.dark\:border-ceramic-purple\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-purple-700) 40%, transparent);
}

.dark\:border-ceramic-purple\/8:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-purple-700) 8%, transparent)
}

.dark\:border-ceramic-red-500\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-red-500) 15%, transparent);
}

.dark\:border-ceramic-red-500\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-red-500) 20%, transparent);
}

.dark\:border-ceramic-red-700\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-red-700) 40%, transparent)
}

.dark\:border-ceramic-red\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-red-700) 40%, transparent);
}

.dark\:border-ceramic-rose\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-rose-700) 40%, transparent);
}

.dark\:border-ceramic-sky\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-sky-700) 40%, transparent);
}

.dark\:border-ceramic-slate\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-slate-700) 40%, transparent);
}

.dark\:border-ceramic-stone\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-stone-700) 40%, transparent);
}

.dark\:border-ceramic-teal\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-teal-700) 40%, transparent);
}

.dark\:border-ceramic-violet\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-violet-700) 40%, transparent);
}

.dark\:border-ceramic-white:is(.dark *) {
    border-color: var(--ceramic-white);
}

.dark\:border-ceramic-white\/10:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 10%, transparent);
}

.dark\:border-ceramic-white\/15:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 15%, transparent);
}

.dark\:border-ceramic-white\/20:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 20%, transparent);
}

.dark\:border-ceramic-white\/4:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 4%, transparent);
}

.dark\:border-ceramic-white\/5:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 5%, transparent);
}

.dark\:border-ceramic-white\/6:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 6%, transparent);
}

.dark\:border-ceramic-white\/7:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 7%, transparent);
}

.dark\:border-ceramic-white\/8:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent);
}

.dark\:border-ceramic-yellow\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-yellow-700) 40%, transparent);
}

.dark\:border-ceramic-zinc-100:is(.dark *) {
    border-color: var(--ceramic-zinc-100);
}

.dark\:border-ceramic-zinc-1000:is(.dark *) {
    border-color: var(--ceramic-zinc-1000);
}

.dark\:border-ceramic-zinc-200:is(.dark *) {
    border-color: var(--ceramic-zinc-200);
}

.dark\:border-ceramic-zinc-300:is(.dark *) {
    border-color: var(--ceramic-zinc-300);
}

.dark\:border-ceramic-zinc-400:is(.dark *) {
    border-color: var(--ceramic-zinc-400);
}

.dark\:border-ceramic-zinc-50:is(.dark *) {
    border-color: var(--ceramic-zinc-50);
}

.dark\:border-ceramic-zinc-500:is(.dark *) {
    border-color: var(--ceramic-zinc-500);
}

.dark\:border-ceramic-zinc-600:is(.dark *) {
    border-color: var(--ceramic-zinc-600);
}

.dark\:border-ceramic-zinc-700:is(.dark *) {
    border-color: var(--ceramic-zinc-700);
}

.dark\:border-ceramic-zinc-800:is(.dark *) {
    border-color: var(--ceramic-zinc-800);
}

.dark\:border-ceramic-zinc-800\/50:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-zinc-800) 50%, transparent);
}

.dark\:border-ceramic-zinc-900:is(.dark *) {
    border-color: var(--ceramic-zinc-900);
}

.dark\:border-ceramic-zinc-950:is(.dark *) {
    border-color: var(--ceramic-zinc-950);
}

.dark\:border-ceramic-zinc\/40:is(.dark *) {
    border-color: color-mix(in srgb, var(--ceramic-zinc-700) 40%, transparent);
}

.dark\:border-red-500\/15:is(.dark *) {
    border-color: color-mix(in srgb, #ef4444 15%, transparent);
}

.dark\:ceramic-icon-fill-gray\/24:is(.dark *) {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.dark\:ceramic-icon-stroke-secondary:is(.dark *) {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-secondary) 100%, transparent)
}

.dark\:data-\[readonly\]\:bg-ceramic-white\/8[data-readonly]:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent)
}

.dark\:data-\[readonly\]\:ring-ceramic-white\/16[data-readonly]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:data-\[slot\=separator\]\:\*\:bg-ceramic-gray-1300 > [data-slot=separator]:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:divide-ceramic-gray-1100:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ceramic-gray-1100);
}

.dark\:divide-ceramic-zinc-800\/50:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    border-color: color-mix(in srgb, var(--ceramic-zinc-800) 50%, transparent);
}

.dark\:even\:bg-ceramic-gray-1300\/50:nth-child(even):is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) 50%, transparent);
}

.dark\:fill-ceramic-white\/25:is(.dark *) {
    fill: color-mix(in srgb, var(--ceramic-white) 25%, transparent)
}

.dark\:from-ceramic-bg-main:is(.dark *) {
    --tw-gradient-from: var(--ceramic-bg-main);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.dark\:from-ceramic-black\/0:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-black) 0%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.dark\:from-ceramic-brand\/10:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, color-mix(in srgb, var(--ceramic-brand) 0%, transparent));
}

.dark\:from-ceramic-brand\/20:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, color-mix(in srgb, var(--ceramic-brand) 0%, transparent));
}

.dark\:from-ceramic-gray-1300:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-1300) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1300) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-ceramic-gray-1400:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-1400) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1400) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-ceramic-gray-1500:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1500) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-ceramic-gray-900:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-gray-900) 100%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-900) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-ceramic-orange-700\/10:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-orange-700) 10%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.dark\:from-ceramic-red-700\/10:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-red-700) 10%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.dark\:from-ceramic-white\/3:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 3%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.dark\:from-ceramic-zinc-950 {
    --tw-gradient-from: #09090b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(9 9 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-ceramic-zinc-950\/50:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-zinc-950) 50%, transparent);
    --tw-gradient-from-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.dark\:has-\[\:checked\]\:bg-ceramic-gray-1300:is(.dark *):has(:checked) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.dark\:has-\[\[data-slot\=input\]\:-moz-read-only\]\:bg-ceramic-white\/8:has([data-slot=input]:-moz-read-only):is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent)
}

.dark\:has-\[\[data-slot\=input\]\:-moz-read-only\]\:ring-ceramic-white\/16:has([data-slot=input]:-moz-read-only):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:has-\[\[data-slot\=input\]\:read-only\]\:bg-ceramic-white\/8:has([data-slot=input]:read-only):is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent)
}

.dark\:has-\[\[data-slot\=input\]\:read-only\]\:ring-ceramic-white\/16:has([data-slot=input]:read-only):is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:placeholder\:text-ceramic-gray-600:is(.dark *)::placeholder {
    color: var(--ceramic-gray-600);
}

.dark\:placeholder\:text-ceramic-gray-700:is(.dark *)::placeholder {
    color: var(--ceramic-gray-700);
}

.dark\:placeholder\:text-ceramic-gray-800:is(.dark *)::placeholder {
    color: var(--ceramic-gray-800);
}

.dark\:read-only\:bg-ceramic-white\/8:read-only:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent)
}

.dark\:read-only\:ring-ceramic-white\/16:read-only:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:read-only\:ring-ceramic-white\/8:is(.dark *):read-only {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent);
}

.dark\:ring-ceramic-black\/\[\.56\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 56%, transparent)
}

.dark\:ring-ceramic-black\/12:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 12%, transparent)
}

.dark\:ring-ceramic-black\/20:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 20%, transparent);
}

.dark\:ring-ceramic-black\/40:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 40%, transparent)
}

.dark\:ring-ceramic-black\/56:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 56%, transparent)
}

.dark\:ring-ceramic-blue-500\/\[\.08\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 8%, transparent);
}

.dark\:ring-ceramic-blue-500\/\[\.16\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 16%, transparent);
}

.dark\:ring-ceramic-brand\/25:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 25%, transparent)
}

.dark\:ring-ceramic-brand\/30:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.dark\:ring-ceramic-brand\/40:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 40%, transparent);
}

.dark\:ring-ceramic-brand\/50:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 50%, transparent);
}

.dark\:ring-ceramic-gray-100:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:ring-ceramic-gray-1000:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1000) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:ring-ceramic-gray-1000\/88:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1000) 88%, transparent)
}

.dark\:ring-ceramic-gray-1100:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1200) 100%, transparent);
}

.dark\:ring-ceramic-gray-1200:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1200) 100%, transparent);
}

.dark\:ring-ceramic-gray-1400:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1400) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

.dark\:ring-ceramic-gray-1500:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1500) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:ring-ceramic-gray-700\/48:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent)
}

.dark\:ring-ceramic-gray-900:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-900) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.dark\:ring-ceramic-green-500\/\[\.08\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.dark\:ring-ceramic-green-500\/\[\.16\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 16%, transparent);
}

.dark\:ring-ceramic-green-500\/20:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 20%, transparent);
}

.dark\:ring-ceramic-green\/16:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green) 16%, transparent);
}

.dark\:ring-ceramic-green\/20:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-700) 20%, transparent);
}

.dark\:ring-ceramic-orange-500\/\[\.08\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-500) 8%, transparent);
}

.dark\:ring-ceramic-orange-500\/\[\.16\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange-500) 16%, transparent);
}

.dark\:ring-ceramic-orange\/12:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange) 12%, transparent);
}

.dark\:ring-ceramic-orange\/16:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange) 16%, transparent);
}

.dark\:ring-ceramic-purple-600:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-600) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

.dark\:ring-ceramic-purple-600\/50:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-600) 50%, transparent);
}

.dark\:ring-ceramic-red-500\/\[\.08\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.dark\:ring-ceramic-red-500\/\[\.16\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 16%, transparent);
}

.dark\:ring-ceramic-red-500\/30:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 30%, transparent);
}

.dark\:ring-ceramic-white\/\[0\.04\]:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 4%, transparent);
}

.dark\:ring-ceramic-white\/10:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 10%, transparent)
}

.dark\:ring-ceramic-white\/12:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 12%, transparent)
}

.dark\:ring-ceramic-white\/15:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 15%, transparent)
}

.dark\:ring-ceramic-white\/16:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.dark\:ring-ceramic-white\/20:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 20%, transparent);
}

.dark\:ring-ceramic-white\/4:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 4%, transparent)
}

.dark\:ring-ceramic-white\/6:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 6%, transparent)
}

.dark\:ring-ceramic-white\/7:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 7%, transparent)
}

.dark\:ring-ceramic-white\/8:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent)
}

.dark\:ring-ceramic-zinc-700:is(.dark *) {
    --tw-ring-color: var(--ceramic-zinc-700);
}

.dark\:ring-ceramic-zinc-800:is(.dark *) {
    --tw-ring-color: var(--ceramic-zinc-800);
}

.dark\:ring-ceramic-zinc-900\/6:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-zinc-900) 6%, transparent);
}

.dark\:ring-ceramic-zinc-900\/8:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-zinc-900) 8%, transparent);
}

.dark\:ring-ceramic-zinc-950:is(.dark *) {
    --tw-ring-color: var(--ceramic-zinc-950);
}

.dark\:ring-white\/\[0\.06\]:is(.dark *) {
    --tw-ring-color: rgba(255, 255, 255, 0.06);
}

.dark\:ring-white\/\[0\.08\]:is(.dark *) {
    --tw-ring-color: rgba(255, 255, 255, 0.08);
}

.dark\:shadow-\[0_-1px_1px_theme\(colors\.ceramic\.white\/\.12\)\2c 0_0px_0px_1px_\#525260\2c 0_0_0_2px_theme\(colors\.ceramic\.black\/\.16\)\]:is(.dark *) {
    --tw-shadow: 0 -1px 1px color-mix(in srgb, var(--ceramic-white) 12%, transparent), 0 0px 0px 1px #525260, 0 0 0 2px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 -1px 1px var(--tw-shadow-color), 0 0px 0px 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_0_0_1px_rgba\(17\2c 17\2c 19\2c \.32\)\2c 0_16px_36px_-6px_theme\(colors\.ceramic\.black\/\.07\)\2c 0_6px_16px_-2px_theme\(colors\.ceramic\.black\/\.2\)\]:is(.dark *) {
    --tw-shadow: 0 0 0 1px rgba(17, 17, 19, .32), 0 16px 36px -6px color-mix(in srgb, var(--ceramic-black) 7%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 16px 36px -6px var(--tw-shadow-color), 0 6px 16px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_0_1px_theme\(colors\.ceramic\.white\/\.25\)\2c 0_2px_3px_theme\(colors\.ceramic\.black\/\.1\)\]:is(.dark *) {
    --tw-shadow: 0 0 1px color-mix(in srgb, var(--ceramic-white) 25%, transparent), 0 2px 3px color-mix(in srgb, var(--ceramic-black) 10%, transparent);
    --tw-shadow-colored: 0 0 1px var(--tw-shadow-color), 0 2px 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_1px_0_theme\(colors\.ceramic\.black\/0\.02\)\2c _0_2px_3px_-1px_theme\(colors\.ceramic\.black\/0\.08\)\]:is(.dark *) {
    --tw-shadow: 0 1px 0 color-mix(in srgb, var(--ceramic-black) 2%, transparent), 0 2px 3px -1px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color), 0 2px 3px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.12\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.36\)\]:is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 12%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 36%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.06\)\]:is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 6%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\]:is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/0\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.24\)\]:is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_2px_2px_-1px_theme\(colors\.ceramic\.black\/0\.32\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.32\)\]:is(.dark *) {
    --tw-shadow: 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 32%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_32px_72px_-12px_theme\(colors\.ceramic\.black\/\.4\)\2c 0_16px_32px_-6px_theme\(colors\.ceramic\.black\/\.4\)\]:is(.dark *) {
    --tw-shadow: 0 32px 72px -12px color-mix(in srgb, var(--ceramic-black) 40%, transparent), 0 16px 32px -6px color-mix(in srgb, var(--ceramic-black) 40%, transparent);
    --tw-shadow-colored: 0 32px 72px -12px var(--tw-shadow-color), 0 16px 32px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0_4px_4px_-1px_theme\(colors\.ceramic\.black\/0\.20\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/0\.32\)\]:is(.dark *) {
    --tw-shadow: 0 4px 4px -1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 32%, transparent);
    --tw-shadow-colored: 0 4px 4px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0px_0px_0px_1px_theme\(colors\.ceramic\.white\/\.08\)\2c 0px_16px_32px_-6px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]:is(.dark *) {
    --tw-shadow: 0px 0px 0px 1px color-mix(in srgb, var(--ceramic-white) 8%, transparent), 0px 16px 32px -6px rgba(0, 0, 0, 0.08);
    --tw-shadow-colored: 0px 0px 0px 1px var(--tw-shadow-color), 0px 16px 32px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[0px_2px_2px_-1px_theme\(colors\.ceramic\.white\/0\.06\)\2c 0px_4px_4px_-2px_theme\(colors\.ceramic\.white\/0\.04\)\]:is(.dark *) {
    --tw-shadow: 0px 2px 2px -1px color-mix(in srgb, var(--ceramic-white) 6%, transparent), 0px 4px 4px -2px color-mix(in srgb, var(--ceramic-white) 4%, transparent);
    --tw-shadow-colored: 0px 2px 2px -1px var(--tw-shadow-color), 0px 4px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_0_0_1px_theme\(colors\.ceramic\.black\/\.8\)\2c inset_0_2px_0_theme\(colors\.ceramic\.white\/\.12\)\2c inset_0_0_2px_2px_theme\(colors\.ceramic\.white\/\.06\)\2c 0_16px_36px_-6px_theme\(colors\.ceramic\.black\/\.36\)\2c 0_6px_16px_-2px_theme\(colors\.ceramic\.black\/\.2\)\]:is(.dark *) {
    --tw-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ceramic-black) 80%, transparent), inset 0 2px 0 color-mix(in srgb, var(--ceramic-white) 12%, transparent), inset 0 0 2px 2px color-mix(in srgb, var(--ceramic-white) 6%, transparent), 0 16px 36px -6px color-mix(in srgb, var(--ceramic-black) 36%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), inset 0 2px 0 var(--tw-shadow-color), inset 0 0 2px 2px var(--tw-shadow-color), 0 16px 36px -6px var(--tw-shadow-color), 0 6px 16px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_0_0_1px_theme\(colors\.ceramic\.white\/0\.06\)\2c 0_1px_2px_rgba\(25\2c 28\2c 33\2c 0\.06\)\2c 0_0_2px_theme\(colors\.ceramic\.black\/0\.08\)\]:is(.dark *) {
    --tw-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ceramic-white) 6%, transparent), 0 1px 2px rgba(25, 28, 33, 0.06), 0 0 2px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color), 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_0_1px_1px_theme\(colors\.ceramic\.white\/\.01\)\2c 0_1px_3px_0_theme\(colors\.ceramic\.black\/\.4\)\2c 0_0_3px_0_theme\(colors\.ceramic\.black\/\.2\)\]:is(.dark *) {
    --tw-shadow: inset 0 0 1px 1px color-mix(in srgb, var(--ceramic-white) 1%, transparent), 0 1px 3px 0 color-mix(in srgb, var(--ceramic-black) 40%, transparent), 0 0 3px 0 color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: inset 0 0 1px 1px var(--tw-shadow-color), 0 1px 3px 0 var(--tw-shadow-color), 0 0 3px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_0_1px_1px_theme\(colors\.ceramic\.white\/\.04\)\2c 0_1px_2px_theme\(colors\.ceramic\.black\/16\)\2c 0_0_2px_theme\(colors\.ceramic\.black\/\.08\)\]:is(.dark *) {
    --tw-shadow: inset 0 0 1px 1px color-mix(in srgb, var(--ceramic-white) 4%, transparent), 0 1px 2px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 0 2px color-mix(in srgb, var(--ceramic-black) 8%, transparent);
    --tw-shadow-colored: inset 0 0 1px 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color), 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_0_1px_1px_theme\(colors\.ceramic\.white\/0\.005\)\2c 0_1px_1px_theme\(colors\.ceramic\.black\/0\.05\)\2c 0px_1px_2px_theme\(colors\.ceramic\.black\/0\.1\)\]:is(.dark *) {
    --tw-shadow: inset 0 0 1px 1px color-mix(in srgb, var(--ceramic-white) 0.5%, transparent), 0 1px 1px color-mix(in srgb, var(--ceramic-black) 5%, transparent), 0px 1px 2px color-mix(in srgb, var(--ceramic-black) 10%, transparent);
    --tw-shadow-colored: inset 0 0 1px 1px var(--tw-shadow-color), 0 1px 1px var(--tw-shadow-color), 0px 1px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_0_1px_1px_theme\(colors\.ceramic\.white\/0\.01\)\2c 0_0_0_1px_theme\(colors\.black\/0\.20\)\2c 0_1px_3px_theme\(colors\.black\/0\.40\)\2c 0_0_3px_theme\(colors\.ceramic\.black\/0\.20\)\]:is(.dark *) {
    --tw-shadow: inset 0 0 1px 1px color-mix(in srgb, var(--ceramic-white) 1%, transparent), 0 0 0 1px color-mix(in srgb, var(--black) 20%, transparent), 0 1px 3px color-mix(in srgb, var(--black) 40%, transparent), 0 0 3px color-mix(in srgb, var(--ceramic-black) 20%, transparent);
    --tw-shadow-colored: inset 0 0 1px 1px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color), 0 0 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_0_1px_1px_theme\(colors\.ceramic\.white\/0\.01\)\2c 0_0_0_1px_theme\(colors\.ceramic\.black\/0\.2\)\2c 0_0_3px_theme\(colors\.ceramic\.black\/0\.2\)\2c 0px_1px_3px_theme\(colors\.ceramic\.black\/0\.4\)\]:is(.dark *) {
    --tw-shadow: inset 0 0 1px 1px color-mix(in srgb, var(--ceramic-white) 1%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0 0 3px color-mix(in srgb, var(--ceramic-black) 20%, transparent), 0px 1px 3px color-mix(in srgb, var(--ceramic-black) 40%, transparent);
    --tw-shadow-colored: inset 0 0 1px 1px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color), 0 0 3px var(--tw-shadow-color), 0px 1px 3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_1px_0\.5px_0_theme\(colors\.ceramic\.white\/\.16\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.black\/\.12\)\]:is(.dark *) {
    --tw-shadow: inset 0 1px 0.5px 0 color-mix(in srgb, var(--ceramic-white) 16%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-black) 12%, transparent);
    --tw-shadow-colored: inset 0 1px 0.5px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_1px_0\.5px_0_theme\(colors\.ceramic\.white\/\.16\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-3px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.black\/\.12\)\]:is(.dark *) {
    --tw-shadow: inset 0 1px 0.5px 0 color-mix(in srgb, var(--ceramic-white) 16%, transparent), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -3px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-black) 12%, transparent);
    --tw-shadow-colored: inset 0 1px 0.5px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -3px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-\[inset_0_1px_0\.5px_0_var\(--button-secondary-shadow-1\2c theme\(colors\.ceramic\.white\/\.05\)\)\2c 0_2px_2px_-1px_theme\(colors\.ceramic\.black\/\.16\)\2c 0_4px_4px_-2px_theme\(colors\.ceramic\.black\/\.24\)\2c 0_0_0_1px_theme\(colors\.ceramic\.black\/\.1\)\]:is(.dark *) {
    --tw-shadow: inset 0 1px 0.5px 0 var(--button-secondary-shadow-1, color-mix(in srgb, var(--ceramic-white) 5%, transparent)), 0 2px 2px -1px color-mix(in srgb, var(--ceramic-black) 16%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--ceramic-black) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--ceramic-black) 10%, transparent);
    --tw-shadow-colored: inset 0 1px 0.5px 0 var(--tw-shadow-color), 0 2px 2px -1px var(--tw-shadow-color), 0 4px 4px -2px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark\:shadow-ceramic-black\/3:is(.dark *) {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-black) 3%, transparent);
}

.dark\:shadow-ceramic-card-dark:is(.dark *) {
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.02), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.dark\:shadow-ceramic-card:is(.dark *) {
    box-shadow: var(--ceramic-shadow-card);
}

.dark\:shadow-ceramic-gray-1400:is(.dark *) {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-gray-1400) 100%, transparent);
    --tw-shadow: var(--tw-shadow-colored)
}

.dark\:shadow-ceramic-white\/7:is(.dark *) {
    --tw-shadow-color: color-mix(in srgb, var(--ceramic-white) 7%, transparent);
}

.dark\:stroke-ceramic-gray-1200:is(.dark *) {
    stroke: color-mix(in srgb, var(--ceramic-gray-1200) 100%, transparent)
}

.dark\:stroke-ceramic-gray-700:is(.dark *) {
    stroke: color-mix(in srgb, var(--ceramic-gray-700) 100%, transparent);
}

.dark\:stroke-ceramic-white:is(.dark *) {
    stroke: color-mix(in srgb, var(--ceramic-white) 100%, transparent)
}

.dark\:text-ceramic-black\/16:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-black) 16%, transparent)
}

.dark\:text-ceramic-black\/24:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-black) 24%, transparent)
}

.dark\:text-ceramic-blue-300:is(.dark *) {
    color: var(--ceramic-blue-300);
}

.dark\:text-ceramic-blue-400:is(.dark *) {
    color: var(--ceramic-blue-400);
}

.dark\:text-ceramic-blue-500:is(.dark *) {
    color: var(--ceramic-blue-500);
}

.dark\:text-ceramic-brand:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent);
}

.dark\:text-ceramic-brand\/80:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-brand) 80%, transparent);
}

.dark\:text-ceramic-dimmed:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-dimmed) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-gray-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-gray-100) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-gray-1000:is(.dark *) {
    color: var(--ceramic-gray-1000);
}

.dark\:text-ceramic-gray-1200:is(.dark *) {
    color: var(--ceramic-gray-1200);
}

.dark\:text-ceramic-gray-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-gray-300:is(.dark *) {
    color: var(--ceramic-gray-300);
}

.dark\:text-ceramic-gray-400:is(.dark *) {
    color: var(--ceramic-gray-400);
}

.dark\:text-ceramic-gray-50:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-gray-50) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-gray-500:is(.dark *) {
    color: var(--ceramic-gray-500);
}

.dark\:text-ceramic-gray-600:is(.dark *) {
    color: var(--ceramic-gray-600);
}

.dark\:text-ceramic-gray-700:is(.dark *) {
    color: var(--ceramic-gray-700);
}

.dark\:text-ceramic-gray-800:is(.dark *) {
    color: var(--ceramic-gray-800);
}

.dark\:text-ceramic-gray-900:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-gray-900) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-gray-950:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-gray-950) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-green-400:is(.dark *) {
    color: var(--ceramic-green-400);
}

.dark\:text-ceramic-green-500:is(.dark *) {
    color: var(--ceramic-green-500);
}

.dark\:text-ceramic-orange-400:is(.dark *) {
    color: var(--ceramic-orange-400);
}

.dark\:text-ceramic-orange-500:is(.dark *) {
    color: var(--ceramic-orange-500);
}

.dark\:text-ceramic-positive {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-positive) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-purple-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-purple-300) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-purple-400\/80:is(.dark *) {
    color: color-mix(
            in srgb,
            var(--ceramic-purple-400) 80%,
            transparent
    );
}

.dark\:text-ceramic-purple-600:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-purple-600) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-red-400:is(.dark *) {
    color: var(--ceramic-red-400);
}

.dark\:text-ceramic-red-500:is(.dark *) {
    color: var(--ceramic-red-500);
}

.dark\:text-ceramic-secondary:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-secondary) 100%, transparent);
}

.dark\:text-ceramic-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-white) calc(var(--tw-text-opacity, 1) * 100%), transparent)
}

.dark\:text-ceramic-white\/4:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-white) 4%, transparent)
}

.dark\:text-ceramic-zinc-100:is(.dark *) {
    color: var(--ceramic-zinc-100);
}

.dark\:text-ceramic-zinc-1000:is(.dark *) {
    color: var(--ceramic-zinc-1000);
}

.dark\:text-ceramic-zinc-200:is(.dark *) {
    color: var(--ceramic-zinc-200);
}

.dark\:text-ceramic-zinc-300:is(.dark *) {
    color: var(--ceramic-zinc-300);
}

.dark\:text-ceramic-zinc-400:is(.dark *) {
    color: var(--ceramic-zinc-400);
}

.dark\:text-ceramic-zinc-50:is(.dark *) {
    color: var(--ceramic-zinc-50);
}

.dark\:text-ceramic-zinc-500:is(.dark *) {
    color: var(--ceramic-zinc-500);
}

.dark\:text-ceramic-zinc-600:is(.dark *) {
    color: var(--ceramic-zinc-600);
}

.dark\:text-ceramic-zinc-700:is(.dark *) {
    color: var(--ceramic-zinc-700);
}

.dark\:text-ceramic-zinc-800:is(.dark *) {
    color: var(--ceramic-zinc-800);
}

.dark\:text-ceramic-zinc-900:is(.dark *) {
    color: var(--ceramic-zinc-900);
}

.dark\:text-ceramic-zinc-950:is(.dark *) {
    color: var(--ceramic-zinc-950);
}

.dark\:to-ceramic-black\/\[\.02\]:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 2%, transparent) var(--tw-gradient-to-position)
}

.dark\:to-ceramic-gray-1400:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1400) 100%, transparent);
}

.dark\:to-ceramic-gray-1500:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent) var(--tw-gradient-to-position)
}

.dark\:to-ceramic-zinc-950 {
    --tw-gradient-to: #09090b;
}

.dark\:to-ceramic-zinc-950\/76:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-zinc-950) 76%, transparent) var(--tw-gradient-to-position);
}

.dark\:via-ceramic-brand\/10:is(.dark *) {
    --tw-gradient-via: color-mix(in srgb, var(--ceramic-brand) 10%, transparent);
    --tw-gradient-via-position: ;
}

.dark\:via-ceramic-zinc-800:is(.dark *) {
    --tw-gradient-via: var(--ceramic-zinc-800);
    --tw-gradient-via-position: ;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}

.group\/switch[data-selected] .dark\:group-data-\[selected\]\/switch\:bg-ceramic-purple-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.group\/switch[data-selected] .dark\:group-data-\[selected\]\/switch\:ring-ceramic-purple-600:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-600) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.peer\/radio:checked ~ .dark\:peer-checked\/radio\:bg-ceramic-purple-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-purple-700) calc(var(--tw-bg-opacity, 1) * 100%), transparent)
}

.peer\/radio:checked ~ .dark\:peer-checked\/radio\:ring-ceramic-purple-600:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-600) calc(var(--tw-ring-opacity, 1) * 100%), transparent)
}

.peer\/radio:checked ~ .dark\:peer-checked\/radio\:shadow-\[0_4px_4px_-3px_theme\(colors\.ceramic\.black\/\.16\)\]:is(.dark *) {
    --tw-shadow: 0 4px 4px -3px color-mix(in srgb, var(--ceramic-black) 16%, transparent);
    --tw-shadow-colored: 0 4px 4px -3px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

dark\:ring-ceramic-900-red\/40:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-900) 40%, transparent);
}

/* ─── 14. CSS VARIABLE UTILITIES ─── */

.\[--animation-duration\:150ms\] {
    --animation-duration: .15s;
}

.\[--animation-duration\:200ms\] {
    --animation-duration: .2s;
}

.\[--animation-duration\:250ms\] {
    --animation-duration: .25s;
}

.\[--axis-tick-color\:theme\(colors\.ceramic\.secondary\)\] {
    --axis-tick-color: color-mix(in srgb, var(--ceramic-secondary) 100%, transparent)
}

.\[--bar-chart-positive\:theme\(colors\.ceramic\.gray\.100\)\] {
    --bar-chart-positive: color-mix(in srgb, var(--ceramic-gray-100) 100%, transparent)
}

.\[--bar-chart-reference-line\:theme\(colors\.ceramic\.gray\.500\)\] {
    --bar-chart-reference-line: color-mix(in srgb, var(--ceramic-gray-500) 100%, transparent)
}

.\[--bar-chart-tick\:theme\(colors\.ceramic\.gray\.500\)\] {
    --bar-chart-tick: color-mix(in srgb, var(--ceramic-gray-500) 100%, transparent)
}

.\[--button-secondary-bg\:theme\(colors\.ceramic\.gray\.900\)\] {
    --button-secondary-bg: color-mix(in srgb, var(--ceramic-gray-900) 100%, transparent)
}

.\[--button-secondary-shadow-1\:theme\(colors\.ceramic\.white\/\.12\)\] {
    --button-secondary-shadow-1: color-mix(in srgb, var(--ceramic-white) 12%, transparent)
}

.\[--callout-border\:theme\(colors\.ceramic\.brand\)\] {
    --callout-border: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.\[--callout-border\:theme\(colors\.ceramic\.gray\.1500\)\] {
    --callout-border: color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent)
}

.\[--callout-border\:theme\(colors\.ceramic\.gray\.500\)\] {
    --callout-border: color-mix(in srgb, var(--ceramic-gray-500) 100%, transparent)
}

.\[--callout-border\:theme\(colors\.ceramic\.negative\)\] {
    --callout-border: color-mix(in srgb, var(--ceramic-negative) 100%, transparent)
}

.\[--callout-border\:theme\(colors\.ceramic\.warning\)\] {
    --callout-border: color-mix(in srgb, var(--ceramic-warning) 100%, transparent)
}

.\[--callout-icon\:theme\(colors\.ceramic\.brand\)\] {
    --callout-icon: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.\[--callout-icon\:theme\(colors\.ceramic\.gray\.600\)\] {
    --callout-icon: color-mix(in srgb, var(--ceramic-gray-600) 100%, transparent)
}

.\[--callout-icon\:theme\(colors\.ceramic\.gray\.800\)\] {
    --callout-icon: color-mix(in srgb, var(--ceramic-gray-800) 100%, transparent)
}

.\[--callout-icon\:theme\(colors\.ceramic\.negative\)\] {
    --callout-icon: color-mix(in srgb, var(--ceramic-negative) 100%, transparent)
}

.\[--callout-icon\:theme\(colors\.ceramic\.warning\)\] {
    --callout-icon: color-mix(in srgb, var(--ceramic-warning) 100%, transparent)
}

.\[--callout-title\:theme\(colors\.ceramic\.brand\)\] {
    --callout-title: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.\[--callout-title\:theme\(colors\.ceramic\.gray\.1500\)\] {
    --callout-title: color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent)
}

.\[--callout-title\:theme\(colors\.ceramic\.negative\)\] {
    --callout-title: color-mix(in srgb, var(--ceramic-negative) 100%, transparent)
}

.\[--callout-title\:theme\(colors\.ceramic\.warning\)\] {
    --callout-title: color-mix(in srgb, var(--ceramic-warning) 100%, transparent)
}

.\[--card-body-bg\:theme\(colors\.ceramic\.white\)\] {
    --card-body-bg: color-mix(in srgb, var(--ceramic-white) 100%, transparent)
}

.\[--card-description\:var\(--ceramic-red-600\)\] {
    --card-description: var(--ceramic-red-600)
}

.\[--card-title\:var\(--ceramic-red-700\)\] {
    --card-title: var(--ceramic-red-700)
}

.\[--cartesian-grid-stroke-color\:theme\(colors\.ceramic\.gray\.300\)\] {
    --cartesian-grid-stroke-color: color-mix(in srgb, var(--ceramic-gray-300) 100%, transparent)
}

.\[--cell-fill-color\:theme\(colors\.ceramic\.gray\.100\)\] {
    --cell-fill-color: color-mix(in srgb, var(--ceramic-gray-100) 100%, transparent)
}

.\[--chart-line-color\:var\(--ceramic-gray-200\)\] {
    --chart-line-color: var(--ceramic-gray-200)
}

.\[--chart-line-color\:var\(--ceramic-purple-700\)\] {
    --chart-line-color: var(--ceramic-purple-700)
}

.\[--data-table-bg\:theme\(colors\.ceramic\.gray\.50\)\] {
    --data-table-bg: color-mix(in srgb, var(--ceramic-gray-50) 100%, transparent)
}

.\[--data-table-cell-bg\:theme\(backgroundColor\.ceramic\.main\)\] {
    --data-table-cell-bg: color-mix(in srgb, var(--ceramic-bg-main) 100%, transparent)
}

.\[--line-chart-cursor-color\:var\(--ceramic-gray-400\)\] {
    --line-chart-cursor-color: var(--ceramic-gray-400)
}

.\[--line-chart-reference-line-color\:var\(--ceramic-gray-700\)\] {
    --line-chart-reference-line-color: var(--ceramic-gray-700)
}

.\[--line-color\:theme\(colors\.ceramic\.orange\.100\)\] {
    --line-color: color-mix(in srgb, var(--ceramic-orange-100) 100%, transparent);
}

.\[--menu-icon-color\:theme\(colors\.ceramic\.brand\)\] {
    --menu-icon-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.\[--menu-icon-color\:theme\(colors\.ceramic\.gray\.800\)\] {
    --menu-icon-color: color-mix(in srgb, var(--ceramic-gray-800) 100%, transparent)
}

.\[--menu-icon-color\:theme\(colors\.ceramic\.negative\)\] {
    --menu-icon-color: color-mix(in srgb, var(--ceramic-negative) 100%, transparent)
}

.\[--menu-label-color\:theme\(colors\.ceramic\.brand\)\] {
    --menu-label-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.\[--menu-label-color\:theme\(colors\.ceramic\.negative\)\] {
    --menu-label-color: color-mix(in srgb, var(--ceramic-negative) 100%, transparent)
}

.\[--menu-label-color\:theme\(colors\.ceramic\.primary\)\] {
    --menu-label-color: color-mix(in srgb, var(--ceramic-primary) 100%, transparent)
}

.\[--x-axis-reference-line-color\:theme\(colors\.ceramic\.gray\.1200\)\] {
    --x-axis-reference-line-color: color-mix(in srgb, var(--ceramic-gray-1200) 100%, transparent)
}

.dark\:\[--bar-chart-positive\:theme\(colors\.ceramic\.gray\.700\)\]:is(.dark *) {
    --bar-chart-positive: color-mix(in srgb, var(--ceramic-gray-700) 100%, transparent)
}

.dark\:\[--callout-border\:theme\(colors\.ceramic\.gray\.600\)\]:is(.dark *) {
    --callout-border: color-mix(in srgb, var(--ceramic-gray-600) 100%, transparent)
}

.dark\:\[--callout-border\:theme\(colors\.ceramic\.white\)\]:is(.dark *) {
    --callout-border: color-mix(in srgb, var(--ceramic-white) 100%, transparent)
}

.dark\:\[--callout-icon\:theme\(colors\.ceramic\.gray\.600\)\]:is(.dark *) {
    --callout-icon: color-mix(in srgb, var(--ceramic-gray-600) 100%, transparent)
}

.dark\:\[--callout-icon\:theme\(colors\.ceramic\.white\)\]:is(.dark *) {
    --callout-icon: color-mix(in srgb, var(--ceramic-white) 100%, transparent)
}

.dark\:\[--callout-title\:theme\(colors\.ceramic\.white\)\]:is(.dark *) {
    --callout-title: color-mix(in srgb, var(--ceramic-white) 100%, transparent)
}

.dark\:\[--card-body-bg\:theme\(colors\.ceramic\.gray\.1300\)\]:is(.dark *) {
    --card-body-bg: color-mix(in srgb, var(--ceramic-gray-1300) 100%, transparent)
}

.dark\:\[--card-body-bg\:theme\(colors\.ceramic\.gray\.1400\)\]:is(.dark *) {
    --card-body-bg: color-mix(in srgb, var(--ceramic-gray-1400) 100%, transparent)
}

.dark\:\[--card-body-bg\:theme\(colors\.ceramic\.gray\.1500\)\]:is(.dark *) {
    --card-body-bg: color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent)
}

.dark\:\[--card-description\:var\(--ceramic-red-700\)\]:is(.dark *) {
    --card-description: var(--ceramic-red-700)
}

.dark\:\[--card-title\:var\(--ceramic-red-600\)\]:is(.dark *) {
    --card-title: var(--ceramic-red-600)
}

.dark\:\[--cartesian-grid-stroke-color\:theme\(colors\.ceramic\.gray\.1000\)\]:is(.dark *) {
    --cartesian-grid-stroke-color: color-mix(in srgb, var(--ceramic-gray-1000) 100%, transparent)
}

.dark\:\[--cell-fill-color\:theme\(colors\.ceramic\.gray\.1200\)\]:is(.dark *) {
    --cell-fill-color: color-mix(in srgb, var(--ceramic-gray-1200) 100%, transparent)
}

.dark\:\[--chart-line-color\:var\(--ceramic-gray-1200\)\]:is(.dark *) {
    --chart-line-color: var(--ceramic-gray-1200)
}

.dark\:\[--chart-line-color\:var\(--ceramic-purple-600\)\]:is(.dark *) {
    --chart-line-color: var(--ceramic-purple-600)
}

.dark\:\[--data-table-bg\:theme\(colors\.ceramic\.gray\.1000\)\]:is(.dark *) {
    --data-table-bg: color-mix(in srgb, var(--ceramic-gray-1000) 100%, transparent)
}

.dark\:\[--data-table-bg\:theme\(colors\.ceramic\.gray\.1100\)\]:is(.dark *) {
    --data-table-bg: color-mix(in srgb, var(--ceramic-gray-1100) 100%, transparent)
}

.dark\:\[--data-table-bg\:theme\(colors\.ceramic\.gray\.1200\)\]:is(.dark *) {
    --data-table-bg: color-mix(in srgb, var(--ceramic-gray-1200) 100%, transparent)
}

.dark\:\[--data-table-bg\:theme\(colors\.ceramic\.gray\.1300\)\]:is(.dark *) {
    --data-table-bg: color-mix(in srgb, var(--ceramic-gray-1300) 100%, transparent)
}

.dark\:\[--data-table-bg\:theme\(colors\.ceramic\.gray\.1400\)\]:is(.dark *) {
    --data-table-bg: color-mix(in srgb, var(--ceramic-gray-1400) 100%, transparent)
}

.dark\:\[--data-table-bg\:theme\(colors\.ceramic\.gray\.1500\)\]:is(.dark *) {
    --data-table-bg: color-mix(in srgb, var(--ceramic-gray-1500) 100%, transparent)
}

.dark\:\[--menu-icon-color\:theme\(colors\.ceramic\.gray\.500\)\]:is(.dark *) {
    --menu-icon-color: color-mix(in srgb, var(--ceramic-gray-500) 100%, transparent)
}

.dark\:\[--x-axis-reference-line-color\:theme\(colors\.ceramic\.gray\.500\)\]:is(.dark *) {
    --x-axis-reference-line-color: color-mix(in srgb, var(--ceramic-gray-500) 100%, transparent)
}

/* ─── 15. ANIMATIONS (@keyframes, animate-*, transitions) ─── */

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --_ceramic-icon-fill, --_ceramic-icon-stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@keyframes caret-blink {
    0%, 70%, to {
        opacity: 1
    }
    20%, 50% {
        opacity: 0
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fade-out {
    to {
        opacity: 0
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

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

@keyframes ping {
    75%, to {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes shine {
    0% {
        background-position: 100%
    }
    to {
        background-position: -100%
    }
}

@keyframes shimmer {
    0%, to {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}

@keyframes scaleIn {
    0% {
        filter: blur(10px);
        opacity: 0;
        transform: scale(.85)
    }
    to {
        filter: blur(0);
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-8px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-caret-blink {
    animation: 1s ease-in-out infinite caret-blink;
}

.animate-fade-in {
    animation: fade-in var(--animation-duration, .2s) ease-in-out;
}

.animate-fade-out {
    animation: fade-out var(--animation-duration, .2s) ease-in-out;
}

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

.animate-spin {
    animation: 1s linear infinite spin;
}

.animate-ping {
    animation: 1s cubic-bezier(0, 0, .2, 1) infinite ping;
}

.animate-shine {
    animation: 3s linear infinite shine;
}

.animate-shimmer {
    animation: 1.5s ease-in-out infinite shimmer;
}

.animate-scale-in {
    animation: scaleIn .3s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-fade-in-up {
    animation: fadeInUp .5s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp .2s ease-out;
}

.animate-slide-down {
    animation: slideDown .2s ease-out;
}

.transition-all {
    transition-property: all;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-opacity {
    transition-property: opacity;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-transform {
    transition-property: transform;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-shadow {
    transition-property: box-shadow;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-\[height\] {
    transition-property: height;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.duration-75 {
    transition-duration: 75ms
}

.duration-100 {
    transition-duration: .1s
}

.duration-150 {
    transition-duration: .15s
}

.duration-200 {
    transition-duration: .2s
}

.duration-300 {
    transition-duration: .3s
}

.duration-500 {
    transition-duration: .5s
}

.duration-1000 {
    transition-duration: 1s
}

.duration-\[50ms\] {
    transition-duration: 50ms
}

.duration-\[120ms\] {
    transition-duration: .12s
}

.duration-\[240ms\] {
    transition-duration: .24s
}

.ease-spring-75 {
    transition-duration: .15s;
    transition-timing-function: linear(0, .7361, .9668, 1, 1);
}

.ease-spring-\[120ms\] {
    transition-duration: .2s;
    transition-timing-function: linear(0, .4268, .7868, .9317, .9797, .9943, 1);
}

/* ─── 16. HELPER UTILITIES ─── */

.rich-text :not(:where([class~=not-rich-text],
[class~=not-rich-text] *)):where(a) {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--ceramic-brand) calc(var(--tw-text-opacity, 1) * 100%), transparent);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --_ceramic-icon-fill, --_ceramic-icon-stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.before\:-z-1::before {
    content: '';
    z-index: -1;
}

:where(.\[\:where\(\&\)\]\:p-5\.5) {
    padding: 1.375rem;
}

.\!bg-\[theme\(colors\.ceramic\.green\.400\)\] {
    background-color: color-mix(in srgb, var(--ceramic-green-400) 100%, transparent) !important
}

.bg-purple-500\/4 {
    --tw-bg-opacity: 0.04;
    background-color: color-mix(in srgb, var(--ceramic-purple-500) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.ring-purple-500\/12 {
    --tw-ring-opacity: 0.12;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-purple-500) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

.\[\:where\(\&\)\]\:relative:where(&) {
    position: relative;
}

.data-\[disabled\]\:cursor-not-allowed[data-disabled] {
    cursor: not-allowed;
}

.data-\[disabled\]\:opacity-40[data-disabled] {
    opacity: 0.4;
}

.data-\[pending\]\:pointer-events-none[data-pending] {
    pointer-events: none;
}

.\[\:where\(\&\)\]\:justify-between:where(&) {
    justify-content: space-between;
}

.before\:from-30\%::before {
    --tw-gradient-from-position: 30%;
}

.fill-ceramic-brand\/20 {
    fill: color-mix(in srgb, var(--ceramic-brand) 20%, transparent)
}

.fill-ceramic-gray-200 {
    fill: color-mix(in srgb, var(--ceramic-gray-200) 100%, transparent)
}

.fill-ceramic-gray-600 {
    fill: color-mix(in srgb, var(--ceramic-gray-600) 100%, transparent)
}

.fill-ceramic-secondary {
    fill: color-mix(in srgb, var(--ceramic-secondary) 100%, transparent)
}

.fill-ceramic-white {
    fill: color-mix(in srgb, var(--ceramic-white) 100%, transparent)
}

.stroke-ceramic-black {
    stroke: color-mix(in srgb, var(--ceramic-black) 100%, transparent)
}

.stroke-ceramic-brand {
    stroke: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.stroke-ceramic-dimmed {
    stroke: color-mix(in srgb, var(--ceramic-dimmed) 100%, transparent)
}

.stroke-ceramic-gray-300 {
    stroke: color-mix(in srgb, var(--ceramic-gray-300) 100%, transparent)
}

.stroke-ceramic-gray-500 {
    stroke: color-mix(in srgb, var(--ceramic-gray-500) 100%, transparent)
}

.stroke-ceramic-gray-700\/12 {
    stroke: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent)
}

.stroke-ceramic-gray-700\/24 {
    stroke: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.stroke-ceramic-secondary {
    stroke: color-mix(in srgb, var(--ceramic-secondary) 100%, transparent)
}

.stroke-ceramic-warning {
    stroke: color-mix(in srgb, var(--ceramic-warning) 100%, transparent)
}

.text-\[var\(--card-description\2c var\(--ceramic-secondary\)\)\] {
    color: var(--card-description, var(--ceramic-secondary))
}

.text-\[var\(--card-title\2c var\(--ceramic-primary\)\)\] {
    color: var(--card-title, var(--ceramic-primary))
}

.text-\[var\(--pie-chart-label\2c var\(--ceramic-secondary\)\)\] {
    color: var(--pie-chart-label, var(--ceramic-secondary))
}

.text-\[var\(--pie-chart-number\2c var\(--ceramic-primary\)\)\] {
    color: var(--pie-chart-number, var(--ceramic-primary))
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, --_ceramic-icon-fill, --_ceramic-icon-stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.ceramic-icon-fill-\[\#F73D3D\]\/16 {
    --_ceramic-icon-fill: rgba(247, 61, 61, 0.16)
}

.ceramic-icon-fill-\[\#FD7224\]\/16 {
    --_ceramic-icon-fill: rgba(253, 114, 36, 0.16)
}

.ceramic-icon-fill-gray\/12 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent)
}

.ceramic-icon-fill-gray\/24 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-gray-700) 24%, transparent)
}

.ceramic-icon-fill-green\/24 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-green-700) 24%, transparent)
}

.ceramic-icon-fill-stone\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-stone-700) 16%, transparent);
}

.ceramic-icon-fill-stone\/24 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-stone-700) 24%, transparent);
}

.ceramic-icon-fill-orange\/24 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-orange-700) 24%, transparent)
}

.ceramic-icon-fill-red\/24 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-red-700) 24%, transparent)
}

.ceramic-icon-fill-yellow\/24 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-yellow-700) 24%, transparent)
}

.ceramic-icon-fill-white\/12 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 12%, transparent)
}

.ceramic-icon-fill-white\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-white) 16%, transparent)
}

.ceramic-icon-stroke-\[\#5F5F6F\] {
    --_ceramic-icon-stroke: #5F5F6F
}

.ceramic-icon-stroke-dimmed {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-dimmed) 100%, transparent)
}

.ceramic-icon-stroke-gray-600 {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-gray-600) 100%, transparent)
}

.ceramic-icon-stroke-gray-700 {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-gray-700) 100%, transparent)
}

.ceramic-icon-stroke-green-300 {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-green-300) 100%, transparent)
}

.ceramic-icon-stroke-orange-300 {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-orange-300) 100%, transparent)
}

.ceramic-icon-stroke-red-400 {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-red-400) 100%, transparent)
}

.ceramic-icon-stroke-yellow-400 {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-yellow-400) 100%, transparent)
}

.ceramic-icon-stroke-secondary {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-secondary) 100%, transparent)
}

.ceramic-icon-stroke-white {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-white) 100%, transparent)
}

.before\:transition:before {
    content: var(--tw-content);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, --_ceramic-icon-fill, --_ceramic-icon-stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

css /* isolate */
.isolate {
    isolation: isolate;
}

.block {
    display: block;
}

.w-fit {
    width: fit-content;
}

.min-w-full {
    min-width: 100%;
}

.\[\&_\.line\]\:inline-block .line {
    display: inline-block;
}

.\[\&_\.line\]\:w-full .line {
    width: 100%;
}

.\[\&_\.line\]\:before\:pointer-events-none .line::before {
    content: var(--tw-content);
    pointer-events: none;
}

.\[\&_\.line\]\:before\:sticky .line::before {
    content: var(--tw-content);
    position: sticky;
}

.\[\&_\.line\]\:before\:left-0 .line::before {
    content: var(--tw-content);
    left: 0;
}

.\[\&_\.line\]\:before\:z-20 .line::before {
    content: var(--tw-content);
    z-index: 20;
}

.\[\&_\.line\]\:before\:inline-block .line::before {
    content: var(--tw-content);
    display: inline-block;
}

.\[\&_\.line\]\:before\:select-none .line::before {
    content: var(--tw-content);
    -webkit-user-select: none;
    user-select: none;
}

.\[\&_\.line\]\:before\:from-gray-800 .line::before {
    content: var(--tw-content);
    --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.\[\&_\.line\]\:before\:w-4 .line::before {
    content: var(--tw-content);
    width: 1rem;
}

.\[\&_\.line\]\:before\:from-35\% .line::before {
    content: var(--tw-content);
    --tw-gradient-from-position: 35%;
}

.\[\&_\.line\]\:before\:content-\[\"_\"\] .line::before {
    --tw-content: " ";
    content: var(--tw-content);
}

.\[\&_\.line\]\:after\:pointer-events-none .line::after {
    content: var(--tw-content);
    pointer-events: none;
}

.\[\&_\.line\]\:after\:sticky .line::after {
    content: var(--tw-content);
    position: sticky;
}

.\[\&_\.line\]\:after\:right-0 .line::after {
    content: var(--tw-content);
    right: 0;
}

.\[\&_\.line\]\:after\:z-10 .line::after {
    content: var(--tw-content);
    z-index: 10;
}

.\[\&_\.line\]\:after\:inline-block .line::after {
    content: var(--tw-content);
    display: inline-block;
}

.\[\&_\.line\]\:after\:w-4 .line::after {
    content: var(--tw-content);
    width: 1rem;
}

.\[\&_\.line\]\:after\:select-none .line::after {
    content: var(--tw-content);
    -webkit-user-select: none;
    user-select: none;
}

.\[\&_\.line\]\:after\:from-gray-800 .line::after {
    content: var(--tw-content);
    --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.\[\&_\.line\]\:after\:from-35\% .line::after {
    content: var(--tw-content);
    --tw-gradient-from-position: 35%;
}

.\[\&_\.line\]\:after\:content-\[\"_\"\] .line::after {
    --tw-content: " ";
    content: var(--tw-content);
}

@media (min-width: 40em) {
    .sm\:\[\&_\.line\]\:before\:content-\[attr\(data-line\)\] .line::before {
        --tw-content: attr(data-line);
        content: var(--tw-content);
    }
}

.text-\[var\(--ceramic-purple-700\)\]\/80 {
    color: color-mix(in srgb, var(--ceramic-purple-700) 80%, transparent);
}

.from-\[var\(--ceramic-purple-600\)\]\/90 {
    --tw-gradient-from: color-mix(
            in srgb,
            var(--ceramic-purple-600) 90%,
            transparent
    );
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.to-\[var\(--ceramic-blue-600\)\]\/90 {
    --tw-gradient-to: color-mix(
            in srgb,
            var(--ceramic-blue-600) 90%,
            transparent
    );
}

.aria-\[current\=page\]\:ceramic-icon-stroke-primary[aria-current=page] {
    --_ceramic-icon-stroke: color-mix(in srgb, var(--ceramic-primary) 100%, transparent)
}

.light\:bg-gray-100:where(.light, .light *) {
    --tw-bg-opacity: 1;
    background-color: rgb(238 238 240/var(--tw-bg-opacity, 1));
}

.has-\[\:checked\]\:ring-1:has(:checked) {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color)
}

.filter-box {
    transition: border-color 0.2s ease;
}

.bg-gray1300-brand10 {
    background: color-mix(in srgb, var(--ceramic-brand) 10%, transparent), var(--ceramic-gray-1300);
}

@media (min-width: 640px) {
    .sm\:\[\&\:nth-child\(2\)\]\:bg-ceramic-brand\/2:nth-child(2) {
        background-color: color-mix(in srgb, var(--ceramic-brand) 2%, transparent)
    }

    @media (hover: hover) and (pointer: fine) {
        .sm\:\[\&\:nth-child\(2\)\]\:hover\:border-ceramic-brand\/10:hover:nth-child(2) {
            border-color: color-mix(in srgb, var(--ceramic-brand) 10%, transparent)
        }

        .sm\:\[\&\:nth-child\(2\)\]\:hover\:bg-ceramic-brand\/4:hover:nth-child(2) {
            background-color: color-mix(in srgb, var(--ceramic-brand) 4%, transparent)
        }
    }
}

.\[\&_\.react-aria-DropIndicator\]\:outline-ceramic-brand .react-aria-DropIndicator {
    outline-color: color-mix(in srgb, var(--ceramic-brand) 100%, transparent)
}

.\[\&_svg\]\:transition svg {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, --_ceramic-icon-fill, --_ceramic-icon-stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.\*\:after\:select-none > :after {
    content: var(--tw-content);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.\*\:after\:from-gray-1400 > :after {
    content: var(--tw-content);
    --tw-gradient-from: var(--ceramic-gray-1400) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(47 48 55/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.\*\:after\:from-35\% > :after {
    /*! content:var(--tw-content); *//*! --tw-gradient-from-position:35% */
}

.\*\:after\:content-\[\"_\"\] > :after {
    /*! --tw-content:" "; *//*! content:var(--tw-content) */
}

.\*\:before\:from-gray-1400 > :before {
    content: var(--tw-content);
    --tw-gradient-from: var(--ceramic-gray-1400) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(47 48 55/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.\*\:before\:from-35\% > :before {
    content: var(--tw-content);
    --tw-gradient-from-position: 35%
}

.\*\:before\:content-\[\"_\"\] > :before {
    --tw-content: " ";
    content: var(--tw-content)
}

.bg-\[\#048F42\]\/12 {
    background-color: rgb(4 143 66/.12);
}

.spotlight-overlay {
    transition: opacity 500ms ease;
}

.cw-56 {
    width: 56px;
    left: calc(50% - 28px);
}

.ch-56 {
    height: 56px;
    top: calc(50% - 28px);
}

.cw-64 {
    width: 64px;
    left: calc(50% - 32px);
}

.ch-64 {
    height: 64px;
    top: calc(50% - 32px);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
}

.bg-black\/3 {
    background-color: rgb(0 0 0/.03);
}

.bg-black\/12 {
    background-color: rgb(0 0 0/.12);
}

.ceramic-icon-fill-blue\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-blue-700) 16%, transparent);
}

.ceramic-icon-fill-indigo\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-indigo-700) 16%, transparent);
}

.ceramic-icon-fill-violet\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-violet-700) 16%, transparent);
}

.ceramic-icon-fill-purple\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-purple-700) 16%, transparent);
}

.ceramic-icon-fill-fuchsia\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-fuchsia-700) 16%, transparent);
}

.ceramic-icon-fill-pink\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-pink-700) 16%, transparent);
}

.ceramic-icon-fill-rose\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-rose-700) 16%, transparent);
}

.ceramic-icon-fill-red\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-red-700) 16%, transparent);
}

.ceramic-icon-fill-orange\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-orange-700) 16%, transparent);
}

.ceramic-icon-fill-amber\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-amber-700) 16%, transparent);
}

.ceramic-icon-fill-yellow\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-yellow-700) 16%, transparent);
}

.ceramic-icon-fill-lime\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-lime-700) 16%, transparent);
}

.ceramic-icon-fill-green\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-green-700) 16%, transparent);
}

.ceramic-icon-fill-emerald\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-emerald-700) 16%, transparent);
}

.ceramic-icon-fill-teal\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-teal-700) 16%, transparent);
}

.ceramic-icon-fill-cyan\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-cyan-700) 16%, transparent);
}

.ceramic-icon-fill-sky\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-sky-700) 16%, transparent);
}

.ceramic-icon-fill-slate\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-slate-700) 16%, transparent);
}

.ceramic-icon-fill-gray\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-gray-700) 16%, transparent);
}

.ceramic-icon-fill-zinc\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-zinc-700) 16%, transparent);
}

.ceramic-icon-fill-neutral\/16 {
    --_ceramic-icon-fill: color-mix(in srgb, var(--ceramic-neutral-700) 16%, transparent);
}

.stroke-ceramic-brand\/20 {
    stroke: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.stroke-ceramic-gray-200 {
    stroke: color-mix(in srgb, var(--ceramic-gray-200) 100%, transparent);
}

@media (min-width: 1024px) {
    .lg\:text-ceramic-heading-5 {
        font-size: 1.25rem;
        line-height: 1.75rem;
        letter-spacing: -.01em;
        font-weight: 500;
    }

    .lg\:text-ceramic-body-2 {
        font-size: .875rem;
        line-height: 1.25rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-spin {
        animation: 1s linear infinite spin;
    }

    .animate-draw-\[14\]\/150 {
        animation: draw .25s linear(0, .3542, .7113, .8874, .9591, .9858, 1, 1) forwards;
        stroke-dasharray: 14;
        stroke-dashoffset: 14px;
    }
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.will-change-transform {
    will-change: transform;
}

.contain-layout {
    contain: layout;
}

.contain-paint {
    contain: paint;
}

@supports (-webkit-touch-callout: none) {
    .ios\:py-\[0\.3125rem\] {
        padding-top: .3125rem;
        padding-bottom: .3125rem;
    }

    .ios\:text-ceramic-body-1 {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.375rem;
    }
}


abbr {
    text-decoration: none;
}

.cta-brand-glow:is(.dark *) {
    box-shadow: inset 0 1px 0.5px 0 rgb(255 255 255 / 0.05),
    0 0 0 1px color-mix(in srgb, var(--ceramic-orange-500) 20%, transparent),
    0 0 12px -3px color-mix(in srgb, var(--ceramic-orange-500) 10%, transparent);
}

[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        transition-duration: 0s;
    }
}

.stroke-ceramic-orange-100 {
    stroke: var(--ceramic-orange-100);
}

.fill-ceramic-icon-stroke-secondary {
    fill: var(--ceramic-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   CERAMIC EFFECTS — Advanced CSS Utilities
   ═══════════════════════════════════════════════════════════════ */

/* --- Elevation System (Vercel-style layered shadows) --- */
.ceramic-elevation-low {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

.ceramic-elevation-medium {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.05);
}

.ceramic-elevation-high {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02),
    0 8px 16px rgba(0, 0, 0, 0.03),
    0 16px 32px rgba(0, 0, 0, 0.04),
    0 32px 64px rgba(0, 0, 0, 0.06);
}

.dark .ceramic-elevation-low {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .ceramic-elevation-medium {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.25);
}

.dark .ceramic-elevation-high {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.15),
    0 16px 32px rgba(0, 0, 0, 0.2),
    0 32px 64px rgba(0, 0, 0, 0.3);
}

/* --- Glow Effects --- */
.ceramic-glow-brand {
    box-shadow: 0 0 0 1px rgba(224, 125, 0, 0.1),
    0 4px 12px rgba(255, 146, 19, 0.25),
    0 8px 24px rgba(255, 146, 19, 0.15);
}

.ceramic-glow-success {
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1),
    0 4px 12px rgba(34, 197, 94, 0.2);
}

.ceramic-glow-error {
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1),
    0 4px 12px rgba(239, 68, 68, 0.2);
}

/* --- Glassmorphism --- */
.ceramic-glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ceramic-glass-light {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ceramic-glass-dark {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* --- Text Gradient --- */
.ceramic-text-gradient-brand {
    background: linear-gradient(135deg, #FF9213, #E07D00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Noise Texture Overlay --- */
.ceramic-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

/* --- Dot Grid Pattern --- */
.ceramic-dot-grid {
    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 24px 24px;
}

/* --- Shimmer Animation --- */
@keyframes ceramic-shimmer {
    to {
        background-position: -200% 0;
    }
}

.ceramic-shimmer {
    background: linear-gradient(90deg, transparent 25%, rgba(0, 0, 0, 0.04) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: ceramic-shimmer 1.5s infinite;
}

.dark .ceramic-shimmer {
    background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.04) 50%, transparent 75%);
    background-size: 200% 100%;
}

/* --- Aurora Background Effect --- */
@keyframes ceramic-aurora {
    to {
        transform: rotate(360deg);
    }
}

.ceramic-aurora {
    position: relative;
    overflow: hidden;
}

.ceramic-aurora::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
            from 0deg at 50% 50%,
            rgba(255, 146, 19, 0.15),
            rgba(147, 51, 234, 0.1),
            rgba(59, 130, 246, 0.1),
            rgba(255, 146, 19, 0.15)
    );
    filter: blur(80px);
    animation: ceramic-aurora 20s linear infinite;
}

/* --- Pulse Glow (for CTAs) --- */
@keyframes ceramic-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 146, 19, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 146, 19, 0);
    }
}

.ceramic-pulse-glow {
    animation: ceramic-pulse-glow 2s ease-in-out infinite;
}

/* --- Scroll Reveal (CSS-only with fallback) --- */
@keyframes ceramic-reveal-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ceramic-reveal-scale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ceramic-reveal-up {
    animation: ceramic-reveal-up 0.6s ease-out both;
}

.ceramic-reveal-scale {
    animation: ceramic-reveal-scale 0.5s ease-out both;
}

/* Scroll-driven (Chrome/Edge 115+) */
@supports (animation-timeline: view()) {
    .ceramic-scroll-reveal {
        animation: ceramic-reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 40%;
    }
}

/* --- Gradient Border (Stripe-style via mask-composite) --- */
.ceramic-gradient-border {
    position: relative;
}

.ceramic-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 146, 19, 0.5), rgba(255, 146, 19, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* --- Custom Scrollbar --- */
.ceramic-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.ceramic-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.ceramic-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 3px;
}

.ceramic-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .25);
}

.dark .ceramic-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
}

.dark .ceramic-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .25);
}


/* ═══════════════════════════════════════════════════════════ */
/* ═══ CERAMIC COLOR UTILITIES — Generated block          ═══ */
/* ═══ All ceramic-{color}-{shade} utility classes        ═══ */
/* ═══════════════════════════════════════════════════════════ */

/* --- text-ceramic-{color}-{shade} --- */
.text-ceramic-blue-100 {
    color: var(--ceramic-blue-100);
}

.text-ceramic-blue-200 {
    color: var(--ceramic-blue-200);
}

.text-ceramic-blue-800 {
    color: var(--ceramic-blue-800);
}

.text-ceramic-blue-900 {
    color: var(--ceramic-blue-900);
}

.text-ceramic-green-200 {
    color: var(--ceramic-green-200);
}

.text-ceramic-green-300 {
    color: var(--ceramic-green-300);
}

.text-ceramic-green-800 {
    color: var(--ceramic-green-800);
}

.text-ceramic-green-900 {
    color: var(--ceramic-green-900);
}

.text-ceramic-orange-200 {
    color: var(--ceramic-orange-200);
}

.text-ceramic-orange-300 {
    color: var(--ceramic-orange-300);
}

.text-ceramic-orange-800 {
    color: var(--ceramic-orange-800);
}

.text-ceramic-orange-900 {
    color: var(--ceramic-orange-900);
}

.text-ceramic-red-200 {
    color: var(--ceramic-red-200);
}

.text-ceramic-sky-300 {
    color: var(--ceramic-sky-300);
}

.text-ceramic-sky-400 {
    color: var(--ceramic-sky-400);
}

.text-ceramic-sky-500 {
    color: var(--ceramic-sky-500);
}

.text-ceramic-sky-600 {
    color: var(--ceramic-sky-600);
}

.text-ceramic-sky-700 {
    color: var(--ceramic-sky-700);
}

.text-ceramic-sky-800 {
    color: var(--ceramic-sky-800);
}

.text-ceramic-yellow-300 {
    color: var(--ceramic-yellow-300);
}

.text-ceramic-yellow-400 {
    color: var(--ceramic-yellow-400);
}

.text-ceramic-yellow-500 {
    color: var(--ceramic-yellow-500);
}

.text-ceramic-yellow-600 {
    color: var(--ceramic-yellow-600);
}

.text-ceramic-yellow-700 {
    color: var(--ceramic-yellow-700);
}

.text-ceramic-yellow-800 {
    color: var(--ceramic-yellow-800);
}

/* --- dark:text-ceramic-{color}-{shade} --- */
.dark\:text-ceramic-blue-200:is(.dark *) {
    color: var(--ceramic-blue-200);
}

.dark\:text-ceramic-blue-600:is(.dark *) {
    color: var(--ceramic-blue-600);
}

.dark\:text-ceramic-green-200:is(.dark *) {
    color: var(--ceramic-green-200);
}

.dark\:text-ceramic-green-300:is(.dark *) {
    color: var(--ceramic-green-300);
}

.dark\:text-ceramic-green-600:is(.dark *) {
    color: var(--ceramic-green-600);
}

.dark\:text-ceramic-orange-300:is(.dark *) {
    color: var(--ceramic-orange-300);
}

.dark\:text-ceramic-red-200:is(.dark *) {
    color: var(--ceramic-red-200);
}

.dark\:text-ceramic-red-300:is(.dark *) {
    color: var(--ceramic-red-300);
}

.dark\:text-ceramic-sky-300:is(.dark *) {
    color: var(--ceramic-sky-300);
}

.dark\:text-ceramic-sky-400:is(.dark *) {
    color: var(--ceramic-sky-400);
}

.dark\:text-ceramic-yellow-300:is(.dark *) {
    color: var(--ceramic-yellow-300);
}

.dark\:text-ceramic-yellow-400:is(.dark *) {
    color: var(--ceramic-yellow-400);
}

/* --- bg-ceramic-{color}-{shade} --- */
.bg-ceramic-blue-200 {
    background-color: var(--ceramic-blue-200);
}

.bg-ceramic-blue-300 {
    background-color: var(--ceramic-blue-300);
}

.bg-ceramic-blue-400 {
    background-color: var(--ceramic-blue-400);
}

.bg-ceramic-blue-600 {
    background-color: var(--ceramic-blue-600);
}

.bg-ceramic-blue-700 {
    background-color: var(--ceramic-blue-700);
}

.bg-ceramic-blue-800 {
    background-color: var(--ceramic-blue-800);
}

.bg-ceramic-blue-900 {
    background-color: var(--ceramic-blue-900);
}

.bg-ceramic-blue-950 {
    background-color: var(--ceramic-blue-950);
}

.bg-ceramic-green-50 {
    background-color: var(--ceramic-green-50);
}

.bg-ceramic-green-200 {
    background-color: var(--ceramic-green-200);
}

.bg-ceramic-green-300 {
    background-color: var(--ceramic-green-300);
}

.bg-ceramic-green-800 {
    background-color: var(--ceramic-green-800);
}

.bg-ceramic-green-900 {
    background-color: var(--ceramic-green-900);
}

.bg-ceramic-green-950 {
    background-color: var(--ceramic-green-950);
}

.bg-ceramic-orange-200 {
    background-color: var(--ceramic-orange-200);
}

.bg-ceramic-orange-300 {
    background-color: var(--ceramic-orange-300);
}

.bg-ceramic-orange-800 {
    background-color: var(--ceramic-orange-800);
}

.bg-ceramic-orange-900 {
    background-color: var(--ceramic-orange-900);
}

.bg-ceramic-orange-950 {
    background-color: var(--ceramic-orange-950);
}

.bg-ceramic-purple-100 {
    background-color: var(--ceramic-purple-100);
}

.bg-ceramic-purple-400 {
    background-color: var(--ceramic-purple-400);
}

.bg-ceramic-purple-900 {
    background-color: var(--ceramic-purple-900);
}

.bg-ceramic-purple-950 {
    background-color: var(--ceramic-purple-950);
}

.bg-ceramic-red-800 {
    background-color: var(--ceramic-red-800);
}

.bg-ceramic-red-900 {
    background-color: var(--ceramic-red-900);
}

.bg-ceramic-red-950 {
    background-color: var(--ceramic-red-950);
}

.bg-ceramic-sky-50 {
    background-color: var(--ceramic-sky-50);
}

.bg-ceramic-sky-100 {
    background-color: var(--ceramic-sky-100);
}

.bg-ceramic-sky-400 {
    background-color: var(--ceramic-sky-400);
}

.bg-ceramic-sky-500 {
    background-color: var(--ceramic-sky-500);
}

.bg-ceramic-sky-900 {
    background-color: var(--ceramic-sky-900);
}

.bg-ceramic-yellow-50 {
    background-color: var(--ceramic-yellow-50);
}

.bg-ceramic-yellow-100 {
    background-color: var(--ceramic-yellow-100);
}

.bg-ceramic-yellow-400 {
    background-color: var(--ceramic-yellow-400);
}

.bg-ceramic-yellow-500 {
    background-color: var(--ceramic-yellow-500);
}

.bg-ceramic-yellow-900 {
    background-color: var(--ceramic-yellow-900);
}

/* --- border-ceramic-{color}-{shade} --- */
.border-ceramic-blue-200 {
    border-color: var(--ceramic-blue-200);
}

.border-ceramic-blue-300 {
    border-color: var(--ceramic-blue-300);
}

.border-ceramic-blue-700 {
    border-color: var(--ceramic-blue-700);
}

.border-ceramic-blue-800 {
    border-color: var(--ceramic-blue-800);
}

.border-ceramic-green-100 {
    border-color: var(--ceramic-green-100);
}

.border-ceramic-green-200 {
    border-color: var(--ceramic-green-200);
}

.border-ceramic-green-300 {
    border-color: var(--ceramic-green-300);
}

.border-ceramic-green-700 {
    border-color: var(--ceramic-green-700);
}

.border-ceramic-green-800 {
    border-color: var(--ceramic-green-800);
}

.border-ceramic-orange-200 {
    border-color: var(--ceramic-orange-200);
}

.border-ceramic-orange-300 {
    border-color: var(--ceramic-orange-300);
}

.border-ceramic-orange-400 {
    border-color: var(--ceramic-orange-400);
}

.border-ceramic-orange-800 {
    border-color: var(--ceramic-orange-800);
}

.border-ceramic-purple-200 {
    border-color: var(--ceramic-purple-200);
}

.border-ceramic-red-200 {
    border-color: var(--ceramic-red-200);
}

.border-ceramic-red-300 {
    border-color: var(--ceramic-red-300);
}

.border-ceramic-red-400 {
    border-color: var(--ceramic-red-400);
}

.border-ceramic-red-800 {
    border-color: var(--ceramic-red-800);
}

.border-ceramic-sky-200 {
    border-color: var(--ceramic-sky-200);
}

.border-ceramic-sky-500 {
    border-color: var(--ceramic-sky-500);
}

.border-ceramic-yellow-200 {
    border-color: var(--ceramic-yellow-200);
}

.border-ceramic-yellow-300 {
    border-color: var(--ceramic-yellow-300);
}

.border-ceramic-yellow-500 {
    border-color: var(--ceramic-yellow-500);
}

/* --- ring-ceramic-{color}-{shade} --- */
.ring-ceramic-blue-100 {
    --tw-ring-color: var(--ceramic-blue-100);
}

.ring-ceramic-blue-200 {
    --tw-ring-color: var(--ceramic-blue-200);
}

.ring-ceramic-blue-300 {
    --tw-ring-color: var(--ceramic-blue-300);
}

.ring-ceramic-blue-400 {
    --tw-ring-color: var(--ceramic-blue-400);
}

.ring-ceramic-blue-600 {
    --tw-ring-color: var(--ceramic-blue-600);
}

.ring-ceramic-blue-700 {
    --tw-ring-color: var(--ceramic-blue-700);
}

.ring-ceramic-blue-800 {
    --tw-ring-color: var(--ceramic-blue-800);
}

.ring-ceramic-blue-900 {
    --tw-ring-color: var(--ceramic-blue-900);
}

.ring-ceramic-green-100 {
    --tw-ring-color: var(--ceramic-green-100);
}

.ring-ceramic-green-200 {
    --tw-ring-color: var(--ceramic-green-200);
}

.ring-ceramic-green-300 {
    --tw-ring-color: var(--ceramic-green-300);
}

.ring-ceramic-green-400 {
    --tw-ring-color: var(--ceramic-green-400);
}

.ring-ceramic-green-600 {
    --tw-ring-color: var(--ceramic-green-600);
}

.ring-ceramic-green-700 {
    --tw-ring-color: var(--ceramic-green-700);
}

.ring-ceramic-green-800 {
    --tw-ring-color: var(--ceramic-green-800);
}

.ring-ceramic-orange-100 {
    --tw-ring-color: var(--ceramic-orange-100);
}

.ring-ceramic-orange-200 {
    --tw-ring-color: var(--ceramic-orange-200);
}

.ring-ceramic-orange-300 {
    --tw-ring-color: var(--ceramic-orange-300);
}

.ring-ceramic-orange-700 {
    --tw-ring-color: var(--ceramic-orange-700);
}

.ring-ceramic-orange-800 {
    --tw-ring-color: var(--ceramic-orange-800);
}

.ring-ceramic-orange-900 {
    --tw-ring-color: var(--ceramic-orange-900);
}

.ring-ceramic-purple-100 {
    --tw-ring-color: var(--ceramic-purple-100);
}

.ring-ceramic-purple-200 {
    --tw-ring-color: var(--ceramic-purple-200);
}

.ring-ceramic-purple-300 {
    --tw-ring-color: var(--ceramic-purple-300);
}

.ring-ceramic-purple-400 {
    --tw-ring-color: var(--ceramic-purple-400);
}

.ring-ceramic-purple-50 {
    --tw-ring-color: var(--ceramic-purple-50);
}

.ring-ceramic-purple-900 {
    --tw-ring-color: var(--ceramic-purple-900);
}

.ring-ceramic-red-100 {
    --tw-ring-color: var(--ceramic-red-100);
}

.ring-ceramic-red-400 {
    --tw-ring-color: var(--ceramic-red-400);
}

.ring-ceramic-red-50 {
    --tw-ring-color: var(--ceramic-red-50);
}

.ring-ceramic-red-600 {
    --tw-ring-color: var(--ceramic-red-600);
}

.ring-ceramic-red-700 {
    --tw-ring-color: var(--ceramic-red-700);
}

.ring-ceramic-red-900 {
    --tw-ring-color: var(--ceramic-red-900);
}

.ring-ceramic-sky-500 {
    --tw-ring-color: var(--ceramic-sky-500);
}

.ring-ceramic-yellow-500 {
    --tw-ring-color: var(--ceramic-yellow-500);
}

/* ═══════════════════════════════════════════════════════════ */
/* ═══ CERAMIC TEXT SHINE — Raycast-inspired gradient text  ═══ */
/* ═══════════════════════════════════════════════════════════ */

/* Always-on: works on any dark surface regardless of html.dark */
/* Uses !important to override Tailwind CDN JIT (rendered after <link>) */
.ceramic-text-shine {
    background: linear-gradient(90deg, rgba(255, 255, 255, .80) 0%, #fff 50%, rgba(255, 255, 255, .80) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}

.ceramic-text-shine-brand {
    background: linear-gradient(90deg, rgba(255, 146, 19, .65) 0%, #FF9213 50%, rgba(255, 146, 19, .65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}

.ceramic-text-shine-muted {
    background: linear-gradient(90deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, .45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}

/* Dark-only variants: apply shine only in dark mode (with text-role-* fallback in light) */
.dark .dark\:ceramic-text-shine {
    background: linear-gradient(90deg, rgba(255, 255, 255, .80) 0%, #fff 50%, rgba(255, 255, 255, .80) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}

.dark .dark\:ceramic-text-shine-brand {
    background: linear-gradient(90deg, rgba(255, 146, 19, .65) 0%, #FF9213 50%, rgba(255, 146, 19, .65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}

.dark .dark\:ceramic-text-shine-muted {
    background: linear-gradient(90deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, .45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}

/* ─── 17. SITE HEADER (sticky scroll, merged from site-header.css) ─── */

.page-header {
    left: 0;

    right: 0;
    top: 0;
    width: 100%;
    z-index: 50;
}

.page-header.site-header--fixed {
    min-height: 76px;
}

.site-header--fixed .site-header__bottom-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.8);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header--visible .site-header__bottom-wrapper {
    transform: translateY(0);
}

.dark .site-header--fixed .site-header__bottom-wrapper {
    background: rgb(9 9 11 / 0.4);
    border-bottom-color: rgb(255 255 255 / 0.06);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
}

.header-search-bar {
    display: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.site-header--visible .header-search-bar {
    display: flex;
    pointer-events: auto;
    opacity: 1;
}

/* ─── 18. GLOBAL LAYOUT (merged from master.blade.php inline styles) ─── */

 
/* Ceramic ring utility */
.ring-ceramic-gray-200\/80 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-200, #ececee) 80%, transparent);
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color), var(--tw-shadow, 0 0 0 #0000);
}

/* Tawk.to z-index override */
#tawk-bubble-container, .tawk-min-container, iframe[title="chat widget"] {
    z-index: 999 !important;
}

/* A11y: Skip-to-content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 0.75rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    background-color: var(--brand-primary);
    color: #fff;
    outline: none;
}

/* A11y: Focus visible ring */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Mobile: Minimum touch targets */
@media (pointer: coarse) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    button, a, [role="button"] {
        touch-action: manipulation;
    }
}

/* Text rendering */
html, body {
    overflow-x: clip;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* Dark mode body — switch bg + text when .dark is on <html> */
:is(.dark body) {

    color: var(--text-strong-950);
    color-scheme: dark;
}

/* ─── 19. RTL UTILITIES (merged from master.blade.php) ─── */

[dir="rtl"] .rtl\:flip {
    transform: scaleX(-1);
}

[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

[dir="rtl"] .gap-x-3 {
    direction: rtl;
}

[dir="rtl"] .text-left {
    text-align: right;
}

[dir="rtl"] .text-right {
    text-align: left;
}

[dir="rtl"] .ml-auto {
    margin-left: unset;
    margin-right: auto;
}

[dir="rtl"] .mr-auto {
    margin-right: unset;
    margin-left: auto;
}

[dir="rtl"] .pl-4 {
    padding-left: unset;
    padding-right: 1rem;
}

[dir="rtl"] .pr-4 {
    padding-right: unset;
    padding-left: 1rem;
}

[dir="rtl"] .pl-11 {
    padding-left: unset;
    padding-right: 2.75rem;
}

[dir="rtl"] .pr-10 {
    padding-right: unset;
    padding-left: 2.5rem;
}

[dir="rtl"] .rounded-l-xl {
    border-radius: 0 0.75rem 0.75rem 0;
}

[dir="rtl"] .rounded-r-xl {
    border-radius: 0.75rem 0 0 0.75rem;
}

[dir="rtl"] .-translate-x-full {
    transform: translateX(100%);
}

[dir="rtl"] .translate-x-0 {
    transform: translateX(0);
}

[dir="rtl"] .rtl\:flex-row-reverse {
    flex-direction: row-reverse;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   AlignUI Color Foundation (migrated from color.css)
   Raw color palette + semantic tokens + alpha variants + theme switching
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {

    --theme-color-blue: 51 92 255; /* #335CFF | blue-500 */
    --theme-color-green: 31 193 107; /* #1FC16B | green-500 */
    --theme-color-orange: 250 115 25; /* #FA7319 | orange-500 */
    --theme-color-red: 251 55 72; /* #FB3748 | red-500 */
    --theme-color-yellow: 246 181 30; /* #F6B51E | yellow-500 */
    --theme-color-purple: 125 82 244; /* #7D52F4 | purple-500 */
    --theme-color-teal: 34 211 187; /* #22D3BB | teal-500 */
    --theme-color-sky: 71 194 255; /* #47C2FF | sky-500 */
    --theme-color-pink: 251 75 163; /* #FB4BA3 | pink-500 */

    /* Дополнительные нейтральные темы */
    --theme-color-slate: 100 116 139; /* #64748B | slate-500 */
    --theme-color-zinc: 125 126 128; /* #7D7E80 | zinc-300 */
    --theme-color-neutral: 113 113 122; /* #71717A | neutral-500 */
    --theme-color-gray: 123 123 123; /* #7B7B7B | gray-500 */

    /* Очень светлый и очень тёмный */
    --theme-color-light: 255 255 255; /* #FFFFFF */
    --theme-color-dark: 15 16 20; /* #0F1014 | zinc-900 */
    --zinc-0: 255 255 255 / 80%; /* Белый цвет с прозрачностью 80% */
    --zinc-50: 235 235 235; /* #ebebeb */
    --zinc-100: 210 211 212; /* #d2d3d4 */
    --zinc-200: 170 171 172; /* #aaabab */
    --zinc-300: 125 126 128; /* #7d7e80 */
    --zinc-400: 85 86 88; /* #555658 */
    --zinc-500: 55 56 58; /* #37383a */
    --zinc-600: 35 36 38; /* #232426 */
    --zinc-700: 25 26 28; /* #191a1c */
    --zinc-800: 18 19 22; /* #121316 */
    --zinc-900: 15 16 20; /* #0f1014 */
    --zinc-950: 14 14 15; /* #0a0a0b */
    --neutral-0: 255 255 255;
    --neutral-50: 250 250 250;
    --neutral-100: 244 244 245;
    --neutral-200: 228 228 231;
    --neutral-300: 212 212 216;
    --neutral-400: 161 161 170;
    --neutral-500: 113 113 122;
    --neutral-600: 82 82 91;
    --neutral-700: 63 63 70;
    --neutral-800: 39 39 42;
    --neutral-900: 24 24 27;
    --neutral-950: 9 9 11;
    --gray-alpha-24: 163 163 163/24%;
    --gray-alpha-16: 163 163 163/16%;
    --gray-alpha-10: 163 163 163/10%;
    --slate-0: 255 255 255;
    --slate-50: 245 247 250;
    --slate-100: 242 245 248;
    --slate-150: 233 238 245;
    --slate-200: 226 232 240;
    --slate-300: 202 207 216;
    --slate-400: 148 163 184;
    --slate-500: 100 116 139;
    --slate-600: 71 85 105;
    --slate-700: 51 65 85;
    --slate-800: 30 41 59;
    --slate-900: 15 23 42;
    --slate-950: 14 18 27;
    --slate-alpha-24: 153 160 174/24%;
    --slate-alpha-16: 153 160 174/16%;
    --slate-alpha-10: 153 160 174/10%;
    --gray-950: 23 23 23;
    --gray-900: 28 28 28;
    --gray-800: 41 41 41;
    --gray-700: 51 51 51;
    --gray-600: 92 92 92;
    --gray-500: 123 123 123;
    --gray-400: 163 163 163;
    --gray-300: 209 209 209;
    --gray-200: 235 235 235;
    --gray-100: 245 245 245;
    --gray-50: 247 247 247;
    --gray-0: 255 255 255;
    --blue-950: 18 35 104;
    --blue-900: 24 47 139;
    --blue-800: 31 59 173;
    --blue-700: 37 71 208;
    --blue-600: 53 89 233;
    --blue-500: 51 92 255;
    --blue-400: 104 149 255;
    --blue-300: 151 186 255;
    --blue-200: 192 213 255;
    --blue-100: 213 226 255;
    --blue-50: 235 241 255;
    --orange-950: 113 51 10;
    --orange-900: 150 68 13;
    --orange-800: 183 83 16;
    --orange-700: 206 94 18;
    --orange-600: 225 102 20;
    --orange-500: 250 115 25;
    --orange-400: 255 164 104;
    --orange-300: 255 193 151;
    --orange-200: 255 217 192;
    --orange-100: 255 230 213;
    --orange-50: 255 243 235;

    --red-950: 104 18 25;
    --red-900: 139 24 34;
    --red-800: 173 31 43;
    --red-700: 208 37 51;
    --red-600: 233 53 68;
    --red-500: 251 55 72;
    --red-400: 255 104 117;
    --red-300: 255 151 160;
    --red-200: 255 192 197;
    --red-100: 255 213 216;
    --red-50: 255 235 236;

    --green-950: 11 70 39;
    --green-900: 22 100 59;
    --green-800: 26 117 68;
    --green-700: 23 140 78;
    --green-600: 29 175 97;
    --green-500: 31 193 107;
    --green-400: 62 224 137;
    --green-300: 132 235 180;
    --green-200: 194 245 218;
    --green-100: 208 251 233;
    --green-50: 224 250 236;

    --yellow-950: 98 76 24;
    --yellow-900: 134 102 29;
    --yellow-800: 167 128 37;
    --yellow-700: 201 154 44;
    --yellow-600: 230 168 25;
    --yellow-500: 246 181 30;
    --yellow-400: 255 210 104;
    --yellow-300: 255 224 151;
    --yellow-200: 255 236 192;
    --yellow-100: 255 239 204;
    --yellow-50: 255 244 214;

    --purple-950: 53 26 117;
    --purple-900: 61 29 134;
    --purple-800: 76 37 167;
    --purple-700: 91 44 201;
    --purple-600: 105 62 224;
    --purple-500: 125 82 244;
    --purple-400: 140 113 246;
    --purple-300: 168 151 255;
    --purple-200: 202 192 255;
    --purple-100: 220 213 255;
    --purple-50: 239 235 255;

    --teal-950: 11 70 62;
    --teal-900: 22 100 90;
    --teal-800: 26 117 105;
    --teal-700: 23 140 125;
    --teal-600: 29 175 156;
    --teal-500: 34 211 187;
    --teal-400: 63 222 201;
    --teal-300: 132 235 221;
    --teal-200: 194 245 238;
    --teal-100: 208 251 245;
    --teal-50: 228 251 248;

    --sky-950: 18 75 104;
    --sky-900: 24 101 139;
    --sky-800: 31 126 173;
    --sky-700: 37 151 208;
    --sky-600: 53 173 233;
    --sky-500: 71 194 255;
    --sky-400: 104 205 255;
    --sky-300: 151 220 255;
    --sky-200: 192 234 255;
    --sky-100: 213 241 255;
    --sky-50: 235 248 255;

    --pink-950: 104 18 61;
    --pink-900: 139 24 82;
    --pink-800: 173 31 102;
    --pink-700: 208 37 122;
    --pink-600: 233 53 143;
    --pink-500: 251 75 163;
    --pink-400: 255 104 179;
    --pink-300: 255 151 203;
    --pink-200: 255 192 223;
    --pink-100: 255 213 234;
    --pink-50: 255 235 244;

    --neutral-alpha-24: 153 160 174/24%;
    --neutral-alpha-16: 153 160 174/16%;
    --neutral-alpha-10: 153 160 174/10%;

    --zinc-alpha-24: 67 67 69 / 24%;
    --zinc-alpha-16: 67 67 69 / 16%;
    --zinc-alpha-10: 67 67 69 / 10%;

    --blue-alpha-24: 71 108 255/24%;
    --blue-alpha-16: 71 108 255/16%;
    --blue-alpha-10: 71 108 255/10%;

    --orange-alpha-24: 255 145 71/24%;
    --orange-alpha-16: 255 145 71/16%;
    --orange-alpha-10: 255 145 71/10%;

    --red-alpha-24: 251 55 72/24%;
    --red-alpha-16: 251 55 72/16%;
    --red-alpha-10: 251 55 72/10%;

    --green-alpha-24: 31 193 107/24%;
    --green-alpha-16: 31 193 107/16%;
    --green-alpha-10: 31 193 107/10%;

    --yellow-alpha-24: 251 198 75/24%;
    --yellow-alpha-16: 251 198 75/16%;
    --yellow-alpha-10: 251 198 75/10%;

    --purple-alpha-24: 120 77 239/24%;
    --purple-alpha-16: 120 77 239/16%;
    --purple-alpha-10: 120 77 239/10%;

    --sky-alpha-24: 71 194 255/24%;
    --sky-alpha-16: 71 194 255/16%;
    --sky-alpha-10: 71 194 255/10%;

    --pink-alpha-24: 251 75 163/24%;
    --pink-alpha-16: 251 75 163/16%;
    --pink-alpha-10: 251 75 163/10%;

    --teal-alpha-24: 34 211 187/24%;
    --teal-alpha-16: 34 211 187/16%;
    --teal-alpha-10: 34 211 187/10%;

    --white-alpha-24: 255 255 255/24%;
    --white-alpha-16: 255 255 255/16%;
    --white-alpha-10: 255 255 255/10%;

    --black-alpha-24: 14 18 27/24%;
    --black-alpha-16: 14 18 27/16%;
    --black-alpha-10: 14 18 27/10%;


}

html.red {
    --primary-dark: var(--red-800);
    --primary-darker: var(--red-700);
    --primary-base: var(--red-500);
    --primary-alpha-24: var(--red-alpha-24);
    --primary-alpha-16: var(--red-alpha-16);
    --primary-alpha-10: var(--red-alpha-10);
}

html.blue {
    --primary-dark: var(--blue-800);
    --primary-darker: var(--blue-700);
    --primary-base: var(--blue-500);
    --primary-alpha-24: var(--blue-alpha-24);
    --primary-alpha-16: var(--blue-alpha-16);
    --primary-alpha-10: var(--blue-alpha-10);
}

html.orange {
    --primary-dark: var(--orange-800);
    --primary-darker: var(--orange-700);
    --primary-base: var(--orange-500);
    --primary-alpha-24: var(--orange-alpha-24);
    --primary-alpha-16: var(--orange-alpha-16);
    --primary-alpha-10: var(--orange-alpha-10);
}

html.purple {
    --primary-dark: var(--purple-800);
    --primary-darker: var(--purple-700);
    --primary-base: var(--purple-500);
    --primary-alpha-24: var(--purple-alpha-24);
    --primary-alpha-16: var(--purple-alpha-16);
    --primary-alpha-10: var(--purple-alpha-10);

}

html.sky {
    --primary-dark: var(--sky-800);
    --primary-darker: var(--sky-700);
    --primary-base: var(--sky-600);
    --primary-alpha-24: var(--sky-alpha-24);
    --primary-alpha-16: var(--sky-alpha-16);
    --primary-alpha-10: var(--sky-alpha-10);

}


/* ═══ AlignUI Utility Classes (hand-written, not Tailwind-generated) ═══ */

.accent {
    color: var(--accent);
}

/* box-shadow utilities (reference CSS vars from html{} block above) */
.shadow-ring {
    box-shadow: var(--shadow-ring);
}

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-xs.shadow-ring {
    box-shadow: var(--shadow-xs), var(--shadow-ring);
}

.shadow-sm.shadow-ring {
    box-shadow: var(--shadow-sm), var(--shadow-ring);
}

.shadow-md.shadow-ring {
    box-shadow: var(--shadow-md), var(--shadow-ring);
}

.shadow-lg.shadow-ring {
    box-shadow: var(--shadow-lg), var(--shadow-ring);
}

.shadow-xl.shadow-ring {
    box-shadow: var(--shadow-xl), var(--shadow-ring);
}

/* Autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px rgb(var(--autofill-bg)) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Selection highlight */
::selection {
    background: rgba(var(--primary-base), 0.2);
}

::-moz-selection {
    background: rgba(var(--primary-base), 0.2);
}

/* Brand utility classes — use var(--brand-primary) from theme color.css */
.text-brand,
.text-ceramic-brand {
    color: var(--brand-primary);
}

.bg-brand,
.bg-ceramic-brand {
    background-color: var(--brand-primary);
}

.border-brand,
.border-ceramic-brand {
    border-color: var(--brand-primary);
}

.ring-brand,
.ring-ceramic-brand {
    --tw-ring-color: var(--brand-primary);
}

.fill-brand,
.fill-ceramic-brand {
    fill: var(--brand-primary);
}

.stroke-brand,
.stroke-ceramic-brand {
    stroke: var(--brand-primary);
}