@layer base;
@layer tokens;
@layer utilities;
@layer content;
@layer base { @layer before, main, after; }
@layer tokens { @layer before, main, after; }
@layer utilities { @layer before, main, after; }
@layer content { @layer before, main, after; }

@layer base.main {

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji'; /* 1 */
	line-height: 1.15; /* 2 */
	-webkit-text-size-adjust: 100%; /* 3 */
	tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}


/* =========================================
   1. Base Box Model & Margins/Borders
   ========================================= */

/*
  1. Prevent padding and border from affecting element width.
  2. Remove default margins and padding.
  3. Reset all borders.
*/
*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/* =========================================
   2. Root Defaults & Typography Normalization
   ========================================= */

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the standard system font-family by default.
  5. Disable tap highlights on iOS.
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent; /* 5 */
}

/* Elll specific base typographic normalization */
body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Remove the default font size and weight for headings. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* Reset links to optimize for opt-in styling instead of opt-out. */
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/* Add the correct font weight in Edge and Safari. */
b,
strong {
  font-weight: bolder;
}

/*
  1. Use the standard `mono` font-family by default.
  2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
  font-feature-settings: normal; 
  font-variation-settings: normal; 
  font-size: 1em; /* 2 */
}

/* Add the correct font size in all browsers. */
small {
  font-size: 80%;
}

/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox.
  3. Reset the default border style to a 1px solid border.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/* Add the correct text decoration in Chrome, Edge, and Safari. */
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/* Elll Specific: Quotes */
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
}

/* =========================================
   3. Lists & Tables
   ========================================= */

/* Make lists unstyled by default. */
ol,
ul,
menu {
  list-style: none;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari.
  2. Correct table border color inheritance in all Chrome and Safari.
  3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/* =========================================
   4. Media Elements
   ========================================= */

/*
  1. Make replaced elements `display: block` by default.
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. */
img,
video {
  max-width: 100%;
  height: auto;
}

/* =========================================
   5. Forms & Interactive Elements
   ========================================= */

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/* Elll specific button behavior */
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}

/* Correct the inability to style the border radius in iOS Safari. */
button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/* Restore default font weight and indentation for select optgroups. */
:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/* Restore space after button. */
::file-selector-button {
  margin-inline-end: 4px;
}

/* Reset the default placeholder opacity in Firefox. */
::placeholder {
  opacity: 1;
}

/* Set the default placeholder color */
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/* Prevent resizing textareas horizontally by default. */
textarea {
  resize: vertical;
}

/* Remove the inner padding in Chrome and Safari on macOS. */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* 1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/
::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/* Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. */
::-webkit-datetime-edit {
  display: inline-flex;
}

/* Remove excess padding from pseudo-elements in date/time inputs */
::-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;
}

/* Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. */
::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/* Correct the cursor style of increment and decrement buttons in Safari. */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/* Add the correct vertical alignment in Chrome and Firefox. */
progress {
  vertical-align: baseline;
}

/* Add the correct display in Chrome and Safari. */
summary {
  display: list-item;
}

/* =========================================
   6. Accessibility & Visibility
   ========================================= */

/* Use the modern Firefox focus style for all focusable elements. */
:-moz-focusring {
  outline: auto;
}

/* Remove the additional `:invalid` styles in Firefox. */
:-moz-ui-invalid {
  box-shadow: none;
}

/* Make elements with the HTML hidden attribute stay hidden by default. */
[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/* Elll specific focus states */
:focus {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none; /* Chrome/Safari remove double outlines */
}


    html, body{
        background: white;
        color: black;
    }



.elementa-root.elementa-container {
    container-type: inline-size;
    container-name: elementa-root;
}

@property --elll-font-weight {
  syntax: "*";
  inherits: false;
}

@property --elll-tracking {
  syntax: "*";
  inherits: false;
}

@property --elll-leading {
  syntax: "*";
  inherits: false;
}
}

@layer tokens.main {

:root {
  --vh-unit: 1vh;
  --vw-unit: 1vw;
  --lvh-unit: 1lvh;
  --lvw-unit: 1lvw;
  --svh-unit: 1svh;
  --svw-unit: 1svw;
  --dvh-unit: 1dvh;
  --dvw-unit: 1dvw;
}


:root {
  --spacing: 0.25rem;
}


:root {
  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
}

:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: consolas, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:root {
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

:root {
  --color-red-100: rgb(137 0 0);
  --color-red-200: rgb(181 0 24);
  --color-red-300: rgb(225 0 60);
  --color-red-400: rgb(255 72 95);
  --color-red-500: rgb(255 117 132);
  --color-red: var(--color-red-300);
  --color-orange-100: rgb(153 0 0);
  --color-orange-200: rgb(194 55 0);
  --color-orange-300: rgb(237 96 0);
  --color-orange-400: rgb(255 135 65);
  --color-orange-500: rgb(255 175 107);
  --color-yellow-100: rgb(105 42 0);
  --color-yellow-200: rgb(143 76 0);
  --color-yellow-300: rgb(181 112 0);
  --color-yellow-400: rgb(221 149 61);
  --color-yellow-500: rgb(255 187 102);
  --color-green-100: rgb(0 89 0);
  --color-green-200: rgb(0 125 0);
  --color-green-300: rgb(0 163 32);
  --color-green-400: rgb(70 202 77);
  --color-green-500: rgb(114 242 117);
  --color-cyan-100: rgb(0 83 59);
  --color-cyan-200: rgb(0 118 91);
  --color-cyan-300: rgb(0 155 126);
  --color-cyan-400: rgb(70 193 162);
  --color-cyan-500: rgb(114 233 200);
  --color-blue-100: rgb(0 61 161);
  --color-blue-200: rgb(0 99 201);
  --color-blue-300: rgb(0 137 242);
  --color-blue-400: rgb(66 176 255);
  --color-blue-500: rgb(109 216 255);
  --color-violet-100: rgb(81 0 151);
  --color-violet-200: rgb(113 0 191);
  --color-violet-300: rgb(148 53 233);
  --color-violet-400: rgb(185 98 255);
  --color-violet-500: rgb(223 138 255);
  --color-pink-100: rgb(118 0 123);
  --color-pink-200: rgb(159 0 161);
  --color-pink-300: rgb(200 0 201);
  --color-pink-400: rgb(242 73 242);
  --color-pink-500: rgb(255 117 255);
  --color-rose-100: rgb(136 0 74);
  --color-rose-200: rgb(179 0 107);
  --color-rose-300: rgb(223 9 143);
  --color-rose-400: rgb(255 75 180);
  --color-rose-500: rgb(255 118 219);
  --color-gray-100: rgb(52 52 52);
  --color-gray-200: rgb(84 84 84);
  --color-gray-300: rgb(118 118 118);
  --color-gray-400: rgb(154 154 154);
  --color-gray-500: rgb(191 191 191);
  --color-dark-100: rgb(19 19 19);
  --color-dark-200: rgb(26 26 26);
  --color-dark-300: rgb(33 33 33);
  --color-dark-400: rgb(40 40 40);
  --color-dark-500: rgb(47 47 47);
  --color-light-100: rgb(224 224 224);
  --color-light-200: rgb(232 232 232);
  --color-light-300: rgb(240 240 240);
  --color-light-400: rgb(248 248 248);
  --color-light-500: rgb(255 255 255);
  --color-primary-100: rgb(0 61 161);
  --color-primary-200: rgb(0 99 201);
  --color-primary-300: rgb(0 137 242);
  --color-primary-400: rgb(66 176 255);
  --color-primary-500: rgb(109 216 255);
  --color-fg-100: rgb(237 237 237);
  --color-fg-200: rgb(196 196 196);
  --color-fg-300: rgb(133 133 133);
  --color-fg-400: rgb(92 92 92);
  --color-fg-500: rgb(47 47 47);
  --color-bg-000: rgb(255 255 255 / 1);
  --color-bg-100: rgb(250 250 250);
  --color-bg-200: rgb(238 238 238);
  --color-bg-300: rgb(231 231 231);
  --color-bg-400: rgb(231 231 231 / 1);
  --color-pm: rgb(0 137 242);
  --color-fg: var(--color-fg-500);
  --color-bg: var(--color-bg-000);
  --color-green: var(--color-green-300);
  --color-yellow: var(--color-yellow-300);
  --color-blue: var(--color-blue-300);
  --color-orange: var(--color-orange-300);
  --color-cyan: var(--color-cyan-300);
  --color-violet: var(--color-violet-300);
  --color-pink: var(--color-pink-300);
  --color-rose: var(--color-rose-300);
  --color-gray: var(--color-gray-300);
  --color-dark: rgb(33 33 33);
  --color-light: rgb(240 240 240);
  --color-white: rgb(255 255 255 / 1);
  --color-black: rgb(0 0 0 / 1);
  @media (prefers-color-scheme: dark) {
    --color-red-100: rgb(166 0 0);
    --color-red-200: rgb(210 0 38);
    --color-red-300: rgb(255 40 74);
    --color-red-400: rgb(255 93 110);
    --color-red-500: rgb(255 136 147);
    --color-orange-100: rgb(164 40 0);
    --color-orange-200: rgb(205 81 0);
    --color-orange-300: rgb(247 120 0);
    --color-orange-400: rgb(255 159 69);
    --color-orange-500: rgb(255 199 112);
    --color-yellow-100: rgb(168 98 0);
    --color-yellow-200: rgb(208 135 0);
    --color-yellow-300: rgb(248 173 0);
    --color-yellow-400: rgb(255 212 77);
    --color-yellow-500: rgb(255 240 109);
    --color-green-100: rgb(0 152 68);
    --color-green-200: rgb(1 160 73);
    --color-green-300: rgb(0 167 74);
    --color-green-400: rgb(0 181 81);
    --color-green-500: rgb(0 194 87);
    --color-cyan-100: rgb(0 158 108);
    --color-cyan-200: rgb(0 197 144);
    --color-cyan-300: rgb(1 237 181);
    --color-cyan-400: rgb(92 255 220);
    --color-cyan-500: rgb(109 255 233);
    --color-blue-100: rgb(0 116 176);
    --color-blue-200: rgb(16 137 205);
    --color-blue-300: rgb(0 156 235);
    --color-blue-400: rgb(90 181 246);
    --color-blue-500: rgb(114 192 250);
    --color-violet-100: rgb(115 22 173);
    --color-violet-200: rgb(151 69 214);
    --color-violet-300: rgb(188 109 255);
    --color-violet-400: rgb(227 148 255);
    --color-violet-500: rgb(255 188 255);
    --color-pink-100: rgb(169 0 173);
    --color-pink-200: rgb(211 0 213);
    --color-pink-300: rgb(254 61 254);
    --color-pink-400: rgb(255 110 255);
    --color-pink-500: rgb(255 154 255);
    --color-rose-100: rgb(168 0 104);
    --color-rose-200: rgb(211 0 140);
    --color-rose-300: rgb(255 67 177);
    --color-rose-400: rgb(255 111 216);
    --color-rose-500: rgb(255 153 255);
    --color-gray-100: rgb(80 80 80);
    --color-gray-200: rgb(113 113 113);
    --color-gray-300: rgb(149 149 149);
    --color-gray-400: rgb(186 186 186);
    --color-gray-500: rgb(225 225 225);
    --color-primary-100: rgb(0 116 176);
    --color-primary-200: rgb(16 137 205);
    --color-primary-300: rgb(0 156 235);
    --color-primary-400: rgb(90 181 246);
    --color-primary-500: rgb(114 192 250);
    --color-fg-100: rgb(48 48 48);
    --color-fg-200: rgb(77 77 77);
    --color-fg-300: rgb(119 119 119);
    --color-fg-400: rgb(175 175 175);
    --color-fg-500: rgb(249 249 249);
    --color-bg-000: rgb(27 27 27);
    --color-bg-100: rgb(32 32 32);
    --color-bg-200: rgb(49 49 49);
    --color-bg-300: rgb(65 65 65);
    --color-bg-400: rgb(74 74 74);
    --color-pm: rgb(0 156 235);
  }
}

:root {
  --spacing: 0.25rem;
}

:root {
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}

:root {
  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
}

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;
}

:root {
  --text-xs--line-height: 1.3333333333333333;
  --text-sm--line-height: 1.4285714285714286;
  --text-base--line-height: 1.5;
  --text-lg--line-height: 1.5555555555555556;
  --text-xl--line-height: 1.4;
  --text-2xl--line-height: 1.3333333333333333;
  --text-3xl--line-height: 1.2;
  --text-4xl--line-height: 1.1111111111111112;
  --text-5xl--line-height: 1;
  --text-6xl--line-height: 1;
  --text-7xl--line-height: 1;
  --text-8xl--line-height: 1;
  --text-9xl--line-height: 1;
}

:root {
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

:root {
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
}

:root {
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
}

:root {
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

:root {
  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
}

:root {
  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
}

:root {
  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
  --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
  --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
}

:root {
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
}

:root {
  --perspective-dramatic: 100px;
  --perspective-near: 300px;
  --perspective-normal: 500px;
  --perspective-midrange: 800px;
  --perspective-distant: 1200px;
}

:root {
  --aspect-video: 16/9;
}

:root {
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;
  --animate-in: enter var(--elll-animation-duration, var(--elll-duration, 150ms)) var(--elll-ease, ease) var(--elll-animation-delay, 0s) var(--elll-animation-iteration-count, 1) var(--elll-animation-direction, normal) var(--elll-animation-fill-mode, none);
  --animate-out: exit var(--elll-animation-duration, var(--elll-duration, 150ms)) var(--elll-ease, ease) var(--elll-animation-delay, 0s) var(--elll-animation-iteration-count, 1) var(--elll-animation-direction, normal) var(--elll-animation-fill-mode, none);
  --animate-accordion-down: accordion-down var(--elll-animation-duration, var(--elll-duration, 200ms)) var(--elll-ease, ease-out) var(--elll-animation-delay, 0s) var(--elll-animation-iteration-count, 1) var(--elll-animation-direction, normal) var(--elll-animation-fill-mode, none);
  --animate-accordion-up: accordion-up var(--elll-animation-duration, var(--elll-duration, 200ms)) var(--elll-ease, ease-out) var(--elll-animation-delay, 0s) var(--elll-animation-iteration-count, 1) var(--elll-animation-direction, normal) var(--elll-animation-fill-mode, none);
  --animate-collapsible-down: collapsible-down var(--elll-animation-duration, var(--elll-duration, 200ms)) var(--elll-ease, ease-out) var(--elll-animation-delay, 0s) var(--elll-animation-iteration-count, 1) var(--elll-animation-direction, normal) var(--elll-animation-fill-mode, none);
  --animate-collapsible-up: collapsible-up var(--elll-animation-duration, var(--elll-duration, 200ms)) var(--elll-ease, ease-out) var(--elll-animation-delay, 0s) var(--elll-animation-iteration-count, 1) var(--elll-animation-direction, normal) var(--elll-animation-fill-mode, none);
  --animate-caret-blink: caret-blink 1s ease-in-out infinite;
}
}

@layer utilities.main {
.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}

.py-12 {
  padding-block: calc(var(--spacing) * 12);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

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

.justify-center {
  justify-content: center;
}

.min-h-screen {
  min-height: calc(100 * var(--vh-unit));
}

.font-mono {
  font-family: var(--font-mono);
}

.md\:p-12 {
  @container elementa-root (width >= 48rem) {
    padding: calc(var(--spacing) * 12);
  }
}

.gap-8 {
  column-gap: calc(var(--spacing) * 8);
  row-gap: calc(var(--spacing) * 8);
}

.w-full {
  width: 100%;
}

.text-center {
  text-align: center;
}

.max-w-500px {
  max-width: 500px;
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--elll-leading, var(--text-3xl--line-height));
}

.font-bold {
  --elll-font-weight: 700;
  font-weight: 700;
}

.tracking-tight {
  --elll-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}

.gap-6 {
  column-gap: calc(var(--spacing) * 6);
  row-gap: calc(var(--spacing) * 6);
}

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

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--elll-leading, var(--text-lg--line-height));
}

.static {
  position: static;
}

.text-pm {
  color: var(--color-pm);
}

.hover\:underline {
  &:hover {
    text-decoration-line: underline;
  }
}

.gap-2 {
  column-gap: calc(var(--spacing) * 2);
  row-gap: calc(var(--spacing) * 2);
}

.font-medium {
  --elll-font-weight: 500;
  font-weight: 500;
}

.font-normal {
  --elll-font-weight: 400;
  font-weight: 400;
}
}