cetec-design-system 0.0.20 → 0.0.21

package/styled-system/styles.css

@@ -1,2184 +0,0 @@
-@layer reset, base, tokens, recipes, utilities;
-
-@layer reset{
-  html,:host {
-    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -moz-tab-size: 4;
-    tab-size: 4;
-    -webkit-tap-highlight-color: transparent;
-    line-height: 1.5;
-    font-family: var(--global-font-body, var(--font-fallback));
-}
-
-  *,::before,::after,::backdrop,::file-selector-button {
-    margin: 0px;
-    padding: 0px;
-    box-sizing: border-box;
-    border-width: 0px;
-    border-style: solid;
-    border-color: var(--global-color-border, currentColor);
-}
-
-  hr {
-    height: 0px;
-    color: inherit;
-    border-top-width: 1px;
-}
-
-  body {
-    height: 100%;
-    line-height: inherit;
-}
-
-  img {
-    border-style: none;
-}
-
-  img,svg,video,canvas,audio,iframe,embed,object {
-    display: block;
-    vertical-align: middle;
-}
-
-  img,video {
-    max-width: 100%;
-    height: auto;
-}
-
-  h1,h2,h3,h4,h5,h6 {
-    text-wrap: balance;
-    font-size: inherit;
-    font-weight: inherit;
-}
-
-  p,h1,h2,h3,h4,h5,h6 {
-    overflow-wrap: break-word;
-}
-
-  ol,ul,menu {
-    list-style: none;
-}
-
-  button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {
-    appearance: button;
-    -webkit-appearance: button;
-}
-
-  button,input,optgroup,select,textarea,::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    background: var(--colors-transparent);
-}
-
-  ::placeholder {
-    opacity: 1;
-    --placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent);
-    color: var(--global-color-placeholder, var(--placeholder-fallback));
-}
-
-  textarea {
-    resize: vertical;
-}
-
-  table {
-    text-indent: 0px;
-    border-collapse: collapse;
-    border-color: inherit;
-}
-
-  summary {
-    display: list-item;
-}
-
-  small {
-    font-size: 80%;
-}
-
-  sub,sup {
-    position: relative;
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-}
-
-  sub {
-    bottom: -0.25em;
-}
-
-  sup {
-    top: -0.5em;
-}
-
-  dialog {
-    padding: 0px;
-}
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-}
-
-  abbr:where([title]) {
-    text-decoration: underline dotted;
-}
-
-  b,strong {
-    font-weight: bolder;
-}
-
-  code,kbd,samp,pre {
-    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
-    font-feature-settings: normal;
-    font-variation-settings: normal;
-    font-family: var(--global-font-mono, var(--font-mono-fallback));
-    font-size: 1em;
-}
-
-  progress {
-    vertical-align: baseline;
-}
-
-  ::-webkit-search-decoration,::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-}
-
-  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
-    height: auto;
-}
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-}
-
-  :-moz-focusring {
-    outline: auto;
-}
-
-  [hidden]:where(:not([hidden='until-found'])) {
-    display: none !important;
-}
-}
-
-@layer base{
-  :root {
-    --made-with-panda: '🐼';
-}
-
-  *,::before,::after,::backdrop {
-    --blur: /*-*/ /*-*/;
-    --brightness: /*-*/ /*-*/;
-    --contrast: /*-*/ /*-*/;
-    --grayscale: /*-*/ /*-*/;
-    --hue-rotate: /*-*/ /*-*/;
-    --invert: /*-*/ /*-*/;
-    --saturate: /*-*/ /*-*/;
-    --sepia: /*-*/ /*-*/;
-    --drop-shadow: /*-*/ /*-*/;
-    --backdrop-blur: /*-*/ /*-*/;
-    --backdrop-brightness: /*-*/ /*-*/;
-    --backdrop-contrast: /*-*/ /*-*/;
-    --backdrop-grayscale: /*-*/ /*-*/;
-    --backdrop-hue-rotate: /*-*/ /*-*/;
-    --backdrop-invert: /*-*/ /*-*/;
-    --backdrop-opacity: /*-*/ /*-*/;
-    --backdrop-saturate: /*-*/ /*-*/;
-    --backdrop-sepia: /*-*/ /*-*/;
-    --gradient-from-position: /*-*/ /*-*/;
-    --gradient-to-position: /*-*/ /*-*/;
-    --gradient-via-position: /*-*/ /*-*/;
-    --scroll-snap-strictness: proximity;
-    --border-spacing-x: 0;
-    --border-spacing-y: 0;
-    --translate-x: 0;
-    --translate-y: 0;
-    --rotate: 0;
-    --rotate-x: 0;
-    --rotate-y: 0;
-    --skew-x: 0;
-    --skew-y: 0;
-    --scale-x: 1;
-    --scale-y: 1;
-}
-
-  *,*::before,*::after {
-    box-sizing: border-box;
-    margin: var(--spacing-0);
-    padding: var(--spacing-0);
-}
-
-  *:is(:focus-visible, [data-focus-visible]),*::before:is(:focus-visible, [data-focus-visible]),*::after:is(:focus-visible, [data-focus-visible]) {
-    outline-color: var(--colors-slate-90);
-}
-
-  .dark *:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] *:is(:focus-visible, [data-focus-visible]),.dark *::before:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] *::before:is(:focus-visible, [data-focus-visible]),.dark *::after:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] *::after:is(:focus-visible, [data-focus-visible]) {
-    outline-color: var(--colors-slate-0);
-}
-
-  html {
-    --global-font-heading: var(--fonts-heading);
-    --global-font-body: var(--fonts-body);
-    --global-font-mono: var(--fonts-mono);
-}
-
-  body {
-    font-variation-settings: "CRSV" 0, "CASL" 0;
-    background: var(--colors-slate-0);
-    color: var(--colors-slate-60);
-    font-family: var(--fonts-body);
-    font-weight: var(--font-weights-normal);
-}
-
-  .dark body,[data-color-mode=dark] body {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-30);
-}
-
-  h1,h2,h3,h4,h5,h6 {
-    color: var(--colors-slate-90);
-    font-weight: var(--font-weights-black);
-    line-height: calc(1em + 0.5rem);
-}
-
-  .dark h1,[data-color-mode=dark] h1,.dark h2,[data-color-mode=dark] h2,.dark h3,[data-color-mode=dark] h3,.dark h4,[data-color-mode=dark] h4,.dark h5,[data-color-mode=dark] h5,.dark h6,[data-color-mode=dark] h6 {
-    color: var(--colors-slate-5);
-}
-
-  p {
-    margin-bottom: 0.5rem;
-}
-
-  b,strong {
-    font-weight: var(--font-weights-bold);
-}
-
-  i,em {
-    font-variation-settings: "CRSV" 0, "CASL" 0, "slnt" -15;
-    font-style: italic;
-}
-
-  u {
-    text-decoration: underline;
-}
-
-  code,kbd,samp,pre {
-    font-family: var(--fonts-mono);
-    font-size: 1em;
-}
-
-  table {
-    border-color: currentcolor;
-}
-
-  button,input,optgroup,select,textarea {
-    margin: var(--spacing-0);
-    font-family: var(--fonts-body);
-    font-size: 100%;
-    line-height: calc(1em + 0.5rem);
-}
-
-  button,[type="button"],[type="reset"],[type="submit"] {
-    -webkit-appearance: button;
-}
-
-  _disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-  legend {
-    padding: var(--spacing-0);
-}
-
-  progress {
-    vertical-align: baseline;
-}
-
-  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
-    height: auto;
-}
-
-  [type="search"] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-}
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-}
-
-  summary {
-    display: list-item;
-}
-}
-
-@layer tokens{
-  :where(:root, :host) {
-    --aspect-ratios-square: 1 / 1;
-    --aspect-ratios-landscape: 4 / 3;
-    --aspect-ratios-portrait: 3 / 4;
-    --aspect-ratios-wide: 16 / 9;
-    --aspect-ratios-ultrawide: 18 / 5;
-    --aspect-ratios-golden: 1.618 / 1;
-    --borders-none: none;
-    --shadows-low: 0 0 2px var(--colors-utility-shadow-color), 0 1px 1px var(--colors-utility-shadow-color), 0 2px 3px var(--colors-utility-shadow-color);
-    --shadows-medium: 0 0 2px var(--colors-utility-shadow-color), 0 2px 2px var(--colors-utility-shadow-color), 0 4px 4px var(--colors-utility-shadow-color), 0 8px 8px var(--colors-utility-shadow-color);
-    --shadows-high: 0 0 2px var(--colors-utility-shadow-color), 0 2px 4px var(--colors-utility-shadow-color), 0 6px 8px 1px var(--colors-utility-shadow-color), 0 14px 16px 2px var(--colors-utility-shadow-color);
-    --shadows-inset: inset 0 0 2px var(--colors-utility-shadow-color), inset 0 2px 1px var(--colors-utility-shadow-color), inset 0 3px 2px var(--colors-utility-shadow-color);
-    --easings-default: cubic-bezier(0.4, 0, 0.2, 1);
-    --easings-linear: linear;
-    --easings-in: cubic-bezier(0.4, 0, 1, 1);
-    --easings-out: cubic-bezier(0, 0, 0.2, 1);
-    --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --durations-fastest: 50ms;
-    --durations-faster: 100ms;
-    --durations-fast: 150ms;
-    --durations-normal: 200ms;
-    --durations-slow: 300ms;
-    --durations-slower: 400ms;
-    --durations-slowest: 500ms;
-    --letter-spacings-tighter: -0.05em;
-    --letter-spacings-tight: -0.025em;
-    --letter-spacings-normal: 0em;
-    --letter-spacings-wide: 0.025em;
-    --letter-spacings-wider: 0.05em;
-    --letter-spacings-widest: 0.1em;
-    --line-heights-none: 1;
-    --line-heights-tight: 1em + 0.25rem;
-    --line-heights-default: 1em + 0.5rem;
-    --line-heights-loose: 1em + 0.75rem;
-    --blurs-sm: var(--sizes-4);
-    --blurs-base: var(--sizes-8);
-    --blurs-md: var(--sizes-12);
-    --blurs-lg: var(--sizes-16);
-    --blurs-xl: var(--sizes-24);
-    --blurs-2xl: var(--sizes-40);
-    --blurs-3xl: var(--sizes-64);
-    --animations-spin: spin 1s linear infinite;
-    --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-    --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --animations-bounce: bounce 1s infinite;
-    --colors-transparent: transparent;
-    --colors-current: currentColor;
-    --colors-slate-0: #FFFFFF;
-    --colors-slate-1: #FAFAFA;
-    --colors-slate-2: #F9F8F6;
-    --colors-slate-3: #F7F5F3;
-    --colors-slate-4: #F6F3EF;
-    --colors-slate-5: #F4F0EB;
-    --colors-slate-10: #E3E1DE;
-    --colors-slate-20: #CBCAC8;
-    --colors-slate-30: #AFADAB;
-    --colors-slate-40: #939190;
-    --colors-slate-50: #767675;
-    --colors-slate-60: #5F5F5E;
-    --colors-slate-70: #474747;
-    --colors-slate-80: #2E2E2E;
-    --colors-slate-90: #1E1E1E;
-    --colors-slate-100: #000000;
-    --colors-gold-1: #FFFCF4;
-    --colors-gold-2: #FFF9E9;
-    --colors-gold-3: #FEF6DE;
-    --colors-gold-4: #FEF3D3;
-    --colors-gold-5: #FEF0C8;
-    --colors-gold-10: #FFE396;
-    --colors-gold-20: #FFBE2E;
-    --colors-gold-30: #E5A000;
-    --colors-gold-40: #C2850C;
-    --colors-gold-50: #936F38;
-    --colors-gold-60: #7A591A;
-    --colors-gold-70: #5C410A;
-    --colors-gold-80: #3B2B15;
-    --colors-gold-90: #1E1100;
-    --colors-orange-5: #FFF3F2;
-    --colors-orange-10: #FDE0DB;
-    --colors-orange-20: #FDB8AE;
-    --colors-orange-30: #FF8D7B;
-    --colors-orange-40: #FB5A47;
-    --colors-orange-50: #E52207;
-    --colors-orange-60: #B50909;
-    --colors-orange-70: #8B0A03;
-    --colors-orange-80: #5C1111;
-    --colors-orange-90: #200100;
-    --colors-tan-5: #F5F0E6;
-    --colors-tan-10: #F1E5CD;
-    --colors-tan-20: #DEC69A;
-    --colors-tan-30: #C7A97B;
-    --colors-tan-40: #AD8B65;
-    --colors-tan-50: #8E704F;
-    --colors-tan-60: #6B5947;
-    --colors-tan-70: #4D4438;
-    --colors-tan-80: #322D26;
-    --colors-tan-90: #191714;
-    --colors-cyan-5: #E7F6F8;
-    --colors-cyan-10: #CCECF2;
-    --colors-cyan-20: #99DEEA;
-    --colors-cyan-30: #5DC0D1;
-    --colors-cyan-40: #449DAC;
-    --colors-cyan-50: #168092;
-    --colors-cyan-60: #2A646D;
-    --colors-cyan-70: #2C4A4E;
-    --colors-cyan-80: #203133;
-    --colors-cyan-90: #111819;
-    --colors-blue-5: #E8F5FF;
-    --colors-blue-10: #CFE8FF;
-    --colors-blue-20: #A1D3FF;
-    --colors-blue-30: #58B4FF;
-    --colors-blue-40: #2491FF;
-    --colors-blue-50: #0076DA;
-    --colors-blue-60: #005EA2;
-    --colors-blue-70: #0B4778;
-    --colors-blue-80: #112F4E;
-    --colors-blue-90: #11181D;
-    --colors-green-1: #F8FEF4;
-    --colors-green-2: #F1FDE9;
-    --colors-green-3: #EBFBDD;
-    --colors-green-4: #E4FAD2;
-    --colors-green-5: #DDF9C7;
-    --colors-green-10: #C5EE93;
-    --colors-green-20: #98D035;
-    --colors-green-30: #7FB135;
-    --colors-green-40: #719F2A;
-    --colors-green-50: #538200;
-    --colors-green-60: #466C04;
-    --colors-green-70: #2F4A0B;
-    --colors-green-80: #243413;
-    --colors-green-90: #0D1400;
-    --colors-yellow-1: #FFFDF3;
-    --colors-yellow-2: #FFFBE7;
-    --colors-yellow-3: #FFF9DA;
-    --colors-yellow-4: #FFF7CE;
-    --colors-yellow-5: #FFF5C2;
-    --colors-yellow-10: #FEE685;
-    --colors-yellow-20: #FACE00;
-    --colors-yellow-30: #DDAA01;
-    --colors-yellow-40: #B38C00;
-    --colors-yellow-50: #947100;
-    --colors-yellow-60: #776017;
-    --colors-yellow-70: #5C4809;
-    --colors-yellow-80: #422D19;
-    --colors-yellow-90: #1C0B00;
-    --colors-red-1: #FFF9FA;
-    --colors-red-2: #FFF3F5;
-    --colors-red-3: #FFEEF0;
-    --colors-red-4: #FFE8EB;
-    --colors-red-5: #FFE2E6;
-    --colors-red-10: #FFB1B8;
-    --colors-red-20: #FF7F8A;
-    --colors-red-30: #FF4D5B;
-    --colors-red-40: #FE1D2D;
-    --colors-red-50: #E50513;
-    --colors-red-60: #B3000E;
-    --colors-red-70: #810009;
-    --colors-red-80: #4F0004;
-    --colors-red-90: #200000;
-    --fonts-heading: 'Ruda Variable', Source Sans, Geneva, Tahoma, Verdana, sans-serif;
-    --fonts-body: 'Recursive Variable', Geneva, Tahoma, Verdana, sans-serif;
-    --fonts-mono: 'Recursive Variable', Andale Mono, monaco, Consolas, Lucida Console, monospace;
-    --font-sizes-12: 0.75rem;
-    --font-sizes-14: 0.875rem;
-    --font-sizes-16: 1rem;
-    --font-sizes-20: 1.25rem;
-    --font-sizes-24: 1.5rem;
-    --font-sizes-32: 2rem;
-    --font-sizes-40: 2.5rem;
-    --font-sizes-48: 3rem;
-    --font-sizes-64: 4rem;
-    --font-sizes-72: 4.5rem;
-    --font-sizes-80: 5rem;
-    --font-sizes-96: 6rem;
-    --font-weights-light: 300;
-    --font-weights-normal: 400;
-    --font-weights-medium: 500;
-    --font-weights-bold: 700;
-    --font-weights-black: 900;
-    --sizes-0: 0;
-    --sizes-1: 0.0625rem;
-    --sizes-2: 0.125rem;
-    --sizes-3: 0.1875rem;
-    --sizes-4: 0.25rem;
-    --sizes-5: 0.3125rem;
-    --sizes-6: 0.375rem;
-    --sizes-7: 0.4375rem;
-    --sizes-8: 0.5rem;
-    --sizes-9: 0.5625rem;
-    --sizes-10: 0.625rem;
-    --sizes-12: 0.75rem;
-    --sizes-14: 0.875rem;
-    --sizes-16: 1rem;
-    --sizes-20: 1.25rem;
-    --sizes-22: 1.375rem;
-    --sizes-24: 1.5rem;
-    --sizes-32: 2rem;
-    --sizes-40: 2.5rem;
-    --sizes-48: 3rem;
-    --sizes-56: 3.5rem;
-    --sizes-64: 4rem;
-    --sizes-72: 4.5rem;
-    --sizes-80: 5rem;
-    --sizes-96: 6rem;
-    --sizes-full: 100%;
-    --sizes-min: min-content;
-    --sizes-max: max-content;
-    --sizes-fit: fit-content;
-    --sizes-xs: 20rem;
-    --sizes-sm: 24rem;
-    --sizes-md: 28rem;
-    --sizes-lg: 32rem;
-    --sizes-xl: 36rem;
-    --sizes-2xl: 42rem;
-    --sizes-3xl: 48rem;
-    --sizes-4xl: 56rem;
-    --sizes-5xl: 64rem;
-    --sizes-6xl: 72rem;
-    --sizes-7xl: 80rem;
-    --sizes-8xl: 90rem;
-    --sizes-prose: 65ch;
-    --sizes-breakpoint-xs: 480px;
-    --sizes-breakpoint-sm: 640px;
-    --sizes-breakpoint-md: 768px;
-    --sizes-breakpoint-lg: 1024px;
-    --sizes-breakpoint-xl: 1280px;
-    --sizes-breakpoint-2xl: 1536px;
-    --numeric-sizes-0: 0;
-    --numeric-sizes-1: 0.0625rem;
-    --numeric-sizes-2: 0.125rem;
-    --numeric-sizes-3: 0.1875rem;
-    --numeric-sizes-4: 0.25rem;
-    --numeric-sizes-5: 0.3125rem;
-    --numeric-sizes-6: 0.375rem;
-    --numeric-sizes-7: 0.4375rem;
-    --numeric-sizes-8: 0.5rem;
-    --numeric-sizes-9: 0.5625rem;
-    --numeric-sizes-10: 0.625rem;
-    --numeric-sizes-12: 0.75rem;
-    --numeric-sizes-14: 0.875rem;
-    --numeric-sizes-16: 1rem;
-    --numeric-sizes-20: 1.25rem;
-    --numeric-sizes-22: 1.375rem;
-    --numeric-sizes-24: 1.5rem;
-    --numeric-sizes-32: 2rem;
-    --numeric-sizes-40: 2.5rem;
-    --numeric-sizes-48: 3rem;
-    --numeric-sizes-56: 3.5rem;
-    --numeric-sizes-64: 4rem;
-    --numeric-sizes-72: 4.5rem;
-    --numeric-sizes-80: 5rem;
-    --numeric-sizes-96: 6rem;
-    --spacing-0: 0;
-    --spacing-1: 0.0625rem;
-    --spacing-2: 0.125rem;
-    --spacing-3: 0.1875rem;
-    --spacing-4: 0.25rem;
-    --spacing-5: 0.3125rem;
-    --spacing-6: 0.375rem;
-    --spacing-7: 0.4375rem;
-    --spacing-8: 0.5rem;
-    --spacing-9: 0.5625rem;
-    --spacing-10: 0.625rem;
-    --spacing-12: 0.75rem;
-    --spacing-14: 0.875rem;
-    --spacing-16: 1rem;
-    --spacing-20: 1.25rem;
-    --spacing-22: 1.375rem;
-    --spacing-24: 1.5rem;
-    --spacing-32: 2rem;
-    --spacing-40: 2.5rem;
-    --spacing-48: 3rem;
-    --spacing-56: 3.5rem;
-    --spacing-64: 4rem;
-    --spacing-72: 4.5rem;
-    --spacing-80: 5rem;
-    --spacing-96: 6rem;
-    --spacing-full: 100%;
-    --spacing-min: min-content;
-    --spacing-max: max-content;
-    --spacing-fit: fit-content;
-    --spacing-xs: 20rem;
-    --spacing-sm: 24rem;
-    --spacing-md: 28rem;
-    --spacing-lg: 32rem;
-    --spacing-xl: 36rem;
-    --spacing-2xl: 42rem;
-    --spacing-3xl: 48rem;
-    --spacing-4xl: 56rem;
-    --spacing-5xl: 64rem;
-    --spacing-6xl: 72rem;
-    --spacing-7xl: 80rem;
-    --spacing-8xl: 90rem;
-    --spacing-prose: 65ch;
-    --radii-0: 0;
-    --radii-1: 0.0625rem;
-    --radii-2: 0.125rem;
-    --radii-3: 0.188rem;
-    --radii-4: 0.25rem;
-    --radii-8: 0.5rem;
-    --radii-16: 1rem;
-    --radii-100: 100%;
-    --breakpoints-xs: 480px;
-    --breakpoints-sm: 640px;
-    --breakpoints-md: 768px;
-    --breakpoints-lg: 1024px;
-    --breakpoints-xl: 1280px;
-    --breakpoints-2xl: 1536px;
-    --colors-brand-slate: var(--colors-slate-90);
-    --colors-brand-gold: var(--colors-gold-20);
-    --colors-success-lighter: var(--colors-green-2);
-    --colors-success-light: var(--colors-green-10);
-    --colors-success-default: var(--colors-green-40);
-    --colors-success-dark: var(--colors-green-60);
-    --colors-success-darker: var(--colors-green-70);
-    --colors-warning-lighter: var(--colors-yellow-2);
-    --colors-warning-light: var(--colors-yellow-10);
-    --colors-warning-default: var(--colors-yellow-30);
-    --colors-warning-dark: var(--colors-yellow-60);
-    --colors-warning-darker: var(--colors-yellow-70);
-    --colors-error-lighter: var(--colors-red-2);
-    --colors-error-light: var(--colors-red-10);
-    --colors-error-default: var(--colors-red-50);
-    --colors-error-dark: var(--colors-red-60);
-    --colors-error-darker: var(--colors-red-70);
-    --colors-utility-shadow-color: color-mix(in srgb, var(--colors-slate-90) 20%, transparent);
-}
-
-  :where(.dark, [data-color-mode=dark]) {
-    --colors-success-lighter: var(--colors-green-5);
-    --colors-success-light: var(--colors-green-20);
-    --colors-success-default: var(--colors-green-30);
-    --colors-success-dark: var(--colors-green-60);
-    --colors-success-darker: var(--colors-green-70);
-    --colors-warning-lighter: var(--colors-yellow-2);
-    --colors-warning-light: var(--colors-yellow-10);
-    --colors-warning-default: var(--colors-yellow-20);
-    --colors-warning-dark: var(--colors-yellow-60);
-    --colors-warning-darker: var(--colors-yellow-70);
-    --colors-error-lighter: var(--colors-red-5);
-    --colors-error-light: var(--colors-red-20);
-    --colors-error-default: var(--colors-red-40);
-    --colors-error-dark: var(--colors-red-60);
-    --colors-error-darker: var(--colors-red-70);
-    --colors-utility-shadow-color: color-mix(in srgb, var(--colors-slate-100) 40%, transparent)
-}
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-}
-}
-
-  @keyframes ping {
-    75%,100% {
-      transform: scale(2);
-      opacity: 0;
-}
-}
-
-  @keyframes pulse {
-    50% {
-      opacity: 0.5;
-}
-}
-
-  @keyframes bounce {
-    0%,100% {
-      transform: translateY(-25%);
-      animation-timing-function: cubic-bezier(0.8,0,1,1);
-}
-
-    50% {
-      transform: none;
-      animation-timing-function: cubic-bezier(0,0,0.2,1);
-}
-}
-}
-
-@layer recipes{
-  @layer _base{
-
-    .text {
-      margin: var(--spacing-0);
-      color: var(--colors-slate-60);
-      line-height: var(--line-heights-default);
-      font-weight: var(--font-weights-normal);
-      font-size: var(--font-sizes-16);
-}
-
-    .dark .text,[data-color-mode=dark] .text {
-      color: var(--colors-slate-30);
-}
-
-    .heading {
-      color: var(--colors-slate-90);
-      font-family: var(--fonts-heading);
-      font-weight: var(--font-weights-black);
-      line-height: var(--line-heights-default);
-}
-
-    .dark .heading,[data-color-mode=dark] .heading {
-      color: var(--colors-slate-5);
-}
-
-    .button {
-      position: relative;
-      appearance: none;
-      -webkit-appearance: none;
-      min-width: var(--sizes-0);
-      -webkit-user-select: none;
-      user-select: none;
-      vertical-align: middle;
-      display: flex;
-      gap: var(--spacing-4);
-      border-radius: var(--radii-4);
-      outline-offset: var(--spacing-1);
-      text-decoration: none;
-      white-space: nowrap;
-      cursor: pointer;
-      --transition-duration: var(--durations-fast);
-      transition-duration: var(--durations-fast);
-      --transition-prop: background, border-color, color, box-shadow;
-      transition-property: background, border-color, color, box-shadow;
-      --transition-easing: var(--easings-default);
-      transition-timing-function: var(--easings-default);
-      align-items: center;
-      font-family: var(--fonts-body);
-      font-size: var(--font-sizes-16);
-      font-weight: var(--font-weights-medium);
-      line-height: var(--line-heights-default);
-      border-width: 1px;
-      border-style: solid;
-      border-color: var(--colors-transparent);
-      outline-width: 2px;
-      outline-style: solid;
-      outline-color: var(--colors-transparent);
-}
-
-    .button:is(:disabled, [disabled], [data-disabled]) {
-      opacity: 0.4;
-      cursor: not-allowed;
-}
-
-    .button svg {
-      fill: var(--colors-current);
-}
-
-    .button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-80);
-}
-
-    .dark .button:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] .button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-5);
-}
-
-    .icon-button {
-      position: relative;
-      appearance: none;
-      -webkit-appearance: none;
-      min-width: var(--sizes-0);
-      -webkit-user-select: none;
-      user-select: none;
-      vertical-align: middle;
-      display: flex;
-      gap: var(--spacing-4);
-      border-radius: var(--radii-4);
-      outline-offset: var(--spacing-1);
-      text-decoration: none;
-      white-space: nowrap;
-      cursor: pointer;
-      --transition-duration: var(--durations-fast);
-      transition-duration: var(--durations-fast);
-      --transition-prop: background, border-color, color, box-shadow;
-      transition-property: background, border-color, color, box-shadow;
-      --transition-easing: var(--easings-default);
-      transition-timing-function: var(--easings-default);
-      align-items: center;
-      font-family: var(--fonts-body);
-      font-size: var(--font-sizes-16);
-      font-weight: var(--font-weights-medium);
-      line-height: var(--line-heights-default);
-      border-width: 1px;
-      border-style: solid;
-      border-color: var(--colors-transparent);
-      outline-width: 2px;
-      outline-style: solid;
-      outline-color: var(--colors-transparent);
-}
-
-    .icon-button:is(:disabled, [disabled], [data-disabled]) {
-      opacity: 0.4;
-      cursor: not-allowed;
-}
-
-    .icon-button svg {
-      fill: var(--colors-current);
-}
-
-    .icon-button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-80);
-}
-
-    .dark .icon-button:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] .icon-button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-5);
-}
-
-    .pre {
-      border-radius: var(--radii-8);
-      overflow: hidden;
-      background: var(--colors-slate-80);
-      color: var(--colors-slate-5);
-      padding-inline: var(--spacing-16);
-      padding-block: var(--spacing-8);
-      margin-block: var(--spacing-8);
-      white-space: pre;
-      border-width: 0;
-      border-color: var(--colors-slate-60);
-}
-
-    .link {
-      display: inline-flex;
-      gap: var(--spacing-1);
-      color: var(--colors-blue-50);
-      text-decoration: none;
-      outline-offset: var(--spacing-1);
-      width: fit-content;
-      cursor: pointer;
-      align-items: center;
-      font-weight: var(--font-weights-medium);
-      background-image: linear-gradient(90deg, transparent 0% 100%);
-      background-size: 100% 1px;
-      background-repeat: no-repeat;
-      background-position-y: 100%;
-      outline-width: 2px;
-      outline-style: solid;
-      outline-color: var(--colors-transparent);
-}
-
-    .dark .link,[data-color-mode=dark] .link {
-      color: var(--colors-blue-40);
-}
-
-    .link:is(:focus, [data-focus]) {
-      border-radius: var(--radii-4);
-      outline-color: var(--colors-slate-90);
-}
-
-    .dark .link:is(:focus, [data-focus]),[data-color-mode=dark] .link:is(:focus, [data-focus]) {
-      outline-color: var(--colors-slate-0);
-}
-
-    .link:is(:hover, [data-hover]) {
-      color: var(--colors-blue-40);
-      background-image: linear-gradient(90deg, currentColor 0% 100%);
-}
-
-    .dark .link:is(:hover, [data-hover]),[data-color-mode=dark] .link:is(:hover, [data-hover]) {
-      color: var(--colors-blue-30);
-}
-
-    .spinner {
-      aspect-ratio: var(--aspect-ratios-square);
-      border-radius: var(--radii-100);
-      animation: var(--animations-spin);
-      filter: invert(1);
-      mix-blend-mode: difference;
-      isolation: isolate;
-      border-width: 3px;
-      border-style: solid;
-      border-color: var(--colors-transparent);
-      border-top-color: var(--colors-slate-90);
-      border-bottom-color: var(--colors-slate-90);
-}
-
-    .divider {
-      --divider-weight: var(--sizes-1);
-      color: var(--colors-slate-20);
-      min-width: var(--sizes-1);
-      min-height: var(--sizes-1);
-      border-style: solid;
-      border-color: var(--colors-current);
-}
-
-    .dark .divider,[data-color-mode=dark] .divider {
-      color: var(--colors-slate-80);
-}
-
-    .textinput {
-      position: relative;
-      width: var(--sizes-full);
-      border-radius: var(--radii-4);
-      color: var(--colors-slate-90);
-      border-width: 1px;
-      border-color: var(--colors-slate-30);
-      border-style: solid;
-      line-height: var(--line-heights-default);
-      font-family: var(--fonts-body);
-      outline-width: 1px;
-      outline-style: solid;
-      outline-color: var(--colors-transparent);
-}
-
-    .dark .textinput,[data-color-mode=dark] .textinput {
-      color: var(--colors-slate-0);
-}
-
-    .textinput::placeholder,.textinput[data-placeholder] {
-      color: var(--colors-slate-50);
-}
-
-    .dark .textinput::placeholder,[data-color-mode=dark] .textinput::placeholder,.dark .textinput[data-placeholder],[data-color-mode=dark] .textinput[data-placeholder] {
-      color: var(--colors-slate-40);
-}
-
-    .textinput:is(:disabled, [disabled], [data-disabled]) {
-      opacity: 0.4;
-}
-
-    .textinput:is([data-error], [error]) {
-      display: inline-grid;
-      border-color: var(--colors-error-default);
-}
-
-    .textinput:is([data-error], [error]):is(:focus, [data-focus]) {
-      border-color: var(--colors-error-default);
-      outline-color: var(--colors-error-default);
-}
-
-    .dark .textinput:is([data-error], [error]):is(:focus, [data-focus]),[data-color-mode=dark] .textinput:is([data-error], [error]):is(:focus, [data-focus]) {
-      border-color: var(--colors-error-default);
-      outline-color: var(--colors-error-default);
-}
-
-    .textinput:is(:focus, [data-focus]) {
-      outline-color: var(--colors-slate-90);
-      border-color: var(--colors-slate-90);
-}
-
-    .dark .textinput:is(:focus, [data-focus]),[data-color-mode=dark] .textinput:is(:focus, [data-focus]) {
-      outline-color: var(--colors-slate-0);
-      border-color: var(--colors-slate-0);
-}
-
-    .textarea {
-      position: relative;
-      width: var(--sizes-full);
-      color: var(--colors-slate-90);
-      border-radius: var(--radii-4);
-      resize: both;
-      border-width: 1px;
-      border-style: solid;
-      border-color: var(--colors-slate-30);
-      line-height: var(--line-heights-tight);
-      outline-width: 1px;
-      outline-style: solid;
-      outline-color: var(--colors-transparent);
-}
-
-    .dark .textarea,[data-color-mode=dark] .textarea {
-      color: var(--colors-slate-0);
-}
-
-    .textarea:is([data-error], [error]) {
-      display: inline-grid;
-      border-color: var(--colors-error-default);
-}
-
-    .textarea:is([data-error], [error]):is(:focus, [data-focus]) {
-      border-color: var(--colors-error-default);
-      outline-color: var(--colors-error-default);
-}
-
-    .dark .textarea:is([data-error], [error]):is(:focus, [data-focus]),[data-color-mode=dark] .textarea:is([data-error], [error]):is(:focus, [data-focus]) {
-      border-color: var(--colors-error-default);
-      outline-color: var(--colors-error-default);
-}
-
-    .textarea::placeholder,.textarea[data-placeholder] {
-      color: var(--colors-slate-50);
-}
-
-    .dark .textarea::placeholder,[data-color-mode=dark] .textarea::placeholder,.dark .textarea[data-placeholder],[data-color-mode=dark] .textarea[data-placeholder] {
-      color: var(--colors-slate-40);
-}
-
-    .textarea:is(:disabled, [disabled], [data-disabled]) {
-      opacity: 0.4;
-}
-
-    .textarea:is(:focus, [data-focus]) {
-      outline-color: var(--colors-slate-90);
-      border-color: var(--colors-slate-90);
-}
-
-    .dark .textarea:is(:focus, [data-focus]),[data-color-mode=dark] .textarea:is(:focus, [data-focus]) {
-      outline-color: var(--colors-slate-0);
-      border-color: var(--colors-slate-0);
-}
-
-    .textarea[data-error]:focus {
-      border-color: var(--colors-error-default);
-}
-
-    .label {
-      cursor: default;
-      font-weight: var(--font-weights-normal);
-      line-height: normal;
-}
-
-    .label,.code {
-      font-size: var(--font-sizes-14);
-}
-
-    .code {
-      background: var(--colors-slate-80);
-      overflow: auto;
-      padding: var(--spacing-4);
-      white-space: pre;
-}
-
-    .code,.input {
-      position: relative;
-}
-
-    .input {
-      display: inline-grid;
-      vertical-align: top;
-      padding: var(--spacing-0);
-      color: var(--colors-slate-90);
-      border-radius: var(--radii-8);
-      align-items: center;
-      font-family: var(--fonts-body);
-      font-size: var(--font-sizes-16);
-      font-weight: var(--font-weights-normal);
-      line-height: normal;
-      grid-template-columns: auto 1fr;
-}
-
-    .input input {
-      width: auto;
-      min-width: var(--sizes-16);
-      max-width: var(--sizes-full);
-      font: inherit;
-      padding-block: var(--spacing-4);
-      padding-inline: var(--spacing-8);
-      margin: var(--spacing-0);
-      resize: none;
-      appearance: none;
-      -webkit-appearance: none;
-      border-radius: var(--radii-4);
-      background: var(--colors-slate-0);
-      border-width: 1px;
-      border-style: solid;
-      border-color: var(--colors-transparent);
-}
-
-    @media (prefers-color-scheme: dark) {
-      .input {
-        color: var(--colors-slate-5);
-}
-
-      .input input {
-        background: var(--colors-slate-90);
-}
-}
-}
-
-  .text--textStyle_mono-sm {
-    font-family: var(--fonts-mono);
-    font-size: var(--font-sizes-14);
-}
-
-  .text--textStyle_body-md {
-    font-size: var(--font-sizes-16);
-}
-
-  .text--textStyle_body-md,.text--family_body {
-    font-family: var(--fonts-body);
-}
-
-  .text--size_16 {
-    font-size: 1rem;
-}
-
-  .text--italic_true {
-    font-variation-settings: "CRSV" 0, "CASL" 0, "slnt" -15;
-    font-style: italic;
-}
-
-  .text--bold_true {
-    font-weight: var(--font-weights-bold);
-}
-
-  .text--underline_true {
-    text-decoration: underline;
-}
-
-  .text--family_mono {
-    font-variation-settings: "CRSV" 0, "CASL" 0, "MONO" 1;
-    font-family: var(--fonts-mono);
-}
-
-  .heading--level_h2 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    font-size: var(--font-sizes-32);
-}
-
-  .dark .heading--level_h2,[data-color-mode=dark] .heading--level_h2 {
-    color: var(--colors-slate-5);
-}
-
-  .heading--level_h3 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    font-size: var(--font-sizes-24);
-}
-
-  .dark .heading--level_h3,[data-color-mode=dark] .heading--level_h3 {
-    color: var(--colors-slate-5);
-}
-
-  .heading--level_h1 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    font-size: var(--font-sizes-40);
-}
-
-  .dark .heading--level_h1,[data-color-mode=dark] .heading--level_h1 {
-    color: var(--colors-slate-5);
-}
-
-  .heading--level_h4 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    font-size: var(--font-sizes-20);
-}
-
-  .dark .heading--level_h4,[data-color-mode=dark] .heading--level_h4 {
-    color: var(--colors-slate-5);
-}
-
-  .button--variant_primary {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .dark .button--variant_primary,[data-color-mode=dark] .button--variant_primary {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_primary:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .dark .button--variant_primary:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_primary:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-70);
-}
-
-  .dark .button--variant_primary:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  .button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-100);
-}
-
-  .dark .button--variant_primary:is(:active, [data-active]),[data-color-mode=dark] .button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-20);
-}
-
-  .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-90);
-}
-
-  .dark .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-5);
-}
-
-  .button--size_medium {
-    padding-block: var(--spacing-3);
-    padding-inline: var(--spacing-10);
-    font-size: var(--font-sizes-16);
-}
-
-  .button--variant_standard {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .dark .button--variant_standard,[data-color-mode=dark] .button--variant_standard {
-    background: var(--colors-slate-70);
-    color: var(--colors-slate-0);
-}
-
-  .button--variant_standard:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .dark .button--variant_standard:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_standard:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_standard:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  .dark .button--variant_standard:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_standard:is(:hover, [data-hover]) {
-    background: var(--colors-slate-60);
-}
-
-  .button--variant_standard:is(:active, [data-active]) {
-    background: var(--colors-slate-20);
-}
-
-  .dark .button--variant_standard:is(:active, [data-active]),[data-color-mode=dark] .button--variant_standard:is(:active, [data-active]) {
-    background: var(--colors-slate-80);
-}
-
-  .button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-5);
-}
-
-  .dark .button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-70);
-}
-
-  .button--variant_hollow {
-    background: var(--colors-transparent);
-    color: var(--colors-slate-90);
-    border-color: var(--colors-slate-30);
-}
-
-  .dark .button--variant_hollow,[data-color-mode=dark] .button--variant_hollow {
-    color: var(--colors-slate-0);
-    border-color: var(--colors-slate-60);
-}
-
-  .button--variant_hollow:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-    border-color: var(--colors-transparent);
-}
-
-  .dark .button--variant_hollow:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_hollow:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_hollow:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-    border-color: var(--colors-slate-10);
-}
-
-  .dark .button--variant_hollow:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_hollow:is(:hover, [data-hover]) {
-    background: var(--colors-slate-60);
-    border-color: var(--colors-slate-60);
-}
-
-  .button--variant_hollow:is(:active, [data-active]) {
-    background: var(--colors-slate-20);
-    border-color: var(--colors-slate-20);
-}
-
-  .dark .button--variant_hollow:is(:active, [data-active]),[data-color-mode=dark] .button--variant_hollow:is(:active, [data-active]) {
-    background: var(--colors-slate-80);
-    border-color: var(--colors-slate-80);
-}
-
-  .button--variant_hollow:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-transparent);
-}
-
-  .button--variant_ghost {
-    background: var(--colors-transparent);
-    color: var(--colors-slate-90);
-}
-
-  .dark .button--variant_ghost,[data-color-mode=dark] .button--variant_ghost {
-    color: var(--colors-slate-0);
-}
-
-  .button--variant_ghost:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .dark .button--variant_ghost:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_ghost:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_ghost:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  .dark .button--variant_ghost:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_ghost:is(:hover, [data-hover]) {
-    background: var(--colors-slate-60);
-}
-
-  .button--variant_ghost:is(:active, [data-active]) {
-    background: var(--colors-slate-20);
-}
-
-  .dark .button--variant_ghost:is(:active, [data-active]),[data-color-mode=dark] .button--variant_ghost:is(:active, [data-active]) {
-    background: var(--colors-slate-70);
-}
-
-  .button--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-transparent);
-}
-
-  .button--variant_cta {
-    background: var(--colors-gold-20);
-    color: var(--colors-slate-90);
-}
-
-  .dark .button--variant_cta,[data-color-mode=dark] .button--variant_cta {
-    background: var(--colors-gold-30);
-}
-
-  .button--variant_cta:is(:hover, [data-hover]) {
-    background: var(--colors-gold-10);
-}
-
-  .dark .button--variant_cta:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_cta:is(:hover, [data-hover]) {
-    background: var(--colors-gold-20);
-}
-
-  .button--variant_cta:is(:active, [data-active]) {
-    background: var(--colors-gold-30);
-}
-
-  .dark .button--variant_cta:is(:active, [data-active]),[data-color-mode=dark] .button--variant_cta:is(:active, [data-active]) {
-    background: var(--colors-gold-40);
-}
-
-  .button--variant_cta:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-gold-20);
-}
-
-  .dark .button--variant_cta:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_cta:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-gold-30);
-}
-
-  .button--variant_danger {
-    background: var(--colors-red-50);
-    color: var(--colors-slate-0);
-}
-
-  .button--variant_danger:is(:hover, [data-hover]) {
-    background: var(--colors-red-40);
-}
-
-  .button--variant_danger:is(:active, [data-active]) {
-    background: var(--colors-red-60);
-}
-
-  .button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-red-50);
-}
-
-  .button--size_large {
-    padding-block: var(--spacing-7);
-    padding-inline: var(--spacing-12);
-    font-size: var(--font-sizes-16);
-}
-
-  .button--size_small {
-    padding-block: var(--spacing-0);
-    padding-inline: var(--spacing-8);
-    font-size: var(--font-sizes-14);
-}
-
-  .button--size_small svg {
-    margin-top: calc(var(--spacing-1) * -1);
-    margin-bottom: calc(var(--spacing-1) * -1);
-}
-
-  .icon-button--variant_ghost {
-    background: var(--colors-transparent);
-    color: var(--colors-slate-90);
-}
-
-  .dark .icon-button--variant_ghost,[data-color-mode=dark] .icon-button--variant_ghost {
-    color: var(--colors-slate-0);
-}
-
-  .icon-button--variant_ghost:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .dark .icon-button--variant_ghost:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .icon-button--variant_ghost:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .icon-button--variant_ghost:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  .dark .icon-button--variant_ghost:is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_ghost:is(:hover, [data-hover]) {
-    background: var(--colors-slate-60);
-}
-
-  .icon-button--variant_ghost:is(:active, [data-active]) {
-    background: var(--colors-slate-20);
-}
-
-  .dark .icon-button--variant_ghost:is(:active, [data-active]),[data-color-mode=dark] .icon-button--variant_ghost:is(:active, [data-active]) {
-    background: var(--colors-slate-70);
-}
-
-  .icon-button--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-transparent);
-}
-
-  .icon-button--size_medium {
-    padding: var(--spacing-3);
-    font-size: var(--font-sizes-16);
-}
-
-  .icon-button--variant_standard {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .dark .icon-button--variant_standard,[data-color-mode=dark] .icon-button--variant_standard {
-    background: var(--colors-slate-70);
-    color: var(--colors-slate-0);
-}
-
-  .icon-button--variant_standard:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .dark .icon-button--variant_standard:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .icon-button--variant_standard:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .icon-button--variant_standard:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  .dark .icon-button--variant_standard:is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_standard:is(:hover, [data-hover]) {
-    background: var(--colors-slate-60);
-}
-
-  .icon-button--variant_standard:is(:active, [data-active]) {
-    background: var(--colors-slate-20);
-}
-
-  .dark .icon-button--variant_standard:is(:active, [data-active]),[data-color-mode=dark] .icon-button--variant_standard:is(:active, [data-active]) {
-    background: var(--colors-slate-80);
-}
-
-  .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-5);
-}
-
-  .dark .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-70);
-}
-
-  .icon-button--variant_primary {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .dark .icon-button--variant_primary,[data-color-mode=dark] .icon-button--variant_primary {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .icon-button--variant_primary:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .dark .icon-button--variant_primary:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .icon-button--variant_primary:is([aria-selected=true], [data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-0);
-}
-
-  .icon-button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-70);
-}
-
-  .dark .icon-button--variant_primary:is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  .icon-button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-100);
-}
-
-  .dark .icon-button--variant_primary:is(:active, [data-active]),[data-color-mode=dark] .icon-button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-20);
-}
-
-  .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-90);
-}
-
-  .dark .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-5);
-}
-
-  .icon-button--size_large {
-    padding: var(--spacing-7);
-    font-size: var(--font-sizes-16);
-}
-
-  .link--family_body {
-    font-family: var(--fonts-body);
-}
-
-  .spinner--size_small {
-    height: var(--sizes-16);
-    min-height: var(--sizes-16);
-}
-
-  .spinner--size_medium {
-    height: var(--sizes-24);
-    min-height: var(--sizes-24);
-}
-
-  .spinner--size_large {
-    height: var(--sizes-32);
-    min-height: var(--sizes-32);
-}
-
-  .divider--direction_horizontal {
-    width: var(--sizes-full);
-    border-top-width: var(--divider-weight);
-}
-
-  .divider--weight_thin {
-    --divider-weight: var(--sizes-1);
-}
-
-  .divider--weight_medium {
-    --divider-weight: var(--sizes-2);
-}
-
-  .divider--weight_thick {
-    --divider-weight: var(--sizes-4);
-}
-
-  .divider--weight_thicker {
-    --divider-weight: var(--sizes-6);
-}
-
-  .divider--direction_vertical {
-    height: var(--sizes-full);
-    border-left-width: var(--divider-weight);
-}
-
-  .textinput--size_small {
-    padding-block: var(--spacing-0);
-    padding-inline: var(--spacing-8);
-    font-size: var(--font-sizes-14);
-}
-
-  .textinput--size_medium {
-    padding-block: var(--spacing-3);
-    padding-inline: var(--spacing-10);
-    font-size: var(--font-sizes-16);
-}
-
-  .textinput--size_large {
-    padding-block: var(--spacing-7);
-    padding-inline: var(--spacing-12);
-    font-size: var(--font-sizes-16);
-}
-
-  .textinput--autoSize_true {
-    field-sizing: content;
-}
-
-  .textarea--size_small {
-    padding-block: var(--spacing-0);
-    padding-inline: var(--spacing-8);
-    min-height: var(--sizes-48);
-    font-size: var(--font-sizes-14);
-}
-
-  .textarea--size_medium {
-    padding-block: var(--spacing-3);
-    padding-inline: var(--spacing-10);
-    min-height: var(--sizes-64);
-    font-size: var(--font-sizes-16);
-}
-
-  .textarea--size_large {
-    padding-block: var(--spacing-7);
-    padding-inline: var(--spacing-12);
-    min-height: var(--sizes-80);
-    font-size: var(--font-sizes-16);
-}
-
-  .textarea--autoSize_true {
-    field-sizing: content;
-}
-
-  .label--family_body {
-    font-family: var(--fonts-body);
-}
-
-  .input--variant_stacked {
-    grid-template-rows: auto 1fr;
-    align-items: stretch;
-}
-
-  .input--variant_stacked input {
-    grid-area: 2 / 1;
-    background: var(--colors-slate-0);
-    border-color: var(--colors-slate-40);
-}
-
-  @media (prefers-color-scheme: dark) {
-    .input--variant_stacked input {
-      background: var(--colors-slate-90);
-      border-color: var(--colors-slate-50);
-}
-}
-}
-
-@layer recipes.slots{
-  @layer _base{
-
-    .checkbox__container {
-      position: relative;
-      display: inline-grid;
-      gap: var(--spacing-4);
-      cursor: pointer;
-      -webkit-user-select: none;
-      user-select: none;
-      grid-template-columns: auto 1fr;
-      align-items: start;
-}
-
-    .checkbox__input {
-      position: absolute;
-      opacity: 0;
-      width: var(--sizes-full);
-      height: var(--sizes-full);
-      margin: var(--spacing-0);
-      padding: var(--spacing-0);
-      z-index: 1;
-      cursor: inherit;
-}
-
-    .checkbox__input ~ [name='checkbox'] {
-      display: inline-grid;
-}
-
-    .checkbox__input:is(:disabled, [disabled], [data-disabled]) {
-      display: inline-grid;
-}
-
-    .checkbox__input:is(:disabled, [disabled], [data-disabled]) ~ svg {
-      opacity: 0.4;
-      pointer-events: none;
-      cursor: none;
-}
-
-    .checkbox__input:is([data-error], [error]) {
-      display: inline-grid;
-}
-
-    .checkbox__input:is([data-error], [error]) ~ svg {
-      fill: var(--colors-error-default);
-}
-
-    .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox-checked'] {
-      display: inline-grid;
-      fill: var(--colors-slate-90);
-}
-
-    .dark .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox-checked'],[data-color-mode=dark] .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox-checked'] {
-      fill: var(--colors-slate-0);
-}
-
-    .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox'] {
-      display: none;
-}
-
-    .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox-indeterminate'] {
-      display: inline-grid;
-      fill: var(--colors-slate-90);
-}
-
-    .dark .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox-indeterminate'],[data-color-mode=dark] .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox-indeterminate'] {
-      fill: var(--colors-slate-0);
-}
-
-    .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox'] {
-      display: none;
-}
-
-    .checkbox__input:is(:focus-visible, [data-focus-visible]) ~ [name='checkbox-focus'] {
-      display: inline-grid;
-      position: absolute;
-      fill: var(--colors-slate-90);
-}
-
-    .dark .checkbox__input:is(:focus-visible, [data-focus-visible]) ~ [name='checkbox-focus'],[data-color-mode=dark] .checkbox__input:is(:focus-visible, [data-focus-visible]) ~ [name='checkbox-focus'] {
-      fill: var(--colors-slate-1);
-}
-
-    .checkbox__indicator {
-      place-content: center;
-      display: none;
-      width: var(--sizes-24);
-      height: var(--sizes-24);
-}
-
-    .checkbox__indicator:is([name='checkbox']) {
-      display: inline-grid;
-      fill: var(--colors-slate-30);
-}
-
-    .dark .checkbox__indicator:is([name='checkbox']),[data-color-mode=dark] .checkbox__indicator:is([name='checkbox']) {
-      fill: var(--colors-slate-20);
-}
-
-    .radio__container {
-      position: relative;
-      display: inline-grid;
-      gap: var(--spacing-4);
-      cursor: pointer;
-      -webkit-user-select: none;
-      user-select: none;
-      grid-template-columns: auto 1fr;
-      align-items: start;
-}
-
-    .radio__input {
-      position: absolute;
-      opacity: 0;
-      width: var(--sizes-full);
-      height: var(--sizes-full);
-      margin: var(--spacing-0);
-      padding: var(--spacing-0);
-      z-index: 1;
-      cursor: inherit;
-}
-
-    .radio__input ~ [name='radio'] {
-      display: inline-grid;
-}
-
-    .radio__input:is(:disabled, [disabled], [data-disabled]) {
-      display: inline-grid;
-}
-
-    .radio__input:is(:disabled, [disabled], [data-disabled]) ~ svg {
-      opacity: 0.4;
-      pointer-events: none;
-      cursor: none;
-}
-
-    .radio__input:is([data-error], [error]) {
-      display: inline-grid;
-}
-
-    .radio__input:is([data-error], [error]) ~ svg {
-      fill: var(--colors-red-50);
-}
-
-    .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'] {
-      display: inline-grid;
-      fill: var(--colors-slate-90);
-}
-
-    .dark .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'],[data-color-mode=dark] .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'] {
-      fill: var(--colors-slate-0);
-}
-
-    .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio'] {
-      display: none;
-}
-
-    .radio__input:is(:focus-visible, [data-focus-visible]) ~ [name='radio-focus'] {
-      display: inline-grid;
-      position: absolute;
-      fill: var(--colors-slate-90);
-}
-
-    .dark .radio__input:is(:focus-visible, [data-focus-visible]) ~ [name='radio-focus'],[data-color-mode=dark] .radio__input:is(:focus-visible, [data-focus-visible]) ~ [name='radio-focus'] {
-      fill: var(--colors-slate-1);
-}
-
-    .radio__indicator {
-      place-content: center;
-      display: none;
-      width: var(--sizes-24);
-      height: var(--sizes-24);
-}
-
-    .radio__indicator:is([name='radio']) {
-      display: inline-grid;
-      fill: var(--colors-slate-20);
-}
-}
-}
-
-@layer utilities{
-
-  .d_grid {
-    display: grid;
-}
-
-  .gap_16 {
-    gap: var(--spacing-16);
-}
-
-  .w_full {
-    width: var(--sizes-full);
-}
-
-  .gap_40 {
-    gap: var(--spacing-40);
-}
-
-  .py_24 {
-    padding-block: var(--spacing-24);
-}
-
-  .gap_10px {
-    gap: 10px;
-}
-
-  .place-content_center {
-    place-content: center;
-}
-
-  .asp_landscape {
-    aspect-ratio: var(--aspect-ratios-landscape);
-}
-
-  .bdr_4 {
-    border-radius: var(--radii-4);
-}
-
-  .bg_slate\.0 {
-    background: var(--colors-slate-0);
-}
-
-  .gap_24 {
-    gap: var(--spacing-24);
-}
-
-  .d_flex {
-    display: flex;
-}
-
-  .c_gold\.40 {
-    color: var(--colors-gold-40);
-}
-
-  .h_96 {
-    height: var(--sizes-96);
-}
-
-  .gap_10 {
-    gap: var(--spacing-10);
-}
-
-  .ls_widest {
-    letter-spacing: var(--letter-spacings-widest);
-}
-
-  .tt_uppercase {
-    text-transform: uppercase;
-}
-
-  .gap_8 {
-    gap: var(--spacing-8);
-}
-
-  .py_4 {
-    padding-block: var(--spacing-4);
-}
-
-  .bg_slate\.10 {
-    background: var(--colors-slate-10);
-}
-
-  .pos_sticky {
-    position: sticky;
-}
-
-  .z_100 {
-    z-index: 100;
-}
-
-  .bx-sh_medium {
-    box-shadow: var(--shadows-medium);
-}
-
-  .pos_relative {
-    position: relative;
-}
-
-  .w_100\% {
-    width: 100%;
-}
-
-  .max-w_5xl {
-    max-width: var(--sizes-5xl);
-}
-
-  .mx_auto {
-    margin-inline: auto;
-}
-
-  .px_24 {
-    padding-inline: var(--spacing-24);
-}
-
-  .grid-c_1_\/_-1 {
-    grid-column: 1 / -1;
-}
-
-  .bx-sh_inset {
-    box-shadow: var(--shadows-inset);
-}
-
-  .bx-sh_low {
-    box-shadow: var(--shadows-low);
-}
-
-  .bx-sh_high {
-    box-shadow: var(--shadows-high);
-}
-
-  .bd_true {
-    border: true;
-}
-
-  .op_0 {
-    opacity: 0;
-}
-
-  .op_1 {
-    opacity: 1;
-}
-
-  .gap_4 {
-    gap: var(--spacing-4);
-}
-
-  .pos_absolute {
-    position: absolute;
-}
-
-  .place-items_center {
-    place-items: center;
-}
-
-  .c_slate\.0 {
-    color: var(--colors-slate-0);
-}
-
-  .bg_transparent {
-    background: var(--colors-transparent);
-}
-
-  .w_24 {
-    width: var(--sizes-24);
-}
-
-  .h_24 {
-    height: var(--sizes-24);
-}
-
-  .fill_current {
-    fill: var(--colors-current);
-}
-
-  .w_20 {
-    width: var(--sizes-20);
-}
-
-  .h_20 {
-    height: var(--sizes-20);
-}
-
-  .font_mono {
-    font: mono;
-}
-
-  .c_slate\.90 {
-    color: var(--colors-slate-90);
-}
-
-  .c_gold\.50 {
-    color: var(--colors-gold-50);
-}
-
-  .c_blue\.50 {
-    color: var(--colors-blue-50);
-}
-
-  .ta_center {
-    text-align: center;
-}
-
-  .w_auto {
-    width: auto;
-}
-
-  .gap_0 {
-    gap: var(--spacing-0);
-}
-
-  .grid-tc_repeat\(auto-fill\,_minmax\(200px\,_1fr\)\) {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-  .grid-tc_1fr_3fr {
-    grid-template-columns: 1fr 3fr;
-}
-
-  .bd-t-w_1 {
-    border-top-width: 1px;
-}
-
-  .border-top-style_solid {
-    border-top-style: solid;
-}
-
-  .bd-c_slate\.10 {
-    border-color: var(--colors-slate-10);
-}
-
-  .pb_96 {
-    padding-bottom: var(--spacing-96);
-}
-
-  .bd-w_1 {
-    border-width: 1px;
-}
-
-  .border-style_solid {
-    border-style: solid;
-}
-
-  .grid-tc_minmax\(auto\,_1fr\)_1fr {
-    grid-template-columns: minmax(auto, 1fr) 1fr;
-}
-
-  .ai_center {
-    align-items: center;
-}
-
-  .flex-d_row {
-    flex-direction: row;
-}
-
-  .jc_space-between {
-    justify-content: space-between;
-}
-
-  .ai_flex-end {
-    align-items: flex-end;
-}
-
-  .ai_flex-start {
-    align-items: flex-start;
-}
-
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
-}
-
-  .flex-d_column {
-    flex-direction: column;
-}
-
-  .ai_start {
-    align-items: start;
-}
-
-  .mb_56 {
-    margin-bottom: var(--spacing-56);
-}
-
-  .top_0 {
-    top: var(--spacing-0);
-}
-
-  .mt_32 {
-    margin-top: var(--spacing-32);
-}
-
-  .left_0 {
-    left: var(--spacing-0);
-}
-
-  .right_0 {
-    right: var(--spacing-0);
-}
-
-  .bottom_0 {
-    bottom: var(--spacing-0);
-}
-
-  .grid-tc_repeat\(6\,_minmax\(0\,_1fr\)\) {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-  .dark .dark\:bg_slate\.80,[data-color-mode=dark] .dark\:bg_slate\.80 {
-    background: var(--colors-slate-80);
-}
-
-  .dark .dark\:c_gold\.30,[data-color-mode=dark] .dark\:c_gold\.30 {
-    color: var(--colors-gold-30);
-}
-
-  .dark .dark\:bd-c_slate\.80,[data-color-mode=dark] .dark\:bd-c_slate\.80 {
-    border-color: var(--colors-slate-80);
-}
-
-  .dark .dark\:bd-c_slate\.90,[data-color-mode=dark] .dark\:bd-c_slate\.90 {
-    border-color: var(--colors-slate-90);
-}
-
-  @media screen and (min-width: 40rem) {
-    .sm\:px_16 {
-      padding-inline: var(--spacing-16);
-}
-}
-
-  @media screen and (min-width: 48rem) {
-    .md\:px_20 {
-      padding-inline: var(--spacing-20);
-}
-}
-}