/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-600: oklch(57.7% 0.245 27.325); --color-orange-400: oklch(75% 0.183 55.934); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-sky-400: oklch(74.6% 0.16 232.661); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-pink-500: oklch(65.6% 0.241 354.308); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-relaxed: 1.625; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --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; --blur-sm: 8px; --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); } } @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, ui-sans-serif, system-ui, 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 { 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; } .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-\[2px\] { inset: 2px; } .inset-\[28\%\] { inset: 28%; } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .inset-x-4 { inset-inline: calc(var(--spacing) * 4); } .inset-x-6 { inset-inline: calc(var(--spacing) * 6); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .-top-5 { top: calc(var(--spacing) * -5); } .-top-9 { top: calc(var(--spacing) * -9); } .-top-10 { top: calc(var(--spacing) * -10); } .-top-16 { top: calc(var(--spacing) * -16); } .-top-20 { top: calc(var(--spacing) * -20); } .top-0 { top: calc(var(--spacing) * 0); } .top-0\.5 { top: calc(var(--spacing) * 0.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-5 { top: calc(var(--spacing) * 5); } .top-8 { top: calc(var(--spacing) * 8); } .top-14 { top: calc(var(--spacing) * 14); } .top-\[30\%\] { top: 30%; } .top-\[52\%\] { top: 52%; } .top-\[66\%\] { top: 66%; } .top-\[104px\] { top: 104px; } .-right-10 { right: calc(var(--spacing) * -10); } .-right-20 { right: calc(var(--spacing) * -20); } .right-2 { right: calc(var(--spacing) * 2); } .right-3 { right: calc(var(--spacing) * 3); } .right-4 { right: calc(var(--spacing) * 4); } .right-\[2\%\] { right: 2%; } .right-\[3\%\] { right: 3%; } .bottom-0 { bottom: calc(var(--spacing) * 0); } .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); } .left-0 { left: calc(var(--spacing) * 0); } .left-0\.5 { left: calc(var(--spacing) * 0.5); } .left-1\/2 { left: calc(1/2 * 100%); } .left-3 { left: calc(var(--spacing) * 3); } .left-3\.5 { left: calc(var(--spacing) * 3.5); } .left-\[2\%\] { left: 2%; } .left-\[3\%\] { left: 3%; } .left-\[22\%\] { left: 22%; } .left-\[22px\] { left: 22px; } .left-\[28\%\] { left: 28%; } .left-\[40\%\] { left: 40%; } .left-\[55\%\] { left: 55%; } .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-\[5\] { z-index: 5; } .z-\[60\] { z-index: 60; } .z-\[70\] { z-index: 70; } .z-\[80\] { z-index: 80; } .z-\[90\] { z-index: 90; } .z-\[100\] { z-index: 100; } .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; } } .-mx-1 { margin-inline: calc(var(--spacing) * -1); } .mx-auto { margin-inline: auto; } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .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-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-7 { margin-top: calc(var(--spacing) * 7); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-auto { margin-top: auto; } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .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-10 { margin-bottom: calc(var(--spacing) * 10); } .ml-0\.5 { margin-left: calc(var(--spacing) * 0.5); } .ml-1 { margin-left: calc(var(--spacing) * 1); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-auto { margin-left: auto; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .aspect-square { aspect-ratio: 1 / 1; } .h-1 { height: calc(var(--spacing) * 1); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-1\/3 { height: calc(1/3 * 100%); } .h-2 { height: calc(var(--spacing) * 2); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .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-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-72 { height: calc(var(--spacing) * 72); } .h-\[8\%\] { height: 8%; } .h-\[11\%\] { height: 11%; } .h-\[16\%\] { height: 16%; } .h-\[18px\] { height: 18px; } .h-\[38px\] { height: 38px; } .h-\[54px\] { height: 54px; } .h-\[70px\] { height: 70px; } .h-\[74px\] { height: 74px; } .h-\[248px\] { height: 248px; } .h-\[400px\] { height: 400px; } .h-\[540px\] { height: 540px; } .h-\[min\(780px\,calc\(100vh-6rem\)\)\] { height: min(780px, calc(100vh - 6rem)); } .h-full { height: 100%; } .max-h-\[136px\] { max-height: 136px; } .min-h-6 { min-height: calc(var(--spacing) * 6); } .min-h-10 { min-height: calc(var(--spacing) * 10); } .min-h-11 { min-height: calc(var(--spacing) * 11); } .min-h-\[1\.6em\] { min-height: 1.6em; } .min-h-\[40px\] { min-height: 40px; } .min-h-\[132px\] { min-height: 132px; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .w-1 { width: calc(var(--spacing) * 1); } .w-1\.5 { width: calc(var(--spacing) * 1.5); } .w-2 { width: calc(var(--spacing) * 2); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } .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-20 { width: calc(var(--spacing) * 20); } .w-28 { width: calc(var(--spacing) * 28); } .w-32 { width: calc(var(--spacing) * 32); } .w-40 { width: calc(var(--spacing) * 40); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-\[8\%\] { width: 8%; } .w-\[11\%\] { width: 11%; } .w-\[16\%\] { width: 16%; } .w-\[18px\] { width: 18px; } .w-\[148px\] { width: 148px; } .w-\[236px\] { width: 236px; } .w-\[272px\] { width: 272px; } .w-\[370px\] { width: 370px; } .w-\[400px\] { width: 400px; } .w-\[clamp\(42px\,6vw\,70px\)\] { width: clamp(42px, 6vw, 70px); } .w-\[clamp\(56px\,8vw\,96px\)\] { width: clamp(56px, 8vw, 96px); } .w-\[clamp\(64px\,9vw\,110px\)\] { width: clamp(64px, 9vw, 110px); } .w-\[min\(360px\,calc\(100vw-2rem\)\)\] { width: min(360px, calc(100vw - 2rem)); } .w-full { width: 100%; } .w-max { width: max-content; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .max-w-7xl { max-width: var(--container-7xl); } .max-w-\[180px\] { max-width: 180px; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[440px\] { max-width: 440px; } .max-w-\[600px\] { max-width: 600px; } .max-w-\[1400px\] { max-width: 1400px; } .max-w-\[calc\(100vw-1\.5rem\)\] { max-width: calc(100vw - 1.5rem); } .max-w-full { max-width: 100%; } .max-w-lg { max-width: var(--container-lg); } .max-w-md { max-width: var(--container-md); } .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: calc(var(--spacing) * 0); } .min-w-\[64px\] { min-width: 64px; } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .origin-bottom { transform-origin: bottom; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); 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); } .scale-110 { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .-scale-x-100 { --tw-scale-x: calc(100% * -1); scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-\[0\.98\] { scale: 0.98; } .-rotate-\[7deg\] { rotate: calc(7deg * -1); } .rotate-\[7deg\] { rotate: 7deg; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .animate-ping { animation: var(--animate-ping); } .animate-pulse { animation: var(--animate-pulse); } .animate-spin { animation: var(--animate-spin); } .cursor-grab { cursor: grab; } .cursor-pointer { cursor: pointer; } .touch-none { touch-action: none; } .resize { resize: both; } .resize-none { resize: none; } .resize-y { resize: vertical; } .scroll-mt-24 { scroll-margin-top: calc(var(--spacing) * 24); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .place-items-center { place-items: center; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: calc(var(--spacing) * 1); } .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-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); } .space-y-1\.5 { :where(& > :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))); } } .space-y-2 { :where(& > :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))); } } .space-y-2\.5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-3 { :where(& > :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))); } } .space-y-4 { :where(& > :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))); } } .space-y-5 { :where(& > :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))); } } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .-space-x-2 { :where(& > :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))); } } .gap-y-1 { row-gap: calc(var(--spacing) * 1); } .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-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-\[10px\] { border-radius: 10px; } .rounded-\[22px\] { border-radius: 22px; } .rounded-\[28px\] { border-radius: 28px; } .rounded-\[30px\] { border-radius: 30px; } .rounded-\[32px\] { border-radius: 32px; } .rounded-\[46px\] { border-radius: 46px; } .rounded-\[inherit\] { border-radius: inherit; } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-xl { border-radius: var(--radius-xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-\[10px\] { border-style: var(--tw-border-style); border-width: 10px; } .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-dashed { --tw-border-style: dashed; border-style: dashed; } .border-\[\#06060a\] { border-color: #06060a; } .border-\[\#15141c\] { border-color: #15141c; } .border-amber-300\/50 { border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-300) 50%, transparent); } } .border-amber-400\/20 { border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent); } } .border-fuchsia-300\/20 { border-color: color-mix(in srgb, oklch(83.3% 0.145 321.434) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-fuchsia-300) 20%, transparent); } } .border-fuchsia-400\/25 { border-color: color-mix(in srgb, oklch(74% 0.238 322.16) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-fuchsia-400) 25%, transparent); } } .border-fuchsia-400\/40 { border-color: color-mix(in srgb, oklch(74% 0.238 322.16) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-fuchsia-400) 40%, transparent); } } .border-fuchsia-400\/60 { border-color: color-mix(in srgb, oklch(74% 0.238 322.16) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-fuchsia-400) 60%, 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-rose-500\/25 { border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-rose-500) 25%, transparent); } } .border-violet-400\/20 { border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-violet-400) 20%, transparent); } } .border-violet-400\/25 { border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-violet-400) 25%, transparent); } } .border-white { border-color: var(--color-white); } .border-white\/10 { border-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/12 { border-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .border-white\/15 { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .border-white\/20 { border-color: color-mix(in srgb, #fff 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, #fff 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, #fff 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, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .border-white\/60 { border-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .border-white\/\[0\.06\] { border-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .border-white\/\[0\.07\] { border-color: color-mix(in srgb, #fff 7.000000000000001%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent); } } .border-white\/\[0\.08\] { border-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .bg-\[\#0b0a12\] { background-color: #0b0a12; } .bg-\[\#0b0a12\]\/85 { background-color: color-mix(in oklab, #0b0a12 85%, transparent); } .bg-\[\#0c0b14\]\/80 { background-color: color-mix(in oklab, #0c0b14 80%, transparent); } .bg-\[\#0d0c15\]\/90 { background-color: color-mix(in oklab, #0d0c15 90%, transparent); } .bg-\[\#06060a\] { background-color: #06060a; } .bg-\[\#06060a\]\/60 { background-color: color-mix(in oklab, #06060a 60%, transparent); } .bg-\[\#06060a\]\/75 { background-color: color-mix(in oklab, #06060a 75%, transparent); } .bg-\[\#111018\]\/90 { background-color: color-mix(in oklab, #111018 90%, transparent); } .bg-\[\#121020\]\/90 { background-color: color-mix(in oklab, #121020 90%, transparent); } .bg-\[\#131121\]\/75 { background-color: color-mix(in oklab, #131121 75%, transparent); } .bg-amber-400\/10 { background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent); } } .bg-amber-400\/15 { background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent); } } .bg-black { background-color: var(--color-black); } .bg-black\/20 { background-color: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } .bg-black\/25 { background-color: color-mix(in srgb, #000 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 25%, transparent); } } .bg-black\/30 { background-color: color-mix(in srgb, #000 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 30%, transparent); } } .bg-black\/35 { background-color: color-mix(in srgb, #000 35%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 35%, transparent); } } .bg-black\/40 { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .bg-black\/60 { background-color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .bg-black\/85 { background-color: color-mix(in srgb, #000 85%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 85%, transparent); } } .bg-emerald-400 { background-color: var(--color-emerald-400); } .bg-emerald-400\/15 { background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent); } } .bg-fuchsia-400\/10 { background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-fuchsia-400) 10%, transparent); } } .bg-fuchsia-400\/15 { background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-fuchsia-400) 15%, transparent); } } .bg-fuchsia-400\/\[0\.09\] { background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 9%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-fuchsia-400) 9%, transparent); } } .bg-orange-400 { background-color: var(--color-orange-400); } .bg-rose-500 { background-color: var(--color-rose-500); } .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-rose-500\/15 { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent); } } .bg-transparent { background-color: transparent; } .bg-violet-300\/30 { background-color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-violet-300) 30%, transparent); } } .bg-violet-300\/40 { background-color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-violet-300) 40%, transparent); } } .bg-violet-400\/10 { background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-violet-400) 10%, transparent); } } .bg-white { background-color: var(--color-white); } .bg-white\/10 { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/15 { background-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .bg-white\/\[0\.1\] { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/\[0\.02\] { background-color: color-mix(in srgb, #fff 2%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 2%, transparent); } } .bg-white\/\[0\.03\] { background-color: color-mix(in srgb, #fff 3%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 3%, transparent); } } .bg-white\/\[0\.04\] { background-color: color-mix(in srgb, #fff 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); } } .bg-white\/\[0\.05\] { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/\[0\.06\] { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } .bg-white\/\[0\.07\] { background-color: color-mix(in srgb, #fff 7.000000000000001%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent); } } .bg-white\/\[0\.08\] { background-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } .bg-white\/\[0\.09\] { background-color: color-mix(in srgb, #fff 9%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 9%, transparent); } } .bg-white\/\[0\.12\] { background-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .bg-white\/\[0\.025\] { background-color: color-mix(in srgb, #fff 2.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 2.5%, transparent); } } .bg-white\/\[0\.035\] { background-color: color-mix(in srgb, #fff 3.5000000000000004%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 3.5000000000000004%, transparent); } } .bg-yellow-400 { background-color: var(--color-yellow-400); } .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .from-black\/50 { --tw-gradient-from: color-mix(in srgb, #000 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-violet-500 { --tw-gradient-from: var(--color-violet-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-violet-500\/20 { --tw-gradient-from: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-violet-500) 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-fuchsia-500 { --tw-gradient-via: var(--color-fuchsia-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-fuchsia-500\/\[0\.075\] { --tw-gradient-via: color-mix(in srgb, oklch(66.7% 0.295 322.15) 7.5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-fuchsia-500) 7.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); } .to-cyan-400\/\[0\.055\] { --tw-gradient-to: color-mix(in srgb, oklch(78.9% 0.154 211.53) 5.5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-cyan-400) 5.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-pink-500 { --tw-gradient-to: var(--color-pink-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-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)); } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .fill-amber-300 { fill: var(--color-amber-300); } .fill-current { fill: currentcolor; } .object-cover { object-fit: cover; } .p-1 { padding: calc(var(--spacing) * 1); } .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-7 { padding: calc(var(--spacing) * 7); } .p-10 { padding: calc(var(--spacing) * 10); } .p-\[3px\] { padding: 3px; } .px-1 { padding-inline: calc(var(--spacing) * 1); } .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); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .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-6 { padding-block: calc(var(--spacing) * 6); } .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); } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-12 { padding-top: calc(var(--spacing) * 12); } .pr-1 { padding-right: calc(var(--spacing) * 1); } .pr-1\.5 { padding-right: calc(var(--spacing) * 1.5); } .pr-3\.5 { padding-right: calc(var(--spacing) * 3.5); } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pr-11 { padding-right: calc(var(--spacing) * 11); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .pb-28 { padding-bottom: calc(var(--spacing) * 28); } .pl-1 { padding-left: calc(var(--spacing) * 1); } .pl-1\.5 { padding-left: calc(var(--spacing) * 1.5); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-10 { padding-left: calc(var(--spacing) * 10); } .text-center { text-align: center; } .text-left { text-align: left; } .font-mono { font-family: var(--font-mono); } .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-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-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[13px\] { font-size: 13px; } .text-\[15px\] { font-size: 15px; } .text-\[clamp\(2\.6rem\,6\.2vw\,5\.2rem\)\] { font-size: clamp(2.6rem, 6.2vw, 5.2rem); } .text-\[clamp\(5rem\,18vw\,9rem\)\] { font-size: clamp(5rem, 18vw, 9rem); } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .leading-\[0\.98\] { --tw-leading: 0.98; line-height: 0.98; } .leading-none { --tw-leading: 1; line-height: 1; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .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-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .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\.18em\] { --tw-tracking: 0.18em; letter-spacing: 0.18em; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .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); } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-line { white-space: pre-line; } .text-amber-200 { color: var(--color-amber-200); } .text-amber-300 { color: var(--color-amber-300); } .text-black { color: var(--color-black); } .text-emerald-300 { color: var(--color-emerald-300); } .text-emerald-300\/80 { color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-emerald-300) 80%, transparent); } } .text-emerald-400 { color: var(--color-emerald-400); } .text-fuchsia-200 { color: var(--color-fuchsia-200); } .text-fuchsia-300 { color: var(--color-fuchsia-300); } .text-red-600 { color: var(--color-red-600); } .text-rose-300 { color: var(--color-rose-300); } .text-rose-400 { color: var(--color-rose-400); } .text-sky-400 { color: var(--color-sky-400); } .text-violet-200 { color: var(--color-violet-200); } .text-violet-300 { color: var(--color-violet-300); } .text-white { color: var(--color-white); } .text-white\/25 { color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 25%, transparent); } } .text-white\/30 { color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .text-white\/35 { color: color-mix(in srgb, #fff 35%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 35%, transparent); } } .text-white\/40 { color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .text-white\/45 { color: color-mix(in srgb, #fff 45%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 45%, transparent); } } .text-white\/50 { color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .text-white\/55 { color: color-mix(in srgb, #fff 55%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 55%, transparent); } } .text-white\/60 { color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .text-white\/65 { color: color-mix(in srgb, #fff 65%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 65%, transparent); } } .text-white\/70 { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .text-white\/75 { color: color-mix(in srgb, #fff 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 75%, transparent); } } .text-white\/80 { color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .text-white\/85 { color: color-mix(in srgb, #fff 85%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 85%, transparent); } } .text-white\/90 { color: color-mix(in srgb, #fff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-0 { opacity: 0%; } .opacity-25 { opacity: 25%; } .opacity-30 { opacity: 30%; } .opacity-40 { opacity: 40%; } .opacity-45 { opacity: 45%; } .opacity-50 { opacity: 50%; } .opacity-55 { opacity: 55%; } .opacity-60 { opacity: 60%; } .opacity-70 { opacity: 70%; } .opacity-75 { opacity: 75%; } .opacity-80 { opacity: 80%; } .opacity-85 { opacity: 85%; } .opacity-90 { opacity: 90%; } .shadow { --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-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_30px_-12px_var\(--h1\)\] { --tw-shadow: 0 0 30px -12px var(--tw-shadow-color, var(--h1)); 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_36px_-8px_var\(--h1\)\] { --tw-shadow: 0 0 36px -8px var(--tw-shadow-color, var(--h1)); 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_40px_-10px_var\(--h1\)\] { --tw-shadow: 0 0 40px -10px var(--tw-shadow-color, var(--h1)); 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_14px_50px_rgba\(0\,0\,0\,\.15\)\] { --tw-shadow: 0 14px 50px var(--tw-shadow-color, rgba(0,0,0,.15)); 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_30px_80px_-20px_rgba\(0\,0\,0\,0\.8\)\] { --tw-shadow: 0 30px 80px -20px var(--tw-shadow-color, rgba(0,0,0,0.8)); 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_40px_100px_-30px_rgba\(0\,0\,0\,0\.9\)\] { --tw-shadow: 0 40px 100px -30px var(--tw-shadow-color, rgba(0,0,0,0.9)); 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); } .ring { --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-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); } .shadow-black\/10 { --tw-shadow-color: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 10%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-black\/40 { --tw-shadow-color: color-mix(in srgb, #000 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); } } .ring-\[\#0b0a12\] { --tw-ring-color: #0b0a12; } .ring-white\/10 { --tw-ring-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .ring-white\/40 { --tw-ring-color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .ring-white\/70 { --tw-ring-color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 70%, transparent); } } .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,); } .drop-shadow-\[0_2px_12px_rgba\(0\,0\,0\,0\.6\)\] { --tw-drop-shadow-size: drop-shadow(0 2px 12px var(--tw-drop-shadow-color, rgba(0,0,0,0.6))); --tw-drop-shadow: var(--tw-drop-shadow-size); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .drop-shadow-\[0_10px_18px_rgba\(0\,0\,0\,0\.35\)\] { --tw-drop-shadow-size: drop-shadow(0 10px 18px var(--tw-drop-shadow-color, rgba(0,0,0,0.35))); --tw-drop-shadow: var(--tw-drop-shadow-size); 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 { --tw-backdrop-blur: blur(8px); -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-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-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,); } .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-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .will-change-transform { will-change: transform; } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } .group-hover\:translate-x-0\.5 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-x: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:-translate-y-0\.5 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:scale-110 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:-rotate-6 { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: calc(6deg * -1); } } } .group-hover\:rotate-\[20deg\] { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: 20deg; } } } .group-hover\:text-white { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-white); } } } .group-hover\:opacity-60 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 60%; } } } .group-hover\:opacity-80 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 80%; } } } .group-hover\:opacity-100 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 100%; } } } .placeholder\:text-white\/30 { &::placeholder { color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } .placeholder\:text-white\/40 { &::placeholder { color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 40%, transparent); } } } .placeholder\:text-white\/45 { &::placeholder { color: color-mix(in srgb, #fff 45%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 45%, transparent); } } } .focus-within\:border-violet-400\/60 { &:focus-within { border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-violet-400) 60%, transparent); } } } .focus-within\:border-white\/25 { &:focus-within { border-color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 25%, transparent); } } } .focus-within\:bg-white\/\[0\.06\] { &:focus-within { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } } .hover\:-translate-y-0\.5 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:-translate-y-1 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:scale-105 { &:hover { @media (hover: 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 { @media (hover: hover) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .hover\:border-fuchsia-300\/40 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, oklch(83.3% 0.145 321.434) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-fuchsia-300) 40%, transparent); } } } } .hover\:border-white\/15 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } } } .hover\:border-white\/25 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 25%, transparent); } } } } .hover\:border-white\/30 { &:hover { @media (hover: hover) { border-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } } .hover\:bg-rose-500\/10 { &:hover { @media (hover: hover) { 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); } } } } .hover\:bg-rose-500\/15 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent); } } } } .hover\:bg-rose-500\/25 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 25%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-rose-500) 25%, transparent); } } } } .hover\:bg-white\/5 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } } } .hover\:bg-white\/10 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } } .hover\:bg-white\/20 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } } } .hover\:bg-white\/\[0\.1\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } } .hover\:bg-white\/\[0\.04\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 4%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); } } } } .hover\:bg-white\/\[0\.05\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } } } .hover\:bg-white\/\[0\.06\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } } } .hover\:bg-white\/\[0\.07\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 7.000000000000001%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent); } } } } .hover\:bg-white\/\[0\.08\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 8%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } } } .hover\:bg-white\/\[0\.12\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 12%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } } } .hover\:bg-white\/\[0\.13\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 13%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 13%, transparent); } } } } .hover\:bg-white\/\[0\.065\] { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 6.5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6.5%, transparent); } } } } .hover\:text-rose-300 { &:hover { @media (hover: hover) { color: var(--color-rose-300); } } } .hover\:text-white { &:hover { @media (hover: hover) { color: var(--color-white); } } } .hover\:underline { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } .hover\:opacity-100 { &:hover { @media (hover: hover) { opacity: 100%; } } } .hover\:brightness-110 { &: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,); } } } .focus\:border-violet-400\/60 { &:focus { border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-violet-400) 60%, transparent); } } } .focus\:bg-white\/\[0\.06\] { &:focus { background-color: color-mix(in srgb, #fff 6%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } } .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-violet-500\/10 { &:focus { --tw-ring-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent); } } } .focus-visible\:outline-2 { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 2px; } } .focus-visible\:outline-offset-2 { &:focus-visible { outline-offset: 2px; } } .focus-visible\:outline-violet-400 { &:focus-visible { outline-color: var(--color-violet-400); } } .active\:scale-\[0\.97\] { &:active { scale: 0.97; } } .active\:cursor-grabbing { &:active { cursor: grabbing; } } .disabled\:pointer-events-none { &:disabled { pointer-events: none; } } .disabled\:opacity-25 { &:disabled { opacity: 25%; } } .disabled\:opacity-50 { &:disabled { opacity: 50%; } } .min-\[440px\]\:hidden { @media (width >= 440px) { display: none; } } .min-\[440px\]\:inline { @media (width >= 440px) { display: inline; } } .sm\:block { @media (width >= 40rem) { display: block; } } .sm\:inline { @media (width >= 40rem) { display: inline; } } .sm\:scale-\[0\.78\] { @media (width >= 40rem) { scale: 0.78; } } .sm\:grid-cols-2 { @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sm\:grid-cols-3 { @media (width >= 40rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sm\:grid-cols-4 { @media (width >= 40rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sm\:grid-cols-5 { @media (width >= 40rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .sm\:grid-cols-12 { @media (width >= 40rem) { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .sm\:grid-cols-\[minmax\(0\,1fr\)_180px_auto\] { @media (width >= 40rem) { grid-template-columns: minmax(0,1fr) 180px auto; } } .sm\:flex-row { @media (width >= 40rem) { flex-direction: row; } } .sm\:items-center { @media (width >= 40rem) { align-items: center; } } .sm\:items-end { @media (width >= 40rem) { align-items: flex-end; } } .sm\:justify-start { @media (width >= 40rem) { justify-content: flex-start; } } .sm\:gap-3 { @media (width >= 40rem) { gap: calc(var(--spacing) * 3); } } .sm\:p-3 { @media (width >= 40rem) { padding: calc(var(--spacing) * 3); } } .sm\:p-6 { @media (width >= 40rem) { padding: calc(var(--spacing) * 6); } } .sm\:p-7 { @media (width >= 40rem) { padding: calc(var(--spacing) * 7); } } .sm\:p-8 { @media (width >= 40rem) { padding: calc(var(--spacing) * 8); } } .sm\:p-10 { @media (width >= 40rem) { padding: calc(var(--spacing) * 10); } } .sm\:px-5 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 5); } } .sm\:px-6 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 6); } } .sm\:px-8 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 8); } } .sm\:px-12 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 12); } } .sm\:text-left { @media (width >= 40rem) { text-align: left; } } .sm\:text-3xl { @media (width >= 40rem) { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .sm\:text-4xl { @media (width >= 40rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .sm\:text-5xl { @media (width >= 40rem) { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } .sm\:text-base { @media (width >= 40rem) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .sm\:text-lg { @media (width >= 40rem) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .sm\:text-sm { @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .sm\:text-\[34px\] { @media (width >= 40rem) { font-size: 34px; } } .md\:flex { @media (width >= 48rem) { display: flex; } } .md\:hidden { @media (width >= 48rem) { display: none; } } .md\:inline-flex { @media (width >= 48rem) { display: inline-flex; } } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; } } .md\:items-end { @media (width >= 48rem) { align-items: flex-end; } } .lg\:top-2 { @media (width >= 64rem) { top: calc(var(--spacing) * 2); } } .lg\:flex { @media (width >= 64rem) { display: flex; } } .lg\:hidden { @media (width >= 64rem) { display: none; } } .lg\:scale-100 { @media (width >= 64rem) { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .lg\:grid-cols-2 { @media (width >= 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lg\:grid-cols-3 { @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lg\:grid-cols-6 { @media (width >= 64rem) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .lg\:grid-cols-\[1\.05fr_1fr\] { @media (width >= 64rem) { grid-template-columns: 1.05fr 1fr; } } .lg\:grid-cols-\[minmax\(0\,1fr\)_260px\] { @media (width >= 64rem) { grid-template-columns: minmax(0,1fr) 260px; } } .lg\:px-8 { @media (width >= 64rem) { padding-inline: calc(var(--spacing) * 8); } } .lg\:py-8 { @media (width >= 64rem) { padding-block: calc(var(--spacing) * 8); } } .lg\:pt-16 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 16); } } .lg\:pl-64 { @media (width >= 64rem) { padding-left: calc(var(--spacing) * 64); } } .xl\:block { @media (width >= 80rem) { display: block; } } .xl\:hidden { @media (width >= 80rem) { display: none; } } .xl\:grid-cols-4 { @media (width >= 80rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xl\:grid-cols-\[minmax\(0\,1fr\)_390px\] { @media (width >= 80rem) { grid-template-columns: minmax(0,1fr) 390px; } } } @property --h1 { syntax: ""; inherits: true; initial-value: #8b5cf6; } @property --h2 { syntax: ""; inherits: true; initial-value: #ec4899; } @property --h3 { syntax: ""; inherits: true; initial-value: #06b6d4; } @property --angle { syntax: ""; inherits: false; initial-value: 0deg; } :root { --h1: #8b5cf6; --h2: #ec4899; --h3: #06b6d4; color-scheme: dark; transition: --h1 1.4s ease, --h2 1.4s ease, --h3 1.4s ease; } html, body { background: #06060a; } body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } .font-display { font-family: "Outfit", "Inter", system-ui, sans-serif; } ::selection { background: var(--h1); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--h1) 45%, transparent); } color: #fff; } * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; } ::-webkit-scrollbar-track { background: transparent; } .text-holiday { background-image: linear-gradient(100deg, var(--h1), var(--h2), var(--h3), var(--h1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-pan 8s linear infinite; } .bg-holiday { background-image: linear-gradient(120deg, var(--h1), var(--h2), var(--h3)); } .btn-glow { background-image: linear-gradient(120deg, var(--h1), var(--h2), var(--h3), var(--h1)); background-size: 250% 100%; animation: gradient-pan 6s linear infinite; box-shadow: 0 10px 40px -10px var(--h1); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--h1) 75%, transparent); } } @keyframes gradient-pan { to { background-position: 300% 0; } } .site-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .site-aurora > i { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .32; animation: blob 24s ease-in-out infinite alternate; } .site-aurora > i:nth-child(1) { background: var(--h1); width: 55vw; height: 55vw; top: -22vw; left: -12vw; } .site-aurora > i:nth-child(2) { background: var(--h2); width: 42vw; height: 42vw; top: 18vh; right: -16vw; animation-delay: -8s; } .site-aurora > i:nth-child(3) { background: var(--h3); width: 38vw; height: 38vw; bottom: -18vw; left: 28vw; animation-delay: -16s; } @keyframes blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 5vh) scale(1.12); } 100% { transform: translate(-5vw, -4vh) scale(.94); } } .grid-bg { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); } .noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .scene-3d { perspective: 1400px; } .preserve-3d { transform-style: preserve-3d; } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } .float-a { animation: float-y 6s ease-in-out infinite; } .float-b { animation: float-y 7.5s ease-in-out -2s infinite; } .float-c { animation: float-y 8.5s ease-in-out -4s infinite; } .gyro { position: absolute; inset: 0; border-radius: 50%; border: 1px solid; } .gyro-a { border-color: var(--h1); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--h1) 55%, transparent); } animation: gyro-a 18s linear infinite; } .gyro-b { border-color: var(--h2); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--h2) 50%, transparent); } animation: gyro-b 24s linear infinite; } .gyro-c { border-color: var(--h3); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--h3) 50%, transparent); } animation: gyro-c 30s linear infinite; } @keyframes gyro-a { from { transform: rotateX(72deg) rotateZ(0); } to { transform: rotateX(72deg) rotateZ(360deg); } } @keyframes gyro-b { from { transform: rotateY(68deg) rotateZ(0); } to { transform: rotateY(68deg) rotateZ(-360deg); } } @keyframes gyro-c { from { transform: rotateX(45deg) rotateY(40deg) rotateZ(0); } to { transform: rotateX(45deg) rotateY(40deg) rotateZ(360deg); } } .tilt-hover { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s; transform: perspective(900px) rotateX(0) rotateY(0); } .tilt-hover:hover { transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-6px); } .shine { position: relative; overflow: hidden; } .shine::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-20deg); transition: left .8s; pointer-events: none; } .shine:hover::after { left: 130%; } .reveal { animation: e-slide .9s cubic-bezier(.2,.8,.2,1) both; } .range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; outline: none; cursor: pointer; background: linear-gradient(to right, var(--fill, #a78bfa) var(--pct, 50%), rgba(255,255,255,.1) var(--pct, 50%)); } .range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--fill, #a78bfa); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fill, #a78bfa) 35%, transparent); } transition: transform .15s; } .range::-webkit-slider-thumb:hover { transform: scale(1.15); } .range::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: #fff; } .aurora-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; animation: blob 18s ease-in-out infinite alternate; } .animate-gradient { animation: bg-pan 16s ease infinite; } @keyframes bg-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .enter-fade { animation: e-fade .9s cubic-bezier(.2,.8,.2,1) both; } .enter-zoom { animation: e-zoom .9s cubic-bezier(.2,.8,.2,1) both; } .enter-slide { animation: e-slide .9s cubic-bezier(.2,.8,.2,1) both; } .enter-flip { animation: e-flip 1.1s cubic-bezier(.2,.8,.2,1) both; } .enter-blur { animation: e-blur 1s ease both; } @keyframes e-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes e-zoom { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } } @keyframes e-slide { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } } @keyframes e-flip { from { opacity: 0; transform: perspective(900px) rotateX(-38deg) translateY(30px); } to { opacity: 1; transform: none; } } @keyframes e-blur { from { opacity: 0; filter: blur(18px); } to { opacity: 1; filter: blur(0); } } .stagger > * { animation: e-slide .7s cubic-bezier(.2,.8,.2,1) both; } .stagger > *:nth-child(1) { animation-delay: .08s; } .stagger > *:nth-child(2) { animation-delay: .16s; } .stagger > *:nth-child(3) { animation-delay: .24s; } .stagger > *:nth-child(4) { animation-delay: .32s; } .stagger > *:nth-child(5) { animation-delay: .4s; } .stagger > *:nth-child(6) { animation-delay: .48s; } .stagger > *:nth-child(7) { animation-delay: .56s; } .stagger > *:nth-child(8) { animation-delay: .64s; } .enter-screen { transition: opacity .7s ease, backdrop-filter .7s ease; } .enter-text { animation: enter-pulse 2.2s ease-in-out infinite; letter-spacing: .32em; } @keyframes enter-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .name-glow { text-shadow: 0 0 12px var(--accent), 0 0 34px var(--accent); @supports (color: color-mix(in lab, red, red)) { text-shadow: 0 0 12px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); } } .name-neon { color: #fff !important; text-shadow: 0 0 4px #fff, 0 0 10px var(--accent), 0 0 22px var(--accent), 0 0 46px var(--accent); animation: neon-flicker 5s infinite; } @keyframes neon-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } } .name-rainbow { background: linear-gradient(90deg,#ff4d4d,#ffb84d,#fff04d,#4dff88,#4dd2ff,#a64dff,#ff4d4d); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: pan2 4s linear infinite; filter: drop-shadow(0 0 14px rgba(255,255,255,.18)); } .name-gradient { background: linear-gradient(90deg, var(--accent), var(--accent2), #ffffff, var(--accent)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: pan2 6s linear infinite; } @keyframes pan2 { to { background-position: 200% 0; } } .name-glitch { position: relative; display: inline-block; } .name-glitch::before, .name-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; } .name-glitch::before { color: #ff2a6d; animation: glitch-a 2.6s infinite steps(1); opacity: .85; } .name-glitch::after { color: #05d9e8; animation: glitch-b 3.1s infinite steps(1); opacity: .85; } @keyframes glitch-a { 0% { clip-path: inset(0 0 85% 0); transform: translate(-3px, -1px); } 15% { clip-path: inset(30% 0 50% 0); transform: translate(3px, 1px); } 30% { clip-path: inset(60% 0 12% 0); transform: translate(-2px, 2px); } 45% { clip-path: inset(100% 0 0 0); transform: none; } 80% { clip-path: inset(10% 0 70% 0); transform: translate(2px, -2px); } 90% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } } @keyframes glitch-b { 0% { clip-path: inset(70% 0 5% 0); transform: translate(3px, 1px); } 12% { clip-path: inset(15% 0 65% 0); transform: translate(-3px, -1px); } 24% { clip-path: inset(45% 0 30% 0); transform: translate(2px, 0); } 40% { clip-path: inset(100% 0 0 0); transform: none; } 75% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 1px); } 85% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } } .name-wave span { display: inline-block; animation: wave-letter 1.8s ease-in-out infinite; } @keyframes wave-letter { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } } .name-sparkle { text-shadow: 0 0 18px var(--accent); @supports (color: color-mix(in lab, red, red)) { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); } } .sparkle-star { position: absolute; width: 11px; height: 11px; background: var(--accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: sparkle-pop 2.2s ease-in-out infinite; pointer-events: none; } @keyframes sparkle-pop { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } } .tw-caret { animation: caret 1s steps(1) infinite; margin-left: 2px; opacity: .8; } @keyframes caret { 50% { opacity: 0; } } .avatar-wrap { position: relative; isolation: isolate; } .decor-ring > .avatar-img { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px var(--accent); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); } } .decor-glow > .avatar-img { box-shadow: 0 0 34px 6px var(--accent); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 34px 6px color-mix(in srgb, var(--accent) 60%, transparent); } } .decor-pulse::before, .decor-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent); animation: pulse-ring 2.4s ease-out infinite; z-index: -1; } .decor-pulse::after { animation-delay: 1.2s; } @keyframes pulse-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.4); opacity: 0; } } .decor-spin::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; background: conic-gradient(from var(--angle), var(--accent), transparent 30%, var(--accent2) 50%, transparent 80%, var(--accent)); animation: angle-spin 3s linear infinite; z-index: -1; } .decor-spin::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; background: conic-gradient(from var(--angle), var(--accent), transparent 30%, var(--accent2) 50%, transparent 80%, var(--accent)); animation: angle-spin 3s linear infinite; filter: blur(14px); opacity: .6; z-index: -2; } @keyframes angle-spin { to { --angle: 360deg; } } .glow-border { position: relative; } .glow-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--angle), transparent 0deg, var(--accent) 60deg, transparent 130deg, transparent 180deg, var(--accent2) 240deg, transparent 310deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: angle-spin 6s linear infinite; } .link-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: .8rem; padding: .78rem 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s, border-color .25s; } .link-btn:hover { transform: translateY(-2px) scale(1.015); background: var(--accent); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--accent) 16%, transparent); } border-color: var(--accent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } box-shadow: 0 12px 30px -12px var(--accent); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); } } .link-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-20deg); transition: left .7s; } .link-btn:hover::after { left: 130%; } .link-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s; } .link-icon:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 26px -6px currentColor; background: rgba(255,255,255,.12); } .eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; } .eq i { width: 3px; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: bottom; animation: eq 1s ease-in-out infinite; } .eq i:nth-child(2) { animation-delay: -.4s; } .eq i:nth-child(3) { animation-delay: -.2s; } .eq i:nth-child(4) { animation-delay: -.7s; } .eq.paused i { animation-play-state: paused; } @keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } } .marquee { display: inline-block; white-space: nowrap; animation: marquee 12s linear infinite; } @keyframes marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(min(0px, calc(-100% + 160px))); } } .holiday-fade { animation: e-fade 1.2s ease both; } .holiday-banner { animation: banner-in .8s cubic-bezier(.2,.8,.2,1) both; } @keyframes banner-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } .pl-flag { position: absolute; } .pl-flag-pole { position: absolute; left: 0; top: -8px; bottom: 0; width: 7px; border-radius: 4px; background: linear-gradient(90deg, #6b7280, #f8fafc 45%, #9ca3af); box-shadow: 1px 0 6px rgba(0,0,0,.45); } .pl-flag-pole::before { content: ""; position: absolute; top: -10px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7c2, #eab308 55%, #a16207); box-shadow: 0 0 10px rgba(250,204,21,.6); } .pl-flag-cloth { position: absolute; left: 7px; top: 0; display: flex; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); } .pl-strip { flex: 1 1 0; height: 100%; margin-right: -1px; position: relative; background: linear-gradient(#fafafa 0 50%, #dc143c 50% 100%); animation: flag-wave 2.4s ease-in-out infinite; } .pl-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.18)); opacity: 0; animation: flag-shade 2.4s ease-in-out infinite; animation-delay: inherit; } @keyframes flag-wave { 0%, 100% { transform: translateY(calc(var(--amp) * -1)); } 50% { transform: translateY(var(--amp)); } } @keyframes flag-shade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .xmas-bulb { position: absolute; width: 12px; height: 22px; margin-left: -6px; transform-origin: 50% 0; } .xmas-bulb::before { content: ""; position: absolute; left: 3px; top: 0; width: 6px; height: 7px; border-radius: 2px; background: linear-gradient(90deg, #14532d, #4d7c0f, #14532d); } .xmas-bulb::after { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: radial-gradient(circle at 40% 35%, #fff 0 8%, var(--c) 45%); box-shadow: 0 0 8px 2px var(--c), 0 0 22px 6px var(--c); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 8px 2px var(--c), 0 0 22px 6px color-mix(in srgb, var(--c) 55%, transparent); } animation: bulb 1.7s ease-in-out infinite; animation-delay: inherit; } @keyframes bulb { 0%, 100% { opacity: 1; filter: brightness(1.15); } 50% { opacity: .38; filter: brightness(.6); box-shadow: 0 0 2px 0 var(--c); } } .pennant { position: absolute; width: 22px; height: 30px; margin-left: -11px; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); animation: pennant-swing 3s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); } @keyframes pennant-swing { 0%, 100% { transform: rotate(var(--rot, 0deg)) rotate(-7deg); } 50% { transform: rotate(var(--rot, 0deg)) rotate(7deg); } } .santa-flight { position: absolute; left: 0; top: 7%; width: clamp(240px, 36vw, 480px); animation: santa-fly 22s linear infinite; will-change: transform; } @keyframes santa-fly { 0% { transform: translate3d(-110%, 8vh, 0) rotate(-4deg); } 18% { transform: translate3d(18vw, 2vh, 0) rotate(-7deg); } 36% { transform: translate3d(42vw, 11vh, 0) rotate(2deg); } 54% { transform: translate3d(66vw, 3vh, 0) rotate(-5deg); } 72%, 100% { transform: translate3d(calc(100vw + 5%), 9vh, 0) rotate(-3deg); } } .santa-bob { animation: santa-bob 2.2s ease-in-out infinite; } @keyframes santa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .deer-leg-a, .deer-leg-b { transform-box: fill-box; transform-origin: 50% 0; animation: gallop .45s ease-in-out infinite alternate; } .deer-leg-b { animation-direction: alternate-reverse; } @keyframes gallop { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } } .santa-arm { transform-origin: 96px 58px; animation: wave-arm .9s ease-in-out infinite alternate; } @keyframes wave-arm { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } } .rudolph-glow { animation: nose-glow 1.1s ease-in-out infinite; } @keyframes nose-glow { 50% { opacity: .9; } } .santa-trail circle { animation: trail-twinkle 1.1s ease-in-out infinite; } @keyframes trail-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } } .hoho { animation: hoho 22s linear infinite; transform-origin: bottom left; } @keyframes hoho { 0%, 16% { opacity: 0; transform: scale(.5); } 20%, 34% { opacity: 1; transform: scale(1); } 38%, 100% { opacity: 0; transform: scale(.5); } } .znicz { position: relative; width: calc(var(--w) * var(--zs, 1)); height: calc(var(--w) * var(--zs, 1) * 1.9); } @media (max-width: 640px) { .znicz { --zs: .68; } .pumpkin { opacity: .9; } } .znicz-halo { position: absolute; left: 50%; top: 35%; width: 320%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--glass), transparent 62%); @supports (color: color-mix(in lab, red, red)) { background: radial-gradient(circle, color-mix(in srgb, var(--glass) 30%, rgba(255,190,90,.35)), transparent 62%); } animation: candle-glow 3s ease-in-out infinite; } .znicz-glass { position: absolute; left: 9%; right: 9%; top: 17%; bottom: 8%; border-radius: 10px 10px 6px 6px; overflow: hidden; opacity: .93; background: linear-gradient(90deg, var(--glass) 0%, var(--glass) 32%, var(--glass) 50%, var(--glass) 68%, var(--glass) 100%); @supports (color: color-mix(in lab, red, red)) { background: linear-gradient(90deg, color-mix(in srgb, var(--glass) 65%, #000) 0%, var(--glass) 32%, color-mix(in srgb, var(--glass) 55%, #fff) 50%, var(--glass) 68%, color-mix(in srgb, var(--glass) 65%, #000) 100%); } box-shadow: inset 0 0 14px rgba(0,0,0,.45), 0 0 26px var(--glass); @supports (color: color-mix(in lab, red, red)) { box-shadow: inset 0 0 14px rgba(0,0,0,.45), 0 0 26px color-mix(in srgb, var(--glass) 55%, transparent); } } .znicz-glass::after { content: ""; position: absolute; left: 50%; top: 10%; width: 140%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 25%, rgba(255,214,120,.85), transparent 60%); mix-blend-mode: screen; animation: candle-glow 2.6s ease-in-out infinite; } .znicz-flame { position: absolute; left: 50%; top: 9%; width: 28%; height: 32%; margin-left: -14%; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; transform-origin: 50% 100%; background: radial-gradient(ellipse at 50% 72%, #fff 0%, #fde68a 32%, #f59e0b 62%, rgba(245,158,11,0) 76%); filter: blur(.4px); animation: flame-flicker 1.3s ease-in-out infinite alternate; z-index: 1; } @keyframes flame-flicker { 0% { transform: scale(1,1) skewX(0); } 25% { transform: scale(.9,1.1) skewX(3deg); } 50% { transform: scale(1.06,.93) skewX(-2deg); } 75% { transform: scale(.95,1.07) skewX(1.5deg); } 100% { transform: scale(1.02,1) skewX(-1deg); } } @keyframes candle-glow { 0%, 100% { opacity: .9; } 50% { opacity: .55; } } .znicz-lid { position: absolute; left: 3%; right: 3%; top: 4%; height: 15%; background: linear-gradient(90deg, #7c6a3a, #f5e6a8 45%, #8b7536); clip-path: polygon(0 100%, 0 45%, 12% 45%, 12% 12%, 25% 12%, 25% 45%, 37% 45%, 37% 0, 63% 0, 63% 45%, 75% 45%, 75% 12%, 88% 12%, 88% 45%, 100% 45%, 100% 100%); } .znicz-base { position: absolute; left: 3%; right: 3%; bottom: 0; height: 9%; border-radius: 3px; background: linear-gradient(90deg, #6b5a2e, #e8d9a0 45%, #7c6a3a); } .pumpkin { height: auto; filter: drop-shadow(0 0 22px rgba(249,115,22,.45)); } .pumpkin-face { animation: pumpkin-flicker 3s infinite; filter: drop-shadow(0 0 6px #facc15); } @keyframes pumpkin-flicker { 0%, 100% { opacity: 1; } 10% { opacity: .7; } 12% { opacity: 1; } 40% { opacity: .85; } 70% { opacity: .6; } 72% { opacity: 1; } } .spider { position: absolute; top: 0; animation: spider-drop 10s ease-in-out infinite; } .spider::before { content: ""; position: absolute; bottom: 85%; left: 50%; width: 1px; height: 100vh; background: rgba(255,255,255,.4); } @keyframes spider-drop { 0%, 100% { transform: translateY(-60px); } 45%, 60% { transform: translateY(28vh); } 52% { transform: translateY(26vh); } } .fog { position: absolute; left: -50%; bottom: -6%; width: 200%; height: 38%; filter: blur(12px); animation: fog-drift 45s linear infinite; background: radial-gradient(ellipse at 15% 60%, rgba(200,190,255,.14), transparent 55%), radial-gradient(ellipse at 45% 55%, rgba(220,220,255,.11), transparent 50%), radial-gradient(ellipse at 75% 65%, rgba(190,180,240,.14), transparent 55%); } .fog-2 { bottom: -12%; animation-duration: 70s; animation-direction: reverse; opacity: .8; } @keyframes fog-drift { from { transform: translateX(0); } to { transform: translateX(25%); } } .bunny-run { position: absolute; bottom: 14px; left: 0; width: clamp(64px, 8vw, 104px); animation: bunny-run 17s linear infinite; } @keyframes bunny-run { 0% { transform: translateX(-20vw); } 62%, 100% { transform: translateX(112vw); } } .bunny-hop { transform-origin: 50% 100%; animation: bunny-hop .55s ease-in-out infinite; } @keyframes bunny-hop { 0%, 100% { transform: translateY(0) scale(1.08, .92); } 50% { transform: translateY(-38px) scale(.96, 1.05); } } .grass-blade { transform-box: fill-box; transform-origin: 50% 100%; animation: grass-sway 3s ease-in-out infinite alternate; } @keyframes grass-sway { from { transform: skewX(-7deg); } to { transform: skewX(7deg); } } .wave-layer { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: wave-move 9s linear infinite; } .wave-2 { animation-duration: 6s; animation-direction: reverse; height: 80%; } @keyframes wave-move { to { transform: translateX(-50%); } } .sun-rays { position: absolute; top: -32vmin; right: -32vmin; width: 84vmin; height: 84vmin; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(253,224,71,.16) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: spin 70s linear infinite; } .sun-core { position: absolute; top: -12vmin; right: -12vmin; width: 36vmin; height: 36vmin; border-radius: 50%; background: radial-gradient(circle, rgba(254,240,138,.6), rgba(251,191,36,.18) 50%, transparent 70%); animation: candle-glow 5s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .moon { position: absolute; top: 10%; right: 7%; width: clamp(64px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fefce8, #e9d5ff 60%, #c4b5fd); box-shadow: 0 0 40px 10px rgba(196,181,253,.35), 0 0 120px 40px rgba(139,92,246,.22); animation: moon-glow 6s ease-in-out infinite; } @keyframes moon-glow { 0%, 100% { box-shadow: 0 0 40px 10px rgba(196,181,253,.35), 0 0 120px 40px rgba(139,92,246,.22); } 50% { box-shadow: 0 0 60px 16px rgba(196,181,253,.5), 0 0 160px 60px rgba(139,92,246,.3); } } .comet { position: absolute; top: 6%; left: -25%; width: 280px; height: 3px; transform: rotate(14deg); animation: comet-fly 15s ease-in infinite; } .comet::before { content: ""; position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(to right, transparent, rgba(253,230,138,.85)); } .comet::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, #fff, #fde68a 40%, rgba(251,191,36,0) 70%); box-shadow: 0 0 30px 10px rgba(253,224,71,.55); } @keyframes comet-fly { 0% { transform: translate(0, 0) rotate(14deg); opacity: 0; } 5% { opacity: 1; } 45% { transform: translate(150vw, 36vw) rotate(14deg); opacity: 1; } 50%, 100% { transform: translate(150vw, 36vw) rotate(14deg); opacity: 0; } } .sticker { position: absolute; transform: translate(-50%, -50%); pointer-events: none; line-height: 1; z-index: 2; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); } .st-float { animation: st-float 4s ease-in-out infinite; } .st-spin { animation: st-spin 7s linear infinite; } .st-pulse { animation: st-pulse 1.8s ease-in-out infinite; } .st-wiggle { animation: st-wiggle 1.6s ease-in-out infinite; } .st-drift { animation: st-drift 9s ease-in-out infinite; } @keyframes st-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -62%); } } @keyframes st-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes st-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 50% { transform: translate(-50%, -50%) scale(1.28); opacity: 1; } } @keyframes st-wiggle { 0%, 100% { transform: translate(-50%, -50%) rotate(-13deg); } 50% { transform: translate(-50%, -50%) rotate(13deg); } } @keyframes st-drift { 0% { transform: translate(-50%, -50%); } 25% { transform: translate(-38%, -62%); } 50% { transform: translate(-62%, -54%); } 75% { transform: translate(-44%, -42%); } 100% { transform: translate(-50%, -50%); } } .sticker-stage { aspect-ratio: 300 / 420; } .sticker-stage-item { line-height: 1; border-radius: 12px; padding: 2px; transition: transform .12s ease; } .link-featured { background: linear-gradient(135deg, var(--lc, #fff), rgba(255,255,255,.06)) !important; @supports (color: color-mix(in lab, red, red)) { background: linear-gradient(135deg, color-mix(in srgb, var(--lc, #fff) 28%, transparent), rgba(255,255,255,.06)) !important; } border-color: var(--lc, #fff) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--lc, #fff) 55%, transparent) !important; } box-shadow: 0 0 26px -8px var(--lc, #fff); padding-top: .95rem; padding-bottom: .95rem; } .link-featured:hover { box-shadow: 0 14px 40px -10px var(--lc, #fff); transform: translateY(-3px) scale(1.02); } .link-icon-featured { box-shadow: 0 0 0 2px var(--lc, #fff), 0 0 22px -4px var(--lc, #fff); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lc, #fff) 55%, transparent), 0 0 22px -4px var(--lc, #fff); } } .mini-frame { background: #05050a; } .mini-scale { width: 370px; height: 620px; transform: scale(.4); transform-origin: top left; } .no-stagger > * { animation: none !important; } .no-enter { animation: none !important; } [data-holiday="aprilfools"] .af-wobble { display: inline-block; animation: af-wobble 9s ease-in-out infinite; } @keyframes af-wobble { 0%, 100% { transform: rotate(0); } 4% { transform: rotate(-3deg); } 8% { transform: rotate(3deg); } 12% { transform: rotate(0); } 60% { transform: rotate(0); } 64%, 70% { transform: rotate(180deg); } 74% { transform: rotate(0); } } .af-flip { display: inline-block; transform: scaleX(-1); transition: transform .4s; } .holiday-banner:hover .af-flip { transform: none; } @media (prefers-reduced-motion: reduce) { .santa-flight, .comet, .bunny-run, .spider { animation-duration: 60s; } .site-aurora > i { animation: none; } } html { scroll-behavior: smooth; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; } button, a { -webkit-tap-highlight-color: transparent; } @media (max-width: 640px) { .site-aurora > i { filter: blur(72px); opacity: .2; } .tilt-hover:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .tilt-hover:hover { transform: none; } } @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-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-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-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @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-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @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-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-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-duration { syntax: "*"; inherits: false; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { :root, :host { --h1: #8b5cf6; --h2: #ec4899; --h3: #06b6d4; } *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; --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-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --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-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-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-duration: initial; --tw-outline-style: solid; --angle: 0deg; } } }

Oliwier Kowalski