#ck-chat-widget-container{position:fixed;bottom:88px;right:24px;z-index:9999;font-family:'Inter',system-ui,-apple-system,sans-serif}.ck-hidden{display:none!important}#ck-chat-toggle{width:48px;height:48px;border-radius:50%;background:var(--color-content-brand);color:var(--color-content-inverse);border:none;box-shadow:0 4px 15px rgb(0 0 0 / .2);cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0;transition:transform 0.3s cubic-bezier(.175,.885,.32,1.275),box-shadow 0.3s ease}#ck-chat-toggle:hover{transform:scale(1.1);box-shadow:0 6px 20px rgb(0 0 0 / .3)}#ck-chat-toggle:active{transform:scale(.95)}#ck-chat-toggle svg{width:22px;height:22px}#ck-chat-window{width:350px;height:500px;background:var(--color-card);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 10px 40px rgb(0 0 0 / .15);display:flex;flex-direction:column;overflow:hidden;animation:ckFadeInUp 0.4s cubic-bezier(.165,.84,.44,1);border:1px solid var(--color-line-default)}@keyframes ckFadeInUp{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.ck-chat-header{background:var(--color-content-brand);color:var(--color-content-inverse);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.ck-chat-title h4{margin:0;font-size:16px;font-weight:600}.ck-chat-status{font-size:11px;opacity:.8;display:flex;align-items:center;gap:4px}.ck-chat-status::before{content:'';display:inline-block;width:8px;height:8px;background:#4cd964;border-radius:50%}#ck-chat-close{background:none;border:none;color:var(--color-content-inverse);cursor:pointer;opacity:.7;transition:opacity 0.2s ease;padding:0}#ck-chat-close:hover{opacity:1}.ck-chat-messages{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:var(--color-page)}.ck-chat-messages::-webkit-scrollbar{width:5px}.ck-chat-messages::-webkit-scrollbar-thumb{background:var(--color-line-brand);border-radius:5px}.ck-msg{max-width:85%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.5;position:relative;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;flex-shrink:0;animation:ckMessagePop 0.3s ease}@keyframes ckMessagePop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.ck-msg-header{font-size:11px;margin-bottom:4px;color:var(--color-content-tertiary)}.ck-msg-user{background:var(--color-content-brand);color:var(--color-content-inverse);align-self:flex-end;border-bottom-right-radius:4px}.ck-msg-user .ck-msg-header{display:none}.ck-msg-ai,.ck-msg-admin{background:var(--color-surface-2);color:var(--color-content-primary);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 2px 10px rgb(0 0 0 / .05);border:1px solid var(--color-line-default)}.ck-msg-system{align-self:center;background:var(--color-surface-3);color:var(--color-content-tertiary);font-size:12px;padding:8px 12px;border-radius:10px;max-width:90%;text-align:center}.ck-chat-typing-indicator{padding:10px 20px;font-size:12px;color:var(--color-content-tertiary);background:var(--color-page);font-style:italic}.ck-chat-typing-indicator span{animation:ckBlink 1.4s infinite both}.ck-chat-typing-indicator span:nth-child(2){animation-delay:0.2s}.ck-chat-typing-indicator span:nth-child(3){animation-delay:0.4s}@keyframes ckBlink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.ck-chat-input-area{padding:15px;background:var(--color-card);border-top:1px solid var(--color-line-default);display:flex;align-items:flex-end;gap:10px}#ck-chat-input{flex:1;border:1px solid var(--color-line-default);border-radius:12px;padding:10px 12px;font-family:inherit;font-size:14px;resize:none;height:44px;max-height:100px;outline:none;transition:border-color 0.2s ease;background:var(--color-surface-2);color:var(--color-content-primary)}#ck-chat-input:focus{border-color:var(--color-content-brand);background:var(--color-surface-1)}#ck-chat-send{width:44px;height:44px;border-radius:12px;background:var(--color-content-brand);color:var(--color-content-inverse);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease}#ck-chat-send:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgb(0 0 0 / .2)}#ck-chat-send:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width:640px){#ck-chat-widget-container{bottom:0;right:0;pointer-events:none}#ck-chat-window{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;max-height:100dvh;border-radius:0;border:none;z-index:99999;pointer-events:auto}#ck-chat-toggle{position:fixed;bottom:88px;right:24px;z-index:9999;margin:0;width:48px;height:48px;pointer-events:auto}}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; :root, :host { --font-sans: 'Outfit', ui-sans-serif, system-ui; --font-serif: 'Libre Baskerville', ui-serif, Georgia, serif; --font-reading: 'Lora', ui-serif, Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --tracking-tighter: -0.05em; --tracking-tight: -0.035em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.15em; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.625; --leading-relaxed: 1.75; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.75rem; --text-5xl: 3.5rem; --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; --color-primary-50: #f0f7ff; --color-primary-100: #e0effe; --color-primary-200: #bae0fd; --color-primary-300: #7cc2fc; --color-primary-400: #38a3f8; --color-primary-500: #0ea5e9; --color-primary-600: #0180c1; --color-primary-700: #0369a1; --color-primary-800: #075985; --color-primary-900: #0c4a6e; --color-primary-950: #082f49; --color-secondary-100: #fef3c7; --color-secondary-400: #fbbf24; --color-secondary-500: #f59e0b; --color-secondary-600: #d97706; --color-secondary-800: #92400e; --color-secondary-900: #78350f; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #0ea5e9; --color-facebook: #1877f2; --color-instagram: #e4405f; --color-youtube: #ff0000; --color-pinterest: #bd081c; --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; --color-white: #ffffff; --color-black: #000000; --color-slate-900-rgb: 15, 23, 42; --color-primary-600-rgb: 1, 128, 193; --color-success-rgb: 16, 185, 129; --color-danger-rgb: 239, 68, 68; --color-sepia-primary-rgb: 51, 91, 115; --color-page: var(--color-slate-50); --color-surface-1: var(--color-white); --color-surface-2: var(--color-slate-100); --color-surface-3: var(--color-slate-200); --color-header: var(--color-surface-1); --color-card: var(--color-surface-1); --color-highlight: color-mix(in srgb, #0180c1 6%, transparent); @supports (color: color-mix(in lab, red, red)) { --color-highlight: color-mix(in srgb, var(--color-primary-600) 6%, transparent); } --color-bg-main: var(--color-page); --color-bg-surface: var(--color-surface-1); --color-content-primary: var(--color-slate-900); --color-content-secondary: var(--color-slate-700); --color-content-tertiary: var(--color-slate-700); --color-content-brand: var(--color-primary-700); --color-content-inverse: var(--color-white); --color-success-content: #047857; --color-warning-content: var(--color-secondary-800); --color-danger-content: #b91c1c; --color-info-content: var(--color-primary-700); --color-success-bg: rgba(var(--color-success-rgb), 0.1); --color-success-border: rgba(var(--color-success-rgb), 0.2); --color-danger-bg: rgba(var(--color-danger-rgb), 0.1); --color-danger-border: rgba(var(--color-danger-rgb), 0.2); --color-line-subtle: var(--color-slate-100); --color-line-default: var(--color-slate-200); --color-line-strong: var(--color-slate-300); --color-line-brand: var(--color-primary-200); --color-tier-bg: var(--color-primary-100); --color-tier-text: var(--color-primary-900); --color-tier-accent: var(--color-primary-600); --color-glass-light: rgba(var(--color-white-rgb), 0.4); --color-glass-dark: rgba(var(--color-black-rgb), 0.4); --color-shimmer-via: rgba(var(--color-white-rgb), 0.5); --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --radius-5xl: 3rem; --radius-full: 9999px; --shadow-soft: 0 4px 6px -1px rgba(var(--color-slate-900-rgb), 0.05), 0 2px 4px -1px rgba(var(--color-slate-900-rgb), 0.03); --shadow-medium: 0 10px 15px -3px rgba(var(--color-slate-900-rgb), 0.08), 0 4px 6px -2px rgba(var(--color-slate-900-rgb), 0.04); --shadow-premium: 0 20px 25px -5px rgba(var(--color-slate-900-rgb), 0.1), 0 10px 10px -5px rgba(var(--color-slate-900-rgb), 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.1); --shadow-float: 0 25px 50px -12px rgba(var(--color-slate-900-rgb), 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.05); --z-overlay: 10000; --z-tooltip: 10010; --z-toast: 10020; --z-max: 100000; --ease-google: cubic-bezier(0.4, 0, 0.2, 1); --animate-fade-in-up: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-shake: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; --animate-float: float 6s ease-in-out infinite; --animate-spin-slow: spin-slow 20s linear infinite; --animate-fade-in: fade-in 1s ease-out forwards; --animate-mesh-float: mesh-float 20s ease-in-out infinite alternate; --tw-prose-body: var(--color-content-secondary); --tw-prose-headings: var(--color-content-primary); --tw-prose-lead: var(--color-content-secondary); --tw-prose-links: var(--color-content-brand); --tw-prose-bold: var(--color-content-primary); --tw-prose-counters: var(--color-content-tertiary); --tw-prose-bullets: var(--color-content-brand); --tw-prose-hr: var(--color-line-default); --tw-prose-quotes: var(--color-content-primary); --tw-prose-quote-borders: var(--color-tier-accent); --tw-prose-captions: var(--color-content-tertiary); --tw-prose-code: var(--color-danger-content); --tw-prose-pre-code: var(--color-content-primary); --tw-prose-pre-bg: var(--color-surface-2); --tw-prose-th-borders: var(--color-line-strong); --tw-prose-td-borders: var(--color-line-subtle); --tw-prose-invert-body: var(--color-slate-300); --tw-prose-invert-headings: var(--color-white); --tw-prose-invert-lead: var(--color-slate-400); --tw-prose-invert-links: var(--color-primary-400); --tw-prose-invert-bold: var(--color-white); --tw-prose-invert-counters: var(--color-slate-400); --tw-prose-invert-bullets: var(--color-primary-400); --tw-prose-invert-hr: var(--color-slate-700); --tw-prose-invert-quotes: var(--color-slate-100); --tw-prose-invert-quote-borders: var(--color-primary-400); --tw-prose-invert-captions: var(--color-slate-400); --tw-prose-invert-code: var(--color-white); --tw-prose-invert-pre-code: var(--color-slate-300); --tw-prose-invert-pre-bg: var(--color-slate-800); --tw-prose-invert-th-borders: var(--color-slate-600); --tw-prose-invert-td-borders: var(--color-slate-700); --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-900: oklch(39.6% 0.141 25.723); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-pink-500: oklch(65.6% 0.241 354.308); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --spacing: 0.25rem; --breakpoint-2xl: 96rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-7xl: 80rem; --text-xs--line-height: calc(1 / 0.75); --text-sm--line-height: calc(1.25 / 0.875); --text-base--line-height: calc(1.5 / 1); --text-lg--line-height: calc(1.75 / 1.125); --text-xl--line-height: calc(1.75 / 1.25); --text-2xl--line-height: calc(2 / 1.5); --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } :root { --gradient-brand: linear-gradient( 135deg, var(--color-content-brand) 0%, color-mix(in srgb, #0369a1, transparent 20%) 100% ); @supports (color: color-mix(in lab, red, red)) { --gradient-brand: linear-gradient( 135deg, var(--color-content-brand) 0%, color-mix(in srgb, var(--color-content-brand), transparent 20%) 100% ); } --gradient-surface: linear-gradient( to bottom, var(--color-surface-1) 0%, var(--color-surface-2) 100% ); --gradient-glass-premium: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100% ); --mesh-blob-1: radial-gradient( at 0% 0%, color-mix(in srgb, #0369a1, transparent 75%) 0px, transparent 50% ); @supports (color: color-mix(in lab, red, red)) { --mesh-blob-1: radial-gradient( at 0% 0%, color-mix(in srgb, var(--color-content-brand), transparent 75%) 0px, transparent 50% ); } --mesh-blob-2: radial-gradient( at 100% 0%, color-mix(in srgb, #f59e0b, transparent 85%) 0px, transparent 50% ); @supports (color: color-mix(in lab, red, red)) { --mesh-blob-2: radial-gradient( at 100% 0%, color-mix(in srgb, var(--color-secondary-500), transparent 85%) 0px, transparent 50% ); } --mesh-blob-3: radial-gradient( at 50% 100%, color-mix(in srgb, #38a3f8, transparent 80%) 0px, transparent 50% ); @supports (color: color-mix(in lab, red, red)) { --mesh-blob-3: radial-gradient( at 50% 100%, color-mix(in srgb, var(--color-primary-400), transparent 80%) 0px, transparent 50% ); } --inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); --inner-glow-dark: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); } [data-theme='dark'] { color-scheme: dark; --color-page: var(--color-slate-950); --color-surface-1: var(--color-slate-900); --color-surface-2: var(--color-slate-800); --color-surface-3: var(--color-slate-700); --color-header: var(--color-slate-900); --color-highlight: color-mix(in srgb, #38a3f8 15%, transparent); @supports (color: color-mix(in lab, red, red)) { --color-highlight: color-mix(in srgb, var(--color-primary-400) 15%, transparent); } --color-content-primary: var(--color-slate-100); --color-content-secondary: var(--color-slate-300); --color-content-tertiary: var(--color-slate-400); --color-content-brand: var(--color-primary-400); --color-content-inverse: var(--color-slate-950); --color-line-subtle: var(--color-slate-800); --color-line-default: var(--color-slate-700); --color-line-strong: var(--color-slate-600); --color-line-brand: var(--color-primary-700); } [data-theme='sepia'] { color-scheme: light; --color-page: #f6f1e8; --color-surface-1: #fdfbf7; --color-surface-2: #ede6d9; --color-surface-3: #e0d7c6; --color-card: var(--color-surface-1); --color-header: #f6f1e8; --color-highlight: rgba(var(--color-sepia-primary-rgb), 0.08); --color-content-primary: #2c251f; --color-content-secondary: #5a4e42; --color-content-tertiary: #847668; --color-content-inverse: #fdfbf7; --color-line-subtle: #eee7dc; --color-line-default: #dfd7c9; --color-line-strong: #c8bdae; --color-primary-500: #3f6e8a; --color-primary-600: #335b73; --color-primary-700: #264659; --color-secondary-500: #b59364; --color-secondary-600: #9c7b4e; --color-success: #6e9455; --color-warning: #c99320; --color-danger: #bd6969; --color-info: #6a8fa8; --color-content-brand: var(--color-primary-600); } [data-accent='royal'] { --color-primary-200: #9333ea30; --color-primary-400: #9333ea; --color-primary-500: #9333ea; --color-primary-600: #9333ea; --color-primary-700: #6b21a8; --color-primary-800: #6b21a8; --color-content-brand: #9333ea; --color-secondary-500: #9333ea; --color-secondary-600: #9333ea; --color-secondary-700: #6b21a8; --color-secondary-800: #6b21a8; --color-highlight: #9333ea10; --color-tier-accent: #9333ea; --color-primary-600-rgb: 147, 51, 234; --color-secondary-600-rgb: 147, 51, 234; } [data-theme='sepia'][data-accent='royal'] { --color-primary-500: #a579bf; --color-primary-600: #a579bf; --color-content-brand: #a579bf; --color-highlight: #a579bf10; --color-tier-accent: #a579bf; } [data-accent='forest'] { --color-primary-200: #05966930; --color-primary-400: #059669; --color-primary-500: #059669; --color-primary-600: #059669; --color-primary-700: #047857; --color-primary-800: #047857; --color-content-brand: #059669; --color-secondary-500: #059669; --color-secondary-600: #059669; --color-secondary-700: #047857; --color-secondary-800: #047857; --color-highlight: #05966910; --color-tier-accent: #059669; --color-primary-600-rgb: 5, 150, 105; --color-secondary-600-rgb: 5, 150, 105; } [data-theme='sepia'][data-accent='forest'] { --color-primary-500: #7da35e; --color-primary-600: #7da35e; --color-content-brand: #7da35e; --color-highlight: #7da35e10; --color-tier-accent: #7da35e; } [data-accent='gold'] { --color-primary-200: #f59e0b30; --color-primary-400: #f59e0b; --color-primary-500: #f59e0b; --color-primary-600: #f59e0b; --color-primary-700: #d97706; --color-primary-800: #d97706; --color-content-brand: #f59e0b; --color-secondary-500: #f59e0b; --color-secondary-600: #f59e0b; --color-secondary-700: #d97706; --color-secondary-800: #d97706; --color-highlight: #f59e0b10; --color-tier-accent: #f59e0b; --color-primary-600-rgb: 245, 158, 11; --color-secondary-600-rgb: 245, 158, 11; } [data-theme='sepia'][data-accent='gold'] { --color-primary-500: #d9a528; --color-primary-600: #d9a528; --color-content-brand: #d9a528; --color-highlight: #d9a52810; --color-tier-accent: #d9a528; } [data-accent='rose'] { --color-primary-200: #f43f5e30; --color-primary-400: #f43f5e; --color-primary-500: #f43f5e; --color-primary-600: #f43f5e; --color-primary-700: #e11d48; --color-primary-800: #e11d48; --color-content-brand: #f43f5e; --color-secondary-500: #f43f5e; --color-secondary-600: #f43f5e; --color-secondary-700: #e11d48; --color-secondary-800: #e11d48; --color-highlight: #f43f5e10; --color-tier-accent: #f43f5e; --color-primary-600-rgb: 244, 63, 94; --color-secondary-600-rgb: 244, 63, 94; } [data-theme='sepia'][data-accent='rose'] { --color-primary-500: #cd7b7b; --color-primary-600: #cd7b7b; --color-content-brand: #cd7b7b; --color-highlight: #cd7b7b10; --color-tier-accent: #cd7b7b; } @layer theme, base, components, utilities; @layer theme; @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .pointer-events-auto { pointer-events: auto; } .pointer-events-none { pointer-events: none; } .invisible { visibility: hidden; } .visible { visibility: visible; } .celestial-mesh { position: relative; overflow: hidden; background-color: var(--color-page); &::before { content: ''; position: absolute; inset: 0px; opacity: 40%; mix-blend-mode: multiply; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 1000ms; transition-duration: 1000ms; &:where([data-theme="dark"], [data-theme="dark"] *) { mix-blend-mode: screen; } background-image: var(--mesh-blob-1), var(--mesh-blob-2), var(--mesh-blob-3); filter: blur(80px); transform: scale(1.2); animation: mesh-float 20s ease-in-out infinite alternate; } } .badge-category { position: relative; z-index: 20; display: inline-flex; align-items: center; border-radius: var(--radius-full); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); text-transform: uppercase; --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; background-color: var(--color-surface-1); color: var(--color-content-brand); border: 1px solid var(--color-line-brand); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); &:hover { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.08)), 0 4px 6px -2px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.04)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-content-brand); color: var(--color-content-inverse); border-color: var(--color-content-brand); } [data-theme='dark'] & { background-color: rgba(var(--color-slate-800-rgb), 0.85); color: var(--color-content-primary); border-color: rgba(var(--color-primary-500-rgb), 0.4); &:hover { background-color: var(--color-content-brand); color: var(--color-content-inverse); border-color: var(--color-content-brand); box-shadow: 0 0 20px rgba(var(--color-primary-600-rgb), 0.5); } } } .announcement-bar-premium { position: relative; z-index: 60; min-height: 28px; overflow-y: hidden; padding-block: var(--spacing); color: var(--color-content-inverse); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background: var(--color-content-brand); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .btn-interactive { position: relative; &:active { animation: pulse-ring 0.6s cubic-bezier(0.4, 0, 0.2, 1); } } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .-inset-3 { inset: calc(var(--spacing) * -3); } .inset-0 { inset: 0px; } .inset-4 { inset: calc(var(--spacing) * 4); } .inset-10 { inset: calc(var(--spacing) * 10); } .inset-\[-15\%\] { inset: -15%; } .inset-\[-20\%\] { inset: -20%; } .inset-\[10\%\] { inset: 10%; } .inset-x-0 { inset-inline: 0px; } .inset-x-2 { inset-inline: calc(var(--spacing) * 2); } .-top-1 { top: calc(var(--spacing) * -1); } .-top-1\.5 { top: calc(var(--spacing) * -1.5); } .-top-2 { top: calc(var(--spacing) * -2); } .-top-4 { top: calc(var(--spacing) * -4); } .-top-10 { top: calc(var(--spacing) * -10); } .-top-12 { top: calc(var(--spacing) * -12); } .-top-16 { top: calc(var(--spacing) * -16); } .-top-20 { top: calc(var(--spacing) * -20); } .-top-24 { top: calc(var(--spacing) * -24); } .top-0 { top: 0px; } .top-1\.5 { top: calc(var(--spacing) * 1.5); } .top-1\/2 { top: calc(1 / 2 * 100%); } .top-2 { top: calc(var(--spacing) * 2); } .top-3 { top: calc(var(--spacing) * 3); } .top-4 { top: calc(var(--spacing) * 4); } .top-6 { top: calc(var(--spacing) * 6); } .top-8 { top: calc(var(--spacing) * 8); } .top-10 { top: calc(var(--spacing) * 10); } .top-16 { top: calc(var(--spacing) * 16); } .top-20 { top: calc(var(--spacing) * 20); } .top-24 { top: calc(var(--spacing) * 24); } .top-28 { top: calc(var(--spacing) * 28); } .top-32 { top: calc(var(--spacing) * 32); } .top-36 { top: calc(var(--spacing) * 36); } .top-40 { top: calc(var(--spacing) * 40); } .top-\[-15\%\] { top: -15%; } .top-full { top: 100%; } .-right-1 { right: calc(var(--spacing) * -1); } .-right-1\.5 { right: calc(var(--spacing) * -1.5); } .-right-2 { right: calc(var(--spacing) * -2); } .-right-4 { right: calc(var(--spacing) * -4); } .-right-6 { right: calc(var(--spacing) * -6); } .-right-10 { right: calc(var(--spacing) * -10); } .-right-16 { right: calc(var(--spacing) * -16); } .-right-20 { right: calc(var(--spacing) * -20); } .-right-24 { right: calc(var(--spacing) * -24); } .right-0 { right: 0px; } .right-1\.5 { right: calc(var(--spacing) * 1.5); } .right-2 { right: calc(var(--spacing) * 2); } .right-3 { right: calc(var(--spacing) * 3); } .right-4 { right: calc(var(--spacing) * 4); } .right-6 { right: calc(var(--spacing) * 6); } .right-\[-4\%\] { right: -4%; } .-bottom-1 { bottom: calc(var(--spacing) * -1); } .-bottom-3 { bottom: calc(var(--spacing) * -3); } .-bottom-4 { bottom: calc(var(--spacing) * -4); } .-bottom-6 { bottom: calc(var(--spacing) * -6); } .-bottom-8 { bottom: calc(var(--spacing) * -8); } .-bottom-10 { bottom: calc(var(--spacing) * -10); } .-bottom-16 { bottom: calc(var(--spacing) * -16); } .-bottom-20 { bottom: calc(var(--spacing) * -20); } .-bottom-24 { bottom: calc(var(--spacing) * -24); } .bottom-0 { bottom: 0px; } .bottom-1\.5 { bottom: calc(var(--spacing) * 1.5); } .bottom-2 { bottom: calc(var(--spacing) * 2); } .bottom-4 { bottom: calc(var(--spacing) * 4); } .bottom-6 { bottom: calc(var(--spacing) * 6); } .bottom-8 { bottom: calc(var(--spacing) * 8); } .bottom-10 { bottom: calc(var(--spacing) * 10); } .bottom-32 { bottom: calc(var(--spacing) * 32); } .bottom-95 { bottom: calc(var(--spacing) * 95); } .bottom-\[152px\] { bottom: 152px; } .-left-1\.5 { left: calc(var(--spacing) * -1.5); } .-left-2 { left: calc(var(--spacing) * -2); } .-left-2\.5 { left: calc(var(--spacing) * -2.5); } .-left-4 { left: calc(var(--spacing) * -4); } .-left-10 { left: calc(var(--spacing) * -10); } .-left-14 { left: calc(var(--spacing) * -14); } .-left-16 { left: calc(var(--spacing) * -16); } .-left-20 { left: calc(var(--spacing) * -20); } .-left-24 { left: calc(var(--spacing) * -24); } .left-0 { left: 0px; } .left-1\/2 { left: calc(1 / 2 * 100%); } .left-2 { left: calc(var(--spacing) * 2); } .left-4 { left: calc(var(--spacing) * 4); } .left-5 { left: calc(var(--spacing) * 5); } .left-6 { left: calc(var(--spacing) * 6); } .left-10 { left: calc(var(--spacing) * 10); } .left-20 { left: calc(var(--spacing) * 20); } .-z-10 { z-index: calc(10 * -1); } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-100 { z-index: 100; } .z-9999 { z-index: 9999; } .z-10000 { z-index: 10000; } .z-99999 { z-index: 99999; } .z-\[100\] { z-index: 100; } .order-1 { order: 1; } .order-2 { order: 2; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-full { grid-column: 1 / -1; } .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .-m-2 { margin: calc(var(--spacing) * -2); } .-m-8 { margin: calc(var(--spacing) * -8); } .m-0 { margin: 0px; } .container { margin-inline: auto; max-width: var(--breakpoint-2xl); padding-inline: calc(var(--spacing) * 4); @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 6); } @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); } } .mx-1 { margin-inline: var(--spacing); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-2\.5 { margin-inline: calc(var(--spacing) * 2.5); } .mx-3 { margin-inline: calc(var(--spacing) * 3); } .mx-auto { margin-inline: auto; } .my-1 { margin-block: var(--spacing); } .my-2 { margin-block: calc(var(--spacing) * 2); } .my-4 { margin-block: calc(var(--spacing) * 4); } .my-6 { margin-block: calc(var(--spacing) * 6); } .my-8 { margin-block: calc(var(--spacing) * 8); } .my-10 { margin-block: calc(var(--spacing) * 10); } .my-16 { margin-block: calc(var(--spacing) * 16); } .my-auto { margin-block: auto; } .prose { color: var(--tw-prose-body); max-width: 65ch; :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; } :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; } :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: open-quote; } :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: close-quote; } :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; } :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 900; color: inherit; } :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; } :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 800; color: inherit; } :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 700; color: inherit; } :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 700; color: inherit; } :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline-end: 0.375em; padding-bottom: 0.1875em; padding-inline-start: 0.375em; } :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: "`"; } :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: "`"; } :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding-top: 0.8571429em; padding-inline-end: 1.1428571em; padding-bottom: 0.8571429em; padding-inline-start: 1.1428571em; } :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before { content: none; } :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { content: none; } :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 0; } :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: baseline; } :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: top; } :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-align: start; } :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } --tw-prose-body: oklch(37.3% 0.034 259.733); --tw-prose-headings: oklch(21% 0.034 264.665); --tw-prose-lead: oklch(44.6% 0.03 256.802); --tw-prose-links: oklch(21% 0.034 264.665); --tw-prose-bold: oklch(21% 0.034 264.665); --tw-prose-counters: oklch(55.1% 0.027 264.364); --tw-prose-bullets: oklch(87.2% 0.01 258.338); --tw-prose-hr: oklch(92.8% 0.006 264.531); --tw-prose-quotes: oklch(21% 0.034 264.665); --tw-prose-quote-borders: oklch(92.8% 0.006 264.531); --tw-prose-captions: oklch(55.1% 0.027 264.364); --tw-prose-kbd: oklch(21% 0.034 264.665); --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent); --tw-prose-code: oklch(21% 0.034 264.665); --tw-prose-pre-code: oklch(92.8% 0.006 264.531); --tw-prose-pre-bg: oklch(27.8% 0.033 256.848); --tw-prose-th-borders: oklch(87.2% 0.01 258.338); --tw-prose-td-borders: oklch(92.8% 0.006 264.531); --tw-prose-invert-body: oklch(87.2% 0.01 258.338); --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: oklch(70.7% 0.022 261.325); --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: oklch(70.7% 0.022 261.325); --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802); --tw-prose-invert-hr: oklch(37.3% 0.034 259.733); --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542); --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733); --tw-prose-invert-captions: oklch(70.7% 0.022 261.325); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802); --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733); font-size: 1rem; line-height: 1.75; :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.375em; } :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.375em; } :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5em; padding-inline-start: 1.625em; } :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-top: 0.5714286em; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 0; } } .prose-lg { font-size: 1.125rem; line-height: 1.7777778; :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; margin-bottom: 1.3333333em; } :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.2222222em; line-height: 1.4545455; margin-top: 1.0909091em; margin-bottom: 1.0909091em; } :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.6666667em; margin-bottom: 1.6666667em; padding-inline-start: 1em; } :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 2.6666667em; margin-top: 0; margin-bottom: 0.8333333em; line-height: 1; } :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.6666667em; margin-top: 1.8666667em; margin-bottom: 1.0666667em; line-height: 1.3333333; } :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.3333333em; margin-top: 1.6666667em; margin-bottom: 0.6666667em; line-height: 1.5; } :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7777778em; margin-bottom: 0.4444444em; line-height: 1.5555556; } :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7777778em; margin-bottom: 1.7777778em; } :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7777778em; margin-bottom: 1.7777778em; } :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7777778em; margin-bottom: 1.7777778em; } :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8888889em; border-radius: 0.3125rem; padding-top: 0.2222222em; padding-inline-end: 0.4444444em; padding-bottom: 0.2222222em; padding-inline-start: 0.4444444em; } :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8888889em; } :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8666667em; } :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.875em; } :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8888889em; line-height: 1.75; margin-top: 2em; margin-bottom: 2em; border-radius: 0.375rem; padding-top: 1em; padding-inline-end: 1.5em; padding-bottom: 1em; padding-inline-start: 1.5em; } :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; margin-bottom: 1.3333333em; padding-inline-start: 1.5555556em; } :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; margin-bottom: 1.3333333em; padding-inline-start: 1.5555556em; } :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.6666667em; margin-bottom: 0.6666667em; } :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.4444444em; } :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.4444444em; } :where(.prose-lg > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.8888889em; margin-bottom: 0.8888889em; } :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; } :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.3333333em; } :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; } :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.3333333em; } :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.8888889em; margin-bottom: 0.8888889em; } :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; margin-bottom: 1.3333333em; } :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; } :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.6666667em; padding-inline-start: 1.5555556em; } :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 3.1111111em; margin-bottom: 3.1111111em; } :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8888889em; line-height: 1.5; } :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0.75em; padding-bottom: 0.75em; padding-inline-start: 0.75em; } :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-top: 0.75em; padding-inline-end: 0.75em; padding-bottom: 0.75em; padding-inline-start: 0.75em; } :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7777778em; margin-bottom: 1.7777778em; } :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8888889em; line-height: 1.5; margin-top: 1em; } :where(.prose-lg > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(.prose-lg > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 0; } } .prose-sm { font-size: 0.875rem; line-height: 1.7142857; :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.1428571em; margin-bottom: 1.1428571em; } :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.2857143em; line-height: 1.5555556; margin-top: 0.8888889em; margin-bottom: 0.8888889em; } :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.3333333em; margin-bottom: 1.3333333em; padding-inline-start: 1.1111111em; } :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 2.1428571em; margin-top: 0; margin-bottom: 0.8em; line-height: 1.2; } :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.4285714em; margin-top: 1.6em; margin-bottom: 0.8em; line-height: 1.4; } :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.2857143em; margin-top: 1.5555556em; margin-bottom: 0.4444444em; line-height: 1.5555556; } :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.4285714em; margin-bottom: 0.5714286em; line-height: 1.4285714; } :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7142857em; margin-bottom: 1.7142857em; } :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7142857em; margin-bottom: 1.7142857em; } :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7142857em; margin-bottom: 1.7142857em; } :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8571429em; border-radius: 0.3125rem; padding-top: 0.1428571em; padding-inline-end: 0.3571429em; padding-bottom: 0.1428571em; padding-inline-start: 0.3571429em; } :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8571429em; } :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.9em; } :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8888889em; } :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8571429em; line-height: 1.6666667; margin-top: 1.6666667em; margin-bottom: 1.6666667em; border-radius: 0.25rem; padding-top: 0.6666667em; padding-inline-end: 1em; padding-bottom: 0.6666667em; padding-inline-start: 1em; } :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.1428571em; margin-bottom: 1.1428571em; padding-inline-start: 1.5714286em; } :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.1428571em; margin-bottom: 1.1428571em; padding-inline-start: 1.5714286em; } :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.2857143em; margin-bottom: 0.2857143em; } :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.4285714em; } :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0.4285714em; } :where(.prose-sm > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5714286em; margin-bottom: 0.5714286em; } :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.1428571em; } :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.1428571em; } :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.1428571em; } :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.1428571em; } :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5714286em; margin-bottom: 0.5714286em; } :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.1428571em; margin-bottom: 1.1428571em; } :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.1428571em; } :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.2857143em; padding-inline-start: 1.5714286em; } :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2.8571429em; margin-bottom: 2.8571429em; } :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8571429em; line-height: 1.5; } :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 1em; padding-bottom: 0.6666667em; padding-inline-start: 1em; } :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-top: 0.6666667em; padding-inline-end: 1em; padding-bottom: 0.6666667em; padding-inline-start: 1em; } :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.7142857em; margin-bottom: 1.7142857em; } :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 0.8571429em; line-height: 1.3333333; margin-top: 0.6666667em; } :where(.prose-sm > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } :where(.prose-sm > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 0; } } .-mt-6 { margin-top: calc(var(--spacing) * -6); } .-mt-8 { margin-top: calc(var(--spacing) * -8); } .-mt-10 { margin-top: calc(var(--spacing) * -10); } .-mt-12 { margin-top: calc(var(--spacing) * -12); } .-mt-14 { margin-top: calc(var(--spacing) * -14); } .-mt-16 { margin-top: calc(var(--spacing) * -16); } .-mt-20 { margin-top: calc(var(--spacing) * -20); } .-mt-24 { margin-top: calc(var(--spacing) * -24); } .-mt-48 { margin-top: calc(var(--spacing) * -48); } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-1 { margin-top: var(--spacing); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-16 { margin-top: calc(var(--spacing) * 16); } .mt-20 { margin-top: calc(var(--spacing) * 20); } .mt-auto { margin-top: auto; } .-mr-2 { margin-right: calc(var(--spacing) * -2); } .-mr-16 { margin-right: calc(var(--spacing) * -16); } .-mr-20 { margin-right: calc(var(--spacing) * -20); } .-mr-24 { margin-right: calc(var(--spacing) * -24); } .-mr-48 { margin-right: calc(var(--spacing) * -48); } .mr-0\.5 { margin-right: calc(var(--spacing) * 0.5); } .mr-1 { margin-right: var(--spacing); } .mr-1\.5 { margin-right: calc(var(--spacing) * 1.5); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mr-2\.5 { margin-right: calc(var(--spacing) * 2.5); } .mr-3 { margin-right: calc(var(--spacing) * 3); } .mr-4 { margin-right: calc(var(--spacing) * 4); } .mr-5 { margin-right: calc(var(--spacing) * 5); } .mr-auto { margin-right: auto; } .-mb-32 { margin-bottom: calc(var(--spacing) * -32); } .mb-0 { margin-bottom: 0px; } .mb-0\.5 { margin-bottom: calc(var(--spacing) * 0.5); } .mb-1 { margin-bottom: var(--spacing); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-2\.5 { margin-bottom: calc(var(--spacing) * 2.5); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-16 { margin-bottom: calc(var(--spacing) * 16); } .mb-24 { margin-bottom: calc(var(--spacing) * 24); } .-ml-1 { margin-left: calc(var(--spacing) * -1); } .-ml-32 { margin-left: calc(var(--spacing) * -32); } .ml-1 { margin-left: var(--spacing); } .ml-1\.5 { margin-left: calc(var(--spacing) * 1.5); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-2\.5 { margin-left: calc(var(--spacing) * 2.5); } .ml-3 { margin-left: calc(var(--spacing) * 3); } .ml-4 { margin-left: calc(var(--spacing) * 4); } .ml-6 { margin-left: calc(var(--spacing) * 6); } .ml-auto { margin-left: auto; } .icon-bg-brand { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); text-transform: uppercase; border: 1px solid transparent; background-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-content-brand) 10%, transparent); } color: var(--color-content-brand); border-color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--color-content-brand) 20%, transparent); } } .notif-icon-badge { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: color-mix(in srgb, #f59e0b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); } color: var(--color-warning-content); border: 1px solid color-mix(in srgb, #f59e0b 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent); } } .notif-icon-default { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-content-brand) 10%, transparent); } color: var(--color-content-brand); border: 1px solid color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-content-brand) 20%, transparent); } } .notif-icon-level { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-purple); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-purple) 10%, transparent); } color: var(--color-purple-content); border: 1px solid var(--color-purple); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-purple) 20%, transparent); } } .notif-icon-like { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: color-mix(in srgb, #ef4444 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-danger) 10%, transparent); } color: var(--color-danger-content); border: 1px solid color-mix(in srgb, #ef4444 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent); } } .notif-icon-prayer { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: color-mix(in srgb, #0ea5e9 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-info) 10%, transparent); } color: var(--color-info-content); border: 1px solid color-mix(in srgb, #0ea5e9 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent); } } .notif-icon-success { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: color-mix(in srgb, #10b981 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); } color: var(--color-success-content); border: 1px solid color-mix(in srgb, #10b981 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent); } } .btn { display: inline-flex; height: calc(var(--spacing) * 12); align-items: center; justify-content: center; border-radius: var(--radius-2xl); padding-inline: calc(var(--spacing) * 6); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); text-transform: none; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } &:focus { --tw-outline-style: none; outline-style: none; } letter-spacing: 0.025em; font-weight: 600; } .badge-brand { flex-shrink: 0; gap: calc(var(--spacing) * 2); padding-block: var(--spacing); font-size: 10px; --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); white-space: nowrap; border: 1px solid transparent; display: inline-flex; align-items: center; border-radius: var(--radius-full); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); text-transform: uppercase; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); background-color: var(--color-page); color: var(--color-content-tertiary); border: 1px solid var(--color-line-strong); background-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-content-brand) 10%, transparent); } color: var(--color-content-brand); border-color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--color-content-brand) 20%, transparent); } } .badge-secondary { flex-shrink: 0; gap: calc(var(--spacing) * 2); padding-block: var(--spacing); font-size: 10px; --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); white-space: nowrap; border: 1px solid transparent; display: inline-flex; align-items: center; border-radius: var(--radius-full); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); text-transform: uppercase; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); background-color: var(--color-page); color: var(--color-content-tertiary); border: 1px solid var(--color-line-strong); background-color: color-mix(in srgb, #f59e0b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-secondary-500) 10%, transparent); } color: var(--color-secondary-600); border-color: color-mix(in srgb, #f59e0b 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--color-secondary-500) 20%, transparent); } } .btn-soft-brand { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); border-radius: var(--radius-full); border-style: var(--tw-border-style); border-width: 2px; padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); white-space: nowrap; text-transform: none; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; background-color: var(--color-highlight); color: var(--color-content-brand); border-color: var(--color-line-brand); &:hover { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.05)), 0 2px 4px -1px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.03)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-brightness: brightness(110%); 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,); background-color: var(--color-surface-1); border-color: var(--color-content-brand); } } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .aspect-16\/10 { aspect-ratio: 16/10; } .aspect-\[4\/5\] { aspect-ratio: 4/5; } .aspect-square { aspect-ratio: 1 / 1; } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .size-6 { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .btn-lg { height: calc(var(--spacing) * 14); padding-inline: calc(var(--spacing) * 10); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); min-width: 44px; } .btn-sm { height: calc(var(--spacing) * 11); padding-inline: calc(var(--spacing) * 5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); min-width: 44px; } .\!h-full { height: 100% !important; } .h-1 { height: var(--spacing); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-4\.5 { height: calc(var(--spacing) * 4.5); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-18 { height: calc(var(--spacing) * 18); } .h-20 { height: calc(var(--spacing) * 20); } .h-24 { height: calc(var(--spacing) * 24); } .h-28 { height: calc(var(--spacing) * 28); } .h-32 { height: calc(var(--spacing) * 32); } .h-40 { height: calc(var(--spacing) * 40); } .h-48 { height: calc(var(--spacing) * 48); } .h-52 { height: calc(var(--spacing) * 52); } .h-64 { height: calc(var(--spacing) * 64); } .h-72 { height: calc(var(--spacing) * 72); } .h-80 { height: calc(var(--spacing) * 80); } .h-96 { height: calc(var(--spacing) * 96); } .h-120 { height: calc(var(--spacing) * 120); } .h-\[18px\] { height: 18px; } .h-\[50vh\] { height: 50vh; } .h-\[72px\] { height: 72px; } .h-\[180px\] { height: 180px; } .h-\[300px\] { height: 300px; } .h-\[500px\] { height: 500px; } .h-auto { height: auto; } .h-full { height: 100%; } .h-px { height: 1px; } .max-h-0 { max-height: 0px; } .max-h-32 { max-height: calc(var(--spacing) * 32); } .max-h-60 { max-height: calc(var(--spacing) * 60); } .max-h-\[95vh\] { max-height: 95vh; } .max-h-\[220px\] { max-height: 220px; } .max-h-\[380px\] { max-height: 380px; } .max-h-\[400px\] { max-height: 400px; } .max-h-\[calc\(100vh-100px\)\] { max-height: calc(100vh - 100px); } .min-h-12 { min-height: calc(var(--spacing) * 12); } .min-h-\[40px\] { min-height: 40px; } .min-h-\[48px\] { min-height: 48px; } .min-h-\[50vh\] { min-height: 50vh; } .min-h-\[70vh\] { min-height: 70vh; } .min-h-\[140px\] { min-height: 140px; } .min-h-\[150px\] { min-height: 150px; } .min-h-\[160px\] { min-height: 160px; } .min-h-\[300px\] { min-height: 300px; } .min-h-\[400px\] { min-height: 400px; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .modern-input { width: 100%; border-radius: var(--radius-2xl); border-style: var(--tw-border-style); border-width: 1.5px; padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 4); font-size: 0.9375rem; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); & { background-color: var(--color-surface-2) !important; border-color: var(--color-line-default) !important; color: var(--color-content-primary) !important; box-shadow: none !important; } &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; background-color: var(--color-card) !important; border-color: var(--color-line-brand) !important; --tw-ring-color: color-mix(in srgb, #0369a1 10%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in srgb, var(--color-content-brand) 10%, transparent) !important; } } &::placeholder { color: var(--color-content-tertiary); opacity: 0.85; } &:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--color-surface-2) inset !important; -webkit-text-fill-color: var(--color-content-primary) !important; transition: background-color 5000s ease-in-out 0s; } &:user-invalid, &:not(:placeholder-shown):invalid { border-color: var(--color-danger) !important; --tw-ring-color: color-mix(in srgb, #ef4444 20%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in srgb, var(--color-danger) 20%, transparent) !important; } } [data-theme='dark'] & { background-color: var(--color-surface-2) !important; color: var(--color-content-primary) !important; } [data-theme='dark'] &:focus { background-color: var(--color-card) !important; } } .\!w-full { width: 100% !important; } .w-0 { width: 0px; } .w-1 { width: var(--spacing); } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-1\/2 { width: calc(1 / 2 * 100%); } .w-1\/3 { width: calc(1 / 3 * 100%); } .w-1\/4 { width: calc(1 / 4 * 100%); } .w-1\/5 { width: calc(1 / 5 * 100%); } .w-1\/6 { width: calc(1 / 6 * 100%); } .w-2 { width: calc(var(--spacing) * 2); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-2\/3 { width: calc(2 / 3 * 100%); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-3\/4 { width: calc(3 / 4 * 100%); } .w-4 { width: calc(var(--spacing) * 4); } .w-4\.5 { width: calc(var(--spacing) * 4.5); } .w-4\/6 { width: calc(4 / 6 * 100%); } .w-5 { width: calc(var(--spacing) * 5); } .w-5\/6 { width: calc(5 / 6 * 100%); } .w-6 { width: calc(var(--spacing) * 6); } .w-7 { width: calc(var(--spacing) * 7); } .w-8 { width: calc(var(--spacing) * 8); } .w-9 { width: calc(var(--spacing) * 9); } .w-10 { width: calc(var(--spacing) * 10); } .w-11 { width: calc(var(--spacing) * 11); } .w-12 { width: calc(var(--spacing) * 12); } .w-14 { width: calc(var(--spacing) * 14); } .w-16 { width: calc(var(--spacing) * 16); } .w-18 { width: calc(var(--spacing) * 18); } .w-20 { width: calc(var(--spacing) * 20); } .w-24 { width: calc(var(--spacing) * 24); } .w-28 { width: calc(var(--spacing) * 28); } .w-32 { width: calc(var(--spacing) * 32); } .w-40 { width: calc(var(--spacing) * 40); } .w-48 { width: calc(var(--spacing) * 48); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-80 { width: calc(var(--spacing) * 80); } .w-96 { width: calc(var(--spacing) * 96); } .w-120 { width: calc(var(--spacing) * 120); } .w-\[18px\] { width: 18px; } .w-\[72px\] { width: 72px; } .w-\[180px\] { width: 180px; } .w-\[288px\] { width: 288px; } .w-\[300px\] { width: 300px; } .w-\[500px\] { width: 500px; } .w-\[calc\(100\%-2rem\)\] { width: calc(100% - 2rem); } .w-auto { width: auto; } .w-fit { width: fit-content; } .w-full { width: 100%; } .w-px { width: 1px; } .w-screen { width: 100vw; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-5xl { max-width: var(--container-5xl); } .max-w-7xl { max-width: var(--container-7xl); } .max-w-\[31\%\] { max-width: 31%; } .max-w-\[33\%\] { max-width: 33%; } .max-w-\[85\%\] { max-width: 85%; } .max-w-\[100vw\] { max-width: 100vw; } .max-w-\[120px\] { max-width: 120px; } .max-w-\[140px\] { max-width: 140px; } .max-w-\[180px\] { max-width: 180px; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[220px\] { max-width: 220px; } .max-w-\[250px\] { max-width: 250px; } .max-w-\[260px\] { max-width: 260px; } .max-w-\[340px\] { max-width: 340px; } .max-w-\[380px\] { max-width: 380px; } .max-w-\[420px\] { max-width: 420px; } .max-w-full { max-width: 100%; } .max-w-lg { max-width: var(--container-lg); } .max-w-md { max-width: var(--container-md); } .max-w-none { max-width: none; } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .max-w-xs { max-width: var(--container-xs); } .min-w-0 { min-width: 0px; } .min-w-\[20px\] { min-width: 20px; } .min-w-\[40px\] { min-width: 40px; } .min-w-\[80px\] { min-width: 80px; } .min-w-\[120px\] { min-width: 120px; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .border-collapse { border-collapse: collapse; } .origin-center { transform-origin: center; } .origin-left { transform-origin: 0; } .origin-top-right { transform-origin: 100% 0; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-1\/4 { --tw-translate-x: calc(calc(1 / 4 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-0 { --tw-translate-x: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-1 { --tw-translate-x: var(--spacing); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-1\.5 { --tw-translate-x: calc(var(--spacing) * 1.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-1\/2 { --tw-translate-x: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-1\/3 { --tw-translate-x: calc(1 / 3 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-5 { --tw-translate-x: calc(var(--spacing) * 5); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .card { overflow: hidden; border-radius: var(--radius-2xl); background-color: var(--color-card); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); @media (width >= 48rem) { border-radius: var(--radius-3xl); } &:where([data-theme="dark"], [data-theme="dark"] *) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -2); translate: var(--tw-translate-x) var(--tw-translate-y); } } &:hover { @media (hover: hover) { scale: 1.02; } } &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &:where([data-theme="dark"], [data-theme="dark"] *) { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #bae0fd 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 50%, transparent); } } } } border: 1px solid var(--color-line-default); box-shadow: var(--shadow-soft), var(--inner-glow); &:hover { box-shadow: 0 15px 35px -5px rgba(0,0,0,0.1), 0 0 15px rgba(var(--color-primary-500-rgb, 0,0,0), 0.1); } [data-theme='dark'] & { box-shadow: var(--inner-glow-dark); &:hover { box-shadow: 0 15px 35px -5px rgba(0,0,0,0.5), 0 0 20px rgba(var(--color-primary-500-rgb, 255,255,255), 0.15); } } } .reveal-item { --tw-translate-y: calc(var(--spacing) * 8); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 800ms; transition-duration: 800ms; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } .-translate-y-1 { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\.5 { --tw-translate-y: calc(var(--spacing) * -1.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/3 { --tw-translate-y: calc(calc(1 / 3 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-8 { --tw-translate-y: calc(var(--spacing) * -8); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-0 { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-1\/2 { --tw-translate-y: calc(1 / 2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-2 { --tw-translate-y: calc(var(--spacing) * 2); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-4 { --tw-translate-y: calc(var(--spacing) * 4); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-8 { --tw-translate-y: calc(var(--spacing) * 8); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-10 { --tw-translate-y: calc(var(--spacing) * 10); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-20 { --tw-translate-y: calc(var(--spacing) * 20); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-32 { --tw-translate-y: calc(var(--spacing) * 32); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .btn-outline { border-style: var(--tw-border-style); border-width: 1px; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; &:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } border-color: var(--color-line-subtle); color: var(--color-content-secondary); &:hover { border-color: var(--color-tier-accent); color: var(--color-tier-accent); background-color: var(--color-tier-bg); } &:active { filter: brightness(0.9); transform: scale(0.95); } } .btn-primary { color: var(--color-content-inverse); --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.1)), 0 10px 10px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.04)), inset 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--shadow-premium); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { scale: 1.03; } } &:hover { @media (hover: hover) { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &:hover { @media (hover: hover) { --tw-brightness: brightness(110%); 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,); } } &:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } background-color: var(--color-content-brand); box-shadow: var(--shadow-premium), var(--inner-glow); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); &:hover { box-shadow: 0 10px 25px -5px rgba(var(--color-content-brand-rgb, 0,0,0), 0.4), var(--inner-glow); } &:focus { --tw-ring-color: color-mix(in srgb, #0369a1 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-content-brand) 40%, transparent); } } &:active { filter: brightness(0.9); transform: scale(0.95); } } .scale-50 { --tw-scale-x: 50%; --tw-scale-y: 50%; --tw-scale-z: 50%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-90 { --tw-scale-x: 90%; --tw-scale-y: 90%; --tw-scale-z: 90%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-95 { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-100 { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-105 { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-110 { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-150 { --tw-scale-x: 150%; --tw-scale-y: 150%; --tw-scale-z: 150%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-x-0 { --tw-scale-x: 0%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-x-75 { --tw-scale-x: 75%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-\[1\.02\] { scale: 1.02; } .-rotate-12 { rotate: calc(12deg * -1); } .-rotate-45 { rotate: calc(45deg * -1); } .rotate-12 { rotate: 12deg; } .-skew-x-25 { --tw-skew-x: skewX(calc(25deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .animate-mesh-float { background-size: 200% 200%; animation: mesh-float 15s ease infinite; } .animate-wow { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; } .animate-float-2 { animation: float-2 8s ease-in-out infinite; animation-delay: 1s; } .animate-float-3 { animation: float-3 9s ease-in-out infinite; animation-delay: 2s; } .animate-float-delayed { animation: float 6s ease-in-out infinite; animation-delay: 2s; } .icon-pulse-subtle { animation: var(--animate-pulse); animation-duration: 3s; } .animate-\[shimmer_2s_infinite\] { animation: shimmer 2s infinite; } .animate-blob { animation: blob 7s infinite; } .animate-bounce { animation: var(--animate-bounce); } .animate-fade-in { animation: var(--animate-fade-in); } .animate-fade-in-up { animation: var(--animate-fade-in-up); } .animate-float { animation: float 6s ease-in-out infinite; animation: var(--animate-float); } .animate-float-1 { animation: float-1 7s ease-in-out infinite; } .animate-heartbeat { animation: heart-pop 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .animate-mesh-float { animation: var(--animate-mesh-float); } .animate-ping { animation: var(--animate-ping); } .animate-pulse { animation: var(--animate-pulse); } .animate-pulse-slow { animation: var(--animate-pulse-slow); } .animate-pulse-subtle { animation: pulse-subtle 3s ease-in-out infinite; } .animate-shake { animation: var(--animate-shake); } .animate-spin { animation: var(--animate-spin); } .animate-spin-reverse-slow { animation: spin-reverse-slow 15s linear infinite; } .animate-spin-slow { animation: spin-slow 20s linear infinite; animation: var(--animate-spin-slow); } .cursor-default { cursor: default; } .cursor-help { cursor: help; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .resize-none { resize: none; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-center { scroll-snap-align: center; } .scroll-mt-24 { scroll-margin-top: calc(var(--spacing) * 24); } .scroll-mt-32 { scroll-margin-top: calc(var(--spacing) * 32); } .list-decimal { list-style-type: decimal; } .appearance-none { appearance: none; } .columns-1 { columns: 1; } .break-inside-avoid { break-inside: avoid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } .gap-1 { gap: var(--spacing); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-3\.5 { gap: calc(var(--spacing) * 3.5); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-10 { gap: calc(var(--spacing) * 10); } .gap-12 { gap: calc(var(--spacing) * 12); } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-1\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-3 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-6 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-8 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-10 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-12 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-16 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse))); } .gap-x-2 { column-gap: calc(var(--spacing) * 2); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-12 { column-gap: calc(var(--spacing) * 12); } :where(.-space-x-2 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse))); } :where(.-space-x-3 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-1 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-2 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-2\.5 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-3 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-6 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-8 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse))); } .gap-y-1 { row-gap: var(--spacing); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .gap-y-8 { row-gap: calc(var(--spacing) * 8); } :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } :where(.divide-line-default > :not(:last-child)) { border-color: var(--color-line-default); } :where(.divide-line-default\/50 > :not(:last-child)) { border-color: color-mix(in srgb, #e2e8f0 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-default) 50%, transparent); } } :where(.divide-line-subtle > :not(:last-child)) { border-color: var(--color-line-subtle); } .self-end { align-self: flex-end; } .self-start { align-self: flex-start; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-x-auto { overflow-x: auto; } .overflow-x-clip { overflow-x: clip; } .overflow-y-auto { overflow-y: auto; } .scroll-smooth { scroll-behavior: smooth; } .rounded-card { border-radius: var(--radius-2xl); @media (width >= 48rem) { border-radius: var(--radius-3xl); } } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-4xl { border-radius: var(--radius-4xl); } .rounded-5xl { border-radius: var(--radius-5xl); } .rounded-\[2\.5rem\] { border-radius: 2.5rem; } .rounded-\[22px\] { border-radius: 22px; } .rounded-\[24px\] { border-radius: 24px; } .rounded-\[32px\] { border-radius: 32px; } .rounded-\[40px\] { border-radius: 40px; } .rounded-\[44px\] { border-radius: 44px; } .rounded-full { border-radius: var(--radius-full); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-2xl { border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); } .rounded-t-3xl { border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); } .rounded-t-4xl { border-top-left-radius: var(--radius-4xl); border-top-right-radius: var(--radius-4xl); } .rounded-t-\[2\.5rem\] { border-top-left-radius: 2.5rem; border-top-right-radius: 2.5rem; } .rounded-r-2xl { border-top-right-radius: var(--radius-2xl); border-bottom-right-radius: var(--radius-2xl); } .rounded-r-full { border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); } .rounded-r-xl { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); } .rounded-b-2xl { border-bottom-right-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); } .rounded-b-xl { border-bottom-right-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); } .rounded-br-none { border-bottom-right-radius: 0; } .rounded-bl-\[4rem\] { border-bottom-left-radius: 4rem; } .rounded-bl-none { border-bottom-left-radius: 0; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-3 { border-style: var(--tw-border-style); border-width: 3px; } .border-4 { border-style: var(--tw-border-style); border-width: 4px; } .border-\[1\.5px\] { border-style: var(--tw-border-style); border-width: 1.5px; } .border-x { border-inline-style: var(--tw-border-style); border-inline-width: 1px; } .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-none { --tw-border-style: none; border-style: none; } .border-\[\#25D366\]\/20 { border-color: color-mix(in oklab, #25D366 20%, transparent); } .border-\[\#0088cc\]\/20 { border-color: color-mix(in oklab, #0088cc 20%, transparent); } .border-\[\#dfd7c9\] { border-color: #dfd7c9; } .border-\[\#ede6d9\] { border-color: #ede6d9; } .border-amber-100 { border-color: var(--color-amber-100); } .border-bg-main { border-color: var(--color-bg-main); } .border-card { border-color: var(--color-card); } .border-content-brand { border-color: var(--color-content-brand); } .border-content-brand\/10 { border-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .border-content-brand\/20 { border-color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-content-brand) 20%, transparent); } } .border-content-brand\/30 { border-color: color-mix(in srgb, #0369a1 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-content-brand) 30%, transparent); } } .border-current\/10 { border-color: currentcolor; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, currentcolor 10%, transparent); } } .border-danger { border-color: var(--color-danger); } .border-danger-border { border-color: var(--color-danger-border); } .border-danger\/10 { border-color: color-mix(in srgb, #ef4444 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-danger) 10%, transparent); } } .border-danger\/20 { border-color: color-mix(in srgb, #ef4444 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-danger) 20%, transparent); } } .border-emerald-100 { border-color: var(--color-emerald-100); } .border-gray-100 { border-color: var(--color-gray-100); } .border-gray-200 { border-color: var(--color-gray-200); } .border-green-100 { border-color: var(--color-green-100); } .border-green-300 { border-color: var(--color-green-300); } .border-indigo-100 { border-color: var(--color-indigo-100); } .border-info\/20 { border-color: color-mix(in srgb, #0ea5e9 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info) 20%, transparent); } } .border-line-brand { border-color: var(--color-line-brand); } .border-line-brand\/10 { border-color: color-mix(in srgb, #bae0fd 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 10%, transparent); } } .border-line-brand\/15 { border-color: color-mix(in srgb, #bae0fd 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 15%, transparent); } } .border-line-brand\/20 { border-color: color-mix(in srgb, #bae0fd 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 20%, transparent); } } .border-line-brand\/20\! { border-color: color-mix(in srgb, #bae0fd 20%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 20%, transparent) !important; } } .border-line-brand\/30 { border-color: color-mix(in srgb, #bae0fd 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 30%, transparent); } } .border-line-brand\/30\! { border-color: color-mix(in srgb, #bae0fd 30%, transparent) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 30%, transparent) !important; } } .border-line-brand\/40 { border-color: color-mix(in srgb, #bae0fd 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 40%, transparent); } } .border-line-default { border-color: var(--color-line-default); } .border-line-default\/30 { border-color: color-mix(in srgb, #e2e8f0 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-default) 30%, transparent); } } .border-line-default\/40 { border-color: color-mix(in srgb, #e2e8f0 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-default) 40%, transparent); } } .border-line-default\/50 { border-color: color-mix(in srgb, #e2e8f0 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-default) 50%, transparent); } } .border-line-default\/60 { border-color: color-mix(in srgb, #e2e8f0 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-default) 60%, transparent); } } .border-line-default\/70 { border-color: color-mix(in srgb, #e2e8f0 70%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-default) 70%, transparent); } } .border-line-strong { border-color: var(--color-line-strong); } .border-line-subtle { border-color: var(--color-line-subtle); } .border-orange-200 { border-color: var(--color-orange-200); } .border-orange-400\/30 { border-color: color-mix(in srgb, oklch(75% 0.183 55.934) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-orange-400) 30%, transparent); } } .border-primary-100 { border-color: var(--color-primary-100); } .border-primary-200 { border-color: var(--color-primary-200); } .border-primary-400 { border-color: var(--color-primary-400); } .border-primary-400\/30 { border-color: color-mix(in srgb, #38a3f8 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-400) 30%, transparent); } } .border-primary-500\/20 { border-color: color-mix(in srgb, #0ea5e9 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); } } .border-red-100 { border-color: var(--color-red-100); } .border-red-500\/20 { border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } .border-red-500\/30 { border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent); } } .border-rose-100 { border-color: var(--color-rose-100); } .border-rose-500\/10 { border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent); } } .border-rose-500\/20 { border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent); } } .border-slate-100 { border-color: var(--color-slate-100); } .border-slate-200 { border-color: var(--color-slate-200); } .border-slate-300\/30 { border-color: color-mix(in srgb, #cbd5e1 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-300) 30%, transparent); } } .border-slate-500\/10 { border-color: color-mix(in srgb, #64748b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-500) 10%, transparent); } } .border-slate-700 { border-color: var(--color-slate-700); } .border-slate-800 { border-color: var(--color-slate-800); } .border-success-border { border-color: var(--color-success-border); } .border-success\/20 { border-color: color-mix(in srgb, #10b981 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success) 20%, transparent); } } .border-surface-1 { border-color: var(--color-surface-1); } .border-transparent { border-color: transparent; } .border-warning\/20 { border-color: color-mix(in srgb, #f59e0b 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning) 20%, transparent); } } .border-white { border-color: var(--color-white); } .border-white\/10 { border-color: color-mix(in srgb, #ffffff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/20 { border-color: color-mix(in srgb, #ffffff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .border-white\/30 { border-color: color-mix(in srgb, #ffffff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .border-white\/40 { border-color: color-mix(in srgb, #ffffff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .border-white\/50 { border-color: color-mix(in srgb, #ffffff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .border-yellow-400\/20 { border-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent); } } .border-yellow-400\/30 { border-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); } } .border-t-transparent { border-top-color: transparent; } .border-t-white { border-top-color: var(--color-white); } .border-l-content-brand { border-left-color: var(--color-content-brand); } .border-l-success { border-left-color: var(--color-success); } .notif-item-read { background-color: transparent; opacity: 0.8; } .glass-premium { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-surface-1); border: 1px solid var(--color-line-subtle); box-shadow: var(--shadow-premium); } .notif-item-unread { background-color: var(--color-highlight); box-shadow: inset 2px 0 0 0 var(--color-content-brand); } .bg-\[\#25D366\] { background-color: #25D366; } .bg-\[\#25D366\]\/10 { background-color: color-mix(in oklab, #25D366 10%, transparent); } .bg-\[\#0088cc\] { background-color: #0088cc; } .bg-\[\#0088cc\]\/10 { background-color: color-mix(in oklab, #0088cc 10%, transparent); } .bg-\[\#0284c7\] { background-color: #0284c7; } .bg-\[\#dfd7c9\] { background-color: #dfd7c9; } .bg-\[\#f1f5f9\] { background-color: #f1f5f9; } .bg-\[\#f6f1e8\] { background-color: #f6f1e8; } .bg-\[\#fdfbf7\] { background-color: #fdfbf7; } .bg-amber-50 { background-color: var(--color-amber-50); } .bg-amber-100 { background-color: var(--color-amber-100); } .bg-amber-500 { background-color: var(--color-amber-500); } .bg-amber-500\/5 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent); } } .bg-amber-500\/10 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent); } } .bg-amber-500\/15 { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent); } } .bg-bg-surface { background-color: var(--color-bg-surface); } .bg-black { background-color: var(--color-black); } .bg-black\/10 { background-color: color-mix(in srgb, #000000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 10%, transparent); } } .bg-black\/15 { background-color: color-mix(in srgb, #000000 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 15%, transparent); } } .bg-black\/20 { background-color: color-mix(in srgb, #000000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } .bg-black\/40 { background-color: color-mix(in srgb, #000000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .bg-black\/50 { background-color: color-mix(in srgb, #000000 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-black\/60 { background-color: color-mix(in srgb, #000000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .bg-black\/70 { background-color: color-mix(in srgb, #000000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 70%, transparent); } } .bg-black\/80 { background-color: color-mix(in srgb, #000000 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 80%, transparent); } } .bg-blue-500\/10 { background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent); } } .bg-card { background-color: var(--color-card); } .bg-card\/30 { background-color: color-mix(in srgb, #ffffff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-card) 30%, transparent); } } .bg-card\/50 { background-color: color-mix(in srgb, #ffffff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-card) 50%, transparent); } } .bg-card\/70 { background-color: color-mix(in srgb, #ffffff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-card) 70%, transparent); } } .bg-card\/90 { background-color: color-mix(in srgb, #ffffff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-card) 90%, transparent); } } .bg-card\/95 { background-color: color-mix(in srgb, #ffffff 95%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-card) 95%, transparent); } } .bg-content-brand { background-color: var(--color-content-brand); } .bg-content-brand\! { background-color: var(--color-content-brand) !important; } .bg-content-brand\/5 { background-color: color-mix(in srgb, #0369a1 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 5%, transparent); } } .bg-content-brand\/10 { background-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .bg-content-brand\/15 { background-color: color-mix(in srgb, #0369a1 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 15%, transparent); } } .bg-content-brand\/20 { background-color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 20%, transparent); } } .bg-content-brand\/30 { background-color: color-mix(in srgb, #0369a1 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 30%, transparent); } } .bg-content-brand\/40 { background-color: color-mix(in srgb, #0369a1 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 40%, transparent); } } .bg-content-tertiary\/10 { background-color: color-mix(in srgb, #334155 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-tertiary) 10%, transparent); } } .bg-content-tertiary\/30 { background-color: color-mix(in srgb, #334155 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-tertiary) 30%, transparent); } } .bg-content-tertiary\/40 { background-color: color-mix(in srgb, #334155 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-tertiary) 40%, transparent); } } .bg-current { background-color: currentcolor; } .bg-danger { background-color: var(--color-danger); } .bg-danger\! { background-color: var(--color-danger) !important; } .bg-danger-bg { background-color: var(--color-danger-bg); } .bg-danger\/5 { background-color: color-mix(in srgb, #ef4444 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-danger) 5%, transparent); } } .bg-danger\/10 { background-color: color-mix(in srgb, #ef4444 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-danger) 10%, transparent); } } .bg-danger\/20 { background-color: color-mix(in srgb, #ef4444 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-danger) 20%, transparent); } } .bg-emerald-50 { background-color: var(--color-emerald-50); } .bg-emerald-100 { background-color: var(--color-emerald-100); } .bg-emerald-500\/10 { background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); } } .bg-emerald-600 { background-color: var(--color-emerald-600); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-800 { background-color: var(--color-gray-800); } .bg-green-50 { background-color: var(--color-green-50); } .bg-green-100 { background-color: var(--color-green-100); } .bg-green-500 { background-color: var(--color-green-500); } .bg-header\/80 { background-color: color-mix(in srgb, #ffffff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-header) 80%, transparent); } } .bg-highlight { background-color: var(--color-highlight); } .bg-highlight\/30 { background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary-600) 6%, transparent) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-highlight) 30%, transparent); } } .bg-highlight\/40 { background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary-600) 6%, transparent) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-highlight) 40%, transparent); } } .bg-highlight\/50 { background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary-600) 6%, transparent) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-highlight) 50%, transparent); } } .bg-highlight\/80 { background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary-600) 6%, transparent) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-highlight) 80%, transparent); } } .bg-highlight\/90 { background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary-600) 6%, transparent) 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-highlight) 90%, transparent); } } .bg-indigo-50 { background-color: var(--color-indigo-50); } .bg-info\/10 { background-color: color-mix(in srgb, #0ea5e9 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info) 10%, transparent); } } .bg-line-default { background-color: var(--color-line-default); } .bg-line-default\/50 { background-color: color-mix(in srgb, #e2e8f0 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-line-default) 50%, transparent); } } .bg-line-subtle { background-color: var(--color-line-subtle); } .bg-orange-50 { background-color: var(--color-orange-50); } .bg-orange-400 { background-color: var(--color-orange-400); } .bg-orange-500 { background-color: var(--color-orange-500); } .bg-page { background-color: var(--color-page); } .bg-page\/60 { background-color: color-mix(in srgb, #f8fafc 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-page) 60%, transparent); } } .bg-page\/80 { background-color: color-mix(in srgb, #f8fafc 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-page) 80%, transparent); } } .bg-page\/90 { background-color: color-mix(in srgb, #f8fafc 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-page) 90%, transparent); } } .bg-pink-500\/10 { background-color: color-mix(in srgb, oklch(65.6% 0.241 354.308) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pink-500) 10%, transparent); } } .bg-primary-50 { background-color: var(--color-primary-50); } .bg-primary-50\/10 { background-color: color-mix(in srgb, #f0f7ff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-50) 10%, transparent); } } .bg-primary-100 { background-color: var(--color-primary-100); } .bg-primary-500 { background-color: var(--color-primary-500); } .bg-primary-600 { background-color: var(--color-primary-600); } .bg-primary-700 { background-color: var(--color-primary-700); } .bg-primary-900 { background-color: var(--color-primary-900); } .bg-primary-900\/70 { background-color: color-mix(in srgb, #0c4a6e 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-900) 70%, transparent); } } .bg-purple-500\/10 { background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent); } } .bg-purple-600 { background-color: var(--color-purple-600); } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-100 { background-color: var(--color-red-100); } .bg-red-500 { background-color: var(--color-red-500); } .bg-red-500\/10 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent); } } .bg-red-500\/15 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent); } } .bg-red-500\/20 { background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } .bg-red-600 { background-color: var(--color-red-600); } .bg-rose-50 { background-color: var(--color-rose-50); } .bg-rose-500 { background-color: var(--color-rose-500); } .bg-rose-500\/5 { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 5%, transparent); } } .bg-rose-500\/10 { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent); } } .bg-secondary-100 { background-color: var(--color-secondary-100); } .bg-secondary-500 { background-color: var(--color-secondary-500); } .bg-secondary-500\/20 { background-color: color-mix(in srgb, #f59e0b 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-500) 20%, transparent); } } .bg-slate-50 { background-color: var(--color-slate-50); } .bg-slate-100 { background-color: var(--color-slate-100); } .bg-slate-200 { background-color: var(--color-slate-200); } .bg-slate-300 { background-color: var(--color-slate-300); } .bg-slate-500\/5 { background-color: color-mix(in srgb, #64748b 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-500) 5%, transparent); } } .bg-slate-500\/10 { background-color: color-mix(in srgb, #64748b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-500) 10%, transparent); } } .bg-slate-700 { background-color: var(--color-slate-700); } .bg-slate-800 { background-color: var(--color-slate-800); } .bg-slate-900 { background-color: var(--color-slate-900); } .bg-slate-950 { background-color: var(--color-slate-950); } .bg-slate-950\/60 { background-color: color-mix(in srgb, #020617 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-950) 60%, transparent); } } .bg-success { background-color: var(--color-success); } .bg-success-bg { background-color: var(--color-success-bg); } .bg-success\/10 { background-color: color-mix(in srgb, #10b981 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success) 10%, transparent); } } .bg-success\/20 { background-color: color-mix(in srgb, #10b981 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success) 20%, transparent); } } .bg-surface-1 { background-color: var(--color-surface-1); } .bg-surface-1\/50 { background-color: color-mix(in srgb, #ffffff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-1) 50%, transparent); } } .bg-surface-1\/70 { background-color: color-mix(in srgb, #ffffff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-1) 70%, transparent); } } .bg-surface-2 { background-color: var(--color-surface-2); } .bg-surface-2\/30 { background-color: color-mix(in srgb, #f1f5f9 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-2) 30%, transparent); } } .bg-surface-2\/40 { background-color: color-mix(in srgb, #f1f5f9 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-2) 40%, transparent); } } .bg-surface-2\/50 { background-color: color-mix(in srgb, #f1f5f9 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-2) 50%, transparent); } } .bg-surface-2\/60 { background-color: color-mix(in srgb, #f1f5f9 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-2) 60%, transparent); } } .bg-surface-2\/70 { background-color: color-mix(in srgb, #f1f5f9 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-2) 70%, transparent); } } .bg-surface-2\/80 { background-color: color-mix(in srgb, #f1f5f9 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-2) 80%, transparent); } } .bg-surface-2\/90 { background-color: color-mix(in srgb, #f1f5f9 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-2) 90%, transparent); } } .bg-surface-3 { background-color: var(--color-surface-3); } .bg-transparent { background-color: transparent; } .bg-warning { background-color: var(--color-warning); } .bg-warning\/10 { background-color: color-mix(in srgb, #f59e0b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 10%, transparent); } } .bg-warning\/20 { background-color: color-mix(in srgb, #f59e0b 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 20%, transparent); } } .bg-white { background-color: var(--color-white); } .bg-white\/5 { background-color: color-mix(in srgb, #ffffff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/10 { background-color: color-mix(in srgb, #ffffff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/20 { background-color: color-mix(in srgb, #ffffff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .bg-white\/40 { background-color: color-mix(in srgb, #ffffff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .bg-white\/60 { background-color: color-mix(in srgb, #ffffff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .bg-white\/80 { background-color: color-mix(in srgb, #ffffff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .bg-yellow-50 { background-color: var(--color-yellow-50); } .bg-yellow-400 { background-color: var(--color-yellow-400); } .bg-yellow-400\/20 { background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent); } } .overlay-light { background-color: color-mix(in srgb, #ffffff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-surface-1) 5%, transparent); } } .bg-linear-to-b { --tw-gradient-position: to bottom; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-bl { --tw-gradient-position: to bottom left; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom left in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-br { --tw-gradient-position: to bottom right; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to bottom right in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-l { --tw-gradient-position: to left; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to left in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-r { --tw-gradient-position: to right; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to right in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-t { --tw-gradient-position: to top; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to top in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-linear-to-tr { --tw-gradient-position: to top right; @supports (background-image: linear-gradient(in lab, red, red)) { --tw-gradient-position: to top right in oklab; } background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .pattern-grid-lg { background-image: linear-gradient(to right, var(--pattern-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-grid-line) 1px, transparent 1px); background-size: 4rem 4rem; } .bg-mesh-announcement { background-image: radial-gradient(at 0% 0%, var(--color-content-brand) 0px, transparent 50%), radial-gradient(at 100% 0%, var(--color-content-brand) 0px, transparent 50%); opacity: 0.2; } .bg-\[url\(\'\.\.\/assets\/images\/mesh-bg\.webp\'\)\] { background-image: url('/wp-content/themes/chatkristen/public/assets/images/mesh-bg.webp'); } .from-black\/40 { --tw-gradient-from: color-mix(in srgb, #000000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 40%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/50 { --tw-gradient-from: color-mix(in srgb, #000000 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 50%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/60 { --tw-gradient-from: color-mix(in srgb, #000000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-blue-500 { --tw-gradient-from: var(--color-blue-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-card\/70 { --tw-gradient-from: color-mix(in srgb, #ffffff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-card) 70%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-card\/85 { --tw-gradient-from: color-mix(in srgb, #ffffff 85%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-card) 85%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-card\/90 { --tw-gradient-from: color-mix(in srgb, #ffffff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-card) 90%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-content-brand { --tw-gradient-from: var(--color-content-brand); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-content-brand\/5 { --tw-gradient-from: color-mix(in srgb, #0369a1 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-content-brand) 5%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-content-brand\/10 { --tw-gradient-from: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-content-brand\/20 { --tw-gradient-from: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-content-brand) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-content-brand\/90 { --tw-gradient-from: color-mix(in srgb, #0369a1 90%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-content-brand) 90%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-content-primary\/5 { --tw-gradient-from: color-mix(in srgb, #0f172a 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-content-primary) 5%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-danger\/5 { --tw-gradient-from: color-mix(in srgb, #ef4444 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-danger) 5%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-indigo-950 { --tw-gradient-from: var(--color-indigo-950); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-orange-300 { --tw-gradient-from: var(--color-orange-300); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-orange-400\/20 { --tw-gradient-from: color-mix(in srgb, oklch(75% 0.183 55.934) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-orange-400) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-page { --tw-gradient-from: var(--color-page); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-primary-400 { --tw-gradient-from: var(--color-primary-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-primary-500 { --tw-gradient-from: var(--color-primary-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-primary-600 { --tw-gradient-from: var(--color-primary-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-red-500\/10 { --tw-gradient-from: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-200 { --tw-gradient-from: var(--color-slate-200); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-300\/20 { --tw-gradient-from: color-mix(in srgb, #cbd5e1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-slate-300) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-500 { --tw-gradient-from: var(--color-slate-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-600 { --tw-gradient-from: var(--color-slate-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-950 { --tw-gradient-from: var(--color-slate-950); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-950\/20 { --tw-gradient-from: color-mix(in srgb, #020617 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-950\/95 { --tw-gradient-from: color-mix(in srgb, #020617 95%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 95%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-surface-1 { --tw-gradient-from: var(--color-surface-1); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-surface-2 { --tw-gradient-from: var(--color-surface-2); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-warning\/5 { --tw-gradient-from: color-mix(in srgb, #f59e0b 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-warning) 5%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-white\/95 { --tw-gradient-from: color-mix(in srgb, #ffffff 95%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-white) 95%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-yellow-300 { --tw-gradient-from: var(--color-yellow-300); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-yellow-400 { --tw-gradient-from: var(--color-yellow-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-yellow-400\/20 { --tw-gradient-from: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-yellow-400) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .via-amber-500\/10 { --tw-gradient-via: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-amber-500) 10%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-content-brand { --tw-gradient-via: var(--color-content-brand); --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-content-primary\/5 { --tw-gradient-via: color-mix(in srgb, #0f172a 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-content-primary) 5%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-indigo-500 { --tw-gradient-via: var(--color-indigo-500); --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-line-default { --tw-gradient-via: var(--color-line-default); --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-primary-600 { --tw-gradient-via: var(--color-primary-600); --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-slate-900 { --tw-gradient-via: var(--color-slate-900); --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-slate-950\/40 { --tw-gradient-via: color-mix(in srgb, #020617 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 40%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-slate-950\/50 { --tw-gradient-via: color-mix(in srgb, #020617 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 50%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-slate-950\/80 { --tw-gradient-via: color-mix(in srgb, #020617 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 80%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-surface-1 { --tw-gradient-via: var(--color-surface-1); --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-surface-2 { --tw-gradient-via: var(--color-surface-2); --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-transparent { --tw-gradient-via: transparent; --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/20 { --tw-gradient-via: color-mix(in srgb, #ffffff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/30 { --tw-gradient-via: color-mix(in srgb, #ffffff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 30%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/80 { --tw-gradient-via: color-mix(in srgb, #ffffff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 80%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .to-black\/20 { --tw-gradient-to: color-mix(in srgb, #000000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-black) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-card\/50 { --tw-gradient-to: color-mix(in srgb, #ffffff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-card) 50%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-card\/65 { --tw-gradient-to: color-mix(in srgb, #ffffff 65%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-card) 65%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-card\/70 { --tw-gradient-to: color-mix(in srgb, #ffffff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-card) 70%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-content-brand { --tw-gradient-to: var(--color-content-brand); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-content-brand\/5 { --tw-gradient-to: color-mix(in srgb, #0369a1 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-content-brand) 5%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-content-brand\/60 { --tw-gradient-to: color-mix(in srgb, #0369a1 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-content-brand) 60%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-content-brand\/80 { --tw-gradient-to: color-mix(in srgb, #0369a1 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-content-brand) 80%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-danger\/10 { --tw-gradient-to: color-mix(in srgb, #ef4444 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-danger) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-orange-500 { --tw-gradient-to: var(--color-orange-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-orange-500\/10 { --tw-gradient-to: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-orange-500) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-page { --tw-gradient-to: var(--color-page); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-primary-400 { --tw-gradient-to: var(--color-primary-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-primary-500 { --tw-gradient-to: var(--color-primary-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-primary-600 { --tw-gradient-to: var(--color-primary-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-primary-700 { --tw-gradient-to: var(--color-primary-700); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-purple-500 { --tw-gradient-to: var(--color-purple-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-50\/60 { --tw-gradient-to: color-mix(in srgb, #f8fafc 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-slate-50) 60%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-400 { --tw-gradient-to: var(--color-slate-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-400\/10 { --tw-gradient-to: color-mix(in srgb, #94a3b8 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-slate-400) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-600 { --tw-gradient-to: var(--color-slate-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-700 { --tw-gradient-to: var(--color-slate-700); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-950 { --tw-gradient-to: var(--color-slate-950); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-surface-1 { --tw-gradient-to: var(--color-surface-1); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-surface-2 { --tw-gradient-to: var(--color-surface-2); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-surface-3 { --tw-gradient-to: var(--color-surface-3); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-warning\/10 { --tw-gradient-to: color-mix(in srgb, #f59e0b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-warning) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-white\/70 { --tw-gradient-to: color-mix(in srgb, #ffffff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-white) 70%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-yellow-500 { --tw-gradient-to: var(--color-yellow-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-yellow-500\/10 { --tw-gradient-to: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-yellow-500) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .mask-\[linear-gradient\(to_bottom\,white\,transparent\)\] { mask-image: linear-gradient(to bottom,white,transparent); } .bg-clip-text { background-clip: text; } .fill-content-brand { fill: var(--color-content-brand); } .fill-current { fill: currentcolor; } .fill-red-500 { fill: var(--color-red-500); } .fill-secondary-400 { fill: var(--color-secondary-400); } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .p-0 { padding: 0px; } .p-0\.5 { padding: calc(var(--spacing) * 0.5); } .p-1 { padding: var(--spacing); } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } .p-2 { padding: calc(var(--spacing) * 2); } .p-2\.5 { padding: calc(var(--spacing) * 2.5); } .p-3 { padding: calc(var(--spacing) * 3); } .p-3\.5 { padding: calc(var(--spacing) * 3.5); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .p-10 { padding: calc(var(--spacing) * 10); } .p-12 { padding: calc(var(--spacing) * 12); } .p-16 { padding: calc(var(--spacing) * 16); } .px-0\! { padding-inline: 0px !important; } .px-0\.5 { padding-inline: calc(var(--spacing) * 0.5); } .px-1 { padding-inline: var(--spacing); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-3\.5 { padding-inline: calc(var(--spacing) * 3.5); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .px-10 { padding-inline: calc(var(--spacing) * 10); } .px-12 { padding-inline: calc(var(--spacing) * 12); } .px-14 { padding-inline: calc(var(--spacing) * 14); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: var(--spacing); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-3\.5 { padding-block: calc(var(--spacing) * 3.5); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-4\.5 { padding-block: calc(var(--spacing) * 4.5); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-16 { padding-block: calc(var(--spacing) * 16); } .py-20 { padding-block: calc(var(--spacing) * 20); } .py-24 { padding-block: calc(var(--spacing) * 24); } .py-32 { padding-block: calc(var(--spacing) * 32); } .pt-0 { padding-top: 0px; } .pt-1 { padding-top: var(--spacing); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-10 { padding-top: calc(var(--spacing) * 10); } .pt-12 { padding-top: calc(var(--spacing) * 12); } .pt-16 { padding-top: calc(var(--spacing) * 16); } .pt-20 { padding-top: calc(var(--spacing) * 20); } .pt-32 { padding-top: calc(var(--spacing) * 32); } .pr-1 { padding-right: var(--spacing); } .pr-2 { padding-right: calc(var(--spacing) * 2); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pr-6 { padding-right: calc(var(--spacing) * 6); } .pr-8 { padding-right: calc(var(--spacing) * 8); } .pr-12 { padding-right: calc(var(--spacing) * 12); } .pr-16 { padding-right: calc(var(--spacing) * 16); } .pr-20 { padding-right: calc(var(--spacing) * 20); } .pr-24\! { padding-right: calc(var(--spacing) * 24) !important; } .pb-1 { padding-bottom: var(--spacing); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .pb-12 { padding-bottom: calc(var(--spacing) * 12); } .pb-16 { padding-bottom: calc(var(--spacing) * 16); } .pb-20 { padding-bottom: calc(var(--spacing) * 20); } .pb-24 { padding-bottom: calc(var(--spacing) * 24); } .pl-1 { padding-left: var(--spacing); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .pl-6 { padding-left: calc(var(--spacing) * 6); } .pl-7 { padding-left: calc(var(--spacing) * 7); } .pl-12 { padding-left: calc(var(--spacing) * 12); } .pl-12\! { padding-left: calc(var(--spacing) * 12) !important; } .pl-14 { padding-left: calc(var(--spacing) * 14); } .pl-14\! { padding-left: calc(var(--spacing) * 14) !important; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .align-bottom { vertical-align: bottom; } .align-middle { vertical-align: middle; } .font-mono { font-family: var(--font-mono); } .font-sans { font-family: var(--font-sans); } .font-serif { font-family: var(--font-serif); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-7xl { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } .text-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } .text-9xl { font-size: var(--text-9xl); line-height: var(--tw-leading, var(--text-9xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[8px\] { font-size: 8px; } .text-\[8rem\] { font-size: 8rem; } .text-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[13px\] { font-size: 13px; } .text-\[15px\] { font-size: 15px; } .leading-\[1\.1\] { --tw-leading: 1.1; line-height: 1.1; } .leading-\[1\.4\] { --tw-leading: 1.4; line-height: 1.4; } .leading-none { --tw-leading: 1; line-height: 1; } .leading-normal { --tw-leading: var(--leading-normal); line-height: var(--leading-normal); } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } .font-light { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[0\.2em\] { --tw-tracking: 0.2em; letter-spacing: 0.2em; } .tracking-\[0\.3em\] { --tw-tracking: 0.3em; letter-spacing: 0.3em; } .tracking-\[0\.15em\] { --tw-tracking: 0.15em; letter-spacing: 0.15em; } .tracking-\[0\.25em\] { --tw-tracking: 0.25em; letter-spacing: 0.25em; } .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-tighter { --tw-tracking: var(--tracking-tighter); letter-spacing: var(--tracking-tighter); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .wrap-break-word { overflow-wrap: break-word; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .text-\[\#25D366\] { color: #25D366; } .text-\[\#0088cc\] { color: #0088cc; } .text-amber-400 { color: var(--color-amber-400); } .text-amber-500 { color: var(--color-amber-500); } .text-amber-600 { color: var(--color-amber-600); } .text-amber-700 { color: var(--color-amber-700); } .text-blue-600 { color: var(--color-blue-600); } .text-content-brand { color: var(--color-content-brand); } .text-content-brand\/10 { color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .text-content-brand\/15 { color: color-mix(in srgb, #0369a1 15%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 15%, transparent); } } .text-content-brand\/20 { color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 20%, transparent); } } .text-content-brand\/30 { color: color-mix(in srgb, #0369a1 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 30%, transparent); } } .text-content-brand\/40 { color: color-mix(in srgb, #0369a1 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 40%, transparent); } } .text-content-brand\/50 { color: color-mix(in srgb, #0369a1 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 50%, transparent); } } .text-content-brand\/60 { color: color-mix(in srgb, #0369a1 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 60%, transparent); } } .text-content-brand\/70 { color: color-mix(in srgb, #0369a1 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 70%, transparent); } } .text-content-brand\/80 { color: color-mix(in srgb, #0369a1 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 80%, transparent); } } .text-content-inverse { color: var(--color-content-inverse); } .text-content-inverse\! { color: var(--color-content-inverse) !important; } .text-content-inverse\/30 { color: color-mix(in srgb, #ffffff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-inverse) 30%, transparent); } } .text-content-primary { color: var(--color-content-primary); } .text-content-primary\/5 { color: color-mix(in srgb, #0f172a 5%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-primary) 5%, transparent); } } .text-content-secondary { color: var(--color-content-secondary); } .text-content-tertiary { color: var(--color-content-tertiary); } .text-content-tertiary\/20 { color: color-mix(in srgb, #334155 20%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-tertiary) 20%, transparent); } } .text-content-tertiary\/30 { color: color-mix(in srgb, #334155 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-tertiary) 30%, transparent); } } .text-content-tertiary\/40 { color: color-mix(in srgb, #334155 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-tertiary) 40%, transparent); } } .text-content-tertiary\/50 { color: color-mix(in srgb, #334155 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-tertiary) 50%, transparent); } } .text-danger { color: var(--color-danger); } .text-danger-content { color: var(--color-danger-content); } .text-emerald-500 { color: var(--color-emerald-500); } .text-emerald-600 { color: var(--color-emerald-600); } .text-emerald-700 { color: var(--color-emerald-700); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-800 { color: var(--color-gray-800); } .text-gray-900 { color: var(--color-gray-900); } .text-green-600 { color: var(--color-green-600); } .text-green-700 { color: var(--color-green-700); } .text-indigo-600 { color: var(--color-indigo-600); } .text-info { color: var(--color-info); } .text-info-content { color: var(--color-info-content); } .text-orange-500 { color: var(--color-orange-500); } .text-orange-600 { color: var(--color-orange-600); } .text-primary-50 { color: var(--color-primary-50); } .text-primary-500 { color: var(--color-primary-500); } .text-primary-600 { color: var(--color-primary-600); } .text-primary-700 { color: var(--color-primary-700); } .text-primary-900 { color: var(--color-primary-900); } .text-red-500 { color: var(--color-red-500); } .text-red-600 { color: var(--color-red-600); } .text-red-700 { color: var(--color-red-700); } .text-rose-500 { color: var(--color-rose-500); } .text-rose-600 { color: var(--color-rose-600); } .text-secondary-400 { color: var(--color-secondary-400); } .text-slate-400 { color: var(--color-slate-400); } .text-slate-500 { color: var(--color-slate-500); } .text-slate-600 { color: var(--color-slate-600); } .text-slate-900 { color: var(--color-slate-900); } .text-success { color: var(--color-success); } .text-success-content { color: var(--color-success-content); } .text-transparent { color: transparent; } .text-warning { color: var(--color-warning); } .text-warning-content { color: var(--color-warning-content); } .text-white { color: var(--color-white); } .text-white\! { color: var(--color-white) !important; } .text-white\/40 { color: color-mix(in srgb, #ffffff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .text-white\/70 { color: color-mix(in srgb, #ffffff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .text-white\/80 { color: color-mix(in srgb, #ffffff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .text-white\/90 { color: color-mix(in srgb, #ffffff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .text-yellow-500 { color: var(--color-yellow-500); } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .not-italic { font-style: normal; } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: none; } .underline { text-decoration-line: underline; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .placeholder-content-tertiary::placeholder { color: var(--color-content-tertiary); } .placeholder-content-tertiary\/30::placeholder { color: color-mix(in srgb, #334155 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-tertiary) 30%, transparent); } } .placeholder-content-tertiary\/50::placeholder { color: color-mix(in srgb, #334155 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-tertiary) 50%, transparent); } } .placeholder-white\/40::placeholder { color: color-mix(in srgb, #ffffff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .accent-content-brand { accent-color: var(--color-content-brand); } .opacity-0 { opacity: 0%; } .opacity-5 { opacity: 5%; } .opacity-10 { opacity: 10%; } .opacity-20 { opacity: 20%; } .opacity-25 { opacity: 25%; } .opacity-30 { opacity: 30%; } .opacity-40 { opacity: 40%; } .opacity-50 { opacity: 50%; } .opacity-60 { opacity: 60%; } .opacity-70 { opacity: 70%; } .opacity-75 { opacity: 75%; } .opacity-80 { opacity: 80%; } .opacity-90 { opacity: 90%; } .opacity-90\! { opacity: 90% !important; } .opacity-95 { opacity: 95%; } .opacity-100 { opacity: 100%; } .opacity-\[0\.1\] { opacity: 0.1; } .opacity-\[0\.02\] { opacity: 0.02; } .opacity-\[0\.03\] { opacity: 0.03; } .opacity-\[0\.04\] { opacity: 0.04; } .opacity-\[0\.05\] { opacity: 0.05; } .mix-blend-multiply { mix-blend-mode: multiply; } .mix-blend-overlay { mix-blend-mode: overlay; } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_8px_rgba\(var\(--color-brand\)\,0\.4\)\] { --tw-shadow: 0 0 8px var(--tw-shadow-color, rgba(var(--color-brand),0.4)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_8px_rgba\(var\(--color-brand-rgb\)\,0\.4\)\] { --tw-shadow: 0 0 8px var(--tw-shadow-color, rgba(var(--color-brand-rgb),0.4)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_15px_rgba\(var\(--color-brand\)\,0\.5\)\] { --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(var(--color-brand),0.5)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-float { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.25)), inset 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-inner { --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-premium { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.1)), 0 10px 10px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.04)), inset 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-soft { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.05)), 0 2px 4px -1px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.03)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xs { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-0 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-1 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-2 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-4 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-8 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-premium { box-shadow: var(--shadow-premium); } .shadow-soft-xl { box-shadow: var(--shadow-xl); } .shadow-content-brand\/5 { --tw-shadow-color: color-mix(in srgb, #0369a1 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-content-brand) 5%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-content-brand\/10 { --tw-shadow-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-content-brand) 10%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-content-brand\/20 { --tw-shadow-color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-content-brand) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-content-brand\/25 { --tw-shadow-color: color-mix(in srgb, #0369a1 25%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-content-brand) 25%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-content-brand\/30 { --tw-shadow-color: color-mix(in srgb, #0369a1 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-content-brand) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-danger\/20 { --tw-shadow-color: color-mix(in srgb, #ef4444 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-danger) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-primary-500\/30 { --tw-shadow-color: color-mix(in srgb, #0ea5e9 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-primary-900\/10 { --tw-shadow-color: color-mix(in srgb, #0c4a6e 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary-900) 10%, transparent) var(--tw-shadow-alpha), transparent); } } .ring-bg-main { --tw-ring-color: var(--color-bg-main); } .ring-black\/5 { --tw-ring-color: color-mix(in srgb, #000000 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent); } } .ring-card { --tw-ring-color: var(--color-card); } .ring-content-brand { --tw-ring-color: var(--color-content-brand); } .ring-content-brand\/10 { --tw-ring-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .ring-content-brand\/20 { --tw-ring-color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-content-brand) 20%, transparent); } } .ring-line-brand\/20 { --tw-ring-color: color-mix(in srgb, #bae0fd 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-line-brand) 20%, transparent); } } .ring-line-subtle { --tw-ring-color: var(--color-line-subtle); } .ring-red-500\/30 { --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-red-500) 30%, transparent); } } .ring-surface-1 { --tw-ring-color: var(--color-surface-1); } .ring-white { --tw-ring-color: var(--color-white); } .ring-white\/5 { --tw-ring-color: color-mix(in srgb, #ffffff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .ring-white\/80 { --tw-ring-color: color-mix(in srgb, #ffffff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .ring-offset-2 { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .blur { --tw-blur: blur(8px); 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,); } .blur-2xl { --tw-blur: blur(var(--blur-2xl)); 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,); } .blur-3xl { --tw-blur: blur(var(--blur-3xl)); 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,); } .blur-\[80px\] { --tw-blur: blur(80px); 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,); } .blur-\[100px\] { --tw-blur: blur(100px); 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,); } .blur-xl { --tw-blur: blur(var(--blur-xl)); 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-2xl { --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl)); 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-lg { --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg)); 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-md { --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-md)); 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-sm { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm)); 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,); } .grayscale { --tw-grayscale: grayscale(100%); 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,); } .grayscale-\[0\.3\] { --tw-grayscale: grayscale(0.3); 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,); } .sepia { --tw-sepia: sepia(100%); 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,); } .filter { 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,); } .backdrop-blur-2xl { --tw-backdrop-blur: blur(var(--blur-2xl)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-blur-\[2px\] { --tw-backdrop-blur: blur(2px); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-filter { -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .stagger-1 { animation-delay: 100ms; transition-delay: 100ms; } .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .duration-700 { --tw-duration: 700ms; transition-duration: 700ms; } .duration-1000 { --tw-duration: 1000ms; transition-duration: 1000ms; } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .will-change-transform { will-change: transform; } .prose-slate { --tw-prose-body: oklch(37.2% 0.044 257.287); --tw-prose-headings: oklch(20.8% 0.042 265.755); --tw-prose-lead: oklch(44.6% 0.043 257.281); --tw-prose-links: oklch(20.8% 0.042 265.755); --tw-prose-bold: oklch(20.8% 0.042 265.755); --tw-prose-counters: oklch(55.4% 0.046 257.417); --tw-prose-bullets: oklch(86.9% 0.022 252.894); --tw-prose-hr: oklch(92.9% 0.013 255.508); --tw-prose-quotes: oklch(20.8% 0.042 265.755); --tw-prose-quote-borders: oklch(92.9% 0.013 255.508); --tw-prose-captions: oklch(55.4% 0.046 257.417); --tw-prose-kbd: oklch(20.8% 0.042 265.755); --tw-prose-kbd-shadows: color-mix(in oklab, oklch(20.8% 0.042 265.755) 10%, transparent); --tw-prose-code: oklch(20.8% 0.042 265.755); --tw-prose-pre-code: oklch(92.9% 0.013 255.508); --tw-prose-pre-bg: oklch(27.9% 0.041 260.031); --tw-prose-th-borders: oklch(86.9% 0.022 252.894); --tw-prose-td-borders: oklch(92.9% 0.013 255.508); --tw-prose-invert-body: oklch(86.9% 0.022 252.894); --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: oklch(70.4% 0.04 256.788); --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: oklch(70.4% 0.04 256.788); --tw-prose-invert-bullets: oklch(44.6% 0.043 257.281); --tw-prose-invert-hr: oklch(37.2% 0.044 257.287); --tw-prose-invert-quotes: oklch(96.8% 0.007 247.896); --tw-prose-invert-quote-borders: oklch(37.2% 0.044 257.287); --tw-prose-invert-captions: oklch(70.4% 0.04 256.788); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: oklch(86.9% 0.022 252.894); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: oklch(44.6% 0.043 257.281); --tw-prose-invert-td-borders: oklch(37.2% 0.044 257.287); } .outline-none { --tw-outline-style: none; outline-style: none; } .prose-indigo { --tw-prose-links: oklch(51.1% 0.262 276.966); --tw-prose-invert-links: oklch(58.5% 0.233 277.117); } .select-all { -webkit-user-select: all; user-select: all; } .select-none { -webkit-user-select: none; user-select: none; } .animation-delay-2000 { animation-delay: 2s; } .bg-gradient-brand { background: var(--gradient-brand); } .bg-gradient-surface { background: var(--gradient-surface); } .group-focus-within\:text-content-brand:is(:where(.group):focus-within *) { color: var(--color-content-brand); } .group-focus-within\:opacity-100:is(:where(.group):focus-within *) { opacity: 100%; } @media (hover: hover) { .group-hover\:visible:is(:where(.group):hover *) { visibility: visible; } .group-hover\:block:is(:where(.group):hover *) { display: block; } .group-hover\:-translate-x-1:is(:where(.group):hover *) { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:translate-x-0\.5:is(:where(.group):hover *) { --tw-translate-x: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:translate-x-1:is(:where(.group):hover *) { --tw-translate-x: var(--spacing); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:translate-x-1\.5:is(:where(.group):hover *) { --tw-translate-x: calc(var(--spacing) * 1.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:translate-x-2:is(:where(.group):hover *) { --tw-translate-x: calc(var(--spacing) * 2); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:-translate-y-2:is(:where(.group):hover *) { --tw-translate-y: calc(var(--spacing) * -2); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:translate-y-0:is(:where(.group):hover *) { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:translate-y-1:is(:where(.group):hover *) { --tw-translate-y: var(--spacing); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\:scale-100:is(:where(.group):hover *) { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\:scale-105:is(:where(.group):hover *) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\:scale-110:is(:where(.group):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\:scale-150:is(:where(.group):hover *) { --tw-scale-x: 150%; --tw-scale-y: 150%; --tw-scale-z: 150%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\:scale-160:is(:where(.group):hover *) { --tw-scale-x: 160%; --tw-scale-y: 160%; --tw-scale-z: 160%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\:scale-x-100:is(:where(.group):hover *) { --tw-scale-x: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\:rotate-6:is(:where(.group):hover *) { rotate: 6deg; } .group-hover\:rotate-12:is(:where(.group):hover *) { rotate: 12deg; } .group-hover\:rotate-90:is(:where(.group):hover *) { rotate: 90deg; } .group-hover\:rotate-180:is(:where(.group):hover *) { rotate: 180deg; } .group-hover\:gap-2:is(:where(.group):hover *) { gap: calc(var(--spacing) * 2); } .group-hover\:border-content-brand\/30:is(:where(.group):hover *) { border-color: color-mix(in srgb, #0369a1 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:border-content-brand\/30:is(:where(.group):hover *) { border-color: color-mix(in oklab, var(--color-content-brand) 30%, transparent); } } .group-hover\:border-line-brand\/30:is(:where(.group):hover *) { border-color: color-mix(in srgb, #bae0fd 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:border-line-brand\/30:is(:where(.group):hover *) { border-color: color-mix(in oklab, var(--color-line-brand) 30%, transparent); } } .group-hover\:border-line-brand\/40:is(:where(.group):hover *) { border-color: color-mix(in srgb, #bae0fd 40%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:border-line-brand\/40:is(:where(.group):hover *) { border-color: color-mix(in oklab, var(--color-line-brand) 40%, transparent); } } .group-hover\:border-primary-200:is(:where(.group):hover *) { border-color: var(--color-primary-200); } .group-hover\:bg-content-brand:is(:where(.group):hover *) { background-color: var(--color-content-brand); } .group-hover\:bg-content-brand\/5:is(:where(.group):hover *) { background-color: color-mix(in srgb, #0369a1 5%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:bg-content-brand\/5:is(:where(.group):hover *) { background-color: color-mix(in oklab, var(--color-content-brand) 5%, transparent); } } .group-hover\:bg-content-brand\/10:is(:where(.group):hover *) { background-color: color-mix(in srgb, #0369a1 10%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:bg-content-brand\/10:is(:where(.group):hover *) { background-color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .group-hover\:bg-highlight:is(:where(.group):hover *) { background-color: var(--color-highlight); } .group-hover\:bg-surface-2:is(:where(.group):hover *) { background-color: var(--color-surface-2); } .group-hover\:bg-white:is(:where(.group):hover *) { background-color: var(--color-white); } .group-hover\:from-content-brand\/20:is(:where(.group):hover *) { --tw-gradient-from: color-mix(in srgb, #0369a1 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:from-content-brand\/20:is(:where(.group):hover *) { --tw-gradient-from: color-mix(in oklab, var(--color-content-brand) 20%, transparent); } } .group-hover\:from-content-brand\/20:is(:where(.group):hover *) { --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .group-hover\:text-\[\#25D366\]:is(:where(.group):hover *) { color: #25D366; } .group-hover\:text-\[\#0088cc\]:is(:where(.group):hover *) { color: #0088cc; } .group-hover\:text-content-brand:is(:where(.group):hover *) { color: var(--color-content-brand); } .group-hover\:text-content-inverse:is(:where(.group):hover *) { color: var(--color-content-inverse); } .group-hover\:text-content-primary:is(:where(.group):hover *) { color: var(--color-content-primary); } .group-hover\:text-white:is(:where(.group):hover *) { color: var(--color-white); } .group-hover\:text-white\/20:is(:where(.group):hover *) { color: color-mix(in srgb, #ffffff 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:text-white\/20:is(:where(.group):hover *) { color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .group-hover\:text-white\/70:is(:where(.group):hover *) { color: color-mix(in srgb, #ffffff 70%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\:text-white\/70:is(:where(.group):hover *) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .group-hover\:opacity-30:is(:where(.group):hover *) { opacity: 30%; } .group-hover\:opacity-40:is(:where(.group):hover *) { opacity: 40%; } .group-hover\:opacity-80:is(:where(.group):hover *) { opacity: 80%; } .group-hover\:opacity-100:is(:where(.group):hover *) { opacity: 100%; } .group-hover\:opacity-\[0\.07\]:is(:where(.group):hover *) { opacity: 0.07; } .group-hover\:opacity-\[0\.08\]:is(:where(.group):hover *) { opacity: 0.08; } .group-hover\:shadow-\[0_0_20px_rgba\(255\,255\,255\,0\.4\)\]:is(:where(.group):hover *) { --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(255,255,255,0.4)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .group-hover\:shadow-md:is(:where(.group):hover *) { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .group-hover\/act\:scale-110:is(:where(.group\/act):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/act\:bg-highlight:is(:where(.group\/act):hover *) { background-color: var(--color-highlight); } .group-hover\/act\:text-content-brand:is(:where(.group\/act):hover *) { color: var(--color-content-brand); } .group-hover\/all\:translate-x-1:is(:where(.group\/all):hover *) { --tw-translate-x: var(--spacing); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\/author\:text-content-brand:is(:where(.group\/author):hover *) { color: var(--color-content-brand); } .group-hover\/author\:underline:is(:where(.group\/author):hover *) { text-decoration-line: underline; } .group-hover\/author\:ring-line-brand\/20:is(:where(.group\/author):hover *) { --tw-ring-color: color-mix(in srgb, #bae0fd 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\/author\:ring-line-brand\/20:is(:where(.group\/author):hover *) { --tw-ring-color: color-mix(in oklab, var(--color-line-brand) 20%, transparent); } } .group-hover\/avatar\:opacity-100:is(:where(.group\/avatar):hover *) { opacity: 100%; } .group-hover\/avatar\:grayscale-0:is(:where(.group\/avatar):hover *) { --tw-grayscale: grayscale(0%); 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,); } .group-hover\/badge\:scale-110:is(:where(.group\/badge):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/base\:-translate-y-2:is(:where(.group\/base):hover *) { --tw-translate-y: calc(var(--spacing) * -2); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\/base\:scale-110:is(:where(.group\/base):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/btn\:scale-105:is(:where(.group\/btn):hover *) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/btn\:scale-110:is(:where(.group\/btn):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/btn\:animate-\[shimmer_1\.5s_infinite\]:is(:where(.group\/btn):hover *) { animation: shimmer 1.5s infinite; } .group-hover\/btn\:animate-heartbeat:is(:where(.group\/btn):hover *) { animation: heart-pop 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .group-hover\/btn\:text-content-brand:is(:where(.group\/btn):hover *) { color: var(--color-content-brand); } .group-hover\/btn\:text-success:is(:where(.group\/btn):hover *) { color: var(--color-success); } .group-hover\/btn\:opacity-0:is(:where(.group\/btn):hover *) { opacity: 0%; } .group-hover\/card\:text-content-brand:is(:where(.group\/card):hover *) { color: var(--color-content-brand); } .group-hover\/cite\:w-14:is(:where(.group\/cite):hover *) { width: calc(var(--spacing) * 14); } .group-hover\/close\:rotate-90:is(:where(.group\/close):hover *) { rotate: 90deg; } .group-hover\/copy\:rotate-45:is(:where(.group\/copy):hover *) { rotate: 45deg; } .group-hover\/cover\:scale-105:is(:where(.group\/cover):hover *) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/cover\:bg-black\/10:is(:where(.group\/cover):hover *) { background-color: color-mix(in srgb, #000000 10%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\/cover\:bg-black\/10:is(:where(.group\/cover):hover *) { background-color: color-mix(in oklab, var(--color-black) 10%, transparent); } } .group-hover\/fab\:translate-y-0:is(:where(.group\/fab):hover *) { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\/fab\:opacity-100:is(:where(.group\/fab):hover *) { opacity: 100%; } .group-hover\/group\:scale-110:is(:where(.group\/group):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/input\:border-line-brand\/30:is(:where(.group\/input):hover *) { border-color: color-mix(in srgb, #bae0fd 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .group-hover\/input\:border-line-brand\/30:is(:where(.group\/input):hover *) { border-color: color-mix(in oklab, var(--color-line-brand) 30%, transparent); } } .group-hover\/item\:translate-x-1:is(:where(.group\/item):hover *) { --tw-translate-x: var(--spacing); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-hover\/item\:scale-105:is(:where(.group\/item):hover *) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/item\:scale-110:is(:where(.group\/item):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/item\:text-content-brand:is(:where(.group\/item):hover *) { color: var(--color-content-brand); } .group-hover\/item\:opacity-100:is(:where(.group\/item):hover *) { opacity: 100%; } .group-hover\/link\:text-content-brand:is(:where(.group\/link):hover *) { color: var(--color-content-brand); } .group-hover\/link\:opacity-40:is(:where(.group\/link):hover *) { opacity: 40%; } .group-hover\/link\:opacity-100:is(:where(.group\/link):hover *) { opacity: 100%; } .group-hover\/notif-item\:scale-110:is(:where(.group\/notif-item):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/notif-item\:scale-125:is(:where(.group\/notif-item):hover *) { --tw-scale-x: 125%; --tw-scale-y: 125%; --tw-scale-z: 125%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/platform\:scale-110:is(:where(.group\/platform):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/podium\:scale-105:is(:where(.group\/podium):hover *) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/podium\:rotate-0:is(:where(.group\/podium):hover *) { rotate: 0deg; } .group-hover\/scripture\:scale-110:is(:where(.group\/scripture):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .group-hover\/share\:scale-110:is(:where(.group\/share):hover *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .group-has-checked\/card\:opacity-100:is(:where(.group\/card):has(:checked) *) { opacity: 100%; } .peer-checked\:opacity-100:is(:where(.peer):checked ~ *) { opacity: 100%; } .first-letter\:float-left::first-letter { float: left; } .first-letter\:mr-3::first-letter { margin-right: calc(var(--spacing) * 3); } .first-letter\:text-7xl::first-letter { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } .first-letter\:font-bold::first-letter { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .first-letter\:text-content-brand::first-letter { color: var(--color-content-brand); } .selection\:bg-content-brand\/10 ::selection { background-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .selection\:bg-content-brand\/10::selection { background-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .selection\:text-content-brand ::selection { color: var(--color-content-brand); } .selection\:text-content-brand::selection { color: var(--color-content-brand); } .placeholder\:font-bold::placeholder { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .placeholder\:text-content-secondary::placeholder { color: var(--color-content-secondary); } .placeholder\:text-content-tertiary::placeholder { color: var(--color-content-tertiary); } .before\:absolute::before { content: var(--tw-content); position: absolute; } .before\:inset-0::before { content: var(--tw-content); inset: 0px; } .before\:inset-x-0::before { content: var(--tw-content); inset-inline: 0px; } .before\:-top-4::before { content: var(--tw-content); top: calc(var(--spacing) * -4); } .before\:h-4::before { content: var(--tw-content); height: calc(var(--spacing) * 4); } .after\:absolute::after { content: var(--tw-content); position: absolute; } .after\:inset-0::after { content: var(--tw-content); inset: 0px; } .last\:border-0:last-child { border-style: var(--tw-border-style); border-width: 0px; } .last\:pb-0:last-child { padding-bottom: 0px; } .checked\:border-content-brand:checked { border-color: var(--color-content-brand); } .checked\:bg-gradient-brand:checked { background: var(--gradient-brand); } .focus-within\:visible:focus-within { visibility: visible; } .focus-within\:scale-100:focus-within { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .focus-within\:opacity-100:focus-within { opacity: 100%; } @media (hover: hover) { .hover\:z-20:hover { z-index: 20; } .hover\:translate-x-1:hover { --tw-translate-x: var(--spacing); translate: var(--tw-translate-x) var(--tw-translate-y); } .hover\:-translate-y-0\.5:hover { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .hover\:-translate-y-1:hover { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .hover\:-translate-y-1\.5:hover { --tw-translate-y: calc(var(--spacing) * -1.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .hover\:-translate-y-2:hover { --tw-translate-y: calc(var(--spacing) * -2); translate: var(--tw-translate-x) var(--tw-translate-y); } .hover\:scale-105:hover { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } .hover\:scale-110:hover { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .hover\:scale-\[1\.02\]:hover { scale: 1.02; } .hover\:gap-3:hover { gap: calc(var(--spacing) * 3); } .hover\:border-\[\#25D366\]\/40:hover { border-color: color-mix(in oklab, #25D366 40%, transparent); } .hover\:border-\[\#0088cc\]\/40:hover { border-color: color-mix(in oklab, #0088cc 40%, transparent); } .hover\:border-content-brand:hover { border-color: var(--color-content-brand); } .hover\:border-content-brand\/30:hover { border-color: color-mix(in srgb, #0369a1 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-content-brand\/30:hover { border-color: color-mix(in oklab, var(--color-content-brand) 30%, transparent); } } .hover\:border-content-brand\/40:hover { border-color: color-mix(in srgb, #0369a1 40%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-content-brand\/40:hover { border-color: color-mix(in oklab, var(--color-content-brand) 40%, transparent); } } .hover\:border-content-brand\/50:hover { border-color: color-mix(in srgb, #0369a1 50%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-content-brand\/50:hover { border-color: color-mix(in oklab, var(--color-content-brand) 50%, transparent); } } .hover\:border-danger-border\/30:hover { border-color: color-mix(in srgb, rgba(var(--color-danger-rgb), 0.2) 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-danger-border\/30:hover { border-color: color-mix(in oklab, var(--color-danger-border) 30%, transparent); } } .hover\:border-danger\/20:hover { border-color: color-mix(in srgb, #ef4444 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-danger\/20:hover { border-color: color-mix(in oklab, var(--color-danger) 20%, transparent); } } .hover\:border-line-brand:hover { border-color: var(--color-line-brand); } .hover\:border-line-brand\/20:hover { border-color: color-mix(in srgb, #bae0fd 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-line-brand\/20:hover { border-color: color-mix(in oklab, var(--color-line-brand) 20%, transparent); } } .hover\:border-line-brand\/30:hover { border-color: color-mix(in srgb, #bae0fd 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-line-brand\/30:hover { border-color: color-mix(in oklab, var(--color-line-brand) 30%, transparent); } } .hover\:border-line-brand\/40:hover { border-color: color-mix(in srgb, #bae0fd 40%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-line-brand\/40:hover { border-color: color-mix(in oklab, var(--color-line-brand) 40%, transparent); } } .hover\:border-line-default:hover { border-color: var(--color-line-default); } .hover\:border-line-strong:hover { border-color: var(--color-line-strong); } .hover\:border-line-subtle:hover { border-color: var(--color-line-subtle); } .hover\:border-red-200:hover { border-color: var(--color-red-200); } .hover\:border-red-500:hover { border-color: var(--color-red-500); } .hover\:border-red-500\/40:hover { border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 40%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:border-red-500\/40:hover { border-color: color-mix(in oklab, var(--color-red-500) 40%, transparent); } } .hover\:border-slate-900:hover { border-color: var(--color-slate-900); } .hover\:border-transparent:hover { border-color: transparent; } .hover\:bg-\(--color-facebook\):hover { background-color: var(--color-facebook); } .hover\:bg-\(--color-instagram\):hover { background-color: var(--color-instagram); } .hover\:bg-\(--color-pinterest\):hover { background-color: var(--color-pinterest); } .hover\:bg-\(--color-youtube\):hover { background-color: var(--color-youtube); } .hover\:bg-\[\#25D366\]\/20:hover { background-color: color-mix(in oklab, #25D366 20%, transparent); } .hover\:bg-\[\#0088cc\]\/20:hover { background-color: color-mix(in oklab, #0088cc 20%, transparent); } .hover\:bg-black:hover { background-color: var(--color-black); } .hover\:bg-black\/50:hover { background-color: color-mix(in srgb, #000000 50%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-black\/50:hover { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .hover\:bg-card:hover { background-color: var(--color-card); } .hover\:bg-content-brand:hover { background-color: var(--color-content-brand); } .hover\:bg-danger:hover { background-color: var(--color-danger); } .hover\:bg-danger-bg:hover { background-color: var(--color-danger-bg); } .hover\:bg-danger\/5:hover { background-color: color-mix(in srgb, #ef4444 5%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-danger\/5:hover { background-color: color-mix(in oklab, var(--color-danger) 5%, transparent); } } .hover\:bg-danger\/8:hover { background-color: color-mix(in srgb, #ef4444 8%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-danger\/8:hover { background-color: color-mix(in oklab, var(--color-danger) 8%, transparent); } } .hover\:bg-danger\/10:hover { background-color: color-mix(in srgb, #ef4444 10%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-danger\/10:hover { background-color: color-mix(in oklab, var(--color-danger) 10%, transparent); } } .hover\:bg-danger\/20:hover { background-color: color-mix(in srgb, #ef4444 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-danger\/20:hover { background-color: color-mix(in oklab, var(--color-danger) 20%, transparent); } } .hover\:bg-emerald-600:hover { background-color: var(--color-emerald-600); } .hover\:bg-highlight:hover { background-color: var(--color-highlight); } .hover\:bg-primary-50:hover { background-color: var(--color-primary-50); } .hover\:bg-primary-600:hover { background-color: var(--color-primary-600); } .hover\:bg-primary-700:hover { background-color: var(--color-primary-700); } .hover\:bg-primary-800:hover { background-color: var(--color-primary-800); } .hover\:bg-red-50:hover { background-color: var(--color-red-50); } .hover\:bg-red-500:hover { background-color: var(--color-red-500); } .hover\:bg-rose-100:hover { background-color: var(--color-rose-100); } .hover\:bg-slate-900:hover { background-color: var(--color-slate-900); } .hover\:bg-success-bg:hover { background-color: var(--color-success-bg); } .hover\:bg-surface-1:hover { background-color: var(--color-surface-1); } .hover\:bg-surface-2:hover { background-color: var(--color-surface-2); } .hover\:bg-surface-2\/30:hover { background-color: color-mix(in srgb, #f1f5f9 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-surface-2\/30:hover { background-color: color-mix(in oklab, var(--color-surface-2) 30%, transparent); } } .hover\:bg-surface-3:hover { background-color: var(--color-surface-3); } .hover\:bg-warning\/20:hover { background-color: color-mix(in srgb, #f59e0b 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-warning\/20:hover { background-color: color-mix(in oklab, var(--color-warning) 20%, transparent); } } .hover\:bg-white\/10:hover { background-color: color-mix(in srgb, #ffffff 10%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/10:hover { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .hover\:bg-white\/20:hover { background-color: color-mix(in srgb, #ffffff 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/20:hover { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .hover\:bg-white\/30:hover { background-color: color-mix(in srgb, #ffffff 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/30:hover { background-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .hover\:bg-white\/90:hover { background-color: color-mix(in srgb, #ffffff 90%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/90:hover { background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .hover\:bg-white\/95:hover { background-color: color-mix(in srgb, #ffffff 95%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-white\/95:hover { background-color: color-mix(in oklab, var(--color-white) 95%, transparent); } } .hover\:from-primary-700:hover { --tw-gradient-from: var(--color-primary-700); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .hover\:to-primary-800:hover { --tw-gradient-to: var(--color-primary-800); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .hover\:text-content-brand:hover { color: var(--color-content-brand); } .hover\:text-content-brand\/80:hover { color: color-mix(in srgb, #0369a1 80%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:text-content-brand\/80:hover { color: color-mix(in oklab, var(--color-content-brand) 80%, transparent); } } .hover\:text-content-inverse:hover { color: var(--color-content-inverse); } .hover\:text-content-primary:hover { color: var(--color-content-primary); } .hover\:text-danger:hover { color: var(--color-danger); } .hover\:text-danger-content:hover { color: var(--color-danger-content); } .hover\:text-danger\/50:hover { color: color-mix(in srgb, #ef4444 50%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:text-danger\/50:hover { color: color-mix(in oklab, var(--color-danger) 50%, transparent); } } .hover\:text-primary-600:hover { color: var(--color-primary-600); } .hover\:text-primary-700:hover { color: var(--color-primary-700); } .hover\:text-red-500:hover { color: var(--color-red-500); } .hover\:text-red-600:hover { color: var(--color-red-600); } .hover\:text-slate-800:hover { color: var(--color-slate-800); } .hover\:text-tier-accent:hover { color: var(--color-tier-accent); } .hover\:text-white:hover { color: var(--color-white); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-70:hover { opacity: 70%; } .hover\:opacity-80:hover { opacity: 80%; } .hover\:opacity-90:hover { opacity: 90%; } .hover\:opacity-100:hover { opacity: 100%; } .hover\:shadow-2xl:hover { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-float:hover { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.25)), inset 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-lg:hover { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-md:hover { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-medium:hover { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.08)), 0 4px 6px -2px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.04)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-premium:hover { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.1)), 0 10px 10px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.04)), inset 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-sm:hover { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-soft:hover { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.05)), 0 2px 4px -1px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.03)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-xl:hover { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-premium:hover { box-shadow: var(--shadow-premium); } .hover\:shadow-soft-xl:hover { box-shadow: var(--shadow-xl); } .hover\:shadow-content-brand\/20:hover { --tw-shadow-color: color-mix(in srgb, #0369a1 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:shadow-content-brand\/20:hover { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-content-brand) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .hover\:shadow-primary-500\/50:hover { --tw-shadow-color: color-mix(in srgb, #0ea5e9 50%, transparent); } @supports (color: color-mix(in lab, red, red)) { .hover\:shadow-primary-500\/50:hover { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary-500) 50%, transparent) var(--tw-shadow-alpha), transparent); } } .hover\:brightness-110:hover { --tw-brightness: brightness(110%); 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,); } .hover\:bg-gradient-surface:hover { background: var(--gradient-surface); } } .focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; } .focus\:fixed:focus { position: fixed; } .focus\:top-6:focus { top: calc(var(--spacing) * 6); } .focus\:left-6:focus { left: calc(var(--spacing) * 6); } .focus\:rounded-2xl:focus { border-radius: var(--radius-2xl); } .focus\:border-2:focus { border-style: var(--tw-border-style); border-width: 2px; } .focus\:border-content-brand:focus { border-color: var(--color-content-brand); } .focus\:border-content-brand\/50:focus { border-color: color-mix(in srgb, #0369a1 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-content-brand) 50%, transparent); } } .focus\:border-line-brand:focus { border-color: var(--color-line-brand); } .focus\:border-primary-500:focus { border-color: var(--color-primary-500); } .focus\:border-transparent:focus { border-color: transparent; } .focus\:bg-white:focus { background-color: var(--color-white); } .focus\:px-8:focus { padding-inline: calc(var(--spacing) * 8); } .focus\:py-4:focus { padding-block: calc(var(--spacing) * 4); } .focus\:text-content-brand:focus { color: var(--color-content-brand); } .focus\:shadow-2xl:focus { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-0:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-1:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-2:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-4:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-content-brand:focus { --tw-ring-color: var(--color-content-brand); } .focus\:ring-content-brand\/10:focus { --tw-ring-color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } .focus\:ring-content-brand\/20:focus { --tw-ring-color: color-mix(in srgb, #0369a1 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-content-brand) 20%, transparent); } } .focus\:ring-content-brand\/50:focus { --tw-ring-color: color-mix(in srgb, #0369a1 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-content-brand) 50%, transparent); } } .focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500); } .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .focus\:outline-hidden:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } .focus\:outline-none:focus { --tw-outline-style: none; outline-style: none; } .focus-visible\:ring-2:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-content-brand:focus-visible { --tw-ring-color: var(--color-content-brand); } .focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .focus-visible\:outline-none:focus-visible { --tw-outline-style: none; outline-style: none; } .active\:translate-y-0:active { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .active\:scale-90:active { --tw-scale-x: 90%; --tw-scale-y: 90%; --tw-scale-z: 90%; scale: var(--tw-scale-x) var(--tw-scale-y); } .active\:scale-95:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .active\:scale-\[0\.98\]:active { scale: 0.98; } .disabled\:translate-y-0:disabled { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:bg-surface-3:disabled { background-color: var(--color-surface-3); } .disabled\:from-slate-400:disabled { --tw-gradient-from: var(--color-slate-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .disabled\:to-slate-500:disabled { --tw-gradient-to: var(--color-slate-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .disabled\:text-content-secondary:disabled { color: var(--color-content-secondary); } .disabled\:opacity-50:disabled { opacity: 50%; } .disabled\:opacity-80:disabled { opacity: 80%; } .disabled\:shadow-none:disabled { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @media (hover: hover) { .disabled\:hover\:scale-100:disabled:hover { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .has-checked\:border-content-brand:has(:checked) { border-color: var(--color-content-brand); } .has-checked\:bg-surface-3:has(:checked) { background-color: var(--color-surface-3); } @media (width >= 40rem) { .sm\:right-0 { right: 0px; } .sm\:order-1 { order: 1; } .sm\:order-2 { order: 2; } .sm\:mx-0 { margin-inline: 0px; } .sm\:my-8 { margin-block: calc(var(--spacing) * 8); } .sm\:my-10 { margin-block: calc(var(--spacing) * 10); } .sm\:mt-0 { margin-top: 0px; } .sm\:mr-auto { margin-right: auto; } .sm\:ml-6 { margin-left: calc(var(--spacing) * 6); } .sm\:ml-8 { margin-left: calc(var(--spacing) * 8); } .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:inline { display: inline; } .sm\:inline-block { display: inline-block; } .sm\:inline-flex { display: inline-flex; } .sm\:h-6 { height: calc(var(--spacing) * 6); } .sm\:h-11 { height: calc(var(--spacing) * 11); } .sm\:h-12 { height: calc(var(--spacing) * 12); } .sm\:h-14 { height: calc(var(--spacing) * 14); } .sm\:h-56 { height: calc(var(--spacing) * 56); } .sm\:h-screen { height: 100vh; } .sm\:w-6 { width: calc(var(--spacing) * 6); } .sm\:w-12 { width: calc(var(--spacing) * 12); } .sm\:w-14 { width: calc(var(--spacing) * 14); } .sm\:w-80 { width: calc(var(--spacing) * 80); } .sm\:w-auto { width: auto; } .sm\:w-full { width: 100%; } .sm\:max-w-\[70\%\] { max-width: 70%; } .sm\:max-w-\[280px\] { max-width: 280px; } .sm\:max-w-lg { max-width: var(--container-lg); } .sm\:max-w-none { max-width: none; } .sm\:flex-none { flex: none; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:flex-row-reverse { flex-direction: row-reverse; } .sm\:items-center { align-items: center; } .sm\:items-start { align-items: flex-start; } .sm\:gap-6 { gap: calc(var(--spacing) * 6); } .sm\:gap-x-5 { column-gap: calc(var(--spacing) * 5); } .sm\:self-auto { align-self: auto; } .sm\:p-0 { padding: 0px; } .sm\:p-4 { padding: calc(var(--spacing) * 4); } .sm\:p-6 { padding: calc(var(--spacing) * 6); } .sm\:p-10 { padding: calc(var(--spacing) * 10); } .sm\:px-5 { padding-inline: calc(var(--spacing) * 5); } .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); } .sm\:px-8 { padding-inline: calc(var(--spacing) * 8); } .sm\:px-10 { padding-inline: calc(var(--spacing) * 10); } .sm\:pb-10 { padding-bottom: calc(var(--spacing) * 10); } .sm\:text-left { text-align: left; } .sm\:align-middle { vertical-align: middle; } .sm\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .sm\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .sm\:text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .sm\:text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .sm\:text-\[12rem\] { font-size: 12rem; } } @media (width >= 48rem) { .md\:top-6 { top: calc(var(--spacing) * 6); } .md\:top-8 { top: calc(var(--spacing) * 8); } .md\:top-32 { top: calc(var(--spacing) * 32); } .md\:right-6 { right: calc(var(--spacing) * 6); } .md\:right-8 { right: calc(var(--spacing) * 8); } .md\:right-auto { right: auto; } .md\:bottom-auto { bottom: auto; } .md\:left-6 { left: calc(var(--spacing) * 6); } .md\:left-auto { left: auto; } .md\:order-1 { order: 1; } .md\:order-2 { order: 2; } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-3 { grid-column: span 3 / span 3; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-7 { grid-column: span 7 / span 7; } .md\:mx-2 { margin-inline: calc(var(--spacing) * 2); } .md\:-mt-16 { margin-top: calc(var(--spacing) * -16); } .md\:mt-0 { margin-top: 0px; } .md\:mb-3 { margin-bottom: calc(var(--spacing) * 3); } .md\:mb-5 { margin-bottom: calc(var(--spacing) * 5); } .md\:mb-6 { margin-bottom: calc(var(--spacing) * 6); } .md\:mb-10 { margin-bottom: calc(var(--spacing) * 10); } .md\:mb-12 { margin-bottom: calc(var(--spacing) * 12); } .md\:mb-16 { margin-bottom: calc(var(--spacing) * 16); } .md\:mb-20 { margin-bottom: calc(var(--spacing) * 20); } .md\:mb-24 { margin-bottom: calc(var(--spacing) * 24); } .md\:line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .md\:line-clamp-none { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:inline { display: inline; } .md\:inline-block { display: inline-block; } .md\:h-4 { height: calc(var(--spacing) * 4); } .md\:h-5 { height: calc(var(--spacing) * 5); } .md\:h-7 { height: calc(var(--spacing) * 7); } .md\:h-9 { height: calc(var(--spacing) * 9); } .md\:h-10 { height: calc(var(--spacing) * 10); } .md\:h-12 { height: calc(var(--spacing) * 12); } .md\:h-16 { height: calc(var(--spacing) * 16); } .md\:h-20 { height: calc(var(--spacing) * 20); } .md\:h-24 { height: calc(var(--spacing) * 24); } .md\:h-28 { height: calc(var(--spacing) * 28); } .md\:h-32 { height: calc(var(--spacing) * 32); } .md\:h-36 { height: calc(var(--spacing) * 36); } .md\:h-40 { height: calc(var(--spacing) * 40); } .md\:h-96 { height: calc(var(--spacing) * 96); } .md\:h-\[600px\] { height: 600px; } .md\:w-4 { width: calc(var(--spacing) * 4); } .md\:w-5 { width: calc(var(--spacing) * 5); } .md\:w-7 { width: calc(var(--spacing) * 7); } .md\:w-9 { width: calc(var(--spacing) * 9); } .md\:w-10 { width: calc(var(--spacing) * 10); } .md\:w-12 { width: calc(var(--spacing) * 12); } .md\:w-16 { width: calc(var(--spacing) * 16); } .md\:w-20 { width: calc(var(--spacing) * 20); } .md\:w-24 { width: calc(var(--spacing) * 24); } .md\:w-28 { width: calc(var(--spacing) * 28); } .md\:w-32 { width: calc(var(--spacing) * 32); } .md\:w-36 { width: calc(var(--spacing) * 36); } .md\:w-40 { width: calc(var(--spacing) * 40); } .md\:w-96 { width: calc(var(--spacing) * 96); } .md\:w-auto { width: auto; } .md\:w-fit { width: fit-content; } .md\:max-w-\[400px\] { max-width: 400px; } .md\:max-w-md { max-width: var(--container-md); } .md\:max-w-sm { max-width: var(--container-sm); } .md\:flex-none { flex: none; } .md\:translate-x-0 { --tw-translate-x: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } .md\:-translate-y-full { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .md\:columns-2 { columns: 2; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .md\:flex-col { flex-direction: column; } .md\:flex-row { flex-direction: row; } .md\:items-center { align-items: center; } .md\:items-start { align-items: flex-start; } .md\:justify-end { justify-content: flex-end; } .md\:justify-start { justify-content: flex-start; } .md\:gap-0 { gap: 0px; } .md\:gap-3 { gap: calc(var(--spacing) * 3); } .md\:gap-4 { gap: calc(var(--spacing) * 4); } .md\:gap-6 { gap: calc(var(--spacing) * 6); } .md\:gap-8 { gap: calc(var(--spacing) * 8); } .md\:gap-12 { gap: calc(var(--spacing) * 12); } :where(.md\:space-y-6 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } :where(.md\:space-y-8 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); } :where(.md\:divide-x > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .md\:rounded-3xl { border-radius: var(--radius-3xl); } .md\:rounded-4xl { border-radius: var(--radius-4xl); } .md\:rounded-\[40px\] { border-radius: 40px; } .md\:rounded-none { border-radius: 0; } .md\:rounded-t-3xl { border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); } .md\:border-0 { border-style: var(--tw-border-style); border-width: 0px; } .md\:border-t-0 { border-top-style: var(--tw-border-style); border-top-width: 0px; } .md\:border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .md\:border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .md\:p-4 { padding: calc(var(--spacing) * 4); } .md\:p-5 { padding: calc(var(--spacing) * 5); } .md\:p-6 { padding: calc(var(--spacing) * 6); } .md\:p-8 { padding: calc(var(--spacing) * 8); } .md\:p-10 { padding: calc(var(--spacing) * 10); } .md\:p-12 { padding: calc(var(--spacing) * 12); } .md\:p-14 { padding: calc(var(--spacing) * 14); } .md\:p-16 { padding: calc(var(--spacing) * 16); } .md\:p-20 { padding: calc(var(--spacing) * 20); } .md\:px-0 { padding-inline: 0px; } .md\:px-4 { padding-inline: calc(var(--spacing) * 4); } .md\:px-6 { padding-inline: calc(var(--spacing) * 6); } .md\:px-8 { padding-inline: calc(var(--spacing) * 8); } .md\:px-10 { padding-inline: calc(var(--spacing) * 10); } .md\:px-12 { padding-inline: calc(var(--spacing) * 12); } .md\:py-3 { padding-block: calc(var(--spacing) * 3); } .md\:py-4 { padding-block: calc(var(--spacing) * 4); } .md\:py-12 { padding-block: calc(var(--spacing) * 12); } .md\:py-16 { padding-block: calc(var(--spacing) * 16); } .md\:py-28 { padding-block: calc(var(--spacing) * 28); } .md\:py-32 { padding-block: calc(var(--spacing) * 32); } .md\:pt-0 { padding-top: 0px; } .md\:pt-6 { padding-top: calc(var(--spacing) * 6); } .md\:pr-0 { padding-right: 0px; } .md\:pr-4 { padding-right: calc(var(--spacing) * 4); } .md\:pr-8 { padding-right: calc(var(--spacing) * 8); } .md\:pb-12 { padding-bottom: calc(var(--spacing) * 12); } .md\:pl-6 { padding-left: calc(var(--spacing) * 6); } .md\:text-center { text-align: center; } .md\:text-left { text-align: left; } .md\:text-right { text-align: right; } .md\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .md\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .md\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .md\:text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .md\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .md\:text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .md\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .md\:text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .md\:text-\[14rem\] { font-size: 14rem; } .md\:leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .md\:tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .md\:first\:rounded-l-3xl:first-child { border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); } .md\:last\:rounded-r-3xl:last-child { border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); } } @media (width >= 64rem) { .lg\:fixed { position: fixed; } .lg\:sticky { position: sticky; } .lg\:top-0 { top: 0px; } .lg\:top-16 { top: calc(var(--spacing) * 16); } .lg\:top-20 { top: calc(var(--spacing) * 20); } .lg\:top-24 { top: calc(var(--spacing) * 24); } .lg\:top-28 { top: calc(var(--spacing) * 28); } .lg\:top-32 { top: calc(var(--spacing) * 32); } .lg\:top-36 { top: calc(var(--spacing) * 36); } .lg\:top-40 { top: calc(var(--spacing) * 40); } .lg\:order-1 { order: 1; } .lg\:order-2 { order: 2; } .lg\:col-span-1 { grid-column: span 1 / span 1; } .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-7 { grid-column: span 7 / span 7; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-9 { grid-column: span 9 / span 9; } .lg\:mx-0 { margin-inline: 0px; } .lg\:-mt-8 { margin-top: calc(var(--spacing) * -8); } .lg\:-mt-12 { margin-top: calc(var(--spacing) * -12); } .lg\:mt-0 { margin-top: 0px; } .lg\:mt-16 { margin-top: calc(var(--spacing) * 16); } .lg\:mb-24 { margin-bottom: calc(var(--spacing) * 24); } .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:grid { display: grid; } .lg\:hidden { display: none; } .lg\:inline-flex { display: inline-flex; } .lg\:table-cell { display: table-cell; } .lg\:aspect-\[4\/3\] { aspect-ratio: 4/3; } .lg\:aspect-auto { aspect-ratio: auto; } .lg\:h-10 { height: calc(var(--spacing) * 10); } .lg\:h-12 { height: calc(var(--spacing) * 12); } .lg\:h-20 { height: calc(var(--spacing) * 20); } .lg\:min-h-\[80vh\] { min-height: 80vh; } .lg\:w-1\/2 { width: calc(1 / 2 * 100%); } .lg\:w-1\/3 { width: calc(1 / 3 * 100%); } .lg\:w-2\/3 { width: calc(2 / 3 * 100%); } .lg\:w-12 { width: calc(var(--spacing) * 12); } .lg\:scale-75 { --tw-scale-x: 75%; --tw-scale-y: 75%; --tw-scale-z: 75%; scale: var(--tw-scale-x) var(--tw-scale-y); } .lg\:columns-3 { columns: 3; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:flex-row { flex-direction: row; } .lg\:items-end { align-items: flex-end; } .lg\:items-stretch { align-items: stretch; } .lg\:justify-end { justify-content: flex-end; } .lg\:justify-start { justify-content: flex-start; } .lg\:gap-4 { gap: calc(var(--spacing) * 4); } .lg\:gap-6 { gap: calc(var(--spacing) * 6); } .lg\:gap-8 { gap: calc(var(--spacing) * 8); } .lg\:gap-12 { gap: calc(var(--spacing) * 12); } .lg\:gap-16 { gap: calc(var(--spacing) * 16); } .lg\:gap-20 { gap: calc(var(--spacing) * 20); } .lg\:gap-24 { gap: calc(var(--spacing) * 24); } .lg\:border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .lg\:border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .lg\:border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .lg\:p-6 { padding: calc(var(--spacing) * 6); } .lg\:p-8 { padding: calc(var(--spacing) * 8); } .lg\:p-10 { padding: calc(var(--spacing) * 10); } .lg\:p-16 { padding: calc(var(--spacing) * 16); } .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); } .lg\:px-16 { padding-inline: calc(var(--spacing) * 16); } .lg\:py-10 { padding-block: calc(var(--spacing) * 10); } .lg\:py-14 { padding-block: calc(var(--spacing) * 14); } .lg\:py-16 { padding-block: calc(var(--spacing) * 16); } .lg\:py-20 { padding-block: calc(var(--spacing) * 20); } .lg\:py-32 { padding-block: calc(var(--spacing) * 32); } .lg\:py-36 { padding-block: calc(var(--spacing) * 36); } .lg\:pl-12 { padding-left: calc(var(--spacing) * 12); } .lg\:text-left { text-align: left; } .lg\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .lg\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .lg\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .lg\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .lg\:text-7xl { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } .lg\:text-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } .lg\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } @media (width >= 80rem) { .xl\:col-span-2 { grid-column: span 2 / span 2; } .xl\:col-span-3 { grid-column: span 3 / span 3; } .xl\:block { display: block; } .xl\:aspect-\[16\/10\] { aspect-ratio: 16/10; } .xl\:w-1\/4 { width: calc(1 / 4 * 100%); } .xl\:w-3\/4 { width: calc(3 / 4 * 100%); } .xl\:w-\[70\%\] { width: 70%; } .xl\:scale-90 { --tw-scale-x: 90%; --tw-scale-y: 90%; --tw-scale-z: 90%; scale: var(--tw-scale-x) var(--tw-scale-y); } .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .xl\:flex-row { flex-direction: row; } .xl\:justify-end { justify-content: flex-end; } .xl\:justify-start { justify-content: flex-start; } .xl\:gap-16 { gap: calc(var(--spacing) * 16); } } @media (width >= 96rem) { .\32 xl\:scale-100 { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .dark\:border-danger\/30:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, #ef4444 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-danger) 30%, transparent); } } .dark\:border-gray-700:where([data-theme="dark"], [data-theme="dark"] *) { border-color: var(--color-gray-700); } .dark\:border-primary-800\/50:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, #075985 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-800) 50%, transparent); } } .dark\:border-primary-900\/30:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, #0c4a6e 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-900) 30%, transparent); } } .dark\:border-red-500\/20:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } } .dark\:border-red-900\/30:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-red-900) 30%, transparent); } } .dark\:border-slate-900:where([data-theme="dark"], [data-theme="dark"] *) { border-color: var(--color-slate-900); } .dark\:border-white\/5:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, #ffffff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .dark\:border-white\/10:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, #ffffff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .dark\:border-l-content-brand:where([data-theme="dark"], [data-theme="dark"] *) { border-left-color: var(--color-content-brand); } .dark\:glass-dark-premium:where([data-theme="dark"], [data-theme="dark"] *) { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-backdrop-blur: blur(var(--blur-xl)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); background-color: rgba(var(--color-slate-900-rgb), 0.7); border: 1px solid var(--color-line-default); box-shadow: var(--shadow-float), var(--inner-glow-dark); } .dark\:bg-card:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-card); } .dark\:bg-danger\/20:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #ef4444 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-danger) 20%, transparent); } } .dark\:bg-gray-800:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-gray-800); } .dark\:bg-highlight:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-highlight); } .dark\:bg-primary-900\/10:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #0c4a6e 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-900) 10%, transparent); } } .dark\:bg-primary-900\/20:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #0c4a6e 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-900) 20%, transparent); } } .dark\:bg-primary-900\/30:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #0c4a6e 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-900) 30%, transparent); } } .dark\:bg-primary-900\/40:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #0c4a6e 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-900) 40%, transparent); } } .dark\:bg-primary-900\/50:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #0c4a6e 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-900) 50%, transparent); } } .dark\:bg-primary-950\/30:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #082f49 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-950) 30%, transparent); } } .dark\:bg-red-900\/20:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent); } } .dark\:bg-rose-500\/20:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent); } } .dark\:bg-secondary-900\/30:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #78350f 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-900) 30%, transparent); } } .dark\:bg-slate-700:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-slate-700); } .dark\:bg-slate-800:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-slate-800); } .dark\:bg-slate-800\/40:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #1e293b 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-800) 40%, transparent); } } .dark\:bg-slate-800\/60:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #1e293b 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent); } } .dark\:bg-slate-900:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-slate-900); } .dark\:bg-surface-1\/50:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #ffffff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-surface-1) 50%, transparent); } } .dark\:bg-white\/5:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #ffffff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .dark\:bg-white\/10:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, #ffffff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .dark\:bg-yellow-900\/20:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent); } } .dark\:from-slate-900:where([data-theme="dark"], [data-theme="dark"] *) { --tw-gradient-from: var(--color-slate-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .dark\:via-slate-900\/90:where([data-theme="dark"], [data-theme="dark"] *) { --tw-gradient-via: color-mix(in srgb, #0f172a 90%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-slate-900) 90%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), 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); --tw-gradient-stops: var(--tw-gradient-via-stops); } .dark\:to-slate-800\/60:where([data-theme="dark"], [data-theme="dark"] *) { --tw-gradient-to: color-mix(in srgb, #1e293b 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-slate-800) 60%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .dark\:text-\[\#25D366\]:where([data-theme="dark"], [data-theme="dark"] *) { color: #25D366; } .dark\:text-\[\#29b6f6\]:where([data-theme="dark"], [data-theme="dark"] *) { color: #29b6f6; } .dark\:text-amber-400:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-amber-400); } .dark\:text-content-brand:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-content-brand); } .dark\:text-content-tertiary:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-content-tertiary); } .dark\:text-danger-content:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-danger-content); } .dark\:text-emerald-400:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-emerald-400); } .dark\:text-primary-300:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-primary-300); } .dark\:text-primary-400:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-primary-400); } .dark\:text-primary-500:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-primary-500); } .dark\:text-red-400:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-red-400); } .dark\:text-slate-300:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-slate-300); } .dark\:text-slate-400:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-slate-400); } .dark\:text-slate-500:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-slate-500); } .dark\:text-white:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-white); } .dark\:text-white\/80:where([data-theme="dark"], [data-theme="dark"] *) { color: color-mix(in srgb, #ffffff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .dark\:opacity-10:where([data-theme="dark"], [data-theme="dark"] *) { opacity: 10%; } .dark\:opacity-20:where([data-theme="dark"], [data-theme="dark"] *) { opacity: 20%; } .dark\:opacity-\[0\.1\]:where([data-theme="dark"], [data-theme="dark"] *) { opacity: 0.1; } .dark\:shadow-none:where([data-theme="dark"], [data-theme="dark"] *) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .dark\:shadow-premium:where([data-theme="dark"], [data-theme="dark"] *) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.1)), 0 10px 10px -5px var(--tw-shadow-color, rgba(var(--color-slate-900-rgb), 0.04)), inset 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--shadow-premium); } .dark\:shadow-black\/40:where([data-theme="dark"], [data-theme="dark"] *) { --tw-shadow-color: color-mix(in srgb, #000000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent); } } .dark\:ring-slate-700:where([data-theme="dark"], [data-theme="dark"] *) { --tw-ring-color: var(--color-slate-700); } .dark\:ring-white\/5:where([data-theme="dark"], [data-theme="dark"] *) { --tw-ring-color: color-mix(in srgb, #ffffff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .dark\:prose-invert:where([data-theme="dark"], [data-theme="dark"] *) { --tw-prose-body: var(--tw-prose-invert-body); --tw-prose-headings: var(--tw-prose-invert-headings); --tw-prose-lead: var(--tw-prose-invert-lead); --tw-prose-links: var(--tw-prose-invert-links); --tw-prose-bold: var(--tw-prose-invert-bold); --tw-prose-counters: var(--tw-prose-invert-counters); --tw-prose-bullets: var(--tw-prose-invert-bullets); --tw-prose-hr: var(--tw-prose-invert-hr); --tw-prose-quotes: var(--tw-prose-invert-quotes); --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); --tw-prose-captions: var(--tw-prose-invert-captions); --tw-prose-kbd: var(--tw-prose-invert-kbd); --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); --tw-prose-code: var(--tw-prose-invert-code); --tw-prose-pre-code: var(--tw-prose-invert-pre-code); --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); --tw-prose-th-borders: var(--tw-prose-invert-th-borders); --tw-prose-td-borders: var(--tw-prose-invert-td-borders); } @media (hover: hover) { .dark\:group-hover\:border-primary-800:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group):hover *) { border-color: var(--color-primary-800); } .dark\:hover\:border-white:where([data-theme="dark"], [data-theme="dark"] *):hover { border-color: var(--color-white); } .dark\:hover\:bg-highlight:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: var(--color-highlight); } .dark\:hover\:bg-primary-700:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: var(--color-primary-700); } .dark\:hover\:bg-primary-900\/20:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: color-mix(in srgb, #0c4a6e 20%, transparent); } @supports (color: color-mix(in lab, red, red)) { .dark\:hover\:bg-primary-900\/20:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: color-mix(in oklab, var(--color-primary-900) 20%, transparent); } } .dark\:hover\:bg-primary-900\/30:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: color-mix(in srgb, #0c4a6e 30%, transparent); } @supports (color: color-mix(in lab, red, red)) { .dark\:hover\:bg-primary-900\/30:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: color-mix(in oklab, var(--color-primary-900) 30%, transparent); } } .dark\:hover\:bg-white:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: var(--color-white); } .dark\:hover\:bg-white\/10:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: color-mix(in srgb, #ffffff 10%, transparent); } @supports (color: color-mix(in lab, red, red)) { .dark\:hover\:bg-white\/10:where([data-theme="dark"], [data-theme="dark"] *):hover { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .dark\:hover\:text-primary-300:where([data-theme="dark"], [data-theme="dark"] *):hover { color: var(--color-primary-300); } .dark\:hover\:text-primary-400:where([data-theme="dark"], [data-theme="dark"] *):hover { color: var(--color-primary-400); } .dark\:hover\:text-slate-900:where([data-theme="dark"], [data-theme="dark"] *):hover { color: var(--color-slate-900); } .dark\:hover\:text-white:where([data-theme="dark"], [data-theme="dark"] *):hover { color: var(--color-white); } } .dark\:focus\:bg-slate-900:where([data-theme="dark"], [data-theme="dark"] *):focus { background-color: var(--color-slate-900); } .dark\:focus-visible\:ring-offset-card:where([data-theme="dark"], [data-theme="dark"] *):focus-visible { --tw-ring-offset-color: var(--color-card); } .prose-headings\:mt-8 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) { margin-top: calc(var(--spacing) * 8); } .prose-headings\:mb-4 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) { margin-bottom: calc(var(--spacing) * 4); } .prose-headings\:font-serif :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) { font-family: var(--font-serif); } .prose-headings\:font-bold :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .prose-headings\:text-content-primary :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: var(--color-content-primary); } .prose-p\:mb-6 :is(:where(p):not(:where([class~="not-prose"], [class~="not-prose"] *))) { margin-bottom: calc(var(--spacing) * 6); } .prose-p\:leading-relaxed :is(:where(p):not(:where([class~="not-prose"], [class~="not-prose"] *))) { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .prose-p\:font-light :is(:where(p):not(:where([class~="not-prose"], [class~="not-prose"] *))) { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); } .prose-p\:text-content-secondary :is(:where(p):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: var(--color-content-secondary); } .prose-a\:text-content-brand :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: var(--color-content-brand); } .prose-a\:no-underline :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { text-decoration-line: none; } @media (hover: hover) { .hover\:prose-a\:underline:hover :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { text-decoration-line: underline; } } .dark\:prose-a\:text-content-brand:where([data-theme="dark"], [data-theme="dark"] *) :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: var(--color-content-brand); } .prose-blockquote\:border-l-4 :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) { border-left-style: var(--tw-border-style); border-left-width: 4px; } .prose-blockquote\:border-content-brand :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) { border-color: var(--color-content-brand); } .prose-blockquote\:bg-highlight :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) { background-color: var(--color-highlight); } .prose-blockquote\:bg-surface-2 :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) { background-color: var(--color-surface-2); } .dark\:prose-blockquote\:bg-white\/5:where([data-theme="dark"], [data-theme="dark"] *) :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) { background-color: color-mix(in srgb, #ffffff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .dark\:prose-blockquote\:text-white:where([data-theme="dark"], [data-theme="dark"] *) :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: var(--color-white); } .prose-li\:my-2 :is(:where(li):not(:where([class~="not-prose"], [class~="not-prose"] *))) { margin-block: calc(var(--spacing) * 2); } } @layer base { svg { display: inline-block; flex-shrink: 0; backface-visibility: hidden; fill: currentColor; stroke: currentColor; stroke-width: 0; vertical-align: middle; } .icon-container { display: flex; align-items: center; justify-content: center; } .container { margin-inline: auto; width: 100%; max-width: none; padding-inline: calc(var(--spacing) * 4); @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); } } html { overflow-x: clip; font-size: calc(16px * var(--reading-scale, 1)); } body.focus-mode-active #devotion-sidebar-col, body.focus-mode-active #article-sidebar, body.focus-mode-active #devotion-related, body.focus-mode-active #devotion-navigation, body.focus-mode-active #comments, body.focus-mode-active footer { pointer-events: none; opacity: 0%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 700ms; transition-duration: 700ms; display: none !important; } body.focus-mode-active #homepage-hero, body.focus-mode-active .hero-single-section { opacity: 20%; --tw-blur: blur(var(--blur-xl)); --tw-grayscale: grayscale(100%); 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,); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 1000ms; transition-duration: 1000ms; } body.focus-mode-active main { background-color: var(--color-page); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 700ms; transition-duration: 700ms; } body.focus-mode-active #devotion-content-container { margin-inline: auto; max-width: var(--container-4xl); padding-inline: calc(var(--spacing) * 6); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); margin-top: 0 !important; } body.focus-mode-active #devotion-grid, body.focus-mode-active .container > .flex { display: block; } body.focus-mode-active #devotion-main-col, body.focus-mode-active .lg\:w-2\/3, body.focus-mode-active .xl\:w-3\/4 { width: 100%; } body.focus-mode-active article { --tw-border-style: none; border-style: none; background-color: transparent; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); padding: 0 !important; } body.focus-mode-active .ck-content { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-leading: 1.8; line-height: 1.8; color: var(--color-content-primary); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 700ms; transition-duration: 700ms; @media (width >= 48rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } #primary, .content-area { overflow: visible !important; } body { font-family: var(--font-reading); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: var(--leading-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-normal); background-color: var(--color-page); color: var(--color-content-secondary); transition: background-color 0.5s ease; font-feature-settings: 'kern', 'liga', 'clig', 'calt'; &.font-scale-small { --reading-scale: 1; } &.font-scale-standard { --reading-scale: 1.125; } &.font-scale-large { --reading-scale: 1.25; } } .ck-content { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); @media (width >= 48rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } line-height: var(--leading-relaxed); letter-spacing: 0.01em; word-spacing: 0.05em; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-serif); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); color: var(--color-content-primary); line-height: var(--leading-tight); } h1, .h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); @media (width >= 64rem) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } letter-spacing: var(--tracking-tight); } h2, .h2 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); @media (width >= 64rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } letter-spacing: var(--tracking-tight); } h3, .h3 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); @media (width >= 64rem) { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-sans); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } h4, .h4 { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); @media (width >= 64rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } *:focus-visible { outline: 2px solid var(--color-content-brand); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-to-main { position: absolute; left: -9999px; z-index: 999; padding: 1rem 1.5rem; background: var(--color-content-brand); color: white; text-decoration: none; border-radius: var(--radius-md); font-weight: bold; } .skip-to-main:focus { left: 1rem; top: 1rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } } @layer utilities { .bg-glass { border-radius: var(--radius-2xl); border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in srgb, #ffffff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } --tw-backdrop-blur: blur(var(--blur-lg)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); &:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, #ffffff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } background-color: color-mix(in srgb, #ffffff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-surface-1) 70%, transparent); } } .hover-interactive { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { background-color: var(--color-surface-2); } } &:hover { @media (hover: hover) { --tw-shadow: var(--shadow-medium); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &:where([data-theme="dark"], [data-theme="dark"] *) { &:hover { @media (hover: hover) { background-color: var(--color-surface-2); } } } } .hover-brand { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; &:hover { @media (hover: hover) { color: var(--color-content-brand); } } &:where([data-theme="dark"], [data-theme="dark"] *) { &:hover { @media (hover: hover) { color: var(--color-content-brand); } } } } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(4px, -16px) rotate(1.5deg); } 66% { transform: translate(-4px, -10px) rotate(-1.5deg); } } @keyframes float-1 { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(6px, -16px) rotate(2.5deg) scale(1.02); } 50% { transform: translate(0px, -24px) rotate(-1.5deg) scale(1); } 75% { transform: translate(-6px, -10px) rotate(-2.5deg) scale(0.98); } } @keyframes float-2 { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(-8px, -12px) rotate(-2.5deg) scale(0.98); } 50% { transform: translate(6px, -22px) rotate(2deg) scale(1.03); } 75% { transform: translate(8px, -8px) rotate(-1deg) scale(1); } } @keyframes float-3 { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 33% { transform: translate(10px, -16px) rotate(2deg) scale(1.02); } 66% { transform: translate(-8px, -12px) rotate(-2deg) scale(0.98); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin-reverse-slow { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes heart-pop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } @keyframes pulse-subtle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(0.98); } } @keyframes shimmer-skew { 0% { transform: skewX(-25deg) translateX(-150%); } 100% { transform: skewX(-25deg) translateX(250%); } } @keyframes mesh-float { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .ck-content { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); @media (width >= 48rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } line-height: var(--leading-relaxed); letter-spacing: 0.01em; word-spacing: 0.05em; p { margin-bottom: 1.5rem; } blockquote { position: relative; margin-block: calc(var(--spacing) * 12); border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); border-left-style: var(--tw-border-style); border-left-width: 4px; border-color: var(--color-content-brand); background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary-600) 6%, transparent) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-highlight) 30%, transparent); } padding-inline: calc(var(--spacing) * 10); padding-block: calc(var(--spacing) * 8); font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); color: var(--color-content-primary); font-style: italic; @media (width >= 48rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } &::before { content: '“'; position: absolute; top: calc(var(--spacing) * 2); left: calc(var(--spacing) * 4); font-family: var(--font-serif); font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); --tw-leading: 1; line-height: 1; color: color-mix(in srgb, #0369a1 10%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-content-brand) 10%, transparent); } } } } .prose ul, .prose ol, article ul, article ol, .entry-content ul, .entry-content ol { padding-left: 0 !important; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; list-style: none !important; } .prose ol, article ol, .entry-content ol { counter-reset: list-counter !important; } .prose ul li, article ul li, .entry-content ul li { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; padding-left: 1.75rem !important; position: relative !important; } .prose ol li, article ol li, .entry-content ol li { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; padding-left: 2.25rem !important; position: relative !important; counter-increment: list-counter !important; } .prose ul li::before, article ul li::before, .entry-content ul li::before { content: '' !important; position: absolute !important; left: 0.375rem !important; top: 0.875rem !important; width: 0.375rem !important; height: 0.375rem !important; background-color: var(--color-content-brand) !important; border-radius: 9999px !important; opacity: 0.8; } .no-bullet li::before { display: none !important; } .prose ol li::before, article ol li::before, .entry-content ol li::before { content: counter(list-counter) '.' !important; position: absolute !important; left: 0 !important; color: var(--color-content-brand) !important; font-weight: 700 !important; min-width: 1.75rem !important; text-align: left !important; font-size: 0.9em; } .prose ul ul, .prose ol ul { margin-top: 0.5rem !important; } .prose ul ul li::before, .prose ol ul li::before { content: '◦' !important; background: none !important; font-weight: bold; font-size: 1.25em; top: 0.625rem !important; color: var(--color-content-brand); } .prose ol ol { counter-reset: nested-counter !important; } .prose ol ol li { counter-increment: nested-counter !important; } .prose ol ol li::before { content: counter(nested-counter, lower-alpha) '.' !important; } .bg-clip-text { -webkit-background-clip: text !important; background-clip: text !important; } .text-transparent { -webkit-text-fill-color: transparent !important; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @media (min-width: 1024px) { .lg\:sticky { position: sticky; } } #masthead { border-bottom: 1px solid var(--color-line-subtle); } .admin-bar #masthead { top: 32px !important; } .admin-bar .lg\:sticky { top: calc(8rem + 32px) !important; } @media screen and (max-width: 782px) { .admin-bar #masthead { top: 46px !important; } .admin-bar .lg\:sticky { top: calc(8rem + 46px) !important; } } .archive-hero { position: relative; margin-bottom: calc(var(--spacing) * 12); overflow: hidden; padding-block: calc(var(--spacing) * 20); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; background-color: var(--color-surface-1); } .archive-hero::before { content: ''; pointer-events: none; position: absolute; inset: 0px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M14 7h2v4h3v2h-3v10h-2v-10h-3v-2h3zM44 7h2v4h3v2h-3v10h-2v-10h-3v-2h3zM14 37h2v4h3v2h-3v10h-2v-10h-3v-2h3zM44 37h2v4h3v2h-3v10h-2v-10h-3v-2h3z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } footer h3, .footer-widget .widget-title { letter-spacing: 0.12em !important; } footer a, footer li, footer li a, footer span, footer button, footer label, footer p, .footer-widget *, .footer-menu-nav *, .widget_nav_menu li, .widget_nav_menu li a, .widget_pages li a, .widget_archive li a, .widget_categories li a, .widget_recent_comments li a { text-transform: none !important; letter-spacing: normal !important; } #pwa-notification-prompt.show { transform: translateY(-24px); opacity: 1; } @media (max-width: 768px) { #pwa-notification-prompt.show { transform: translateY(-16px); } } @media (prefers-reduced-motion: reduce) { #pwa-notification-prompt { transition: none; } } @keyframes fab-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .group\/fab:hover .group\/btn { animation: fab-bounce 1s ease-in-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-600-rgb), 0.4); } 70% { box-shadow: 0 0 0 10px rgba(var(--color-primary-600-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-600-rgb), 0); } } :scope:hover { background-color: var(--color-tier-bg); color: var(--color-tier-accent); border-color: var(--color-tier-accent); } [data-tooltip] { position: relative; cursor: pointer; } [data-tooltip]::before, [data-tooltip]::after { pointer-events: none; position: absolute; left: calc(1 / 2 * 100%); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; z-index: var(--z-tooltip); } [data-tooltip]::before { bottom: 100%; margin-bottom: calc(var(--spacing) * 2); border-style: var(--tw-border-style); border-width: 4px; border-color: transparent; border-top-color: var(--color-slate-800); --tw-content: ''; content: var(--tw-content); &:where([data-theme="dark"], [data-theme="dark"] *) { border-top-color: var(--color-slate-700); } } [data-tooltip]::after { bottom: 100%; margin-bottom: calc(var(--spacing) * 4); width: max-content; max-width: 200px; border-radius: var(--radius-lg); background-color: var(--color-slate-800); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); text-align: center; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); white-space: normal; color: var(--color-white); text-transform: uppercase; --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-content: attr(data-tooltip); content: var(--tw-content); &:where([data-theme="dark"], [data-theme="dark"] *) { background-color: var(--color-slate-700); } } [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; visibility: visible; } [data-tooltip]:hover::before { margin-bottom: 0; } [data-tooltip]:hover::after { margin-bottom: 8px; } [data-tooltip-pos='left']::before, [data-tooltip-pos='left']::after { top: calc(1 / 2 * 100%); right: 100%; bottom: auto; left: auto; margin-bottom: 0px; --tw-translate-x: 0px; --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } [data-tooltip-pos='left']::before { margin-right: calc(var(--spacing) * 2); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: var(--color-slate-800); &:where([data-theme="dark"], [data-theme="dark"] *) { border-left-color: var(--color-slate-700); } } [data-tooltip-pos='left']::after { margin-right: calc(var(--spacing) * 4); margin-bottom: 0px; } [data-tooltip-pos='left']:hover::before { margin-right: 0px; } [data-tooltip-pos='left']:hover::after { margin-right: calc(var(--spacing) * 2); } [data-tooltip-pos='bottom']::before, [data-tooltip-pos='bottom']::after { top: 100%; bottom: auto; left: calc(1 / 2 * 100%); margin-bottom: 0px; --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } [data-tooltip-pos='bottom']::before { margin-top: calc(var(--spacing) * 2); border-top-color: transparent; border-right-color: transparent; border-bottom-color: var(--color-slate-800); border-left-color: transparent; &:where([data-theme="dark"], [data-theme="dark"] *) { border-bottom-color: var(--color-slate-700); } } [data-tooltip-pos='bottom']::after { margin-top: calc(var(--spacing) * 4); margin-bottom: 0px; } [data-tooltip-pos='bottom']:hover::before { margin-top: 0px; } [data-tooltip-pos='bottom']:hover::after { margin-top: calc(var(--spacing) * 2); } [data-tooltip-pos='bottom-right']::before, [data-tooltip-pos='bottom-right']::after { top: 100%; bottom: auto; left: 0px; margin-bottom: 0px; --tw-translate-x: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } [data-tooltip-pos='bottom-right']::before { margin-top: calc(var(--spacing) * 2); margin-left: calc(var(--spacing) * 3); border-top-color: transparent; border-right-color: transparent; border-bottom-color: var(--color-slate-800); border-left-color: transparent; &:where([data-theme="dark"], [data-theme="dark"] *) { border-bottom-color: var(--color-slate-700); } } [data-tooltip-pos='bottom-right']::after { margin-top: calc(var(--spacing) * 4); --tw-translate-x: calc(var(--spacing) * -2); translate: var(--tw-translate-x) var(--tw-translate-y); } [data-tooltip-pos='bottom-right']:hover::before { margin-top: 0px; } [data-tooltip-pos='bottom-right']:hover::after { margin-top: calc(var(--spacing) * 2); } [data-tooltip-pos='bottom-left']::before, [data-tooltip-pos='bottom-left']::after { top: 100%; right: 0px; bottom: auto; left: auto; margin-bottom: 0px; --tw-translate-x: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } [data-tooltip-pos='bottom-left']::before { margin-top: calc(var(--spacing) * 2); margin-right: calc(var(--spacing) * 3); border-top-color: transparent; border-right-color: transparent; border-bottom-color: var(--color-slate-800); border-left-color: transparent; &:where([data-theme="dark"], [data-theme="dark"] *) { border-bottom-color: var(--color-slate-700); } } [data-tooltip-pos='bottom-left']::after { margin-top: calc(var(--spacing) * 4); } [data-tooltip-pos='bottom-left']:hover::before { margin-top: 0px; } [data-tooltip-pos='bottom-left']:hover::after { margin-top: calc(var(--spacing) * 2); } [data-tooltip-pos='top-left']::before, [data-tooltip-pos='top-left']::after { top: auto; right: 0px; bottom: 100%; left: auto; margin-bottom: 0px; --tw-translate-x: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); } [data-tooltip-pos='top-left']::before { margin-right: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 2); border-top-color: var(--color-slate-800); border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; &:where([data-theme="dark"], [data-theme="dark"] *) { border-top-color: var(--color-slate-700); } } [data-tooltip-pos='top-left']::after { margin-bottom: calc(var(--spacing) * 4); } [data-tooltip-pos='top-left']:hover::before { margin-bottom: 0px; } [data-tooltip-pos='top-left']:hover::after { margin-bottom: calc(var(--spacing) * 2); } [data-badge-tier][data-tooltip]::after { white-space: normal; max-width: 200px; line-height: 1.4; text-transform: none; letter-spacing: 0; font-size: 11px; } @keyframes mesh-float { 0% { transform: scale(1.2) translate(0, 0) rotate(0deg); } 33% { transform: scale(1.3) translate(2%, 1%) rotate(1deg); } 66% { transform: scale(1.25) translate(-1%, 2%) rotate(-0.5deg); } 100% { transform: scale(1.2) translate(0, 0) rotate(0deg); } } .reveal-item.is-visible { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 100%; } .sr-only, .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .sr-only-focusable:focus, .sr-only-focusable:active { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } @keyframes scale-in { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .animate-scale-in { animation: scale-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes badge-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .animate-badge-pop { animation: badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer-premium { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); background-size: 200% 100%; animation: shimmer 2s infinite linear; } .avatar-frame-wrapper { position: relative; padding: 3px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .avatar-frame-wrapper:hover { transform: scale(1.05); } .avatar-frame-royal { background: linear-gradient(45deg, #d4af37, #f9f295, #b8860b, #f9f295); background-size: 300% 300%; animation: gradient-shimmer 4s ease infinite; box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); } .avatar-frame-royal::after { content: ''; position: absolute; inset: -2px; border-radius: 9999px; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .avatar-frame-royal:hover::after { opacity: 0.3; } .avatar-frame-silver { background: linear-gradient(45deg, #a0a0a0, #e8e8e8, #707070, #e8e8e8); background-size: 300% 300%; animation: gradient-shimmer 5s ease infinite; box-shadow: 0 0 12px rgba(160, 160, 160, 0.3); } .avatar-frame-bronze { background: linear-gradient(45deg, #cd7f32, #f5d1b5, #8b4513, #f5d1b5); background-size: 300% 300%; animation: gradient-shimmer 6s ease infinite; box-shadow: 0 0 10px rgba(205, 127, 50, 0.2); } @keyframes gradient-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .confetti { position: absolute; width: 6px; height: 12px; background: #ff0; opacity: 0; top: -20px; z-index: 10001; border-radius: 2px; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .confetti:nth-child(4n) { background: #ff0; } .confetti:nth-child(4n + 1) { background: #f0f; } .confetti:nth-child(4n + 2) { background: #0ff; } .confetti:nth-child(4n + 3) { background: #0f0; } .confetti { animation: confetti-fall 4s linear infinite; } .confetti-0 { left: 5%; animation-delay: 0s; } .confetti-1 { left: 10%; animation-delay: 0.4s; } .confetti-2 { left: 15%; animation-delay: 0.8s; } .confetti-3 { left: 20%; animation-delay: 1.2s; } .confetti-4 { left: 25%; animation-delay: 0.2s; } .confetti-5 { left: 30%; animation-delay: 0.6s; } .confetti-6 { left: 35%; animation-delay: 1s; } .confetti-7 { left: 40%; animation-delay: 1.4s; } .confetti-8 { left: 45%; animation-delay: 0.1s; } .confetti-9 { left: 50%; animation-delay: 0.5s; } .confetti-10 { left: 55%; animation-delay: 0.9s; } .confetti-11 { left: 60%; animation-delay: 1.3s; } .confetti-12 { left: 65%; animation-delay: 0.3s; } .confetti-13 { left: 70%; animation-delay: 0.7s; } .confetti-14 { left: 75%; animation-delay: 1.1s; } .confetti-15 { left: 80%; animation-delay: 1.5s; } .confetti-16 { left: 85%; animation-delay: 0.2s; } .confetti-17 { left: 90%; animation-delay: 0.6s; } .confetti-18 { left: 95%; animation-delay: 1s; } .confetti-19 { left: 2%; animation-delay: 1.4s; } .badge-premium { position: relative; display: flex; align-items: center; justify-content: center; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; } .badge-tier-gold { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4)); } .badge-tier-platinum { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)); animation: badge-pulse 3s infinite alternate; } .badge-tier-diamond { filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.5)); animation: badge-pulse 2s infinite alternate; } @keyframes badge-pulse { 0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)); } 100% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)); } } .badge-container-profile { position: relative; margin-inline: auto; margin-bottom: calc(var(--spacing) * 4); display: flex; height: calc(var(--spacing) * 24); width: calc(var(--spacing) * 24); align-items: center; justify-content: center; @media (width >= 48rem) { height: calc(var(--spacing) * 32); } @media (width >= 48rem) { width: calc(var(--spacing) * 32); } } .badge-rays { position: absolute; inset: 0px; animation: spin-slow 20s linear infinite; animation: var(--animate-spin-slow); border-radius: var(--radius-full); opacity: 20%; background: conic-gradient( from 0deg, transparent 0deg, currentColor 30deg, transparent 60deg, transparent 120deg, currentColor 150deg, transparent 180deg, transparent 240deg, currentColor 270deg, transparent 300deg ); } .badge-rays.gold { color: var(--color-amber-400); } .badge-rays.platinum { color: var(--color-cyan-200); } .badge-rays.diamond { color: var(--color-cyan-400); } .badge-sparkles { pointer-events: none; position: absolute; inset: 0px; } .confetti { z-index: 9999; } .badge-tier-rare { border-color: var(--color-sky-200); background-color: var(--color-sky-50); color: var(--color-sky-600); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); &:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent); } } &:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent); } } &:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-sky-400); } } .badge-tier-rare:hover { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); border-color: var(--color-sky-400); --tw-shadow-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-sky-500) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .badge-tier-epic { border-color: var(--color-purple-200); background-color: var(--color-purple-50); color: var(--color-purple-600); &:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, oklch(90.2% 0.063 306.703) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-purple-200) 20%, transparent); } } &:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent); } } &:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-purple-400); } box-shadow: 0 4px 12px -2px rgba(168, 85, 247, 0.15); } .badge-tier-epic:hover { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); border-color: var(--color-purple-400); box-shadow: 0 8px 20px -4px rgba(168, 85, 247, 0.3); } .badge-tier-legendary { border-color: var(--color-amber-300); background-color: var(--color-amber-50); color: var(--color-amber-600); &:where([data-theme="dark"], [data-theme="dark"] *) { border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent); } } &:where([data-theme="dark"], [data-theme="dark"] *) { background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent); } } &:where([data-theme="dark"], [data-theme="dark"] *) { color: var(--color-amber-400); } box-shadow: 0 4px 15px -1px rgba(245, 158, 11, 0.2); overflow: hidden; } .badge-tier-legendary::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent, rgba(255, 255, 255, 0) 40%, rgba(255, 252, 231, 1) 50%, rgba(255, 255, 255, 0) 60%, transparent ); transform: rotate(25deg); animation: legendary-shimmer 4s infinite; pointer-events: none; } .badge-tier-legendary:hover { --tw-scale-x: 115%; --tw-scale-y: 115%; --tw-scale-z: 115%; scale: var(--tw-scale-x) var(--tw-scale-y); border-color: var(--color-amber-500); box-shadow: 0 10px 25px -2px rgba(245, 158, 11, 0.4); } @keyframes legendary-shimmer { 0% { transform: translateX(-100%) rotate(25deg); } 20% { transform: translateX(100%) rotate(25deg); } 100% { transform: translateX(100%) rotate(25deg); } } .badge-tier-rare { --tier-color: oklch(68.5% 0.169 237.323); } .badge-tier-epic { --tier-color: oklch(62.7% 0.265 303.9); } .badge-tier-legendary { --tier-color: oklch(76.9% 0.188 70.08); } .badge-tier-gold { --tier-color: oklch(79.5% 0.184 86.047); } .badge-tier-platinum { --tier-color: oklch(86.5% 0.127 207.078); } .badge-tier-diamond { --tier-color: oklch(78.9% 0.154 211.53); } .ck-alert-container { position: fixed; top: 2rem; right: 2rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 1rem; pointer-events: none; max-width: 400px; width: calc(100% - 4rem); } .ck-alert-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: calc(var(--spacing) * 4); overflow: hidden; --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--shadow-premium); padding: calc(var(--spacing) * 4); background-color: var(--color-surface-1); border: 1px solid var(--color-line-subtle); color: var(--color-content-secondary); border-left-width: 4px; box-shadow: var(--shadow-soft-xl); min-width: 320px; animation: ck-toast-slide-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes ck-toast-slide-in { from { transform: translateX(120%) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } .ck-alert-toast.success { border-left-color: var(--color-success); } .ck-alert-toast.error { border-left-color: var(--color-danger); } .ck-alert-toast.warning { border-left-color: var(--color-warning); } .ck-alert-toast.info { border-left-color: var(--color-info); } .ck-alert-toast.blessing { border-left-color: #facc15; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(254, 252, 232, 0.98)); border: 1px solid rgba(250, 204, 21, 0.3); } .dark .ck-alert-toast.blessing { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(45, 37, 2, 0.98)); border: 1px solid rgba(250, 204, 21, 0.2); } .ck-alert-toast.blessing .ck-alert-icon { background: linear-gradient(135deg, #facc15, #eab308); color: #422006; box-shadow: 0 4px 15px rgba(234, 179, 8, 0.3); } .ck-alert-toast.blessing .ck-alert-title { color: #b8860b; } .dark .ck-alert-toast.blessing .ck-alert-title { color: #ffd700; } .ck-alert-toast.blessing::after { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent); animation: ck-shimmer 2s infinite; pointer-events: none; } @keyframes ck-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .ck-alert-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--color-glass-light); } .ck-alert-progress-bar { height: 100%; width: 100%; background: currentColor; opacity: 0.6; transition: width 0.01s linear; } .success .ck-alert-progress-bar { color: var(--color-success); } .error .ck-alert-progress-bar { color: var(--color-danger); } .warning .ck-alert-progress-bar { color: var(--color-warning); } .info .ck-alert-progress-bar { color: var(--color-info); } .ck-alert-icon { display: flex; height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .success .ck-alert-icon { background-color: var(--color-success-bg); color: var(--color-success-content); border: 1px solid var(--color-success-border); } .error .ck-alert-icon { background-color: var(--color-danger-bg); color: var(--color-danger-content); border: 1px solid var(--color-danger-border); } .warning .ck-alert-icon { background-color: color-mix(in srgb, #f59e0b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); } color: var(--color-warning-content); border: 1px solid color-mix(in srgb, #f59e0b 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent); } } .info .ck-alert-icon { background-color: color-mix(in srgb, #0ea5e9 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-info) 10%, transparent); } color: var(--color-info-content); border: 1px solid color-mix(in srgb, #0ea5e9 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent); } } .ck-alert-content { flex: 1; padding-block: calc(var(--spacing) * 0.5); } .ck-alert-title { margin-bottom: calc(var(--spacing) * 0.5); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); color: var(--color-content-primary); } .ck-alert-message { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-content-tertiary); } .ck-alert-close { cursor: pointer; border-radius: var(--radius-lg); padding: calc(var(--spacing) * 1.5); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); color: var(--color-content-tertiary); } .ck-alert-close:hover { color: var(--color-tier-accent); background-color: var(--color-tier-bg); } .ck-alert-overlay { position: fixed; inset: 0px; display: flex; animation: var(--animate-fade-in); align-items: center; justify-content: center; padding: calc(var(--spacing) * 4); z-index: var(--z-overlay); background-color: var(--color-glass-dark); backdrop-filter: blur(12px); } .ck-alert-modal { width: 100%; max-width: var(--container-md); animation: var(--animate-fade-in-up); border-radius: 2.5rem; padding: calc(var(--spacing) * 10); background-color: var(--color-card); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-float); } .ck-alert-modal-footer { margin-top: calc(var(--spacing) * 10); display: flex; justify-content: flex-end; gap: calc(var(--spacing) * 4); } @keyframes ck-slide-out { to { opacity: 0; transform: translateX(100%) scale(0.9); filter: blur(5px); } } .toast-closing { animation: ck-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @media (max-width: 640px) { .ck-alert-container { top: auto; bottom: 1.5rem; right: 1.5rem; left: 1.5rem; width: auto; } .ck-alert-toast { min-width: 0; } } #notification-hub button svg { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0; } #notification-hub button svg[aria-hidden='true'] { display: inline-block !important; visibility: visible !important; } .notification-item { cursor: pointer; border-radius: var(--radius-2xl); border-style: var(--tw-border-style); border-width: 1px; border-color: transparent; padding: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { background-color: var(--color-surface-2); } } } .notification-item.unread { border-color: color-mix(in srgb, #bae0fd 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-line-brand) 20%, transparent); } background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary-600) 6%, transparent) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-highlight) 30%, transparent); } } .notification-item.unread .notification-dot { position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); height: calc(var(--spacing) * 2); width: calc(var(--spacing) * 2); border-radius: var(--radius-full); background-color: var(--color-content-brand); } #notification-hub-trigger { position: relative; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); &:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .notification-bell-icon { height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); color: var(--color-content-secondary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { color: var(--color-content-brand); } } } [data-theme='dark'] .notification-bell-icon { color: var(--color-slate-400); &:hover { @media (hover: hover) { color: var(--color-primary-400); } } } .level-badge { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); border-radius: var(--radius-full); border-style: var(--tw-border-style); border-width: 1px; padding-inline: calc(var(--spacing) * 3); padding-block: var(--spacing); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); background-color: var(--color-highlight); color: var(--color-content-brand); border-color: var(--color-line-brand); } .badge-count { position: absolute; top: calc(var(--spacing) * -1.5); right: calc(var(--spacing) * -1.5); display: flex; height: 18px; min-width: 18px; align-items: center; justify-content: center; border-radius: var(--radius-full); border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-surface-1); padding-inline: var(--spacing); font-size: 10px; --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); color: var(--color-white); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-color: var(--color-danger); } .ck-sync-indicator { position: fixed; bottom: 24px; left: 24px; z-index: var(--z-toast); padding: 12px 20px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .dark .ck-sync-indicator { background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); color: white; } .ck-sync-content { display: flex; align-items: center; gap: 12px; } .ck-sync-spinner { width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.1); border-top-color: #3b82f6; border-radius: 50%; animation: ck-spin 1s linear infinite; } .dark .ck-sync-spinner { border: 2px solid rgba(255, 255, 255, 0.1); border-top-color: #60a5fa; } .ck-sync-indicator.ck-sync-success { background: rgba(34, 197, 94, 0.8) !important; color: white !important; border-color: rgba(255, 255, 255, 0.2); } .ck-sync-indicator.ck-sync-success .ck-sync-spinner { display: none; } .ck-sync-indicator.ck-sync-success .ck-sync-content::before { content: '✓'; font-weight: bold; } .ck-sync-text { font-size: 14px; font-weight: 600; } @keyframes ck-spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .ck-sync-indicator { bottom: 80px; left: 50%; transform: translateX(-50%); } .ck-sync-indicator.translate-y-20 { transform: translateX(-50%) translateY(80px); } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .skeleton-pulse { animation: var(--animate-pulse); border-radius: var(--radius-lg); background-color: var(--color-surface-2); } .skeleton-shimmer { background: linear-gradient( to right, var(--color-surface-2) 0%, var(--color-highlight) 20%, var(--color-surface-2) 40%, var(--color-surface-2) 100% ); background-size: 2000px 100%; animation: shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite forwards; border-radius: var(--radius-lg); } .skeleton-avatar { height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); animation: var(--animate-pulse); border-radius: var(--radius-xl); background-color: var(--color-surface-2); } .skeleton-line { margin-bottom: calc(var(--spacing) * 2); height: calc(var(--spacing) * 3); animation: var(--animate-pulse); border-radius: var(--radius-lg); background-color: var(--color-surface-2); } .skeleton-line-short { height: calc(var(--spacing) * 3); width: calc(1 / 2 * 100%); animation: var(--animate-pulse); border-radius: var(--radius-lg); background-color: var(--color-surface-2); } .ck-widget { background-color: var(--color-card); border-radius: var(--radius-xl); padding: 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow-soft); border: 1px solid var(--color-line-default); transition: all 300ms var(--ease-google); will-change: transform; } .ck-widget:hover { box-shadow: var(--shadow-soft-hover); } .ck-widget-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--color-content-primary); margin-bottom: 1.5rem; padding-bottom: 0.5rem; position: relative; display: flex; align-items: center; gap: 0.75rem; } .ck-widget-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 3rem; height: 0.25rem; background-color: var(--color-tier-accent); border-radius: var(--radius-full); } .ck-widget-title i { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background-color: var(--color-tier-bg); color: var(--color-tier-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); font-size: 0.75rem; } .ck-widget-title i + * { flex: 1 1 0%; } .widget_categories ul li { display: flex; align-items: center; justify-content: space-between; color: var(--color-content-tertiary); transition: color 300ms; padding-top: 0.375rem; padding-bottom: 0.375rem; } .widget_categories ul li:hover { color: var(--color-tier-accent); } .widget_categories ul li a { display: flex; align-items: center; flex-grow: 1; } .widget_categories ul li a::before { content: ''; width: 0.75rem; height: 0.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; margin-right: 0.75rem; transition: transform 300ms; } .widget_categories ul li:hover a::before { transform: translateX(0.25rem); } .widget_categories ul li .count { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; background-color: var(--color-page); color: var(--color-content-tertiary); padding: 0.125rem 0.5rem; border-radius: var(--radius-full); transition: all 300ms; } .widget_categories ul li:hover .count { background-color: var(--color-tier-bg); color: var(--color-tier-accent); } .widget_recent_comments ul li, .widget_archive ul li, .widget_meta ul li, .widget_pages ul li, .widget_nav_menu ul li { border-bottom: 1px solid var(--color-line-default); padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.875rem; color: var(--color-content-tertiary); transition: color 300ms; display: flex; align-items: center; } .widget_recent_comments ul li:hover, .widget_archive ul li:hover, .widget_meta ul li:hover, .widget_pages ul li:hover, .widget_nav_menu ul li:hover { color: var(--color-tier-accent); } .widget_recent_comments ul li:last-child { border-bottom: 0; } .widget_recent_comments ul li::before, .widget_archive ul li a::before, .widget_meta ul li a::before, .widget_pages ul li a::before { content: ''; width: 0.75rem; height: 0.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; margin-right: 0.75rem; opacity: 0.5; } .footer-widget, div.footer-widget, #page .footer-widget { background-color: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; } .footer-widget h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--color-content-primary); margin-bottom: 1rem; } .footer-widget ul, .footer-widget menu { list-style-type: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .footer-widget li { display: block !important; font-size: 0.875rem !important; line-height: 1.5 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background-color: transparent !important; color: var(--color-content-tertiary) !important; transition: color 0.2s ease-in-out !important; border-bottom: none !important; text-transform: none !important; letter-spacing: normal !important; } .footer-widget li:hover, .footer-widget li a:hover { color: var(--color-tier-accent) !important; } .footer-widget li a { display: inline-block !important; font-weight: 400 !important; padding: 0 !important; color: inherit !important; transition: color 0.2s ease-in-out !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; } .footer-widget li::before { display: none !important; } .form-input-ck { width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-lg); background-color: var(--color-card); border: 1px solid var(--color-line-strong); color: var(--color-content-primary); transition: all 300ms; outline: none; } .form-input-ck:focus { border-color: var(--color-tier-accent); box-shadow: 0 0 0 2px var(--color-tier-bg); } .form-label-ck { display: block; font-size: 0.875rem; font-weight: 700; color: var(--color-content-secondary); margin-bottom: 0.5rem; margin-left: 0.25rem; } .ck-content h1, .ck-content h2, .ck-content h3 { font-family: var(--font-serif); font-weight: 700 !important; color: var(--color-content-primary) !important; margin-bottom: 1rem !important; margin-top: 2.5rem !important; } .ck-content h4, .ck-content h5, .ck-content h6 { font-family: var(--font-sans); font-weight: 700 !important; color: var(--color-content-primary) !important; margin-bottom: 0.75rem !important; margin-top: 2rem !important; } .ck-content h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .ck-content h2 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .ck-content h3 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } @media (min-width: 768px) { .ck-content h1 { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .ck-content h2 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .ck-content h3 { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .ck-content h1 + h2, .ck-content h2 + h3, .ck-content h3 + h4 { margin-top: 0.5rem !important; } .ck-content p { margin-bottom: calc(var(--spacing) * 6); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); @media (width >= 48rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } color: var(--color-content-primary) !important; } .ck-content p:where( .text-center, .text-right, .text-sm, .text-xs, [class*='text-center'], [class*='text-right'], [class*='border-'], [class*='pl-'] ) { text-indent: 0 !important; } .ck-content strong, .ck-content b, .prose.ck-content strong, .prose.ck-content b { color: var(--color-content-primary) !important; font-weight: 700 !important; } [data-theme='dark'] .ck-content strong, [data-theme='dark'] .ck-content b, [data-theme='dark'] .prose.ck-content strong, [data-theme='dark'] .prose.ck-content b { color: var(--color-content-primary) !important; font-weight: 700 !important; } .ck-content blockquote, .prose.ck-content blockquote { position: relative !important; border-left: 4px solid var(--color-tier-accent) !important; background-color: var(--color-page) !important; padding: 2rem !important; margin: 2.5rem 0 !important; border-radius: 1rem !important; box-shadow: var(--shadow-soft) !important; font-style: normal !important; border-right: 1px solid var(--color-line-subtle) !important; border-top: 1px solid var(--color-line-subtle) !important; border-bottom: 1px solid var(--color-line-subtle) !important; } .ck-content blockquote p, .prose.ck-content blockquote p { margin: 0px; font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); font-style: italic; @media (width >= 48rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } color: var(--color-content-secondary) !important; } .ck-content blockquote cite, .prose.ck-content blockquote cite { font-family: var(--font-sans); display: block !important; margin-top: 1rem !important; font-size: 0.8rem !important; font-weight: 700 !important; color: var(--color-tier-accent) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; } .ck-content .table-wrapper, .ck-content .table-responsive { margin: 2.5rem 0 !important; border-radius: 0.75rem !important; border: 1px solid var(--color-line-strong) !important; overflow: hidden !important; } .ck-content table, .prose.ck-content table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; font-size: 0.95rem !important; margin: 0 !important; border: none !important; } .ck-content thead th, .prose.ck-content thead th { font-family: var(--font-sans); font-size: 10px; --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); text-transform: uppercase; background-color: var(--color-page) !important; color: var(--color-content-primary) !important; padding: 1rem !important; text-align: left !important; border-bottom: 2px solid var(--color-line-strong) !important; font-weight: 700 !important; } .ck-content tbody td, .prose.ck-content tbody td { padding: 1rem !important; border-bottom: 1px solid var(--color-line-subtle) !important; color: var(--color-content-tertiary) !important; vertical-align: middle !important; } .ck-content tbody tr:last-child td, .prose.ck-content tbody tr:last-child td { border-bottom: 1px solid var(--color-line-strong) !important; } .ck-content tbody tr:nth-child(even), .prose.ck-content tbody tr:nth-child(even) { background-color: var(--color-page) !important; } .ck-content img { border-radius: 1rem !important; border: 1px solid var(--color-line-subtle) !important; } .ck-content ul, .ck-content ol { margin-bottom: 1.5rem !important; padding-left: 1.5rem !important; } .ck-content ul > li + li, .ck-content ol > li + li { margin-top: 0.5rem !important; } .ck-content ul { list-style-type: disc !important; list-style-position: outside !important; } .ck-content ol { list-style-type: decimal !important; list-style-position: outside !important; } .ck-content li { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); @media (width >= 48rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } padding-left: 0.5rem !important; line-height: 1.625 !important; } .ck-content ul li::marker, .ck-content ol li::marker { color: var(--color-content-tertiary) !important; font-weight: 800 !important; } .ck-content ul li::before, .ck-content ol li::before { content: none !important; } .interaction-label { display: none !important; } @media (min-width: 768px) { .interaction-label { display: inline !important; } } .ck-content code, .prose.ck-content code { font-family: var(--font-mono); background-color: var(--color-surface-2); border: 1px solid var(--color-line-subtle); border-radius: var(--radius-md); padding: 0.125rem 0.375rem; font-size: 0.875em; color: var(--color-danger-content); } .ck-content pre, .prose.ck-content pre { font-family: var(--font-mono); background-color: var(--color-surface-2); border: 1px solid var(--color-line-subtle); border-radius: var(--radius-lg); padding: 1rem; overflow-x: auto; margin: 1.5rem 0; } .ck-content pre code, .prose.ck-content pre code { background: none; border: none; padding: 0; color: var(--color-content-primary); font-size: 0.875rem; } .ck-bible-ref { color: var(--color-content-brand); font-weight: 600; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; transition: all 0.2s ease; cursor: pointer; } .ck-bible-ref:hover { color: var(--color-brand-hover); background-color: var(--color-highlight); border-radius: 4px; } .ck-bible-tooltip { position: absolute; z-index: 999999; width: 320px; max-width: 90vw; background-color: var(--color-surface-1); color: var(--color-content-primary); border: 1px solid var(--color-line-default); border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transform: translateY(5px) scale(0.98); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; overflow: hidden; } @supports (backdrop-filter: blur(8px)) { .ck-bible-tooltip { background-color: color-mix(in srgb, #ffffff 94%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--color-surface-1) 94%, transparent); } backdrop-filter: blur(12px); } } .ck-bible-tooltip.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .ck-bt-header { background-color: var(--color-content-brand); color: var(--color-content-inverse); padding: 10px 16px; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; } .ck-bt-content { padding: 16px; font-size: 14px; line-height: 1.6; color: var(--color-content-primary); background-color: transparent; max-height: 250px; overflow-y: auto; font-family: 'Lora', serif; } .ck-bt-content::-webkit-scrollbar { width: 6px; } .ck-bt-content::-webkit-scrollbar-track { background: transparent; } .ck-bt-content::-webkit-scrollbar-thumb { background-color: var(--color-line-brand); border-radius: 10px; } .ck-bt-loader { width: 20px; height: 20px; border: 2px solid var(--color-line-default); border-top-color: var(--color-content-brand); border-radius: 50%; animation: ck-bt-spin 0.8s linear infinite; margin: 10px auto; } @keyframes ck-bt-spin { to { transform: rotate(360deg); } } @layer base { input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select { appearance: none; background-color: #fff; border-color: oklch(55.1% 0.027 264.364); border-width: 1px; border-radius: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; --tw-shadow: 0 0 #0000; &:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: oklch(54.6% 0.245 262.881); --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); border-color: oklch(54.6% 0.245 262.881); } } input::placeholder,textarea::placeholder { color: oklch(55.1% 0.027 264.364); opacity: 1; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; print-color-adjust: exact; } select:where([multiple]),select:where([size]:not([size="1"])) { background-image: initial; background-position: initial; background-repeat: unset; background-size: initial; padding-right: 0.75rem; print-color-adjust: unset; } input:where([type='checkbox']),input:where([type='radio']) { appearance: none; padding: 0; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: oklch(54.6% 0.245 262.881); background-color: #fff; border-color: oklch(55.1% 0.027 264.364); border-width: 1px; --tw-shadow: 0 0 #0000; } input:where([type='checkbox']) { border-radius: 0px; } input:where([type='radio']) { border-radius: 100%; } input:where([type='checkbox']):focus,input:where([type='radio']):focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: oklch(54.6% 0.245 262.881); --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); } input:where([type='checkbox']):checked,input:where([type='radio']):checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } input:where([type='checkbox']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); @media (forced-colors: active) { appearance: auto; } } input:where([type='radio']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); @media (forced-colors: active) { appearance: auto; } } input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus { border-color: transparent; background-color: currentColor; } input:where([type='checkbox']):indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; @media (forced-colors: active) { appearance: auto; } } input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus { border-color: transparent; background-color: currentColor; } input:where([type='file']) { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit; } input:where([type='file']):focus { outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; } } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; } @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-duration: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-border-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-ease: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-y-reverse: 0; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-outline-style: solid; --tw-content: ""; --tw-divide-x-reverse: 0; } } } /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ .ds-admin-wrap { max-width: 1200px; margin-top: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; } .ds-grid { display: grid; grid-template-columns: 1fr 350px; gap: 24px; } @media (max-width: 850px) { .ds-grid { grid-template-columns: 1fr; } } .ds-card { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; margin-bottom: 24px; } .ds-card-header { padding: 20px 24px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; background: #fafafa; } .ds-card-title { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; } .ds-card-body { padding: 24px; } .ds-form-group { margin-bottom: 20px; } .ds-label { display: block; font-weight: 600; color: #475569; margin-bottom: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .ds-input { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; font-size: 14px; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .ds-input:focus { border-color: #2271b1; box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1); outline: none; } .ds-textarea { min-height: 120px; line-height: 1.6; resize: vertical; } .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; text-decoration: none; border: 1px solid transparent; } .ds-btn-primary { background: #2271b1; color: #fff; border: 1px solid #2271b1; } .ds-btn-primary:hover { background: #135e96; color: #fff; } .ds-btn-secondary { background: #fff; color: #475569; border: 1px solid #cbd5e1; } .ds-btn-secondary:hover { background: #f8fafc; border-color: #94a3b8; color: #1e293b; } .ds-btn-danger { color: #dc2626; background: #fff; border: 1px solid #fca5a5; padding: 6px 12px; font-size: 13px; } .ds-btn-danger:hover { background: #fef2f2; border-color: #ef4444; color: #b91c1c; } .ds-btn-sm { padding: 6px 12px; font-size: 13px; } .ds-table { width: 100%; border-collapse: separate; border-spacing: 0; } .ds-table th { text-align: left; padding: 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-weight: 600; color: #475569; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .ds-table td { padding: 16px; border-bottom: 1px solid #f1f5f9; vertical-align: top; color: #334155; } .ds-table tr:last-child td { border-bottom: none; } .ds-verse-text { font-family: 'Georgia', serif; font-style: italic; font-size: 15px; line-height: 1.6; color: #1e293b; margin-bottom: 6px; } .ds-verse-meta { font-size: 12px; color: #94a3b8; } .ds-actions { display: flex; gap: 8px; } .ds-info-list { margin: 0; padding: 0; list-style: none; } .ds-info-list li { padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; color: #475569; display: flex; justify-content: space-between; } .ds-info-list li:last-child { border-bottom: none; } .ds-info-label { font-weight: 600; color: #1e293b; } .ds-preview-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; position: relative; overflow: hidden; margin-top: 16px; } .ds-preview-quote { font-family: 'Georgia', serif; font-size: 16px; font-style: italic; color: #1e293b; line-height: 1.6; text-align: center; margin-bottom: 12px; position: relative; z-index: 2; } .ds-preview-ref { text-align: center; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #64748b; } .ds-preview-icon { position: absolute; top: 10px; right: 10px; opacity: 0.05; font-size: 60px; color: #000; }