/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties;
[data-component-root='true'] {
  --cmp-variant-align: initial;
  --cmp-variant-alignment: initial;
  --cmp-variant-appearance: initial;
  --cmp-variant-backdropFocus: initial;
  --cmp-variant-background: initial;
  --cmp-variant-backgroundFit: initial;
  --cmp-variant-backgroundFocus: initial;
  --cmp-variant-backgroundWash: initial;
  --cmp-variant-blocks: initial;
  --cmp-variant-color: initial;
  --cmp-variant-colorScheme: initial;
  --cmp-variant-columns: initial;
  --cmp-variant-connector: initial;
  --cmp-variant-days: initial;
  --cmp-variant-density: initial;
  --cmp-variant-emphasis: initial;
  --cmp-variant-entryStyle: initial;
  --cmp-variant-fit: initial;
  --cmp-variant-footerExtras: initial;
  --cmp-variant-footerWeight: initial;
  --cmp-variant-format: initial;
  --cmp-variant-grouping: initial;
  --cmp-variant-headerTreatment: initial;
  --cmp-variant-headingLevel: initial;
  --cmp-variant-headingSize: initial;
  --cmp-variant-icon: initial;
  --cmp-variant-iconPosition: initial;
  --cmp-variant-intent: initial;
  --cmp-variant-labelPosition: initial;
  --cmp-variant-laneWidth: initial;
  --cmp-variant-layout: initial;
  --cmp-variant-loading: initial;
  --cmp-variant-logoPlacement: initial;
  --cmp-variant-marker: initial;
  --cmp-variant-mediaPlacement: initial;
  --cmp-variant-mediaSide: initial;
  --cmp-variant-mode: initial;
  --cmp-variant-narrowStart: initial;
  --cmp-variant-objectFit: initial;
  --cmp-variant-orientation: initial;
  --cmp-variant-outsideDays: initial;
  --cmp-variant-padding: initial;
  --cmp-variant-placement: initial;
  --cmp-variant-position: initial;
  --cmp-variant-presentation: initial;
  --cmp-variant-resize: initial;
  --cmp-variant-rhythm: initial;
  --cmp-variant-role: initial;
  --cmp-variant-rows: initial;
  --cmp-variant-shape: initial;
  --cmp-variant-showValues: initial;
  --cmp-variant-side: initial;
  --cmp-variant-sidebarTone: initial;
  --cmp-variant-size: initial;
  --cmp-variant-spacing: initial;
  --cmp-variant-span: initial;
  --cmp-variant-speed: initial;
  --cmp-variant-state: initial;
  --cmp-variant-status: initial;
  --cmp-variant-surfaces: initial;
  --cmp-variant-tableStyle: initial;
  --cmp-variant-today: initial;
  --cmp-variant-tone: initial;
  --cmp-variant-type: initial;
  --cmp-variant-variant: initial;
  --cmp-variant-weekStart: initial;
  --cmp-variant-weekends: initial;
  --cmp-variant-width: initial;
}
[data-component-root='true'][data-cmp-variant-align='center'] {
  --cmp-variant-align: center;
}
[data-component-root='true'][data-cmp-variant-align='left'] {
  --cmp-variant-align: left;
}
[data-component-root='true'][data-cmp-variant-align='right'] {
  --cmp-variant-align: right;
}
[data-component-root='true'][data-cmp-variant-align='split'] {
  --cmp-variant-align: split;
}
[data-component-root='true'][data-cmp-variant-align='start'] {
  --cmp-variant-align: start;
}
[data-component-root='true'][data-cmp-variant-alignment='center'] {
  --cmp-variant-alignment: center;
}
[data-component-root='true'][data-cmp-variant-alignment='end'] {
  --cmp-variant-alignment: end;
}
[data-component-root='true'][data-cmp-variant-alignment='start'] {
  --cmp-variant-alignment: start;
}
[data-component-root='true'][data-cmp-variant-appearance='bar'] {
  --cmp-variant-appearance: bar;
}
[data-component-root='true'][data-cmp-variant-appearance='chip'] {
  --cmp-variant-appearance: chip;
}
[data-component-root='true'][data-cmp-variant-appearance='dot'] {
  --cmp-variant-appearance: dot;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='bottom'] {
  --cmp-variant-backdropFocus: bottom;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='bottom-left'] {
  --cmp-variant-backdropFocus: bottom-left;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='bottom-right'] {
  --cmp-variant-backdropFocus: bottom-right;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='center'] {
  --cmp-variant-backdropFocus: center;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='left'] {
  --cmp-variant-backdropFocus: left;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='right'] {
  --cmp-variant-backdropFocus: right;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='top'] {
  --cmp-variant-backdropFocus: top;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='top-left'] {
  --cmp-variant-backdropFocus: top-left;
}
[data-component-root='true'][data-cmp-variant-backdropfocus='top-right'] {
  --cmp-variant-backdropFocus: top-right;
}
[data-component-root='true'][data-cmp-variant-background='accent'] {
  --cmp-variant-background: accent;
}
[data-component-root='true'][data-cmp-variant-background='alternate'] {
  --cmp-variant-background: alternate;
}
[data-component-root='true'][data-cmp-variant-background='base'] {
  --cmp-variant-background: base;
}
[data-component-root='true'][data-cmp-variant-background='gradient'] {
  --cmp-variant-background: gradient;
}
[data-component-root='true'][data-cmp-variant-background='tint'] {
  --cmp-variant-background: tint;
}
[data-component-root='true'][data-cmp-variant-backgroundfit='cover'] {
  --cmp-variant-backgroundFit: cover;
}
[data-component-root='true'][data-cmp-variant-backgroundfit='stretch'] {
  --cmp-variant-backgroundFit: stretch;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='bottom'] {
  --cmp-variant-backgroundFocus: bottom;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='bottom-left'] {
  --cmp-variant-backgroundFocus: bottom-left;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='bottom-right'] {
  --cmp-variant-backgroundFocus: bottom-right;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='center'] {
  --cmp-variant-backgroundFocus: center;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='left'] {
  --cmp-variant-backgroundFocus: left;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='right'] {
  --cmp-variant-backgroundFocus: right;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='top'] {
  --cmp-variant-backgroundFocus: top;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='top-left'] {
  --cmp-variant-backgroundFocus: top-left;
}
[data-component-root='true'][data-cmp-variant-backgroundfocus='top-right'] {
  --cmp-variant-backgroundFocus: top-right;
}
[data-component-root='true'][data-cmp-variant-backgroundwash='none'] {
  --cmp-variant-backgroundWash: none;
}
[data-component-root='true'][data-cmp-variant-backgroundwash='normal'] {
  --cmp-variant-backgroundWash: normal;
}
[data-component-root='true'][data-cmp-variant-backgroundwash='sheet'] {
  --cmp-variant-backgroundWash: sheet;
}
[data-component-root='true'][data-cmp-variant-blocks='card'] {
  --cmp-variant-blocks: card;
}
[data-component-root='true'][data-cmp-variant-blocks='plain'] {
  --cmp-variant-blocks: plain;
}
[data-component-root='true'][data-cmp-variant-color='chart-1'] {
  --cmp-variant-color: chart-1;
}
[data-component-root='true'][data-cmp-variant-color='chart-2'] {
  --cmp-variant-color: chart-2;
}
[data-component-root='true'][data-cmp-variant-color='chart-3'] {
  --cmp-variant-color: chart-3;
}
[data-component-root='true'][data-cmp-variant-color='chart-4'] {
  --cmp-variant-color: chart-4;
}
[data-component-root='true'][data-cmp-variant-color='chart-5'] {
  --cmp-variant-color: chart-5;
}
[data-component-root='true'][data-cmp-variant-colorscheme='blue'] {
  --cmp-variant-colorScheme: blue;
}
[data-component-root='true'][data-cmp-variant-colorscheme='brand'] {
  --cmp-variant-colorScheme: brand;
}
[data-component-root='true'][data-cmp-variant-colorscheme='categorical'] {
  --cmp-variant-colorScheme: categorical;
}
[data-component-root='true'][data-cmp-variant-colorscheme='chart-1'] {
  --cmp-variant-colorScheme: chart-1;
}
[data-component-root='true'][data-cmp-variant-colorscheme='chart-2'] {
  --cmp-variant-colorScheme: chart-2;
}
[data-component-root='true'][data-cmp-variant-colorscheme='chart-3'] {
  --cmp-variant-colorScheme: chart-3;
}
[data-component-root='true'][data-cmp-variant-colorscheme='chart-4'] {
  --cmp-variant-colorScheme: chart-4;
}
[data-component-root='true'][data-cmp-variant-colorscheme='chart-5'] {
  --cmp-variant-colorScheme: chart-5;
}
[data-component-root='true'][data-cmp-variant-colorscheme='green'] {
  --cmp-variant-colorScheme: green;
}
[data-component-root='true'][data-cmp-variant-colorscheme='neutral'] {
  --cmp-variant-colorScheme: neutral;
}
[data-component-root='true'][data-cmp-variant-colorscheme='orange'] {
  --cmp-variant-colorScheme: orange;
}
[data-component-root='true'][data-cmp-variant-colorscheme='purple'] {
  --cmp-variant-colorScheme: purple;
}
[data-component-root='true'][data-cmp-variant-colorscheme='sky'] {
  --cmp-variant-colorScheme: sky;
}
[data-component-root='true'][data-cmp-variant-columns='1'] {
  --cmp-variant-columns: 1;
}
[data-component-root='true'][data-cmp-variant-columns='2'] {
  --cmp-variant-columns: 2;
}
[data-component-root='true'][data-cmp-variant-columns='3'] {
  --cmp-variant-columns: 3;
}
[data-component-root='true'][data-cmp-variant-columns='4'] {
  --cmp-variant-columns: 4;
}
[data-component-root='true'][data-cmp-variant-columns='5'] {
  --cmp-variant-columns: 5;
}
[data-component-root='true'][data-cmp-variant-connector='line'] {
  --cmp-variant-connector: line;
}
[data-component-root='true'][data-cmp-variant-connector='none'] {
  --cmp-variant-connector: none;
}
[data-component-root='true'][data-cmp-variant-days='all'] {
  --cmp-variant-days: all;
}
[data-component-root='true'][data-cmp-variant-days='weekdays'] {
  --cmp-variant-days: weekdays;
}
[data-component-root='true'][data-cmp-variant-density='comfortable'] {
  --cmp-variant-density: comfortable;
}
[data-component-root='true'][data-cmp-variant-density='compact'] {
  --cmp-variant-density: compact;
}
[data-component-root='true'][data-cmp-variant-density='condensed'] {
  --cmp-variant-density: condensed;
}
[data-component-root='true'][data-cmp-variant-density='inherit'] {
  --cmp-variant-density: inherit;
}
[data-component-root='true'][data-cmp-variant-density='normal'] {
  --cmp-variant-density: normal;
}
[data-component-root='true'][data-cmp-variant-density='spacious'] {
  --cmp-variant-density: spacious;
}
[data-component-root='true'][data-cmp-variant-emphasis='card'] {
  --cmp-variant-emphasis: card;
}
[data-component-root='true'][data-cmp-variant-emphasis='plain'] {
  --cmp-variant-emphasis: plain;
}
[data-component-root='true'][data-cmp-variant-entrystyle='bar'] {
  --cmp-variant-entryStyle: bar;
}
[data-component-root='true'][data-cmp-variant-entrystyle='chip'] {
  --cmp-variant-entryStyle: chip;
}
[data-component-root='true'][data-cmp-variant-entrystyle='dot'] {
  --cmp-variant-entryStyle: dot;
}
[data-component-root='true'][data-cmp-variant-fit='contain'] {
  --cmp-variant-fit: contain;
}
[data-component-root='true'][data-cmp-variant-fit='cover'] {
  --cmp-variant-fit: cover;
}
[data-component-root='true'][data-cmp-variant-footerextras='copyright'] {
  --cmp-variant-footerExtras: copyright;
}
[data-component-root='true'][data-cmp-variant-footerextras='none'] {
  --cmp-variant-footerExtras: none;
}
[data-component-root='true'][data-cmp-variant-footerweight='columns'] {
  --cmp-variant-footerWeight: columns;
}
[data-component-root='true'][data-cmp-variant-footerweight='minimal'] {
  --cmp-variant-footerWeight: minimal;
}
[data-component-root='true'][data-cmp-variant-footerweight='sitemap'] {
  --cmp-variant-footerWeight: sitemap;
}
[data-component-root='true'][data-cmp-variant-format='compact'] {
  --cmp-variant-format: compact;
}
[data-component-root='true'][data-cmp-variant-format='currency'] {
  --cmp-variant-format: currency;
}
[data-component-root='true'][data-cmp-variant-format='duration'] {
  --cmp-variant-format: duration;
}
[data-component-root='true'][data-cmp-variant-format='integer'] {
  --cmp-variant-format: integer;
}
[data-component-root='true'][data-cmp-variant-format='number'] {
  --cmp-variant-format: number;
}
[data-component-root='true'][data-cmp-variant-format='percent'] {
  --cmp-variant-format: percent;
}
[data-component-root='true'][data-cmp-variant-grouping='grouped'] {
  --cmp-variant-grouping: grouped;
}
[data-component-root='true'][data-cmp-variant-grouping='stacked'] {
  --cmp-variant-grouping: stacked;
}
[data-component-root='true'][data-cmp-variant-headertreatment='bordered'] {
  --cmp-variant-headerTreatment: bordered;
}
[data-component-root='true'][data-cmp-variant-headertreatment='branded'] {
  --cmp-variant-headerTreatment: branded;
}
[data-component-root='true'][data-cmp-variant-headertreatment='plain'] {
  --cmp-variant-headerTreatment: plain;
}
[data-component-root='true'][data-cmp-variant-headertreatment='solid'] {
  --cmp-variant-headerTreatment: solid;
}
[data-component-root='true'][data-cmp-variant-headertreatment='subtle'] {
  --cmp-variant-headerTreatment: subtle;
}
[data-component-root='true'][data-cmp-variant-headinglevel='1'] {
  --cmp-variant-headingLevel: 1;
}
[data-component-root='true'][data-cmp-variant-headinglevel='2'] {
  --cmp-variant-headingLevel: 2;
}
[data-component-root='true'][data-cmp-variant-headingsize='default'] {
  --cmp-variant-headingSize: default;
}
[data-component-root='true'][data-cmp-variant-headingsize='sm'] {
  --cmp-variant-headingSize: sm;
}
[data-component-root='true'][data-cmp-variant-icon='circle'] {
  --cmp-variant-icon: circle;
}
[data-component-root='true'][data-cmp-variant-icon='loader'] {
  --cmp-variant-icon: loader;
}
[data-component-root='true'][data-cmp-variant-icon='refresh'] {
  --cmp-variant-icon: refresh;
}
[data-component-root='true'][data-cmp-variant-iconposition='left'] {
  --cmp-variant-iconPosition: left;
}
[data-component-root='true'][data-cmp-variant-iconposition='right'] {
  --cmp-variant-iconPosition: right;
}
[data-component-root='true'][data-cmp-variant-intent='default'] {
  --cmp-variant-intent: default;
}
[data-component-root='true'][data-cmp-variant-intent='destructive'] {
  --cmp-variant-intent: destructive;
}
[data-component-root='true'][data-cmp-variant-labelposition='bottom'] {
  --cmp-variant-labelPosition: bottom;
}
[data-component-root='true'][data-cmp-variant-labelposition='none'] {
  --cmp-variant-labelPosition: none;
}
[data-component-root='true'][data-cmp-variant-labelposition='right'] {
  --cmp-variant-labelPosition: right;
}
[data-component-root='true'][data-cmp-variant-lanewidth='narrow'] {
  --cmp-variant-laneWidth: narrow;
}
[data-component-root='true'][data-cmp-variant-lanewidth='wide'] {
  --cmp-variant-laneWidth: wide;
}
[data-component-root='true'][data-cmp-variant-layout='split'] {
  --cmp-variant-layout: split;
}
[data-component-root='true'][data-cmp-variant-layout='stacked'] {
  --cmp-variant-layout: stacked;
}
[data-component-root='true'][data-cmp-variant-loading='eager'] {
  --cmp-variant-loading: eager;
}
[data-component-root='true'][data-cmp-variant-loading='lazy'] {
  --cmp-variant-loading: lazy;
}
[data-component-root='true'][data-cmp-variant-logoplacement='centered'] {
  --cmp-variant-logoPlacement: centered;
}
[data-component-root='true'][data-cmp-variant-logoplacement='left'] {
  --cmp-variant-logoPlacement: left;
}
[data-component-root='true'][data-cmp-variant-marker='date'] {
  --cmp-variant-marker: date;
}
[data-component-root='true'][data-cmp-variant-marker='dot'] {
  --cmp-variant-marker: dot;
}
[data-component-root='true'][data-cmp-variant-marker='icon'] {
  --cmp-variant-marker: icon;
}
[data-component-root='true'][data-cmp-variant-marker='none'] {
  --cmp-variant-marker: none;
}
[data-component-root='true'][data-cmp-variant-marker='number'] {
  --cmp-variant-marker: number;
}
[data-component-root='true'][data-cmp-variant-mediaplacement='cover'] {
  --cmp-variant-mediaPlacement: cover;
}
[data-component-root='true'][data-cmp-variant-mediaplacement='thumbnail'] {
  --cmp-variant-mediaPlacement: thumbnail;
}
[data-component-root='true'][data-cmp-variant-mediaside='left'] {
  --cmp-variant-mediaSide: left;
}
[data-component-root='true'][data-cmp-variant-mediaside='right'] {
  --cmp-variant-mediaSide: right;
}
[data-component-root='true'][data-cmp-variant-mode='directions'] {
  --cmp-variant-mode: directions;
}
[data-component-root='true'][data-cmp-variant-mode='place'] {
  --cmp-variant-mode: place;
}
[data-component-root='true'][data-cmp-variant-mode='search'] {
  --cmp-variant-mode: search;
}
[data-component-root='true'][data-cmp-variant-mode='streetview'] {
  --cmp-variant-mode: streetview;
}
[data-component-root='true'][data-cmp-variant-mode='view'] {
  --cmp-variant-mode: view;
}
[data-component-root='true'][data-cmp-variant-narrowstart='hidden'] {
  --cmp-variant-narrowStart: hidden;
}
[data-component-root='true'][data-cmp-variant-narrowstart='row'] {
  --cmp-variant-narrowStart: row;
}
[data-component-root='true'][data-cmp-variant-objectfit='contain'] {
  --cmp-variant-objectFit: contain;
}
[data-component-root='true'][data-cmp-variant-objectfit='cover'] {
  --cmp-variant-objectFit: cover;
}
[data-component-root='true'][data-cmp-variant-objectfit='fill'] {
  --cmp-variant-objectFit: fill;
}
[data-component-root='true'][data-cmp-variant-objectfit='none'] {
  --cmp-variant-objectFit: none;
}
[data-component-root='true'][data-cmp-variant-objectfit='scale-down'] {
  --cmp-variant-objectFit: scale-down;
}
[data-component-root='true'][data-cmp-variant-orientation='horizontal'] {
  --cmp-variant-orientation: horizontal;
}
[data-component-root='true'][data-cmp-variant-orientation='vertical'] {
  --cmp-variant-orientation: vertical;
}
[data-component-root='true'][data-cmp-variant-outsidedays='hidden'] {
  --cmp-variant-outsideDays: hidden;
}
[data-component-root='true'][data-cmp-variant-outsidedays='muted'] {
  --cmp-variant-outsideDays: muted;
}
[data-component-root='true'][data-cmp-variant-padding='default'] {
  --cmp-variant-padding: default;
}
[data-component-root='true'][data-cmp-variant-padding='lg'] {
  --cmp-variant-padding: lg;
}
[data-component-root='true'][data-cmp-variant-padding='none'] {
  --cmp-variant-padding: none;
}
[data-component-root='true'][data-cmp-variant-padding='sm'] {
  --cmp-variant-padding: sm;
}
[data-component-root='true'][data-cmp-variant-placement='bottom'] {
  --cmp-variant-placement: bottom;
}
[data-component-root='true'][data-cmp-variant-placement='center'] {
  --cmp-variant-placement: center;
}
[data-component-root='true'][data-cmp-variant-placement='left'] {
  --cmp-variant-placement: left;
}
[data-component-root='true'][data-cmp-variant-placement='right'] {
  --cmp-variant-placement: right;
}
[data-component-root='true'][data-cmp-variant-placement='top'] {
  --cmp-variant-placement: top;
}
[data-component-root='true'][data-cmp-variant-position='fixed'] {
  --cmp-variant-position: fixed;
}
[data-component-root='true'][data-cmp-variant-position='static'] {
  --cmp-variant-position: static;
}
[data-component-root='true'][data-cmp-variant-presentation='band'] {
  --cmp-variant-presentation: band;
}
[data-component-root='true'][data-cmp-variant-presentation='block'] {
  --cmp-variant-presentation: block;
}
[data-component-root='true'][data-cmp-variant-presentation='panel'] {
  --cmp-variant-presentation: panel;
}
[data-component-root='true'][data-cmp-variant-resize='both'] {
  --cmp-variant-resize: both;
}
[data-component-root='true'][data-cmp-variant-resize='horizontal'] {
  --cmp-variant-resize: horizontal;
}
[data-component-root='true'][data-cmp-variant-resize='none'] {
  --cmp-variant-resize: none;
}
[data-component-root='true'][data-cmp-variant-resize='vertical'] {
  --cmp-variant-resize: vertical;
}
[data-component-root='true'][data-cmp-variant-rhythm='compact'] {
  --cmp-variant-rhythm: compact;
}
[data-component-root='true'][data-cmp-variant-rhythm='hero'] {
  --cmp-variant-rhythm: hero;
}
[data-component-root='true'][data-cmp-variant-rhythm='joined'] {
  --cmp-variant-rhythm: joined;
}
[data-component-root='true'][data-cmp-variant-rhythm='normal'] {
  --cmp-variant-rhythm: normal;
}
[data-component-root='true'][data-cmp-variant-role='error'] {
  --cmp-variant-role: error;
}
[data-component-root='true'][data-cmp-variant-role='info'] {
  --cmp-variant-role: info;
}
[data-component-root='true'][data-cmp-variant-role='neutral'] {
  --cmp-variant-role: neutral;
}
[data-component-root='true'][data-cmp-variant-role='success'] {
  --cmp-variant-role: success;
}
[data-component-root='true'][data-cmp-variant-role='warning'] {
  --cmp-variant-role: warning;
}
[data-component-root='true'][data-cmp-variant-rows='1'] {
  --cmp-variant-rows: 1;
}
[data-component-root='true'][data-cmp-variant-rows='2'] {
  --cmp-variant-rows: 2;
}
[data-component-root='true'][data-cmp-variant-rows='3'] {
  --cmp-variant-rows: 3;
}
[data-component-root='true'][data-cmp-variant-rows='auto'] {
  --cmp-variant-rows: auto;
}
[data-component-root='true'][data-cmp-variant-shape='circle'] {
  --cmp-variant-shape: circle;
}
[data-component-root='true'][data-cmp-variant-shape='inherit'] {
  --cmp-variant-shape: inherit;
}
[data-component-root='true'][data-cmp-variant-shape='rectangle'] {
  --cmp-variant-shape: rectangle;
}
[data-component-root='true'][data-cmp-variant-shape='rounded'] {
  --cmp-variant-shape: rounded;
}
[data-component-root='true'][data-cmp-variant-shape='sharp'] {
  --cmp-variant-shape: sharp;
}
[data-component-root='true'][data-cmp-variant-shape='soft'] {
  --cmp-variant-shape: soft;
}
[data-component-root='true'][data-cmp-variant-showvalues='none'] {
  --cmp-variant-showValues: none;
}
[data-component-root='true'][data-cmp-variant-showvalues='percent'] {
  --cmp-variant-showValues: percent;
}
[data-component-root='true'][data-cmp-variant-showvalues='value'] {
  --cmp-variant-showValues: value;
}
[data-component-root='true'][data-cmp-variant-side='bottom'] {
  --cmp-variant-side: bottom;
}
[data-component-root='true'][data-cmp-variant-side='left'] {
  --cmp-variant-side: left;
}
[data-component-root='true'][data-cmp-variant-side='right'] {
  --cmp-variant-side: right;
}
[data-component-root='true'][data-cmp-variant-side='top'] {
  --cmp-variant-side: top;
}
[data-component-root='true'][data-cmp-variant-sidebartone='brand'] {
  --cmp-variant-sidebarTone: brand;
}
[data-component-root='true'][data-cmp-variant-sidebartone='muted'] {
  --cmp-variant-sidebarTone: muted;
}
[data-component-root='true'][data-cmp-variant-sidebartone='plain'] {
  --cmp-variant-sidebarTone: plain;
}
[data-component-root='true'][data-cmp-variant-size='default'] {
  --cmp-variant-size: default;
}
[data-component-root='true'][data-cmp-variant-size='font'] {
  --cmp-variant-size: font;
}
[data-component-root='true'][data-cmp-variant-size='icon'] {
  --cmp-variant-size: icon;
}
[data-component-root='true'][data-cmp-variant-size='lg'] {
  --cmp-variant-size: lg;
}
[data-component-root='true'][data-cmp-variant-size='md'] {
  --cmp-variant-size: md;
}
[data-component-root='true'][data-cmp-variant-size='normal'] {
  --cmp-variant-size: normal;
}
[data-component-root='true'][data-cmp-variant-size='sm'] {
  --cmp-variant-size: sm;
}
[data-component-root='true'][data-cmp-variant-size='small'] {
  --cmp-variant-size: small;
}
[data-component-root='true'][data-cmp-variant-size='xl'] {
  --cmp-variant-size: xl;
}
[data-component-root='true'][data-cmp-variant-size='xs'] {
  --cmp-variant-size: xs;
}
[data-component-root='true'][data-cmp-variant-spacing='compact'] {
  --cmp-variant-spacing: compact;
}
[data-component-root='true'][data-cmp-variant-spacing='default'] {
  --cmp-variant-spacing: default;
}
[data-component-root='true'][data-cmp-variant-spacing='spacious'] {
  --cmp-variant-spacing: spacious;
}
[data-component-root='true'][data-cmp-variant-span='12'] {
  --cmp-variant-span: 12;
}
[data-component-root='true'][data-cmp-variant-span='3'] {
  --cmp-variant-span: 3;
}
[data-component-root='true'][data-cmp-variant-span='4'] {
  --cmp-variant-span: 4;
}
[data-component-root='true'][data-cmp-variant-span='6'] {
  --cmp-variant-span: 6;
}
[data-component-root='true'][data-cmp-variant-span='8'] {
  --cmp-variant-span: 8;
}
[data-component-root='true'][data-cmp-variant-span='9'] {
  --cmp-variant-span: 9;
}
[data-component-root='true'][data-cmp-variant-speed='fast'] {
  --cmp-variant-speed: fast;
}
[data-component-root='true'][data-cmp-variant-speed='medium'] {
  --cmp-variant-speed: medium;
}
[data-component-root='true'][data-cmp-variant-speed='slow'] {
  --cmp-variant-speed: slow;
}
[data-component-root='true'][data-cmp-variant-state='current'] {
  --cmp-variant-state: current;
}
[data-component-root='true'][data-cmp-variant-state='done'] {
  --cmp-variant-state: done;
}
[data-component-root='true'][data-cmp-variant-state='none'] {
  --cmp-variant-state: none;
}
[data-component-root='true'][data-cmp-variant-state='upcoming'] {
  --cmp-variant-state: upcoming;
}
[data-component-root='true'][data-cmp-variant-status='none'] {
  --cmp-variant-status: none;
}
[data-component-root='true'][data-cmp-variant-status='online'] {
  --cmp-variant-status: online;
}
[data-component-root='true'][data-cmp-variant-status='verified'] {
  --cmp-variant-status: verified;
}
[data-component-root='true'][data-cmp-variant-surfaces='open'] {
  --cmp-variant-surfaces: open;
}
[data-component-root='true'][data-cmp-variant-surfaces='solid'] {
  --cmp-variant-surfaces: solid;
}
[data-component-root='true'][data-cmp-variant-surfaces='translucent'] {
  --cmp-variant-surfaces: translucent;
}
[data-component-root='true'][data-cmp-variant-tablestyle='grid'] {
  --cmp-variant-tableStyle: grid;
}
[data-component-root='true'][data-cmp-variant-tablestyle='lined'] {
  --cmp-variant-tableStyle: lined;
}
[data-component-root='true'][data-cmp-variant-tablestyle='striped'] {
  --cmp-variant-tableStyle: striped;
}
[data-component-root='true'][data-cmp-variant-today='disc'] {
  --cmp-variant-today: disc;
}
[data-component-root='true'][data-cmp-variant-today='ring'] {
  --cmp-variant-today: ring;
}
[data-component-root='true'][data-cmp-variant-today='subtle'] {
  --cmp-variant-today: subtle;
}
[data-component-root='true'][data-cmp-variant-tone='error'] {
  --cmp-variant-tone: error;
}
[data-component-root='true'][data-cmp-variant-tone='info'] {
  --cmp-variant-tone: info;
}
[data-component-root='true'][data-cmp-variant-tone='neutral'] {
  --cmp-variant-tone: neutral;
}
[data-component-root='true'][data-cmp-variant-tone='none'] {
  --cmp-variant-tone: none;
}
[data-component-root='true'][data-cmp-variant-tone='success'] {
  --cmp-variant-tone: success;
}
[data-component-root='true'][data-cmp-variant-tone='warning'] {
  --cmp-variant-tone: warning;
}
[data-component-root='true'][data-cmp-variant-type='button'] {
  --cmp-variant-type: button;
}
[data-component-root='true'][data-cmp-variant-type='email'] {
  --cmp-variant-type: email;
}
[data-component-root='true'][data-cmp-variant-type='multiple'] {
  --cmp-variant-type: multiple;
}
[data-component-root='true'][data-cmp-variant-type='number'] {
  --cmp-variant-type: number;
}
[data-component-root='true'][data-cmp-variant-type='password'] {
  --cmp-variant-type: password;
}
[data-component-root='true'][data-cmp-variant-type='reset'] {
  --cmp-variant-type: reset;
}
[data-component-root='true'][data-cmp-variant-type='search'] {
  --cmp-variant-type: search;
}
[data-component-root='true'][data-cmp-variant-type='single'] {
  --cmp-variant-type: single;
}
[data-component-root='true'][data-cmp-variant-type='submit'] {
  --cmp-variant-type: submit;
}
[data-component-root='true'][data-cmp-variant-type='tel'] {
  --cmp-variant-type: tel;
}
[data-component-root='true'][data-cmp-variant-type='text'] {
  --cmp-variant-type: text;
}
[data-component-root='true'][data-cmp-variant-type='url'] {
  --cmp-variant-type: url;
}
[data-component-root='true'][data-cmp-variant-variant='agenda'] {
  --cmp-variant-variant: agenda;
}
[data-component-root='true'][data-cmp-variant-variant='alternating'] {
  --cmp-variant-variant: alternating;
}
[data-component-root='true'][data-cmp-variant-variant='aside'] {
  --cmp-variant-variant: aside;
}
[data-component-root='true'][data-cmp-variant-variant='band'] {
  --cmp-variant-variant: band;
}
[data-component-root='true'][data-cmp-variant-variant='banner'] {
  --cmp-variant-variant: banner;
}
[data-component-root='true'][data-cmp-variant-variant='bar'] {
  --cmp-variant-variant: bar;
}
[data-component-root='true'][data-cmp-variant-variant='bars'] {
  --cmp-variant-variant: bars;
}
[data-component-root='true'][data-cmp-variant-variant='bento'] {
  --cmp-variant-variant: bento;
}
[data-component-root='true'][data-cmp-variant-variant='board'] {
  --cmp-variant-variant: board;
}
[data-component-root='true'][data-cmp-variant-variant='bordered'] {
  --cmp-variant-variant: bordered;
}
[data-component-root='true'][data-cmp-variant-variant='button'] {
  --cmp-variant-variant: button;
}
[data-component-root='true'][data-cmp-variant-variant='calendar'] {
  --cmp-variant-variant: calendar;
}
[data-component-root='true'][data-cmp-variant-variant='canvas'] {
  --cmp-variant-variant: canvas;
}
[data-component-root='true'][data-cmp-variant-variant='card'] {
  --cmp-variant-variant: card;
}
[data-component-root='true'][data-cmp-variant-variant='cards'] {
  --cmp-variant-variant: cards;
}
[data-component-root='true'][data-cmp-variant-variant='cell'] {
  --cmp-variant-variant: cell;
}
[data-component-root='true'][data-cmp-variant-variant='compact'] {
  --cmp-variant-variant: compact;
}
[data-component-root='true'][data-cmp-variant-variant='console'] {
  --cmp-variant-variant: console;
}
[data-component-root='true'][data-cmp-variant-variant='cover'] {
  --cmp-variant-variant: cover;
}
[data-component-root='true'][data-cmp-variant-variant='default'] {
  --cmp-variant-variant: default;
}
[data-component-root='true'][data-cmp-variant-variant='destructive'] {
  --cmp-variant-variant: destructive;
}
[data-component-root='true'][data-cmp-variant-variant='dial'] {
  --cmp-variant-variant: dial;
}
[data-component-root='true'][data-cmp-variant-variant='display'] {
  --cmp-variant-variant: display;
}
[data-component-root='true'][data-cmp-variant-variant='donut'] {
  --cmp-variant-variant: donut;
}
[data-component-root='true'][data-cmp-variant-variant='elevated'] {
  --cmp-variant-variant: elevated;
}
[data-component-root='true'][data-cmp-variant-variant='error'] {
  --cmp-variant-variant: error;
}
[data-component-root='true'][data-cmp-variant-variant='feed'] {
  --cmp-variant-variant: feed;
}
[data-component-root='true'][data-cmp-variant-variant='feedRow'] {
  --cmp-variant-variant: feedRow;
}
[data-component-root='true'][data-cmp-variant-variant='form'] {
  --cmp-variant-variant: form;
}
[data-component-root='true'][data-cmp-variant-variant='full'] {
  --cmp-variant-variant: full;
}
[data-component-root='true'][data-cmp-variant-variant='funnel'] {
  --cmp-variant-variant: funnel;
}
[data-component-root='true'][data-cmp-variant-variant='grid'] {
  --cmp-variant-variant: grid;
}
[data-component-root='true'][data-cmp-variant-variant='grouped'] {
  --cmp-variant-variant: grouped;
}
[data-component-root='true'][data-cmp-variant-variant='horizontal'] {
  --cmp-variant-variant: horizontal;
}
[data-component-root='true'][data-cmp-variant-variant='info'] {
  --cmp-variant-variant: info;
}
[data-component-root='true'][data-cmp-variant-variant='inline'] {
  --cmp-variant-variant: inline;
}
[data-component-root='true'][data-cmp-variant-variant='inverse'] {
  --cmp-variant-variant: inverse;
}
[data-component-root='true'][data-cmp-variant-variant='lane'] {
  --cmp-variant-variant: lane;
}
[data-component-root='true'][data-cmp-variant-variant='line'] {
  --cmp-variant-variant: line;
}
[data-component-root='true'][data-cmp-variant-variant='link'] {
  --cmp-variant-variant: link;
}
[data-component-root='true'][data-cmp-variant-variant='list'] {
  --cmp-variant-variant: list;
}
[data-component-root='true'][data-cmp-variant-variant='number'] {
  --cmp-variant-variant: number;
}
[data-component-root='true'][data-cmp-variant-variant='outline'] {
  --cmp-variant-variant: outline;
}
[data-component-root='true'][data-cmp-variant-variant='overlap'] {
  --cmp-variant-variant: overlap;
}
[data-component-root='true'][data-cmp-variant-variant='page'] {
  --cmp-variant-variant: page;
}
[data-component-root='true'][data-cmp-variant-variant='panels'] {
  --cmp-variant-variant: panels;
}
[data-component-root='true'][data-cmp-variant-variant='path'] {
  --cmp-variant-variant: path;
}
[data-component-root='true'][data-cmp-variant-variant='pie'] {
  --cmp-variant-variant: pie;
}
[data-component-root='true'][data-cmp-variant-variant='plain'] {
  --cmp-variant-variant: plain;
}
[data-component-root='true'][data-cmp-variant-variant='primary'] {
  --cmp-variant-variant: primary;
}
[data-component-root='true'][data-cmp-variant-variant='progress'] {
  --cmp-variant-variant: progress;
}
[data-component-root='true'][data-cmp-variant-variant='ring'] {
  --cmp-variant-variant: ring;
}
[data-component-root='true'][data-cmp-variant-variant='row'] {
  --cmp-variant-variant: row;
}
[data-component-root='true'][data-cmp-variant-variant='rows'] {
  --cmp-variant-variant: rows;
}
[data-component-root='true'][data-cmp-variant-variant='secondary'] {
  --cmp-variant-variant: secondary;
}
[data-component-root='true'][data-cmp-variant-variant='separated'] {
  --cmp-variant-variant: separated;
}
[data-component-root='true'][data-cmp-variant-variant='slim'] {
  --cmp-variant-variant: slim;
}
[data-component-root='true'][data-cmp-variant-variant='solid'] {
  --cmp-variant-variant: solid;
}
[data-component-root='true'][data-cmp-variant-variant='sparkline'] {
  --cmp-variant-variant: sparkline;
}
[data-component-root='true'][data-cmp-variant-variant='split'] {
  --cmp-variant-variant: split;
}
[data-component-root='true'][data-cmp-variant-variant='stack'] {
  --cmp-variant-variant: stack;
}
[data-component-root='true'][data-cmp-variant-variant='stacked'] {
  --cmp-variant-variant: stacked;
}
[data-component-root='true'][data-cmp-variant-variant='success'] {
  --cmp-variant-variant: success;
}
[data-component-root='true'][data-cmp-variant-variant='table'] {
  --cmp-variant-variant: table;
}
[data-component-root='true'][data-cmp-variant-variant='tableRow'] {
  --cmp-variant-variant: tableRow;
}
[data-component-root='true'][data-cmp-variant-variant='tertiary'] {
  --cmp-variant-variant: tertiary;
}
[data-component-root='true'][data-cmp-variant-variant='tiles'] {
  --cmp-variant-variant: tiles;
}
[data-component-root='true'][data-cmp-variant-variant='tilesAndChart'] {
  --cmp-variant-variant: tilesAndChart;
}
[data-component-root='true'][data-cmp-variant-variant='underline'] {
  --cmp-variant-variant: underline;
}
[data-component-root='true'][data-cmp-variant-variant='vertical'] {
  --cmp-variant-variant: vertical;
}
[data-component-root='true'][data-cmp-variant-variant='warning'] {
  --cmp-variant-variant: warning;
}
[data-component-root='true'][data-cmp-variant-variant='workspace'] {
  --cmp-variant-variant: workspace;
}
[data-component-root='true'][data-cmp-variant-weekstart='monday'] {
  --cmp-variant-weekStart: monday;
}
[data-component-root='true'][data-cmp-variant-weekstart='sunday'] {
  --cmp-variant-weekStart: sunday;
}
[data-component-root='true'][data-cmp-variant-weekends='plain'] {
  --cmp-variant-weekends: plain;
}
[data-component-root='true'][data-cmp-variant-weekends='shaded'] {
  --cmp-variant-weekends: shaded;
}
[data-component-root='true'][data-cmp-variant-width='3xl'] {
  --cmp-variant-width: 3xl;
}
[data-component-root='true'][data-cmp-variant-width='4xl'] {
  --cmp-variant-width: 4xl;
}
[data-component-root='true'][data-cmp-variant-width='5xl'] {
  --cmp-variant-width: 5xl;
}
[data-component-root='true'][data-cmp-variant-width='6xl'] {
  --cmp-variant-width: 6xl;
}
[data-component-root='true'][data-cmp-variant-width='7xl'] {
  --cmp-variant-width: 7xl;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-950: oklch(26.6% 0.079 36.259);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-950: oklch(26.6% 0.065 152.934);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-300: oklch(86.5% 0.127 207.078);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-950: oklch(29.3% 0.066 243.157);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-violet-950: oklch(28.3% 0.141 291.089);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-950: oklch(13% 0.028 261.692);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 4px;
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-widest: 0.1em;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-xl: 24px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --default-mono-font-family: var(--font-mono);
    --radius-inline: 4px;
    --radius-nested: 6px;
    --radius-control: 8px;
    --radius-popover: 10px;
    --radius-track: 10px;
    --radius-container: 12px;
    --radius-surface: 16px;
    --radius-full: 9999px;
    --color-brand-50: oklch(97% 0.014 254.604);
    --color-void-500: #3d4d93;
    --color-void-600: #2c3a74;
    --color-void-700: #1f2b58;
    --color-void-800: #141d3d;
    --color-void-900: #0c1228;
    --color-void-950: #05080f;
    --text-xs: 12px;
    --text-xs--line-height: 18px;
    --text-xs--letter-spacing: 0px;
    --weight-xs: 400;
    --style-xs: normal;
    --font-variation-xs: normal;
    --font-xs: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-sm: 14px;
    --text-sm--line-height: 20px;
    --text-sm--letter-spacing: 0px;
    --weight-sm: 400;
    --style-sm: normal;
    --font-variation-sm: normal;
    --font-sm: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-base: 16px;
    --text-base--line-height: 24px;
    --text-base--letter-spacing: 0px;
    --weight-base: 400;
    --style-base: normal;
    --font-variation-base: normal;
    --font-base: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-lg: 18px;
    --text-lg--line-height: 28px;
    --text-lg--letter-spacing: 0px;
    --weight-lg: 400;
    --style-lg: normal;
    --font-variation-lg: normal;
    --font-lg: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-xl: 20px;
    --text-xl--line-height: 30px;
    --text-xl--letter-spacing: 0px;
    --weight-xl: 400;
    --style-xl: normal;
    --font-variation-xl: normal;
    --font-xl: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-2xl: 24px;
    --text-2xl--line-height: 32px;
    --text-2xl--letter-spacing: 0px;
    --weight-2xl: 400;
    --style-2xl: normal;
    --font-variation-2xl: normal;
    --font-2xl: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-3xl: 30px;
    --text-3xl--line-height: 38px;
    --text-3xl--letter-spacing: 0px;
    --weight-3xl: 400;
    --style-3xl: normal;
    --font-variation-3xl: normal;
    --font-3xl: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-4xl: 36px;
    --text-4xl--line-height: 44px;
    --text-4xl--letter-spacing: -0.02em;
    --weight-4xl: 600;
    --style-4xl: normal;
    --font-variation-4xl: normal;
    --font-4xl: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-5xl: 48px;
    --text-5xl--line-height: 60px;
    --text-5xl--letter-spacing: -0.02em;
    --weight-5xl: 700;
    --style-5xl: normal;
    --font-variation-5xl: normal;
    --font-5xl: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-6xl: 60px;
    --text-6xl--line-height: 72px;
    --text-6xl--letter-spacing: -0.03em;
    --weight-6xl: 700;
    --style-6xl: normal;
    --font-variation-6xl: normal;
    --font-6xl: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-7xl: 72px;
    --text-7xl--line-height: 90px;
    --text-7xl--letter-spacing: -0.03em;
    --weight-7xl: 700;
    --style-7xl: normal;
    --font-variation-7xl: normal;
    --font-7xl: "Segoe UI", sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-color-primary: var(--color-gray-50);
    --text-decoration-color-primary: var(--text-color-primary);
    --text-color-secondary: var(--color-gray-300);
    --text-decoration-color-secondary: var(--text-color-secondary);
    --text-color-tertiary: var(--color-gray-400);
    --text-decoration-color-tertiary: var(--text-color-tertiary);
    --text-color-quaternary: var(--color-gray-500);
    --text-decoration-color-quaternary: var(--text-color-quaternary);
    --text-color-brand: var(--color-cyan-300);
    --text-decoration-color-brand: var(--text-color-brand);
    --text-color-brand-hover: var(--color-cyan-200);
    --text-decoration-color-brand-hover: var(--text-color-brand-hover);
    --text-color-brand-active: var(--color-cyan-100);
    --text-decoration-color-brand-active: var(--text-color-brand-active);
    --text-color-on-brand-solid: var(--color-brand-50);
    --text-decoration-color-on-brand-solid: var(--text-color-on-brand-solid);
    --text-color-danger: var(--color-red-400);
    --text-decoration-color-danger: var(--text-color-danger);
    --text-color-danger-hover: var(--color-red-300);
    --text-decoration-color-danger-hover: var(--text-color-danger-hover);
    --text-color-danger-active: var(--color-red-200);
    --text-decoration-color-danger-active: var(--text-color-danger-active);
    --text-color-on-danger-solid: var(--color-red-50);
    --text-decoration-color-on-danger-solid: var(--text-color-on-danger-solid);
    --text-color-warning: var(--color-orange-400);
    --text-decoration-color-warning: var(--text-color-warning);
    --text-color-success: var(--color-green-400);
    --text-decoration-color-success: var(--text-color-success);
    --text-color-disabled: var(--color-gray-500);
    --text-decoration-color-disabled: var(--text-color-disabled);
    --text-color-black: var(--color-black);
    --text-decoration-color-black: var(--text-color-black);
    --text-color-white: var(--color-white);
    --text-decoration-color-white: var(--text-color-white);
    --text-color-inverse: var(--color-gray-950);
    --text-decoration-color-inverse: var(--text-color-inverse);
    --text-color-blue: var(--color-blue-300);
    --text-decoration-color-blue: var(--text-color-blue);
    --text-color-green: var(--color-green-300);
    --text-decoration-color-green: var(--text-color-green);
    --text-color-sky: var(--color-sky-300);
    --text-decoration-color-sky: var(--text-color-sky);
    --text-color-purple: var(--color-purple-300);
    --text-decoration-color-purple: var(--text-color-purple);
    --text-color-orange: var(--color-orange-300);
    --text-decoration-color-orange: var(--text-color-orange);
    --background-color-primary: var(--color-void-950);
    --background-color-secondary: var(--color-void-900);
    --background-color-tertiary: var(--color-void-800);
    --background-color-quaternary: var(--color-void-700);
    --background-color-surface-sunken: #02040a;
    --background-color-surface-0: var(--color-void-950);
    --background-color-surface-1: var(--color-void-900);
    --background-color-surface-2: var(--color-void-800);
    --background-color-surface-3: var(--color-void-800);
    --background-color-surface-4: var(--color-void-700);
    --background-color-brand-solid: var(--color-violet-600);
    --background-color-brand-solid-hover: var(--color-violet-500);
    --background-color-brand-solid-active: var(--color-violet-700);
    --background-color-brand: var(--color-violet-950);
    --background-color-danger-solid: var(--color-red-500);
    --background-color-danger-solid-hover: var(--color-red-600);
    --background-color-danger-solid-active: var(--color-red-700);
    --background-color-danger: var(--color-red-950);
    --background-color-warning-solid: var(--color-orange-500);
    --background-color-warning: var(--color-orange-950);
    --background-color-success-solid: var(--color-green-500);
    --background-color-success: var(--color-green-950);
    --background-color-disabled: var(--color-void-800);
    --background-color-inverse: var(--color-gray-50);
    --background-color-blue: var(--color-blue-950);
    --background-color-green: var(--color-green-950);
    --background-color-sky: var(--color-sky-950);
    --background-color-purple: var(--color-purple-950);
    --background-color-orange: var(--color-orange-950);
    --background-color-gray: var(--color-gray-700);
    --background-color-gray-2: var(--color-gray-800);
    --border-color-primary: var(--color-void-500);
    --outline-color-primary: var(--border-color-primary);
    --border-color-secondary: var(--color-void-600);
    --outline-color-secondary: var(--border-color-secondary);
    --border-color-tertiary: var(--color-void-700);
    --outline-color-tertiary: var(--border-color-tertiary);
    --border-color-quaternary: var(--color-void-800);
    --outline-color-quaternary: var(--border-color-quaternary);
    --border-color-brand: var(--color-cyan-400);
    --outline-color-brand: var(--border-color-brand);
    --border-color-danger: var(--color-red-400);
    --outline-color-danger: var(--border-color-danger);
    --border-color-warning: var(--color-orange-400);
    --outline-color-warning: var(--border-color-warning);
    --border-color-success: var(--color-green-400);
    --outline-color-success: var(--border-color-success);
    --border-color-disabled: var(--color-gray-600);
    --outline-color-disabled: var(--border-color-disabled);
    --border-color-focus: var(--color-cyan-300);
    --outline-color-focus: var(--border-color-focus);
    --color-focus: var(--border-color-focus);
    --border-color-blue: var(--color-blue-700);
    --outline-color-blue: var(--border-color-blue);
    --border-color-green: var(--color-green-700);
    --outline-color-green: var(--border-color-green);
    --border-color-sky: var(--color-sky-700);
    --outline-color-sky: var(--border-color-sky);
    --border-color-purple: var(--color-purple-700);
    --outline-color-purple: var(--border-color-purple);
    --border-color-orange: var(--color-orange-700);
    --outline-color-orange: var(--border-color-orange);
    --color-primary-icon: var(--color-gray-50);
    --color-secondary-icon: var(--color-gray-300);
    --color-tertiary-icon: var(--color-gray-400);
    --color-quaternary-icon: var(--color-gray-600);
    --color-brand-icon: var(--color-cyan-300);
    --color-on-brand-solid-icon: var(--color-brand-50);
    --color-on-danger-icon: var(--color-red-50);
    --color-danger-icon: var(--color-red-400);
    --color-warning-icon: var(--color-orange-500);
    --color-success-icon: var(--color-green-500);
    --color-disabled-icon: var(--color-gray-500);
    --color-blue-icon: var(--color-blue-300);
    --color-green-icon: var(--color-green-300);
    --color-sky-icon: var(--color-sky-300);
    --color-purple-icon: var(--color-purple-300);
    --color-orange-icon: var(--color-orange-300);
    --color-shadow-key: rgb(0 0 0 / 0.5);
    --color-shadow-ambient: rgb(0 0 0 / 0.35);
    --color-gradient-start: var(--color-violet-600);
    --color-gradient-end: var(--color-cyan-500);
    --color-chart-1: var(--color-cyan-400);
    --color-chart-2: var(--color-violet-400);
    --color-chart-3: var(--color-indigo-300);
    --color-chart-4: var(--color-cyan-700);
    --color-chart-5: var(--color-violet-700);
    --color-on-chart-1: var(--color-void-950);
    --color-on-chart-2: var(--color-void-950);
    --color-on-chart-3: var(--color-void-950);
    --color-on-chart-4: var(--color-gray-50);
    --color-on-chart-5: var(--color-gray-50);
    --color-neon-glow: rgb(34 211 238 / 0.35);
  }
}
@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 {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-y-2 {
    inset-block: calc(var(--spacing) * 2);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-\[var\(--control-field-padding-inline-tight\)\] {
    right: var(--control-field-padding-inline-tight);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-full {
    left: 100%;
  }
  .isolate {
    isolation: isolate;
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-10 {
    z-index: 10;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .order-last {
    order: 9999;
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-auto {
    margin: auto;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-inset-nested {
    margin-block: var(--inset-nested);
  }
  .my-space-2xl {
    margin-block: var(--space-2xl);
  }
  .my-space-sm {
    margin-block: var(--space-sm);
  }
  .ms-space-2xs {
    margin-inline-start: var(--space-2xs);
  }
  .me-space-sm {
    margin-inline-end: var(--space-sm);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mt-space-2xl {
    margin-top: var(--space-2xl);
  }
  .mt-space-md {
    margin-top: var(--space-md);
  }
  .mt-space-xs {
    margin-top: var(--space-xs);
  }
  .-mb-\(--rail-gap\,0px\) {
    margin-bottom: calc(var(--rail-gap,0px) * -1);
  }
  .-mb-space-2xl {
    margin-bottom: calc(var(--space-2xl) * -1);
  }
  .mb-space-lg {
    margin-bottom: var(--space-lg);
  }
  .mb-space-md {
    margin-bottom: var(--space-md);
  }
  .mb-space-sm {
    margin-bottom: var(--space-sm);
  }
  .mb-space-xl {
    margin-bottom: var(--space-xl);
  }
  .mb-space-xs {
    margin-bottom: var(--space-xs);
  }
  .ml-\[var\(--component-toggle-knob-inset\)\] {
    margin-left: var(--component-toggle-knob-inset);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .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;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .size-0 {
    width: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 0);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .size-48 {
    width: calc(var(--spacing) * 48);
    height: calc(var(--spacing) * 48);
  }
  .size-component-radio-dot-size {
    width: var(--component-radio-dot-size);
    height: var(--component-radio-dot-size);
  }
  .size-component-toggle-knob-size {
    width: var(--component-toggle-knob-size);
    height: var(--component-toggle-knob-size);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .size-icon-lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }
  .size-icon-md {
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .size-icon-sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  .size-icon-xs {
    width: var(--icon-xs);
    height: var(--icon-xs);
  }
  .size-size-3xs {
    width: var(--size-3xs);
    height: var(--size-3xs);
  }
  .size-size-md {
    width: var(--size-md);
    height: var(--size-md);
  }
  .size-size-sm {
    width: var(--size-sm);
    height: var(--size-sm);
  }
  .size-size-xl {
    width: var(--size-xl);
    height: var(--size-xl);
  }
  .size-control-box {
    width: var(--control-box-size);
    height: var(--control-box-size);
  }
  .size-control-md {
    width: var(--control-md-size);
    height: var(--control-md-size);
  }
  .size-control-sm {
    width: var(--control-sm-size);
    height: var(--control-sm-size);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-\[1em\] {
    height: 1em;
  }
  .h-auto {
    height: auto;
  }
  .h-component-toggle-track-height {
    height: var(--component-toggle-track-height);
  }
  .h-control-lg {
    height: var(--control-lg-size);
  }
  .h-control-md {
    height: var(--control-md-size);
  }
  .h-control-sm {
    height: var(--control-sm-size);
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .h-size-lg {
    height: var(--size-lg);
  }
  .h-size-md {
    height: var(--size-md);
  }
  .h-size-sm {
    height: var(--size-sm);
  }
  .h-size-xl {
    height: var(--size-xl);
  }
  .h-size-xs {
    height: var(--size-xs);
  }
  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }
  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-\[80px\] {
    min-height: 80px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .min-h-size-lg {
    min-height: var(--size-lg);
  }
  .min-h-size-md {
    min-height: var(--size-md);
  }
  .min-h-size-xs {
    min-height: var(--size-xs);
  }
  .w-2\/3 {
    width: calc(2 / 3 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-auto {
    width: auto;
  }
  .w-component-toggle-track-width {
    width: var(--component-toggle-track-width);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-px {
    width: 1px;
  }
  .max-w-\(--content-width\,var\(--container-7xl\)\) {
    max-width: var(--content-width,var(--container-7xl));
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-96 {
    max-width: calc(var(--spacing) * 96);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .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-32 {
    min-width: calc(var(--spacing) * 32);
  }
  .min-w-size-xs {
    min-width: var(--size-xs);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .grow-0 {
    flex-grow: 0;
  }
  .basis-28 {
    flex-basis: calc(var(--spacing) * 28);
  }
  .basis-64 {
    flex-basis: calc(var(--spacing) * 64);
  }
  .basis-full {
    flex-basis: 100%;
  }
  .table-fixed {
    table-layout: fixed;
  }
  .caption-bottom {
    caption-side: bottom;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .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-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-5 {
    --tw-translate-y: calc(var(--spacing) * -5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-10 {
    --tw-translate-y: calc(var(--spacing) * -10);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-15 {
    --tw-translate-y: calc(var(--spacing) * -15);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-85 {
    --tw-scale-x: 85%;
    --tw-scale-y: 85%;
    --tw-scale-z: 85%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .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;
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .appearance-none {
    appearance: none;
  }
  .break-inside-avoid {
    break-inside: avoid;
  }
  .grid-cols-\(--lead-tile-columns\,minmax\(0\,1fr\)\) {
    grid-template-columns: var(--lead-tile-columns,minmax(0,1fr));
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .\[grid-template-rows\:0fr\] {
    grid-template-rows: 0fr;
  }
  .\[grid-template-rows\:1fr\] {
    grid-template-rows: 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-\(--rail-gap\) {
    gap: var(--rail-gap);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-space-2xl {
    gap: var(--space-2xl);
  }
  .gap-space-2xs {
    gap: var(--space-2xs);
  }
  .gap-space-3xl {
    gap: var(--space-3xl);
  }
  .gap-space-4xl {
    gap: var(--space-4xl);
  }
  .gap-space-lg {
    gap: var(--space-lg);
  }
  .gap-space-md {
    gap: var(--space-md);
  }
  .gap-space-sm {
    gap: var(--space-sm);
  }
  .gap-space-xl {
    gap: var(--space-xl);
  }
  .gap-space-xs {
    gap: var(--space-xs);
  }
  .gap-control-group {
    column-gap: var(--control-group-gap);
    row-gap: var(--control-group-gap);
  }
  .gap-control-md {
    column-gap: var(--control-md-gap);
    row-gap: var(--control-md-gap);
  }
  .gap-control-xs {
    column-gap: var(--control-xs-gap);
    row-gap: var(--control-xs-gap);
  }
  .gap-x-space-lg {
    column-gap: var(--space-lg);
  }
  .gap-x-space-md {
    column-gap: var(--space-md);
  }
  .gap-x-space-sm {
    column-gap: var(--space-sm);
  }
  .gap-x-space-xl {
    column-gap: var(--space-xl);
  }
  .gap-y-space-2xs {
    row-gap: var(--space-2xs);
  }
  .gap-y-space-md {
    row-gap: var(--space-md);
  }
  .gap-y-space-sm {
    row-gap: var(--space-sm);
  }
  .gap-y-space-xs {
    row-gap: var(--space-xs);
  }
  .self-start {
    align-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-clip {
    overflow: clip;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-container {
    border-radius: var(--radius-container);
  }
  .rounded-control {
    border-radius: var(--radius-control);
  }
  .rounded-full {
    border-radius: var(--radius-full);
  }
  .rounded-inline {
    border-radius: var(--radius-inline);
  }
  .rounded-nested {
    border-radius: var(--radius-nested);
  }
  .rounded-popover {
    border-radius: var(--radius-popover);
  }
  .rounded-surface {
    border-radius: var(--radius-surface);
  }
  .rounded-t-container {
    border-top-left-radius: var(--radius-container);
    border-top-right-radius: var(--radius-container);
  }
  .rounded-b-surface {
    border-bottom-right-radius: var(--radius-surface);
    border-bottom-left-radius: var(--radius-surface);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-thick {
    border-left-style: var(--tw-border-style, solid);
    border-left-width: var(--border-thick);
    border-right-style: var(--tw-border-style, solid);
    border-right-width: var(--border-thick);
    border-top-style: var(--tw-border-style, solid);
    border-top-width: var(--border-thick);
    border-bottom-style: var(--tw-border-style, solid);
    border-bottom-width: var(--border-thick);
  }
  .border {
    border-left-width: var(--border-thin);
    border-right-width: var(--border-thin);
    border-top-width: var(--border-thin);
    border-bottom-width: var(--border-thin);
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t {
    border-top-width: var(--border-thin);
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b {
    border-bottom-width: var(--border-thin);
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-heavy {
    border-left-style: var(--tw-border-style, solid);
    border-left-width: var(--border-heavy);
  }
  .border-l {
    border-left-width: var(--border-thin);
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-brand {
    border-color: var(--border-color-brand);
  }
  .border-danger {
    border-color: var(--border-color-danger);
  }
  .border-primary {
    border-color: var(--border-color-primary);
  }
  .border-secondary {
    border-color: var(--border-color-secondary);
  }
  .border-tertiary {
    border-color: var(--border-color-tertiary);
  }
  .border-tertiary\/60 {
    border-color: color-mix(in srgb, #1f2b58 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--border-color-tertiary) 60%, transparent);
    }
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-brand {
    background-color: var(--background-color-brand);
  }
  .bg-brand-solid {
    background-color: var(--background-color-brand-solid);
  }
  .bg-chart-1 {
    background-color: var(--color-chart-1);
  }
  .bg-chart-2 {
    background-color: var(--color-chart-2);
  }
  .bg-chart-3 {
    background-color: var(--color-chart-3);
  }
  .bg-chart-4 {
    background-color: var(--color-chart-4);
  }
  .bg-chart-5 {
    background-color: var(--color-chart-5);
  }
  .bg-current\/10 {
    background-color: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, currentcolor 10%, transparent);
    }
  }
  .bg-danger-solid {
    background-color: var(--background-color-danger-solid);
  }
  .bg-disabled {
    background-color: var(--background-color-disabled);
  }
  .bg-primary {
    background-color: var(--background-color-primary);
  }
  .bg-primary\/80 {
    background-color: color-mix(in srgb, #05080f 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
    }
  }
  .bg-quaternary {
    background-color: var(--background-color-quaternary);
  }
  .bg-secondary {
    background-color: var(--background-color-secondary);
  }
  .bg-success {
    background-color: var(--background-color-success);
  }
  .bg-success-solid {
    background-color: var(--background-color-success-solid);
  }
  .bg-surface-0 {
    background-color: var(--background-color-surface-0);
  }
  .bg-surface-1 {
    background-color: var(--background-color-surface-1);
  }
  .bg-surface-2 {
    background-color: var(--background-color-surface-2);
  }
  .bg-surface-3 {
    background-color: var(--background-color-surface-3);
  }
  .bg-surface-4 {
    background-color: var(--background-color-surface-4);
  }
  .bg-surface-sunken {
    background-color: var(--background-color-surface-sunken);
  }
  .bg-tertiary {
    background-color: var(--background-color-tertiary);
  }
  .bg-tertiary\/40 {
    background-color: color-mix(in srgb, #141d3d 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--background-color-tertiary) 40%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-gradient-brand {
    background-image: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  }
  .fill-chart-1 {
    fill: var(--color-chart-1);
  }
  .fill-chart-2 {
    fill: var(--color-chart-2);
  }
  .fill-chart-3 {
    fill: var(--color-chart-3);
  }
  .fill-chart-4 {
    fill: var(--color-chart-4);
  }
  .fill-chart-5 {
    fill: var(--color-chart-5);
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-none {
    fill: none;
  }
  .stroke-chart-1 {
    stroke: var(--color-chart-1);
  }
  .stroke-chart-2 {
    stroke: var(--color-chart-2);
  }
  .stroke-chart-3 {
    stroke: var(--color-chart-3);
  }
  .stroke-chart-4 {
    stroke: var(--color-chart-4);
  }
  .stroke-chart-5 {
    stroke: var(--color-chart-5);
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .stroke-2 {
    stroke-width: 2;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-inset-nested {
    padding: var(--inset-nested);
  }
  .p-space-2xl {
    padding: var(--space-2xl);
  }
  .p-space-2xs {
    padding: var(--space-2xs);
  }
  .p-space-lg {
    padding: var(--space-lg);
  }
  .p-space-md {
    padding: var(--space-md);
  }
  .p-space-sm {
    padding: var(--space-sm);
  }
  .p-space-xl {
    padding: var(--space-xl);
  }
  .p-space-xs {
    padding: var(--space-xs);
  }
  .px-space-lg {
    padding-inline: var(--space-lg);
  }
  .px-space-md {
    padding-inline: var(--space-md);
  }
  .px-space-sm {
    padding-inline: var(--space-sm);
  }
  .px-space-xl {
    padding-inline: var(--space-xl);
  }
  .px-space-xs {
    padding-inline: var(--space-xs);
  }
  .py-inset-nested {
    padding-block: var(--inset-nested);
  }
  .py-space-3xl {
    padding-block: var(--space-3xl);
  }
  .py-space-lg {
    padding-block: var(--space-lg);
  }
  .py-space-md {
    padding-block: var(--space-md);
  }
  .py-space-sm {
    padding-block: var(--space-sm);
  }
  .py-space-xl {
    padding-block: var(--space-xl);
  }
  .py-space-xs {
    padding-block: var(--space-xs);
  }
  .py-control-lg {
    padding-top: var(--control-lg-padding-block);
    padding-bottom: var(--control-lg-padding-block);
  }
  .py-control-md {
    padding-top: var(--control-md-padding-block);
    padding-bottom: var(--control-md-padding-block);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-space-lg {
    padding-top: var(--space-lg);
  }
  .pt-space-sm {
    padding-top: var(--space-sm);
  }
  .px-control-field {
    padding-left: var(--control-field-padding-inline);
    padding-right: var(--control-field-padding-inline);
  }
  .px-control-lg {
    padding-left: var(--control-lg-padding-inline);
    padding-right: var(--control-lg-padding-inline);
  }
  .px-control-md {
    padding-left: var(--control-md-padding-inline);
    padding-right: var(--control-md-padding-inline);
  }
  .px-control-sm {
    padding-left: var(--control-sm-padding-inline);
    padding-right: var(--control-sm-padding-inline);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-\[calc\(var\(--control-field-padding-inline-tight\)\+var\(--icon-md\)\+var\(--control-field-padding-inline-tight\)\)\] {
    padding-right: calc(var(--control-field-padding-inline-tight) + var(--icon-md) + var(--control-field-padding-inline-tight));
  }
  .pr-control-field-tight {
    padding-right: var(--control-field-padding-inline-tight);
  }
  .pr-control-md {
    padding-right: var(--control-md-padding-inline);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-space-2xl {
    padding-bottom: var(--space-2xl);
  }
  .pb-space-3xl {
    padding-bottom: var(--space-3xl);
  }
  .pb-space-lg {
    padding-bottom: var(--space-lg);
  }
  .pb-space-md {
    padding-bottom: var(--space-md);
  }
  .pb-space-sm {
    padding-bottom: var(--space-sm);
  }
  .pb-space-xl {
    padding-bottom: var(--space-xl);
  }
  .pb-space-xs {
    padding-bottom: var(--space-xs);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-control-field {
    padding-left: var(--control-field-padding-inline);
  }
  .pl-control-md-tight {
    padding-left: var(--control-md-padding-inline-tight);
  }
  .pl-space-md {
    padding-left: var(--space-md);
  }
  .pl-space-xl {
    padding-left: var(--space-xl);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-top {
    vertical-align: top;
  }
  .typography-2xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    letter-spacing: var(--text-2xl--letter-spacing);
    font-weight: var(--weight-2xl);
    font-style: var(--style-2xl);
    font-variation-settings: var(--font-variation-2xl);
    font-family: var(--font-2xl);
  }
  .typography-3xl {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    letter-spacing: var(--text-3xl--letter-spacing);
    font-weight: var(--weight-3xl);
    font-style: var(--style-3xl);
    font-variation-settings: var(--font-variation-3xl);
    font-family: var(--font-3xl);
  }
  .typography-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
    letter-spacing: var(--text-4xl--letter-spacing);
    font-weight: var(--weight-4xl);
    font-style: var(--style-4xl);
    font-variation-settings: var(--font-variation-4xl);
    font-family: var(--font-4xl);
  }
  .typography-5xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
    letter-spacing: var(--text-5xl--letter-spacing);
    font-weight: var(--weight-5xl);
    font-style: var(--style-5xl);
    font-variation-settings: var(--font-variation-5xl);
    font-family: var(--font-5xl);
  }
  .typography-base {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    letter-spacing: var(--text-base--letter-spacing);
    font-weight: var(--weight-base);
    font-style: var(--style-base);
    font-variation-settings: var(--font-variation-base);
    font-family: var(--font-base);
  }
  .typography-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    letter-spacing: var(--text-lg--letter-spacing);
    font-weight: var(--weight-lg);
    font-style: var(--style-lg);
    font-variation-settings: var(--font-variation-lg);
    font-family: var(--font-lg);
  }
  .typography-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    letter-spacing: var(--text-sm--letter-spacing);
    font-weight: var(--weight-sm);
    font-style: var(--style-sm);
    font-variation-settings: var(--font-variation-sm);
    font-family: var(--font-sm);
  }
  .typography-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    letter-spacing: var(--text-xl--letter-spacing);
    font-weight: var(--weight-xl);
    font-style: var(--style-xl);
    font-variation-settings: var(--font-variation-xl);
    font-family: var(--font-xl);
  }
  .typography-xs {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    letter-spacing: var(--text-xs--letter-spacing);
    font-weight: var(--weight-xs);
    font-style: var(--style-xs);
    font-variation-settings: var(--font-variation-xs);
    font-family: var(--font-xs);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .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-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-brand {
    color: var(--text-color-brand);
  }
  .text-current {
    color: currentcolor;
  }
  .text-danger {
    color: var(--text-color-danger);
  }
  .text-on-brand-solid {
    color: var(--text-color-on-brand-solid);
  }
  .text-on-chart-1 {
    color: var(--color-on-chart-1);
  }
  .text-on-chart-2 {
    color: var(--color-on-chart-2);
  }
  .text-on-chart-3 {
    color: var(--color-on-chart-3);
  }
  .text-on-chart-4 {
    color: var(--color-on-chart-4);
  }
  .text-on-chart-5 {
    color: var(--color-on-chart-5);
  }
  .text-primary {
    color: var(--text-color-primary);
  }
  .text-quaternary {
    color: var(--text-color-quaternary);
  }
  .text-secondary {
    color: var(--text-color-secondary);
  }
  .text-success {
    color: var(--text-color-success);
  }
  .text-tertiary {
    color: var(--text-color-tertiary);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .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,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-10 {
    opacity: 10%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-\[0_0_0_1px_var\(--background-color-primary\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--background-color-primary));
    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: var(--elevation-shadow-lg);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: var(--elevation-shadow-md);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: var(--elevation-shadow-sm);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: var(--elevation-shadow-xs);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .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-\[transform\,background-color\] {
    transition-property: transform,background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[transform\,opacity\,top\,left\] {
    transition-property: transform,opacity,top,left;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-0 {
    --tw-duration: 0ms;
    transition-duration: 0ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .density-condensed {
    --space-2xs: 0px;
    --space-xs: 2px;
    --space-sm: 4px;
    --space-md: 8px;
    --space-lg: 12px;
    --space-xl: 16px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 64px;
    --space-6xl: 96px;
    --control-sm-padding-inline: 8px;
    --control-md-padding-inline: 12px;
    --control-lg-padding-inline: 16px;
    --control-sm-padding-inline-tight: 4px;
    --control-md-padding-inline-tight: 8px;
    --size-3xs: 8px;
    --size-2xs: 12px;
    --size-xs: 16px;
    --size-sm: 20px;
    --size-md: 28px;
    --size-lg: 32px;
    --size-xl: 36px;
    --size-2xl: 40px;
  }
  .density-normal {
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 64px;
    --space-5xl: 96px;
    --space-6xl: 128px;
    --control-sm-padding-inline: 12px;
    --control-md-padding-inline: 16px;
    --control-lg-padding-inline: 24px;
    --control-sm-padding-inline-tight: 8px;
    --control-md-padding-inline-tight: 12px;
    --size-3xs: 12px;
    --size-2xs: 16px;
    --size-xs: 20px;
    --size-sm: 24px;
    --size-md: 32px;
    --size-lg: 36px;
    --size-xl: 40px;
    --size-2xl: 48px;
  }
  .density-spacious {
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;
    --space-6xl: 160px;
    --control-sm-padding-inline: 16px;
    --control-md-padding-inline: 24px;
    --control-lg-padding-inline: 32px;
    --control-sm-padding-inline-tight: 12px;
    --control-md-padding-inline-tight: 20px;
    --size-3xs: 16px;
    --size-2xs: 20px;
    --size-xs: 24px;
    --size-sm: 28px;
    --size-md: 36px;
    --size-lg: 40px;
    --size-xl: 48px;
    --size-2xl: 56px;
  }
  .shape-rounded {
    --radius-inline: 4px;
    --radius-nested: 6px;
    --radius-control: 8px;
    --radius-popover: 10px;
    --radius-track: 10px;
    --radius-container: 12px;
    --radius-surface: 16px;
  }
  .shape-sharp {
    --radius-inline: 0px;
    --radius-nested: 0px;
    --radius-control: 2px;
    --radius-popover: 2px;
    --radius-track: 2px;
    --radius-container: 4px;
    --radius-surface: 4px;
  }
  .shape-soft {
    --radius-inline: 6px;
    --radius-nested: 10px;
    --radius-control: 12px;
    --radius-popover: 14px;
    --radius-track: 14px;
    --radius-container: 16px;
    --radius-surface: 24px;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[--rail-gap\:var\(--space-xl\)\] {
    --rail-gap: var(--space-xl);
  }
  .\[--tile-row\:12rem\] {
    --tile-row: 12rem;
  }
  .peer-checked\:block {
    &:is(:where(.peer):checked ~ *) {
      display: block;
    }
  }
  .peer-checked\:flex {
    &:is(:where(.peer):checked ~ *) {
      display: flex;
    }
  }
  .peer-checked\:hidden {
    &:is(:where(.peer):checked ~ *) {
      display: none;
    }
  }
  .peer-checked\:translate-x-\[calc\(var\(--component-toggle-track-width\)-var\(--component-toggle-knob-size\)-2\*var\(--component-toggle-knob-inset\)\)\] {
    &:is(:where(.peer):checked ~ *) {
      --tw-translate-x: calc(var(--component-toggle-track-width) - var(--component-toggle-knob-size) - 2 * var(--component-toggle-knob-inset));
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .peer-checked\:bg-brand-solid {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--background-color-brand-solid);
    }
  }
  .peer-checked\:bg-danger-solid {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--background-color-danger-solid);
    }
  }
  .group-hover\:peer-checked\:bg-brand-solid-hover {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        &:is(:where(.peer):checked ~ *) {
          background-color: var(--background-color-brand-solid-hover);
        }
      }
    }
  }
  .group-hover\:peer-checked\:bg-danger-solid-hover {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        &:is(:where(.peer):checked ~ *) {
          background-color: var(--background-color-danger-solid-hover);
        }
      }
    }
  }
  .peer-hover\:ring-4 {
    &:is(:where(.peer):hover ~ *) {
      @media (hover: hover) {
        --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);
      }
    }
  }
  .peer-hover\:ring-focus\/50 {
    &:is(:where(.peer):hover ~ *) {
      @media (hover: hover) {
        --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
        }
      }
    }
  }
  .peer-focus\:ring-2 {
    &:is(:where(.peer):focus ~ *) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .peer-focus\:ring-focus {
    &:is(:where(.peer):focus ~ *) {
      --tw-ring-color: var(--color-focus);
    }
  }
  .peer-focus-visible\:ring-2 {
    &:is(:where(.peer):focus-visible ~ *) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .peer-focus-visible\:ring-4 {
    &:is(:where(.peer):focus-visible ~ *) {
      --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);
    }
  }
  .peer-focus-visible\:ring-focus {
    &:is(:where(.peer):focus-visible ~ *) {
      --tw-ring-color: var(--color-focus);
    }
  }
  .peer-focus-visible\:ring-focus\/50 {
    &:is(:where(.peer):focus-visible ~ *) {
      --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
      }
    }
  }
  .peer-focus-visible\:ring-offset-2 {
    &:is(:where(.peer):focus-visible ~ *) {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .peer-focus-visible\:outline-2 {
    &:is(:where(.peer):focus-visible ~ *) {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .peer-focus-visible\:outline-focus {
    &:is(:where(.peer):focus-visible ~ *) {
      outline-color: var(--outline-color-focus);
    }
  }
  .peer-disabled\:cursor-not-allowed {
    &:is(:where(.peer):disabled ~ *) {
      cursor: not-allowed;
    }
  }
  .peer-disabled\:border-disabled {
    &:is(:where(.peer):disabled ~ *) {
      border-color: var(--border-color-disabled);
    }
  }
  .peer-disabled\:bg-disabled {
    &:is(:where(.peer):disabled ~ *) {
      background-color: var(--background-color-disabled);
    }
  }
  .peer-disabled\:opacity-50 {
    &:is(:where(.peer):disabled ~ *) {
      opacity: 50%;
    }
  }
  .peer-disabled\:shadow-none {
    &:is(:where(.peer):disabled ~ *) {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .peer-\[checked\:focus\]\:bg-brand-solid {
    &:is(:where(.peer):is(checked:focus) ~ *) {
      background-color: var(--background-color-brand-solid);
    }
  }
  .peer-\[checked\:focus\]\:bg-primary {
    &:is(:where(.peer):is(checked:focus) ~ *) {
      background-color: var(--background-color-primary);
    }
  }
  .placeholder\:text-quaternary {
    &::placeholder {
      color: var(--text-color-quaternary);
    }
  }
  .placeholder\:text-tertiary {
    &::placeholder {
      color: var(--text-color-tertiary);
    }
  }
  .first\:mt-0 {
    &:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .first\:rounded-l-control {
    &:first-child {
      border-top-left-radius: var(--radius-control);
      border-bottom-left-radius: var(--radius-control);
    }
  }
  .last\:mb-0 {
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .last\:rounded-r-control {
    &:last-child {
      border-top-right-radius: var(--radius-control);
      border-bottom-right-radius: var(--radius-control);
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .last\:pb-0 {
    &:last-child {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .last\:\[--rail-gap\:0px\] {
    &:last-child {
      --rail-gap: 0px;
    }
  }
  .empty\:hidden {
    &:empty {
      display: none;
    }
  }
  .hover\:border-brand {
    &:hover {
      @media (hover: hover) {
        border-color: var(--border-color-brand);
      }
    }
  }
  .hover\:border-secondary {
    &:hover {
      @media (hover: hover) {
        border-color: var(--border-color-secondary);
      }
    }
  }
  .hover\:bg-current\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, currentcolor 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-secondary {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-secondary);
      }
    }
  }
  .hover\:bg-tertiary {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-tertiary);
      }
    }
  }
  .hover\:bg-tertiary\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #141d3d 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
        }
      }
    }
  }
  .hover\:text-brand {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-brand);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-primary);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: var(--elevation-shadow-md);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-sm {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: var(--elevation-shadow-sm);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-focus {
    &:focus {
      --tw-ring-color: var(--color-focus);
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus\:outline-hidden {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:bg-current\/10 {
    &:focus-visible {
      background-color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, currentcolor 10%, transparent);
      }
    }
  }
  .focus-visible\:bg-tertiary {
    &:focus-visible {
      background-color: var(--background-color-tertiary);
    }
  }
  .focus-visible\:text-primary {
    &:focus-visible {
      color: var(--text-color-primary);
    }
  }
  .focus-visible\:opacity-100 {
    &:focus-visible {
      opacity: 100%;
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-focus {
    &:focus-visible {
      --tw-ring-color: var(--color-focus);
    }
  }
  .focus-visible\:ring-focus\/50 {
    &:focus-visible {
      --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
      }
    }
  }
  .focus-visible\:outline-hidden {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .disabled\:pointer-events-none {
    &:disabled {
      pointer-events: none;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:border-disabled {
    &:disabled {
      border-color: var(--border-color-disabled);
    }
  }
  .disabled\:bg-disabled {
    &:disabled {
      background-color: var(--background-color-disabled);
    }
  }
  .disabled\:text-disabled {
    &:disabled {
      color: var(--text-color-disabled);
    }
  }
  .disabled\:opacity-40 {
    &:disabled {
      opacity: 40%;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .disabled\:shadow-none {
    &:disabled {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .in-data-\[cmp-variant-surfaces\=open\]\:hidden {
    :where(*[data-cmp-variant-surfaces="open"]) & {
      display: none;
    }
  }
  .in-data-\[cmp-variant-surfaces\=open\]\:bg-primary\/80 {
    :where(*[data-cmp-variant-surfaces="open"]) & {
      background-color: color-mix(in srgb, #05080f 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
      }
    }
  }
  .in-data-\[cmp-variant-surfaces\=open\]\:bg-transparent {
    :where(*[data-cmp-variant-surfaces="open"]) & {
      background-color: transparent;
    }
  }
  .in-data-\[cmp-variant-surfaces\=open\]\:text-secondary {
    :where(*[data-cmp-variant-surfaces="open"]) & {
      color: var(--text-color-secondary);
    }
  }
  .in-data-\[cmp-variant-surfaces\=open\]\:backdrop-blur-xl {
    :where(*[data-cmp-variant-surfaces="open"]) & {
      --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,);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:hidden {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      display: none;
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:rounded-container {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      border-radius: var(--radius-container);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:rounded-control {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      border-radius: var(--radius-control);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:border {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:border {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:border-tertiary\/60 {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      border-color: color-mix(in srgb, #1f2b58 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--border-color-tertiary) 60%, transparent);
      }
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      background-color: color-mix(in srgb, #05080f 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
      }
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:p-space-2xl {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      padding: var(--space-2xl);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:p-space-xl {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      padding: var(--space-xl);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:px-space-md {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      padding-inline: var(--space-md);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:py-space-xs {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      padding-block: var(--space-xs);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:text-secondary {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      color: var(--text-color-secondary);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      --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,);
    }
  }
  .has-\[\*\:disabled\]\:cursor-not-allowed {
    &:has(*:is(*:disabled)) {
      cursor: not-allowed;
    }
  }
  .has-\[\*\:disabled\]\:border-disabled {
    &:has(*:is(*:disabled)) {
      border-color: var(--border-color-disabled);
    }
  }
  .has-\[\*\:disabled\]\:bg-disabled {
    &:has(*:is(*:disabled)) {
      background-color: var(--background-color-disabled);
    }
  }
  .has-\[\*\:disabled\]\:text-disabled {
    &:has(*:is(*:disabled)) {
      color: var(--text-color-disabled);
    }
  }
  .has-\[\*\:focus-visible\]\:ring-2 {
    &:has(*:is(*:focus-visible)) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .has-\[\*\:focus-visible\]\:ring-focus {
    &:has(*:is(*:focus-visible)) {
      --tw-ring-color: var(--color-focus);
    }
  }
  .has-\[\*\:focus-visible\]\:ring-focus\/50 {
    &:has(*:is(*:focus-visible)) {
      --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
      }
    }
  }
  .has-\[input\:checked\]\:bg-quaternary {
    &:has(*:is(input:checked)) {
      background-color: var(--background-color-quaternary);
    }
  }
  .has-\[input\:checked\]\:text-primary {
    &:has(*:is(input:checked)) {
      color: var(--text-color-primary);
    }
  }
  .has-\[input\:disabled\]\:pointer-events-none {
    &:has(*:is(input:disabled)) {
      pointer-events: none;
    }
  }
  .has-\[input\:disabled\]\:cursor-not-allowed {
    &:has(*:is(input:disabled)) {
      cursor: not-allowed;
    }
  }
  .has-\[input\:disabled\]\:text-disabled {
    &:has(*:is(input:disabled)) {
      color: var(--text-color-disabled);
    }
  }
  .has-\[input\:focus-visible\]\:z-10 {
    &:has(*:is(input:focus-visible)) {
      z-index: 10;
    }
  }
  .has-\[input\:focus-visible\]\:ring-2 {
    &:has(*:is(input:focus-visible)) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .has-\[input\:focus-visible\]\:ring-focus {
    &:has(*:is(input:focus-visible)) {
      --tw-ring-color: var(--color-focus);
    }
  }
  .has-\[input\:focus-visible\]\:ring-inset {
    &:has(*:is(input:focus-visible)) {
      --tw-ring-inset: inset;
    }
  }
  .has-\[input\:not\(\:disabled\)\]\:cursor-pointer {
    &:has(*:is(input:not(:disabled))) {
      cursor: pointer;
    }
  }
  .has-\[select\:disabled\]\:border-disabled {
    &:has(*:is(select:disabled)) {
      border-color: var(--border-color-disabled);
    }
  }
  .has-\[select\:disabled\]\:bg-disabled {
    &:has(*:is(select:disabled)) {
      background-color: var(--background-color-disabled);
    }
  }
  .has-\[select\:disabled\]\:opacity-50 {
    &:has(*:is(select:disabled)) {
      opacity: 50%;
    }
  }
  .has-\[select\:focus-visible\]\:ring-2 {
    &:has(*:is(select:focus-visible)) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .has-\[select\:focus-visible\]\:ring-focus {
    &:has(*:is(select:focus-visible)) {
      --tw-ring-color: var(--color-focus);
    }
  }
  .has-\[\>\:not\(\:empty\)\]\:flex {
    &:has(>:not(:empty)) {
      display: flex;
    }
  }
  .max-sm\:block {
    @media (width < 40rem) {
      display: block;
    }
  }
  .max-sm\:flex {
    @media (width < 40rem) {
      display: flex;
    }
  }
  .max-sm\:hidden {
    @media (width < 40rem) {
      display: none;
    }
  }
  .max-sm\:h-auto {
    @media (width < 40rem) {
      height: auto;
    }
  }
  .max-sm\:basis-full {
    @media (width < 40rem) {
      flex-basis: 100%;
    }
  }
  .max-sm\:flex-col {
    @media (width < 40rem) {
      flex-direction: column;
    }
  }
  .max-sm\:py-space-2xs {
    @media (width < 40rem) {
      padding-block: var(--space-2xs);
    }
  }
  .max-sm\:py-space-sm {
    @media (width < 40rem) {
      padding-block: var(--space-sm);
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-wrap {
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
  }
  .md\:order-none {
    @media (width >= 48rem) {
      order: 0;
    }
  }
  .md\:-mb-space-3xl {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--space-3xl) * -1);
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:h-auto {
    @media (width >= 48rem) {
      height: auto;
    }
  }
  .md\:min-w-0 {
    @media (width >= 48rem) {
      min-width: calc(var(--spacing) * 0);
    }
  }
  .md\:basis-0 {
    @media (width >= 48rem) {
      flex-basis: calc(var(--spacing) * 0);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:flex-nowrap {
    @media (width >= 48rem) {
      flex-wrap: nowrap;
    }
  }
  .md\:p-space-3xl {
    @media (width >= 48rem) {
      padding: var(--space-3xl);
    }
  }
  .md\:py-space-2xl {
    @media (width >= 48rem) {
      padding-block: var(--space-2xl);
    }
  }
  .md\:py-space-xl {
    @media (width >= 48rem) {
      padding-block: var(--space-xl);
    }
  }
  .md\:pb-space-4xl {
    @media (width >= 48rem) {
      padding-bottom: var(--space-4xl);
    }
  }
  .md\:typography-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--text-4xl--line-height);
      letter-spacing: var(--text-4xl--letter-spacing);
      font-weight: var(--weight-4xl);
      font-style: var(--style-4xl);
      font-variation-settings: var(--font-variation-4xl);
      font-family: var(--font-4xl);
    }
  }
  .md\:typography-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--text-6xl--line-height);
      letter-spacing: var(--text-6xl--letter-spacing);
      font-weight: var(--weight-6xl);
      font-style: var(--style-6xl);
      font-variation-settings: var(--font-variation-6xl);
      font-family: var(--font-6xl);
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:md\:p-space-3xl {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      @media (width >= 48rem) {
        padding: var(--space-3xl);
      }
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:top-24 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 24);
    }
  }
  .lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:w-72 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 72);
    }
  }
  .lg\:grid-flow-dense {
    @media (width >= 64rem) {
      grid-auto-flow: dense;
    }
  }
  .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-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:typography-5xl {
    @media (width >= 64rem) {
      font-size: var(--text-5xl);
      line-height: var(--text-5xl--line-height);
      letter-spacing: var(--text-5xl--letter-spacing);
      font-weight: var(--weight-5xl);
      font-style: var(--style-5xl);
      font-variation-settings: var(--font-variation-5xl);
      font-family: var(--font-5xl);
    }
  }
  .lg\:typography-7xl {
    @media (width >= 64rem) {
      font-size: var(--text-7xl);
      line-height: var(--text-7xl--line-height);
      letter-spacing: var(--text-7xl--letter-spacing);
      font-weight: var(--weight-7xl);
      font-style: var(--style-7xl);
      font-variation-settings: var(--font-variation-7xl);
      font-family: var(--font-7xl);
    }
  }
  .\@xl\:block {
    @container (width >= 36rem) {
      display: block;
    }
  }
  .\@xl\:hidden {
    @container (width >= 36rem) {
      display: none;
    }
  }
  .dark\:dark {
    @media (prefers-color-scheme: dark) {
      color-scheme: dark;
      --text-color-primary: var(--color-gray-50);
      --text-decoration-color-primary: var(--text-color-primary);
      --text-color-secondary: var(--color-gray-300);
      --text-decoration-color-secondary: var(--text-color-secondary);
      --text-color-tertiary: var(--color-gray-400);
      --text-decoration-color-tertiary: var(--text-color-tertiary);
      --text-color-quaternary: var(--color-gray-500);
      --text-decoration-color-quaternary: var(--text-color-quaternary);
      --text-color-brand: var(--color-cyan-300);
      --text-decoration-color-brand: var(--text-color-brand);
      --text-color-brand-hover: var(--color-cyan-200);
      --text-decoration-color-brand-hover: var(--text-color-brand-hover);
      --text-color-brand-active: var(--color-cyan-100);
      --text-decoration-color-brand-active: var(--text-color-brand-active);
      --text-color-on-brand-solid: var(--color-brand-50);
      --text-decoration-color-on-brand-solid: var(--text-color-on-brand-solid);
      --text-color-danger: var(--color-red-400);
      --text-decoration-color-danger: var(--text-color-danger);
      --text-color-danger-hover: var(--color-red-300);
      --text-decoration-color-danger-hover: var(--text-color-danger-hover);
      --text-color-danger-active: var(--color-red-200);
      --text-decoration-color-danger-active: var(--text-color-danger-active);
      --text-color-on-danger-solid: var(--color-red-50);
      --text-decoration-color-on-danger-solid: var(--text-color-on-danger-solid);
      --text-color-warning: var(--color-orange-400);
      --text-decoration-color-warning: var(--text-color-warning);
      --text-color-success: var(--color-green-400);
      --text-decoration-color-success: var(--text-color-success);
      --text-color-disabled: var(--color-gray-500);
      --text-decoration-color-disabled: var(--text-color-disabled);
      --text-color-black: var(--color-black);
      --text-decoration-color-black: var(--text-color-black);
      --text-color-white: var(--color-white);
      --text-decoration-color-white: var(--text-color-white);
      --text-color-inverse: var(--color-gray-950);
      --text-decoration-color-inverse: var(--text-color-inverse);
      --text-color-blue: var(--color-blue-300);
      --text-decoration-color-blue: var(--text-color-blue);
      --text-color-green: var(--color-green-300);
      --text-decoration-color-green: var(--text-color-green);
      --text-color-sky: var(--color-sky-300);
      --text-decoration-color-sky: var(--text-color-sky);
      --text-color-purple: var(--color-purple-300);
      --text-decoration-color-purple: var(--text-color-purple);
      --text-color-orange: var(--color-orange-300);
      --text-decoration-color-orange: var(--text-color-orange);
      --background-color-primary: var(--color-void-950);
      --background-color-secondary: var(--color-void-900);
      --background-color-tertiary: var(--color-void-800);
      --background-color-quaternary: var(--color-void-700);
      --background-color-surface-sunken: #02040a;
      --background-color-surface-0: var(--color-void-950);
      --background-color-surface-1: var(--color-void-900);
      --background-color-surface-2: var(--color-void-800);
      --background-color-surface-3: var(--color-void-800);
      --background-color-surface-4: var(--color-void-700);
      --background-color-brand-solid: var(--color-violet-600);
      --background-color-brand-solid-hover: var(--color-violet-500);
      --background-color-brand-solid-active: var(--color-violet-700);
      --background-color-brand: var(--color-violet-950);
      --background-color-danger-solid: var(--color-red-500);
      --background-color-danger-solid-hover: var(--color-red-600);
      --background-color-danger-solid-active: var(--color-red-700);
      --background-color-danger: var(--color-red-950);
      --background-color-warning-solid: var(--color-orange-500);
      --background-color-warning: var(--color-orange-950);
      --background-color-success-solid: var(--color-green-500);
      --background-color-success: var(--color-green-950);
      --background-color-disabled: var(--color-void-800);
      --background-color-inverse: var(--color-gray-50);
      --background-color-blue: var(--color-blue-950);
      --background-color-green: var(--color-green-950);
      --background-color-sky: var(--color-sky-950);
      --background-color-purple: var(--color-purple-950);
      --background-color-orange: var(--color-orange-950);
      --background-color-gray: var(--color-gray-700);
      --background-color-gray-2: var(--color-gray-800);
      --border-color-primary: var(--color-void-500);
      --outline-color-primary: var(--border-color-primary);
      --border-color-secondary: var(--color-void-600);
      --outline-color-secondary: var(--border-color-secondary);
      --border-color-tertiary: var(--color-void-700);
      --outline-color-tertiary: var(--border-color-tertiary);
      --border-color-quaternary: var(--color-void-800);
      --outline-color-quaternary: var(--border-color-quaternary);
      --border-color-brand: var(--color-cyan-400);
      --outline-color-brand: var(--border-color-brand);
      --border-color-danger: var(--color-red-400);
      --outline-color-danger: var(--border-color-danger);
      --border-color-warning: var(--color-orange-400);
      --outline-color-warning: var(--border-color-warning);
      --border-color-success: var(--color-green-400);
      --outline-color-success: var(--border-color-success);
      --border-color-disabled: var(--color-gray-600);
      --outline-color-disabled: var(--border-color-disabled);
      --border-color-focus: var(--color-cyan-300);
      --outline-color-focus: var(--border-color-focus);
      --color-focus: var(--border-color-focus);
      --border-color-blue: var(--color-blue-700);
      --outline-color-blue: var(--border-color-blue);
      --border-color-green: var(--color-green-700);
      --outline-color-green: var(--border-color-green);
      --border-color-sky: var(--color-sky-700);
      --outline-color-sky: var(--border-color-sky);
      --border-color-purple: var(--color-purple-700);
      --outline-color-purple: var(--border-color-purple);
      --border-color-orange: var(--color-orange-700);
      --outline-color-orange: var(--border-color-orange);
      --color-primary-icon: var(--color-gray-50);
      --color-secondary-icon: var(--color-gray-300);
      --color-tertiary-icon: var(--color-gray-400);
      --color-quaternary-icon: var(--color-gray-600);
      --color-brand-icon: var(--color-cyan-300);
      --color-on-brand-solid-icon: var(--color-brand-50);
      --color-on-danger-icon: var(--color-red-50);
      --color-danger-icon: var(--color-red-400);
      --color-warning-icon: var(--color-orange-500);
      --color-success-icon: var(--color-green-500);
      --color-disabled-icon: var(--color-gray-500);
      --color-blue-icon: var(--color-blue-300);
      --color-green-icon: var(--color-green-300);
      --color-sky-icon: var(--color-sky-300);
      --color-purple-icon: var(--color-purple-300);
      --color-orange-icon: var(--color-orange-300);
      --color-shadow-key: rgb(0 0 0 / 0.5);
      --color-shadow-ambient: rgb(0 0 0 / 0.35);
      --color-gradient-start: var(--color-violet-600);
      --color-gradient-end: var(--color-cyan-500);
      --color-chart-1: var(--color-cyan-400);
      --color-chart-2: var(--color-violet-400);
      --color-chart-3: var(--color-indigo-300);
      --color-chart-4: var(--color-cyan-700);
      --color-chart-5: var(--color-violet-700);
      --color-on-chart-1: var(--color-void-950);
      --color-on-chart-2: var(--color-void-950);
      --color-on-chart-3: var(--color-void-950);
      --color-on-chart-4: var(--color-gray-50);
      --color-on-chart-5: var(--color-gray-50);
      --color-neon-glow: rgb(34 211 238 / 0.35);
    }
  }
  .starting\:scale-95 {
    @starting-style {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .starting\:opacity-0 {
    @starting-style {
      opacity: 0%;
    }
  }
  .print\:hidden {
    @media print {
      display: none;
    }
  }
  .forced-colors\:hidden {
    @media (forced-colors: active) {
      display: none;
    }
  }
  .cmp-variant-align-center\:mx-auto {
    &:where([data-component-root='true'][data-cmp-variant-align='center']) {
      margin-inline: auto;
    }
    @container style(--cmp-variant-align: center) {
      &:not([data-component-root='true']) {
        margin-inline: auto;
      }
    }
  }
  .cmp-variant-align-center\:text-center {
    &:where([data-component-root='true'][data-cmp-variant-align='center']) {
      text-align: center;
    }
    @container style(--cmp-variant-align: center) {
      &:not([data-component-root='true']) {
        text-align: center;
      }
    }
  }
  .cmp-variant-align-left\:text-left {
    &:where([data-component-root='true'][data-cmp-variant-align='left']) {
      text-align: left;
    }
    @container style(--cmp-variant-align: left) {
      &:not([data-component-root='true']) {
        text-align: left;
      }
    }
  }
  .cmp-variant-align-right\:text-right {
    &:where([data-component-root='true'][data-cmp-variant-align='right']) {
      text-align: right;
    }
    @container style(--cmp-variant-align: right) {
      &:not([data-component-root='true']) {
        text-align: right;
      }
    }
  }
  .cmp-variant-appearance-bar\:hidden {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      display: none;
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        display: none;
      }
    }
  }
  .cmp-variant-appearance-chip\:hidden {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      display: none;
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        display: none;
      }
    }
  }
  .cmp-variant-appearance-dot\:flex {
    &:where([data-component-root='true'][data-cmp-variant-appearance='dot']) {
      display: flex;
    }
    @container style(--cmp-variant-appearance: dot) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-appearance-dot\:h-lh {
    &:where([data-component-root='true'][data-cmp-variant-appearance='dot']) {
      height: 1lh;
    }
    @container style(--cmp-variant-appearance: dot) {
      &:not([data-component-root='true']) {
        height: 1lh;
      }
    }
  }
  .cmp-variant-appearance-dot\:shrink-0 {
    &:where([data-component-root='true'][data-cmp-variant-appearance='dot']) {
      flex-shrink: 0;
    }
    @container style(--cmp-variant-appearance: dot) {
      &:not([data-component-root='true']) {
        flex-shrink: 0;
      }
    }
  }
  .cmp-variant-appearance-dot\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-appearance='dot']) {
      align-items: center;
    }
    @container style(--cmp-variant-appearance: dot) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-appearance-dot\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='dot']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-appearance: dot) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-backdropFocus-bottom\:object-bottom {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='bottom']) {
      object-position: bottom;
    }
    @container style(--cmp-variant-backdropFocus: bottom) {
      &:not([data-component-root='true']) {
        object-position: bottom;
      }
    }
  }
  .cmp-variant-backdropFocus-bottom-left\:object-left-bottom {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='bottom-left']) {
      object-position: left bottom;
    }
    @container style(--cmp-variant-backdropFocus: bottom-left) {
      &:not([data-component-root='true']) {
        object-position: left bottom;
      }
    }
  }
  .cmp-variant-backdropFocus-bottom-right\:object-right-bottom {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='bottom-right']) {
      object-position: right bottom;
    }
    @container style(--cmp-variant-backdropFocus: bottom-right) {
      &:not([data-component-root='true']) {
        object-position: right bottom;
      }
    }
  }
  .cmp-variant-backdropFocus-center\:object-center {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='center']) {
      object-position: center;
    }
    @container style(--cmp-variant-backdropFocus: center) {
      &:not([data-component-root='true']) {
        object-position: center;
      }
    }
  }
  .cmp-variant-backdropFocus-left\:object-left {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='left']) {
      object-position: left;
    }
    @container style(--cmp-variant-backdropFocus: left) {
      &:not([data-component-root='true']) {
        object-position: left;
      }
    }
  }
  .cmp-variant-backdropFocus-right\:object-right {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='right']) {
      object-position: right;
    }
    @container style(--cmp-variant-backdropFocus: right) {
      &:not([data-component-root='true']) {
        object-position: right;
      }
    }
  }
  .cmp-variant-backdropFocus-top\:object-top {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='top']) {
      object-position: top;
    }
    @container style(--cmp-variant-backdropFocus: top) {
      &:not([data-component-root='true']) {
        object-position: top;
      }
    }
  }
  .cmp-variant-backdropFocus-top-left\:object-left-top {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='top-left']) {
      object-position: left top;
    }
    @container style(--cmp-variant-backdropFocus: top-left) {
      &:not([data-component-root='true']) {
        object-position: left top;
      }
    }
  }
  .cmp-variant-backdropFocus-top-right\:object-right-top {
    &:where([data-component-root='true'][data-cmp-variant-backdropfocus='top-right']) {
      object-position: right top;
    }
    @container style(--cmp-variant-backdropFocus: top-right) {
      &:not([data-component-root='true']) {
        object-position: right top;
      }
    }
  }
  .cmp-variant-background-accent\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-background='accent']) {
      background-color: var(--background-color-brand-solid);
    }
    @container style(--cmp-variant-background: accent) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand-solid);
      }
    }
  }
  .cmp-variant-background-accent\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-background='accent']) {
      color: var(--text-color-on-brand-solid);
    }
    @container style(--cmp-variant-background: accent) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-brand-solid);
      }
    }
  }
  .cmp-variant-background-alternate\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-background-alternate\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-background-alternate\:in-data-\[cmp-variant-surfaces\=open\]\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        border-color: var(--border-color-tertiary);
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          border-color: var(--border-color-tertiary);
        }
      }
    }
  }
  .cmp-variant-background-alternate\:in-data-\[cmp-variant-surfaces\=open\]\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        background-color: transparent;
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          background-color: transparent;
        }
      }
    }
  }
  .cmp-variant-background-alternate\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-background-alternate\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-background-base\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-background-base\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-background-base\:in-data-\[cmp-variant-surfaces\=open\]\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        border-color: var(--border-color-tertiary);
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          border-color: var(--border-color-tertiary);
        }
      }
    }
  }
  .cmp-variant-background-base\:in-data-\[cmp-variant-surfaces\=open\]\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        background-color: transparent;
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          background-color: transparent;
        }
      }
    }
  }
  .cmp-variant-background-base\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-background-gradient\:bg-gradient-brand {
    &:where([data-component-root='true'][data-cmp-variant-background='gradient']) {
      background-image: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    }
    @container style(--cmp-variant-background: gradient) {
      &:not([data-component-root='true']) {
        background-image: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
      }
    }
  }
  .cmp-variant-background-gradient\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-background='gradient']) {
      color: var(--text-color-on-brand-solid);
    }
    @container style(--cmp-variant-background: gradient) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-brand-solid);
      }
    }
  }
  .cmp-variant-background-tint\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-background='tint']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-background: tint) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-background-tint\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-background='tint']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-background: tint) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-background-tint\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='tint']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-background: tint) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-backgroundFit-cover\:object-cover {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfit='cover']) {
      object-fit: cover;
    }
    @container style(--cmp-variant-backgroundFit: cover) {
      &:not([data-component-root='true']) {
        object-fit: cover;
      }
    }
  }
  .cmp-variant-backgroundFit-stretch\:object-fill {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfit='stretch']) {
      object-fit: fill;
    }
    @container style(--cmp-variant-backgroundFit: stretch) {
      &:not([data-component-root='true']) {
        object-fit: fill;
      }
    }
  }
  .cmp-variant-backgroundFocus-bottom\:object-bottom {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='bottom']) {
      object-position: bottom;
    }
    @container style(--cmp-variant-backgroundFocus: bottom) {
      &:not([data-component-root='true']) {
        object-position: bottom;
      }
    }
  }
  .cmp-variant-backgroundFocus-bottom-left\:object-left-bottom {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='bottom-left']) {
      object-position: left bottom;
    }
    @container style(--cmp-variant-backgroundFocus: bottom-left) {
      &:not([data-component-root='true']) {
        object-position: left bottom;
      }
    }
  }
  .cmp-variant-backgroundFocus-bottom-right\:object-right-bottom {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='bottom-right']) {
      object-position: right bottom;
    }
    @container style(--cmp-variant-backgroundFocus: bottom-right) {
      &:not([data-component-root='true']) {
        object-position: right bottom;
      }
    }
  }
  .cmp-variant-backgroundFocus-center\:object-center {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='center']) {
      object-position: center;
    }
    @container style(--cmp-variant-backgroundFocus: center) {
      &:not([data-component-root='true']) {
        object-position: center;
      }
    }
  }
  .cmp-variant-backgroundFocus-left\:object-left {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='left']) {
      object-position: left;
    }
    @container style(--cmp-variant-backgroundFocus: left) {
      &:not([data-component-root='true']) {
        object-position: left;
      }
    }
  }
  .cmp-variant-backgroundFocus-right\:object-right {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='right']) {
      object-position: right;
    }
    @container style(--cmp-variant-backgroundFocus: right) {
      &:not([data-component-root='true']) {
        object-position: right;
      }
    }
  }
  .cmp-variant-backgroundFocus-top\:object-top {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='top']) {
      object-position: top;
    }
    @container style(--cmp-variant-backgroundFocus: top) {
      &:not([data-component-root='true']) {
        object-position: top;
      }
    }
  }
  .cmp-variant-backgroundFocus-top-left\:object-left-top {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='top-left']) {
      object-position: left top;
    }
    @container style(--cmp-variant-backgroundFocus: top-left) {
      &:not([data-component-root='true']) {
        object-position: left top;
      }
    }
  }
  .cmp-variant-backgroundFocus-top-right\:object-right-top {
    &:where([data-component-root='true'][data-cmp-variant-backgroundfocus='top-right']) {
      object-position: right top;
    }
    @container style(--cmp-variant-backgroundFocus: top-right) {
      &:not([data-component-root='true']) {
        object-position: right top;
      }
    }
  }
  .cmp-variant-colorScheme-blue\:border-blue {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='blue']) {
      border-color: var(--border-color-blue);
    }
    @container style(--cmp-variant-colorScheme: blue) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-blue);
      }
    }
  }
  .cmp-variant-colorScheme-blue\:bg-blue {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='blue']) {
      background-color: var(--background-color-blue);
    }
    @container style(--cmp-variant-colorScheme: blue) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-blue);
      }
    }
  }
  .cmp-variant-colorScheme-blue\:text-blue {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='blue']) {
      color: var(--text-color-blue);
    }
    @container style(--cmp-variant-colorScheme: blue) {
      &:not([data-component-root='true']) {
        color: var(--text-color-blue);
      }
    }
  }
  .cmp-variant-colorScheme-brand\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='brand']) {
      border-color: var(--border-color-brand);
    }
    @container style(--cmp-variant-colorScheme: brand) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-brand);
      }
    }
  }
  .cmp-variant-colorScheme-brand\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='brand']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-colorScheme: brand) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-colorScheme-brand\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='brand']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-colorScheme: brand) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-colorScheme-green\:border-green {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='green']) {
      border-color: var(--border-color-green);
    }
    @container style(--cmp-variant-colorScheme: green) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-green);
      }
    }
  }
  .cmp-variant-colorScheme-green\:bg-green {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='green']) {
      background-color: var(--background-color-green);
    }
    @container style(--cmp-variant-colorScheme: green) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-green);
      }
    }
  }
  .cmp-variant-colorScheme-green\:text-green {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='green']) {
      color: var(--text-color-green);
    }
    @container style(--cmp-variant-colorScheme: green) {
      &:not([data-component-root='true']) {
        color: var(--text-color-green);
      }
    }
  }
  .cmp-variant-colorScheme-neutral\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='neutral']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-colorScheme: neutral) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-colorScheme-neutral\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='neutral']) {
      background-color: var(--background-color-tertiary);
    }
    @container style(--cmp-variant-colorScheme: neutral) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-tertiary);
      }
    }
  }
  .cmp-variant-colorScheme-neutral\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='neutral']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-colorScheme: neutral) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-colorScheme-orange\:border-orange {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='orange']) {
      border-color: var(--border-color-orange);
    }
    @container style(--cmp-variant-colorScheme: orange) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-orange);
      }
    }
  }
  .cmp-variant-colorScheme-orange\:bg-orange {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='orange']) {
      background-color: var(--background-color-orange);
    }
    @container style(--cmp-variant-colorScheme: orange) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-orange);
      }
    }
  }
  .cmp-variant-colorScheme-orange\:text-orange {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='orange']) {
      color: var(--text-color-orange);
    }
    @container style(--cmp-variant-colorScheme: orange) {
      &:not([data-component-root='true']) {
        color: var(--text-color-orange);
      }
    }
  }
  .cmp-variant-colorScheme-purple\:border-purple {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='purple']) {
      border-color: var(--border-color-purple);
    }
    @container style(--cmp-variant-colorScheme: purple) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-purple);
      }
    }
  }
  .cmp-variant-colorScheme-purple\:bg-purple {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='purple']) {
      background-color: var(--background-color-purple);
    }
    @container style(--cmp-variant-colorScheme: purple) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-purple);
      }
    }
  }
  .cmp-variant-colorScheme-purple\:text-purple {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='purple']) {
      color: var(--text-color-purple);
    }
    @container style(--cmp-variant-colorScheme: purple) {
      &:not([data-component-root='true']) {
        color: var(--text-color-purple);
      }
    }
  }
  .cmp-variant-colorScheme-sky\:border-sky {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='sky']) {
      border-color: var(--border-color-sky);
    }
    @container style(--cmp-variant-colorScheme: sky) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-sky);
      }
    }
  }
  .cmp-variant-colorScheme-sky\:bg-sky {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='sky']) {
      background-color: var(--background-color-sky);
    }
    @container style(--cmp-variant-colorScheme: sky) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-sky);
      }
    }
  }
  .cmp-variant-colorScheme-sky\:text-sky {
    &:where([data-component-root='true'][data-cmp-variant-colorscheme='sky']) {
      color: var(--text-color-sky);
    }
    @container style(--cmp-variant-colorScheme: sky) {
      &:not([data-component-root='true']) {
        color: var(--text-color-sky);
      }
    }
  }
  .cmp-variant-columns-2\:columns-1 {
    &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
      columns: 1;
    }
    @container style(--cmp-variant-columns: 2) {
      &:not([data-component-root='true']) {
        columns: 1;
      }
    }
  }
  .cmp-variant-columns-2\:gap-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
      gap: var(--space-2xl);
    }
    @container style(--cmp-variant-columns: 2) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xl);
      }
    }
  }
  .cmp-variant-columns-2\:md\:columns-2 {
    &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
      @media (width >= 48rem) {
        columns: 2;
      }
    }
    @container style(--cmp-variant-columns: 2) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          columns: 2;
        }
      }
    }
  }
  .cmp-variant-density-comfortable\:h-20 {
    &:where([data-component-root='true'][data-cmp-variant-density='comfortable']) {
      height: calc(var(--spacing) * 20);
    }
    @container style(--cmp-variant-density: comfortable) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 20);
      }
    }
  }
  .cmp-variant-density-comfortable\:h-24 {
    &:where([data-component-root='true'][data-cmp-variant-density='comfortable']) {
      height: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-density: comfortable) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-density-comfortable\:p-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-density='comfortable']) {
      padding: var(--space-xs);
    }
    @container style(--cmp-variant-density: comfortable) {
      &:not([data-component-root='true']) {
        padding: var(--space-xs);
      }
    }
  }
  .cmp-variant-density-compact\:h-16 {
    &:where([data-component-root='true'][data-cmp-variant-density='compact']) {
      height: calc(var(--spacing) * 16);
    }
    @container style(--cmp-variant-density: compact) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 16);
      }
    }
  }
  .cmp-variant-density-compact\:h-size-2xl {
    &:where([data-component-root='true'][data-cmp-variant-density='compact']) {
      height: var(--size-2xl);
    }
    @container style(--cmp-variant-density: compact) {
      &:not([data-component-root='true']) {
        height: var(--size-2xl);
      }
    }
  }
  .cmp-variant-density-compact\:gap-space-2xs {
    &:where([data-component-root='true'][data-cmp-variant-density='compact']) {
      gap: var(--space-2xs);
    }
    @container style(--cmp-variant-density: compact) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xs);
      }
    }
  }
  .cmp-variant-density-compact\:gap-space-md {
    &:where([data-component-root='true'][data-cmp-variant-density='compact']) {
      gap: var(--space-md);
    }
    @container style(--cmp-variant-density: compact) {
      &:not([data-component-root='true']) {
        gap: var(--space-md);
      }
    }
  }
  .cmp-variant-density-compact\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-density='compact']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-density: compact) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-density-compact\:gap-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-density='compact']) {
      gap: var(--space-xs);
    }
    @container style(--cmp-variant-density: compact) {
      &:not([data-component-root='true']) {
        gap: var(--space-xs);
      }
    }
  }
  .cmp-variant-density-compact\:p-space-2xs {
    &:where([data-component-root='true'][data-cmp-variant-density='compact']) {
      padding: var(--space-2xs);
    }
    @container style(--cmp-variant-density: compact) {
      &:not([data-component-root='true']) {
        padding: var(--space-2xs);
      }
    }
  }
  .cmp-variant-fit-contain\:flex {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      display: flex;
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-fit-contain\:h-24 {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      height: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-fit-contain\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      align-items: center;
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-fit-contain\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      justify-content: center;
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-fit-contain\:p-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      padding: var(--space-lg);
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        padding: var(--space-lg);
      }
    }
  }
  .cmp-variant-fit-cover\:aspect-video {
    &:where([data-component-root='true'][data-cmp-variant-fit='cover']) {
      aspect-ratio: var(--aspect-video);
    }
    @container style(--cmp-variant-fit: cover) {
      &:not([data-component-root='true']) {
        aspect-ratio: var(--aspect-video);
      }
    }
  }
  .cmp-variant-fit-cover\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-fit='cover']) {
      background-color: var(--background-color-tertiary);
    }
    @container style(--cmp-variant-fit: cover) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-tertiary);
      }
    }
  }
  .cmp-variant-footerWeight-columns\:grid {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      display: grid;
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        display: grid;
      }
    }
  }
  .cmp-variant-footerWeight-columns\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }
  .cmp-variant-footerWeight-columns\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-footerWeight-columns\:gap-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      gap: var(--space-2xl);
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xl);
      }
    }
  }
  .cmp-variant-footerWeight-columns\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-footerWeight-columns\:md\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      @media (width >= 48rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-footerWeight-columns\:md\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      @media (width >= 48rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-footerWeight-columns\:md\:grid-cols-4 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='columns']) {
      @media (width >= 48rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-footerWeight: columns) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:flex {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      display: flex;
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:flex-wrap {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      flex-wrap: wrap;
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        flex-wrap: wrap;
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      align-items: center;
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:items-start {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      align-items: flex-start;
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        align-items: flex-start;
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:gap-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      gap: var(--space-2xl);
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xl);
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:gap-space-md {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      gap: var(--space-md);
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        gap: var(--space-md);
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:md\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      @media (width >= 48rem) {
        flex-direction: row;
      }
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          flex-direction: row;
        }
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:md\:items-start {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      @media (width >= 48rem) {
        align-items: flex-start;
      }
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          align-items: flex-start;
        }
      }
    }
  }
  .cmp-variant-footerWeight-minimal\:md\:justify-between {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='minimal']) {
      @media (width >= 48rem) {
        justify-content: space-between;
      }
    }
    @container style(--cmp-variant-footerWeight: minimal) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          justify-content: space-between;
        }
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:grid {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      display: grid;
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        display: grid;
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:gap-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      gap: var(--space-2xl);
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xl);
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:md\:col-span-5 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      @media (width >= 48rem) {
        grid-column: span 5 / span 5;
      }
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 5 / span 5;
        }
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:md\:grid-cols-5 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      @media (width >= 48rem) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-footerWeight-sitemap\:md\:grid-cols-6 {
    &:where([data-component-root='true'][data-cmp-variant-footerweight='sitemap']) {
      @media (width >= 48rem) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-footerWeight: sitemap) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-template-columns: repeat(6, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:border-b-thick {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      border-bottom-style: var(--tw-border-style, solid);
      border-bottom-width: var(--border-thick);
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        border-bottom-style: var(--tw-border-style, solid);
        border-bottom-width: var(--border-thick);
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=open\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=open\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-headerTreatment-branded\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='branded']) {
      background-color: var(--background-color-brand-solid);
    }
    @container style(--cmp-variant-headerTreatment: branded) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand-solid);
      }
    }
  }
  .cmp-variant-headerTreatment-branded\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='branded']) {
      color: var(--text-color-on-brand-solid);
    }
    @container style(--cmp-variant-headerTreatment: branded) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-brand-solid);
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:border-b {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:border-b {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=open\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=open\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      background-color: var(--background-color-secondary);
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-secondary);
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=open\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=open\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-headingSize-sm\:typography-2xl {
    &:where([data-component-root='true'][data-cmp-variant-headingsize='sm']) {
      font-size: var(--text-2xl);
      line-height: var(--text-2xl--line-height);
      letter-spacing: var(--text-2xl--letter-spacing);
      font-weight: var(--weight-2xl);
      font-style: var(--style-2xl);
      font-variation-settings: var(--font-variation-2xl);
      font-family: var(--font-2xl);
    }
    @container style(--cmp-variant-headingSize: sm) {
      &:not([data-component-root='true']) {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl--line-height);
        letter-spacing: var(--text-2xl--letter-spacing);
        font-weight: var(--weight-2xl);
        font-style: var(--style-2xl);
        font-variation-settings: var(--font-variation-2xl);
        font-family: var(--font-2xl);
      }
    }
  }
  .cmp-variant-headingSize-sm\:typography-lg {
    &:where([data-component-root='true'][data-cmp-variant-headingsize='sm']) {
      font-size: var(--text-lg);
      line-height: var(--text-lg--line-height);
      letter-spacing: var(--text-lg--letter-spacing);
      font-weight: var(--weight-lg);
      font-style: var(--style-lg);
      font-variation-settings: var(--font-variation-lg);
      font-family: var(--font-lg);
    }
    @container style(--cmp-variant-headingSize: sm) {
      &:not([data-component-root='true']) {
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
        letter-spacing: var(--text-lg--letter-spacing);
        font-weight: var(--weight-lg);
        font-style: var(--style-lg);
        font-variation-settings: var(--font-variation-lg);
        font-family: var(--font-lg);
      }
    }
  }
  .cmp-variant-headingSize-sm\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-headingsize='sm']) {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    @container style(--cmp-variant-headingSize: sm) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
    }
  }
  .cmp-variant-headingSize-sm\:tracking-tight {
    &:where([data-component-root='true'][data-cmp-variant-headingsize='sm']) {
      --tw-tracking: var(--tracking-tight);
      letter-spacing: var(--tracking-tight);
    }
    @container style(--cmp-variant-headingSize: sm) {
      &:not([data-component-root='true']) {
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight);
      }
    }
  }
  .cmp-variant-headingSize-sm\:text-balance {
    &:where([data-component-root='true'][data-cmp-variant-headingsize='sm']) {
      text-wrap: balance;
    }
    @container style(--cmp-variant-headingSize: sm) {
      &:not([data-component-root='true']) {
        text-wrap: balance;
      }
    }
  }
  .cmp-variant-iconPosition-right\:flex-row-reverse {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='right']) {
      flex-direction: row-reverse;
    }
    @container style(--cmp-variant-iconPosition: right) {
      &:not([data-component-root='true']) {
        flex-direction: row-reverse;
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:flex {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      display: flex;
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      width: 100%;
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:items-end {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      align-items: flex-end;
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        align-items: flex-end;
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:self-stretch {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      align-self: stretch;
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        align-self: stretch;
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      letter-spacing: var(--text-sm--letter-spacing);
      font-weight: var(--weight-sm);
      font-style: var(--style-sm);
      font-variation-settings: var(--font-variation-sm);
      font-family: var(--font-sm);
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:font-medium {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
      }
    }
  }
  .cmp-variant-labelPosition-bottom\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='bottom']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-labelPosition: bottom) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-labelPosition-none\:hidden {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='none']) {
      display: none;
    }
    @container style(--cmp-variant-labelPosition: none) {
      &:not([data-component-root='true']) {
        display: none;
      }
    }
  }
  .cmp-variant-labelPosition-right\:flex {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='right']) {
      display: flex;
    }
    @container style(--cmp-variant-labelPosition: right) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-labelPosition-right\:grow {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='right']) {
      flex-grow: 1;
    }
    @container style(--cmp-variant-labelPosition: right) {
      &:not([data-component-root='true']) {
        flex-grow: 1;
      }
    }
  }
  .cmp-variant-labelPosition-right\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='right']) {
      align-items: center;
    }
    @container style(--cmp-variant-labelPosition: right) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-labelPosition-right\:gap-space-md {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='right']) {
      gap: var(--space-md);
    }
    @container style(--cmp-variant-labelPosition: right) {
      &:not([data-component-root='true']) {
        gap: var(--space-md);
      }
    }
  }
  .cmp-variant-labelPosition-right\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='right']) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      letter-spacing: var(--text-sm--letter-spacing);
      font-weight: var(--weight-sm);
      font-style: var(--style-sm);
      font-variation-settings: var(--font-variation-sm);
      font-family: var(--font-sm);
    }
    @container style(--cmp-variant-labelPosition: right) {
      &:not([data-component-root='true']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
    }
  }
  .cmp-variant-labelPosition-right\:font-medium {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='right']) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    @container style(--cmp-variant-labelPosition: right) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
      }
    }
  }
  .cmp-variant-labelPosition-right\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-labelposition='right']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-labelPosition: right) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-laneWidth-narrow\:w-40 {
    &:where([data-component-root='true'][data-cmp-variant-lanewidth='narrow']) {
      width: calc(var(--spacing) * 40);
    }
    @container style(--cmp-variant-laneWidth: narrow) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 40);
      }
    }
  }
  .cmp-variant-laneWidth-wide\:w-56 {
    &:where([data-component-root='true'][data-cmp-variant-lanewidth='wide']) {
      width: calc(var(--spacing) * 56);
    }
    @container style(--cmp-variant-laneWidth: wide) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 56);
      }
    }
  }
  .cmp-variant-mediaSide-left\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
      @media (width >= 64rem) {
        order: 1;
      }
    }
    @container style(--cmp-variant-mediaSide: left) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
    }
  }
  .cmp-variant-mediaSide-left\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
      @media (width >= 64rem) {
        order: 2;
      }
    }
    @container style(--cmp-variant-mediaSide: left) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
    }
  }
  .cmp-variant-mediaSide-right\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
      @media (width >= 64rem) {
        order: 1;
      }
    }
    @container style(--cmp-variant-mediaSide: right) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
    }
  }
  .cmp-variant-mediaSide-right\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
      @media (width >= 64rem) {
        order: 2;
      }
    }
    @container style(--cmp-variant-mediaSide: right) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
    }
  }
  .cmp-variant-objectFit-contain\:object-contain {
    &:where([data-component-root='true'][data-cmp-variant-objectfit='contain']) {
      object-fit: contain;
    }
    @container style(--cmp-variant-objectFit: contain) {
      &:not([data-component-root='true']) {
        object-fit: contain;
      }
    }
  }
  .cmp-variant-objectFit-cover\:object-cover {
    &:where([data-component-root='true'][data-cmp-variant-objectfit='cover']) {
      object-fit: cover;
    }
    @container style(--cmp-variant-objectFit: cover) {
      &:not([data-component-root='true']) {
        object-fit: cover;
      }
    }
  }
  .cmp-variant-objectFit-fill\:object-fill {
    &:where([data-component-root='true'][data-cmp-variant-objectfit='fill']) {
      object-fit: fill;
    }
    @container style(--cmp-variant-objectFit: fill) {
      &:not([data-component-root='true']) {
        object-fit: fill;
      }
    }
  }
  .cmp-variant-objectFit-none\:object-none {
    &:where([data-component-root='true'][data-cmp-variant-objectfit='none']) {
      object-fit: none;
    }
    @container style(--cmp-variant-objectFit: none) {
      &:not([data-component-root='true']) {
        object-fit: none;
      }
    }
  }
  .cmp-variant-objectFit-scale-down\:object-scale-down {
    &:where([data-component-root='true'][data-cmp-variant-objectfit='scale-down']) {
      object-fit: scale-down;
    }
    @container style(--cmp-variant-objectFit: scale-down) {
      &:not([data-component-root='true']) {
        object-fit: scale-down;
      }
    }
  }
  .cmp-variant-orientation-horizontal\:h-px {
    &:where([data-component-root='true'][data-cmp-variant-orientation='horizontal']) {
      height: 1px;
    }
    @container style(--cmp-variant-orientation: horizontal) {
      &:not([data-component-root='true']) {
        height: 1px;
      }
    }
  }
  .cmp-variant-orientation-horizontal\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-orientation='horizontal']) {
      width: 100%;
    }
    @container style(--cmp-variant-orientation: horizontal) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-orientation-horizontal\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-orientation='horizontal']) {
      flex-direction: row;
    }
    @container style(--cmp-variant-orientation: horizontal) {
      &:not([data-component-root='true']) {
        flex-direction: row;
      }
    }
  }
  .cmp-variant-orientation-horizontal\:flex-wrap {
    &:where([data-component-root='true'][data-cmp-variant-orientation='horizontal']) {
      flex-wrap: wrap;
    }
    @container style(--cmp-variant-orientation: horizontal) {
      &:not([data-component-root='true']) {
        flex-wrap: wrap;
      }
    }
  }
  .cmp-variant-orientation-horizontal\:gap-x-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-orientation='horizontal']) {
      column-gap: var(--space-lg);
    }
    @container style(--cmp-variant-orientation: horizontal) {
      &:not([data-component-root='true']) {
        column-gap: var(--space-lg);
      }
    }
  }
  .cmp-variant-orientation-horizontal\:gap-y-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-orientation='horizontal']) {
      row-gap: var(--space-xs);
    }
    @container style(--cmp-variant-orientation: horizontal) {
      &:not([data-component-root='true']) {
        row-gap: var(--space-xs);
      }
    }
  }
  .cmp-variant-orientation-vertical\:h-full {
    &:where([data-component-root='true'][data-cmp-variant-orientation='vertical']) {
      height: 100%;
    }
    @container style(--cmp-variant-orientation: vertical) {
      &:not([data-component-root='true']) {
        height: 100%;
      }
    }
  }
  .cmp-variant-orientation-vertical\:w-px {
    &:where([data-component-root='true'][data-cmp-variant-orientation='vertical']) {
      width: 1px;
    }
    @container style(--cmp-variant-orientation: vertical) {
      &:not([data-component-root='true']) {
        width: 1px;
      }
    }
  }
  .cmp-variant-orientation-vertical\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-orientation='vertical']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-orientation: vertical) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-orientation-vertical\:gap-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-orientation='vertical']) {
      gap: var(--space-xs);
    }
    @container style(--cmp-variant-orientation: vertical) {
      &:not([data-component-root='true']) {
        gap: var(--space-xs);
      }
    }
  }
  .cmp-variant-outsideDays-hidden\:invisible {
    &:where([data-component-root='true'][data-cmp-variant-outsidedays='hidden']) {
      visibility: hidden;
    }
    @container style(--cmp-variant-outsideDays: hidden) {
      &:not([data-component-root='true']) {
        visibility: hidden;
      }
    }
  }
  .cmp-variant-outsideDays-muted\:text-quaternary {
    &:where([data-component-root='true'][data-cmp-variant-outsidedays='muted']) {
      color: var(--text-color-quaternary);
    }
    @container style(--cmp-variant-outsideDays: muted) {
      &:not([data-component-root='true']) {
        color: var(--text-color-quaternary);
      }
    }
  }
  .cmp-variant-padding-default\:p-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-padding='default']) {
      padding: var(--space-xl);
    }
    @container style(--cmp-variant-padding: default) {
      &:not([data-component-root='true']) {
        padding: var(--space-xl);
      }
    }
  }
  .cmp-variant-padding-lg\:p-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-padding='lg']) {
      padding: var(--space-2xl);
    }
    @container style(--cmp-variant-padding: lg) {
      &:not([data-component-root='true']) {
        padding: var(--space-2xl);
      }
    }
  }
  .cmp-variant-padding-none\:p-0 {
    &:where([data-component-root='true'][data-cmp-variant-padding='none']) {
      padding: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-padding: none) {
      &:not([data-component-root='true']) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-padding-sm\:p-space-md {
    &:where([data-component-root='true'][data-cmp-variant-padding='sm']) {
      padding: var(--space-md);
    }
    @container style(--cmp-variant-padding: sm) {
      &:not([data-component-root='true']) {
        padding: var(--space-md);
      }
    }
  }
  .cmp-variant-placement-bottom\:top-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      top: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        top: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-placement-bottom\:left-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      left: calc(1 / 2 * 100%);
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        left: calc(1 / 2 * 100%);
      }
    }
  }
  .cmp-variant-placement-bottom\:h-1\.5 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      height: calc(var(--spacing) * 1.5);
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 1.5);
      }
    }
  }
  .cmp-variant-placement-bottom\:w-24 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      width: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-placement-bottom\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      width: 100%;
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-placement-bottom\:-translate-x-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-bottom\:translate-y-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      --tw-translate-y: calc(var(--spacing) * 10);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        --tw-translate-y: calc(var(--spacing) * 10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-bottom\:items-end {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      align-items: flex-end;
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        align-items: flex-end;
      }
    }
  }
  .cmp-variant-placement-bottom\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      justify-content: center;
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-placement-bottom\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      opacity: 0%;
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        opacity: 0%;
      }
    }
  }
  .cmp-variant-placement-bottom\:starting\:translate-y-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      @starting-style {
        --tw-translate-y: calc(var(--spacing) * 10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        @starting-style {
          --tw-translate-y: calc(var(--spacing) * 10);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .cmp-variant-placement-bottom\:starting\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='bottom']) {
      @starting-style {
        opacity: 0%;
      }
    }
    @container style(--cmp-variant-placement: bottom) {
      &:not([data-component-root='true']) {
        @starting-style {
          opacity: 0%;
        }
      }
    }
  }
  .cmp-variant-placement-center\:flex {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      display: flex;
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-placement-center\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      width: 100%;
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-placement-center\:scale-95 {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .cmp-variant-placement-center\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-placement-center\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      align-items: center;
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-placement-center\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      justify-content: center;
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-placement-center\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      opacity: 0%;
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        opacity: 0%;
      }
    }
  }
  .cmp-variant-placement-center\:starting\:scale-95 {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      @starting-style {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        @starting-style {
          --tw-scale-x: 95%;
          --tw-scale-y: 95%;
          --tw-scale-z: 95%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
        }
      }
    }
  }
  .cmp-variant-placement-center\:starting\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='center']) {
      @starting-style {
        opacity: 0%;
      }
    }
    @container style(--cmp-variant-placement: center) {
      &:not([data-component-root='true']) {
        @starting-style {
          opacity: 0%;
        }
      }
    }
  }
  .cmp-variant-placement-left\:top-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      top: calc(1 / 2 * 100%);
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        top: calc(1 / 2 * 100%);
      }
    }
  }
  .cmp-variant-placement-left\:right-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      right: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        right: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-placement-left\:h-24 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      height: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-placement-left\:h-full {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      height: 100%;
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        height: 100%;
      }
    }
  }
  .cmp-variant-placement-left\:w-1\.5 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      width: calc(var(--spacing) * 1.5);
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 1.5);
      }
    }
  }
  .cmp-variant-placement-left\:-translate-x-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      --tw-translate-x: calc(var(--spacing) * -10);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        --tw-translate-x: calc(var(--spacing) * -10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-left\:-translate-y-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-left\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      align-items: center;
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-placement-left\:justify-start {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      justify-content: flex-start;
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        justify-content: flex-start;
      }
    }
  }
  .cmp-variant-placement-left\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      opacity: 0%;
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        opacity: 0%;
      }
    }
  }
  .cmp-variant-placement-left\:starting\:-translate-x-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      @starting-style {
        --tw-translate-x: calc(var(--spacing) * -10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        @starting-style {
          --tw-translate-x: calc(var(--spacing) * -10);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .cmp-variant-placement-left\:starting\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='left']) {
      @starting-style {
        opacity: 0%;
      }
    }
    @container style(--cmp-variant-placement: left) {
      &:not([data-component-root='true']) {
        @starting-style {
          opacity: 0%;
        }
      }
    }
  }
  .cmp-variant-placement-right\:top-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      top: calc(1 / 2 * 100%);
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        top: calc(1 / 2 * 100%);
      }
    }
  }
  .cmp-variant-placement-right\:left-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      left: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        left: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-placement-right\:h-24 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      height: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-placement-right\:h-full {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      height: 100%;
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        height: 100%;
      }
    }
  }
  .cmp-variant-placement-right\:w-1\.5 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      width: calc(var(--spacing) * 1.5);
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 1.5);
      }
    }
  }
  .cmp-variant-placement-right\:translate-x-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      --tw-translate-x: calc(var(--spacing) * 10);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        --tw-translate-x: calc(var(--spacing) * 10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-right\:-translate-y-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-right\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      align-items: center;
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-placement-right\:justify-end {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      justify-content: flex-end;
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        justify-content: flex-end;
      }
    }
  }
  .cmp-variant-placement-right\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      opacity: 0%;
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        opacity: 0%;
      }
    }
  }
  .cmp-variant-placement-right\:starting\:translate-x-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      @starting-style {
        --tw-translate-x: calc(var(--spacing) * 10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        @starting-style {
          --tw-translate-x: calc(var(--spacing) * 10);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .cmp-variant-placement-right\:starting\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='right']) {
      @starting-style {
        opacity: 0%;
      }
    }
    @container style(--cmp-variant-placement: right) {
      &:not([data-component-root='true']) {
        @starting-style {
          opacity: 0%;
        }
      }
    }
  }
  .cmp-variant-placement-top\:bottom-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      bottom: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        bottom: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-placement-top\:left-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      left: calc(1 / 2 * 100%);
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        left: calc(1 / 2 * 100%);
      }
    }
  }
  .cmp-variant-placement-top\:h-1\.5 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      height: calc(var(--spacing) * 1.5);
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 1.5);
      }
    }
  }
  .cmp-variant-placement-top\:w-24 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      width: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-placement-top\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      width: 100%;
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-placement-top\:-translate-x-1\/2 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-top\:-translate-y-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      --tw-translate-y: calc(var(--spacing) * -10);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        --tw-translate-y: calc(var(--spacing) * -10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .cmp-variant-placement-top\:items-start {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      align-items: flex-start;
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        align-items: flex-start;
      }
    }
  }
  .cmp-variant-placement-top\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      justify-content: center;
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-placement-top\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      opacity: 0%;
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        opacity: 0%;
      }
    }
  }
  .cmp-variant-placement-top\:starting\:-translate-y-10 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      @starting-style {
        --tw-translate-y: calc(var(--spacing) * -10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        @starting-style {
          --tw-translate-y: calc(var(--spacing) * -10);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .cmp-variant-placement-top\:starting\:opacity-0 {
    &:where([data-component-root='true'][data-cmp-variant-placement='top']) {
      @starting-style {
        opacity: 0%;
      }
    }
    @container style(--cmp-variant-placement: top) {
      &:not([data-component-root='true']) {
        @starting-style {
          opacity: 0%;
        }
      }
    }
  }
  .cmp-variant-position-fixed\:fixed {
    &:where([data-component-root='true'][data-cmp-variant-position='fixed']) {
      position: fixed;
    }
    @container style(--cmp-variant-position: fixed) {
      &:not([data-component-root='true']) {
        position: fixed;
      }
    }
  }
  .cmp-variant-position-fixed\:inset-x-0 {
    &:where([data-component-root='true'][data-cmp-variant-position='fixed']) {
      inset-inline: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-position: fixed) {
      &:not([data-component-root='true']) {
        inset-inline: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-position-fixed\:top-0 {
    &:where([data-component-root='true'][data-cmp-variant-position='fixed']) {
      top: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-position: fixed) {
      &:not([data-component-root='true']) {
        top: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-position-fixed\:z-40 {
    &:where([data-component-root='true'][data-cmp-variant-position='fixed']) {
      z-index: 40;
    }
    @container style(--cmp-variant-position: fixed) {
      &:not([data-component-root='true']) {
        z-index: 40;
      }
    }
  }
  .cmp-variant-position-static\:relative {
    &:where([data-component-root='true'][data-cmp-variant-position='static']) {
      position: relative;
    }
    @container style(--cmp-variant-position: static) {
      &:not([data-component-root='true']) {
        position: relative;
      }
    }
  }
  .cmp-variant-presentation-band\:typography-lg {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      font-size: var(--text-lg);
      line-height: var(--text-lg--line-height);
      letter-spacing: var(--text-lg--letter-spacing);
      font-weight: var(--weight-lg);
      font-style: var(--style-lg);
      font-variation-settings: var(--font-variation-lg);
      font-family: var(--font-lg);
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
        letter-spacing: var(--text-lg--letter-spacing);
        font-weight: var(--weight-lg);
        font-style: var(--style-lg);
        font-variation-settings: var(--font-variation-lg);
        font-family: var(--font-lg);
      }
    }
  }
  .cmp-variant-presentation-band\:sm\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 40rem) {
        flex-direction: row;
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          flex-direction: row;
        }
      }
    }
  }
  .cmp-variant-presentation-band\:sm\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 40rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-presentation-band\:sm\:justify-between {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 40rem) {
        justify-content: space-between;
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          justify-content: space-between;
        }
      }
    }
  }
  .cmp-variant-presentation-band\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 64rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-presentation-band\:lg\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 64rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-presentation-band\:lg\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-presentation-band\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-presentation-band\:lg\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 64rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-presentation-band\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      @media (width >= 64rem) {
        gap: var(--space-3xl);
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-2\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 2) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 2) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-3\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-3\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-4\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-4\:lg\:grid-cols-4 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-5\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-5\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-columns-5\:xl\:grid-cols-5 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 80rem) {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 80rem) {
              grid-template-columns: repeat(5, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-layout-split\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-layout-split\:lg\:max-w-none {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          max-width: none;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              max-width: none;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-layout-split\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-layout-split\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              gap: var(--space-3xl);
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-mediaSide-left\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-mediaSide-left\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-mediaSide-right\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-mediaSide-right\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:typography-lg {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      font-size: var(--text-lg);
      line-height: var(--text-lg--line-height);
      letter-spacing: var(--text-lg--letter-spacing);
      font-weight: var(--weight-lg);
      font-style: var(--style-lg);
      font-variation-settings: var(--font-variation-lg);
      font-family: var(--font-lg);
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
        letter-spacing: var(--text-lg--letter-spacing);
        font-weight: var(--weight-lg);
        font-style: var(--style-lg);
        font-variation-settings: var(--font-variation-lg);
        font-family: var(--font-lg);
      }
    }
  }
  .cmp-variant-presentation-block\:sm\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 40rem) {
        flex-direction: row;
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          flex-direction: row;
        }
      }
    }
  }
  .cmp-variant-presentation-block\:sm\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 40rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-presentation-block\:sm\:justify-between {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 40rem) {
        justify-content: space-between;
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          justify-content: space-between;
        }
      }
    }
  }
  .cmp-variant-presentation-block\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 64rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-presentation-block\:lg\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 64rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-presentation-block\:lg\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-presentation-block\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-presentation-block\:lg\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 64rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-presentation-block\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      @media (width >= 64rem) {
        gap: var(--space-3xl);
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-2\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 2) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 2) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-3\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-3\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-4\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-4\:lg\:grid-cols-4 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-5\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-5\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-columns-5\:xl\:grid-cols-5 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 80rem) {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 80rem) {
              grid-template-columns: repeat(5, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-layout-split\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-layout-split\:lg\:max-w-none {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          max-width: none;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              max-width: none;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-layout-split\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-layout-split\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              gap: var(--space-3xl);
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-mediaSide-left\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-mediaSide-left\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-mediaSide-right\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-mediaSide-right\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-panel\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-presentation='panel']) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      letter-spacing: var(--text-sm--letter-spacing);
      font-weight: var(--weight-sm);
      font-style: var(--style-sm);
      font-variation-settings: var(--font-variation-sm);
      font-family: var(--font-sm);
    }
    @container style(--cmp-variant-presentation: panel) {
      &:not([data-component-root='true']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
    }
  }
  .cmp-variant-resize-both\:resize {
    &:where([data-component-root='true'][data-cmp-variant-resize='both']) {
      resize: both;
    }
    @container style(--cmp-variant-resize: both) {
      &:not([data-component-root='true']) {
        resize: both;
      }
    }
  }
  .cmp-variant-resize-horizontal\:resize-x {
    &:where([data-component-root='true'][data-cmp-variant-resize='horizontal']) {
      resize: horizontal;
    }
    @container style(--cmp-variant-resize: horizontal) {
      &:not([data-component-root='true']) {
        resize: horizontal;
      }
    }
  }
  .cmp-variant-resize-none\:resize-none {
    &:where([data-component-root='true'][data-cmp-variant-resize='none']) {
      resize: none;
    }
    @container style(--cmp-variant-resize: none) {
      &:not([data-component-root='true']) {
        resize: none;
      }
    }
  }
  .cmp-variant-resize-vertical\:resize-y {
    &:where([data-component-root='true'][data-cmp-variant-resize='vertical']) {
      resize: vertical;
    }
    @container style(--cmp-variant-resize: vertical) {
      &:not([data-component-root='true']) {
        resize: vertical;
      }
    }
  }
  .cmp-variant-rhythm-compact\:py-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='compact']) {
      padding-block: var(--space-xl);
    }
    @container style(--cmp-variant-rhythm: compact) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-xl);
      }
    }
  }
  .cmp-variant-rhythm-compact\:md\:py-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='compact']) {
      @media (width >= 48rem) {
        padding-block: var(--space-2xl);
      }
    }
    @container style(--cmp-variant-rhythm: compact) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          padding-block: var(--space-2xl);
        }
      }
    }
  }
  .cmp-variant-rhythm-hero\:py-space-4xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
      padding-block: var(--space-4xl);
    }
    @container style(--cmp-variant-rhythm: hero) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-4xl);
      }
    }
  }
  .cmp-variant-rhythm-hero\:md\:py-space-5xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
      @media (width >= 48rem) {
        padding-block: var(--space-5xl);
      }
    }
    @container style(--cmp-variant-rhythm: hero) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          padding-block: var(--space-5xl);
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:rounded-container {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          border-radius: var(--radius-container);
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-radius: var(--radius-container);
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-radius: var(--radius-container);
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              border-radius: var(--radius-container);
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:border {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              border-style: var(--tw-border-style);
              border-width: 1px;
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:border {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              border-left-width: var(--border-thin);
              border-right-width: var(--border-thin);
              border-top-width: var(--border-thin);
              border-bottom-width: var(--border-thin);
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:border-tertiary\/60 {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          border-color: color-mix(in srgb, #1f2b58 60%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--border-color-tertiary) 60%, transparent);
          }
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-color: color-mix(in srgb, #1f2b58 60%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--border-color-tertiary) 60%, transparent);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            border-color: color-mix(in srgb, #1f2b58 60%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--border-color-tertiary) 60%, transparent);
            }
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              border-color: color-mix(in srgb, #1f2b58 60%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                border-color: color-mix(in oklab, var(--border-color-tertiary) 60%, transparent);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            background-color: color-mix(in srgb, #05080f 80%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            background-color: color-mix(in srgb, #05080f 80%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
            }
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              background-color: color-mix(in srgb, #05080f 80%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: transparent;
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            background-color: transparent;
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            background-color: transparent;
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              background-color: transparent;
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:p-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          padding: var(--space-2xl);
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            padding: var(--space-2xl);
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            padding: var(--space-2xl);
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              padding: var(--space-2xl);
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              --tw-backdrop-blur:  ;
              -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,);
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            --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,);
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            --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,);
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              --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,);
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:md\:p-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (width >= 48rem) {
            padding: var(--space-3xl);
          }
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            @media (width >= 48rem) {
              padding: var(--space-3xl);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            @media (width >= 48rem) {
              padding: var(--space-3xl);
            }
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              @media (width >= 48rem) {
                padding: var(--space-3xl);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-rhythm-joined\:py-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='joined']) {
      padding-block: var(--space-3xl);
    }
    @container style(--cmp-variant-rhythm: joined) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-3xl);
      }
    }
  }
  .cmp-variant-rhythm-joined\:md\:py-space-4xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='joined']) {
      @media (width >= 48rem) {
        padding-block: var(--space-4xl);
      }
    }
    @container style(--cmp-variant-rhythm: joined) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          padding-block: var(--space-4xl);
        }
      }
    }
  }
  .cmp-variant-rhythm-normal\:py-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='normal']) {
      padding-block: var(--space-3xl);
    }
    @container style(--cmp-variant-rhythm: normal) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-3xl);
      }
    }
  }
  .cmp-variant-rhythm-normal\:md\:py-space-4xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='normal']) {
      @media (width >= 48rem) {
        padding-block: var(--space-4xl);
      }
    }
    @container style(--cmp-variant-rhythm: normal) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          padding-block: var(--space-4xl);
        }
      }
    }
  }
  .cmp-variant-role-error\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-role='error']) {
      border-color: var(--border-color-danger);
    }
    @container style(--cmp-variant-role: error) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-danger);
      }
    }
  }
  .cmp-variant-role-error\:bg-danger {
    &:where([data-component-root='true'][data-cmp-variant-role='error']) {
      background-color: var(--background-color-danger);
    }
    @container style(--cmp-variant-role: error) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-danger);
      }
    }
  }
  .cmp-variant-role-error\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-role='error']) {
      color: var(--text-color-danger);
    }
    @container style(--cmp-variant-role: error) {
      &:not([data-component-root='true']) {
        color: var(--text-color-danger);
      }
    }
  }
  .cmp-variant-role-info\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-role='info']) {
      border-color: var(--border-color-brand);
    }
    @container style(--cmp-variant-role: info) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-brand);
      }
    }
  }
  .cmp-variant-role-info\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-role='info']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-role: info) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-role-info\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-role='info']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-role: info) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-role-neutral\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-role='neutral']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-role: neutral) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-role-neutral\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-role='neutral']) {
      background-color: var(--background-color-secondary);
    }
    @container style(--cmp-variant-role: neutral) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-secondary);
      }
    }
  }
  .cmp-variant-role-neutral\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-role='neutral']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-role: neutral) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-role-neutral\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-role='neutral']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-role: neutral) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-role-success\:border-success {
    &:where([data-component-root='true'][data-cmp-variant-role='success']) {
      border-color: var(--border-color-success);
    }
    @container style(--cmp-variant-role: success) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-success);
      }
    }
  }
  .cmp-variant-role-success\:bg-success {
    &:where([data-component-root='true'][data-cmp-variant-role='success']) {
      background-color: var(--background-color-success);
    }
    @container style(--cmp-variant-role: success) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-success);
      }
    }
  }
  .cmp-variant-role-success\:text-success {
    &:where([data-component-root='true'][data-cmp-variant-role='success']) {
      color: var(--text-color-success);
    }
    @container style(--cmp-variant-role: success) {
      &:not([data-component-root='true']) {
        color: var(--text-color-success);
      }
    }
  }
  .cmp-variant-role-warning\:border-warning {
    &:where([data-component-root='true'][data-cmp-variant-role='warning']) {
      border-color: var(--border-color-warning);
    }
    @container style(--cmp-variant-role: warning) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-warning);
      }
    }
  }
  .cmp-variant-role-warning\:bg-warning {
    &:where([data-component-root='true'][data-cmp-variant-role='warning']) {
      background-color: var(--background-color-warning);
    }
    @container style(--cmp-variant-role: warning) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-warning);
      }
    }
  }
  .cmp-variant-role-warning\:text-warning {
    &:where([data-component-root='true'][data-cmp-variant-role='warning']) {
      color: var(--text-color-warning);
    }
    @container style(--cmp-variant-role: warning) {
      &:not([data-component-root='true']) {
        color: var(--text-color-warning);
      }
    }
  }
  .cmp-variant-rows-1\:lg\:h-\(--tile-row\) {
    &:where([data-component-root='true'][data-cmp-variant-rows='1']) {
      @media (width >= 64rem) {
        height: var(--tile-row);
      }
    }
    @container style(--cmp-variant-rows: 1) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          height: var(--tile-row);
        }
      }
    }
  }
  .cmp-variant-rows-1\:lg\:overflow-y-auto {
    &:where([data-component-root='true'][data-cmp-variant-rows='1']) {
      @media (width >= 64rem) {
        overflow-y: auto;
      }
    }
    @container style(--cmp-variant-rows: 1) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          overflow-y: auto;
        }
      }
    }
  }
  .cmp-variant-rows-2\:lg\:row-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-rows='2']) {
      @media (width >= 64rem) {
        grid-row: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-rows: 2) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-row: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-rows-2\:lg\:h-\[calc\(var\(--tile-row\)\*2\+var\(--space-xl\)\)\] {
    &:where([data-component-root='true'][data-cmp-variant-rows='2']) {
      @media (width >= 64rem) {
        height: calc(var(--tile-row) * 2 + var(--space-xl));
      }
    }
    @container style(--cmp-variant-rows: 2) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          height: calc(var(--tile-row) * 2 + var(--space-xl));
        }
      }
    }
  }
  .cmp-variant-rows-2\:lg\:overflow-y-auto {
    &:where([data-component-root='true'][data-cmp-variant-rows='2']) {
      @media (width >= 64rem) {
        overflow-y: auto;
      }
    }
    @container style(--cmp-variant-rows: 2) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          overflow-y: auto;
        }
      }
    }
  }
  .cmp-variant-rows-3\:lg\:row-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-rows='3']) {
      @media (width >= 64rem) {
        grid-row: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-rows: 3) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-row: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-rows-3\:lg\:h-\[calc\(var\(--tile-row\)\*3\+var\(--space-xl\)\*2\)\] {
    &:where([data-component-root='true'][data-cmp-variant-rows='3']) {
      @media (width >= 64rem) {
        height: calc(var(--tile-row) * 3 + var(--space-xl) * 2);
      }
    }
    @container style(--cmp-variant-rows: 3) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          height: calc(var(--tile-row) * 3 + var(--space-xl) * 2);
        }
      }
    }
  }
  .cmp-variant-rows-3\:lg\:overflow-y-auto {
    &:where([data-component-root='true'][data-cmp-variant-rows='3']) {
      @media (width >= 64rem) {
        overflow-y: auto;
      }
    }
    @container style(--cmp-variant-rows: 3) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          overflow-y: auto;
        }
      }
    }
  }
  .cmp-variant-shape-circle\:rounded-full {
    &:where([data-component-root='true'][data-cmp-variant-shape='circle']) {
      border-radius: var(--radius-full);
    }
    @container style(--cmp-variant-shape: circle) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-full);
      }
    }
  }
  .cmp-variant-shape-rectangle\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-shape='rectangle']) {
      width: 100%;
    }
    @container style(--cmp-variant-shape: rectangle) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-shape-rectangle\:rounded-control {
    &:where([data-component-root='true'][data-cmp-variant-shape='rectangle']) {
      border-radius: var(--radius-control);
    }
    @container style(--cmp-variant-shape: rectangle) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-control);
      }
    }
  }
  .cmp-variant-side-bottom\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-side='bottom']) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
    @container style(--cmp-variant-side: bottom) {
      &:not([data-component-root='true']) {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
      }
    }
  }
  .cmp-variant-side-bottom\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-side='bottom']) {
      border-top-width: var(--border-thin);
    }
    @container style(--cmp-variant-side: bottom) {
      &:not([data-component-root='true']) {
        border-top-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-side-bottom\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-side='bottom']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-side: bottom) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-side-left\:w-3\/4 {
    &:where([data-component-root='true'][data-cmp-variant-side='left']) {
      width: calc(3 / 4 * 100%);
    }
    @container style(--cmp-variant-side: left) {
      &:not([data-component-root='true']) {
        width: calc(3 / 4 * 100%);
      }
    }
  }
  .cmp-variant-side-left\:border-r {
    &:where([data-component-root='true'][data-cmp-variant-side='left']) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
    @container style(--cmp-variant-side: left) {
      &:not([data-component-root='true']) {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
      }
    }
  }
  .cmp-variant-side-left\:border-r {
    &:where([data-component-root='true'][data-cmp-variant-side='left']) {
      border-right-width: var(--border-thin);
    }
    @container style(--cmp-variant-side: left) {
      &:not([data-component-root='true']) {
        border-right-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-side-left\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-side='left']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-side: left) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-side-left\:sm\:max-w-96 {
    &:where([data-component-root='true'][data-cmp-variant-side='left']) {
      @media (width >= 40rem) {
        max-width: calc(var(--spacing) * 96);
      }
    }
    @container style(--cmp-variant-side: left) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          max-width: calc(var(--spacing) * 96);
        }
      }
    }
  }
  .cmp-variant-side-right\:w-3\/4 {
    &:where([data-component-root='true'][data-cmp-variant-side='right']) {
      width: calc(3 / 4 * 100%);
    }
    @container style(--cmp-variant-side: right) {
      &:not([data-component-root='true']) {
        width: calc(3 / 4 * 100%);
      }
    }
  }
  .cmp-variant-side-right\:border-l {
    &:where([data-component-root='true'][data-cmp-variant-side='right']) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
    @container style(--cmp-variant-side: right) {
      &:not([data-component-root='true']) {
        border-left-style: var(--tw-border-style);
        border-left-width: 1px;
      }
    }
  }
  .cmp-variant-side-right\:border-l {
    &:where([data-component-root='true'][data-cmp-variant-side='right']) {
      border-left-width: var(--border-thin);
    }
    @container style(--cmp-variant-side: right) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-side-right\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-side='right']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-side: right) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-side-right\:sm\:max-w-96 {
    &:where([data-component-root='true'][data-cmp-variant-side='right']) {
      @media (width >= 40rem) {
        max-width: calc(var(--spacing) * 96);
      }
    }
    @container style(--cmp-variant-side: right) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          max-width: calc(var(--spacing) * 96);
        }
      }
    }
  }
  .cmp-variant-side-top\:border-b {
    &:where([data-component-root='true'][data-cmp-variant-side='top']) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
    @container style(--cmp-variant-side: top) {
      &:not([data-component-root='true']) {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
      }
    }
  }
  .cmp-variant-side-top\:border-b {
    &:where([data-component-root='true'][data-cmp-variant-side='top']) {
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-side: top) {
      &:not([data-component-root='true']) {
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-side-top\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-side='top']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-side: top) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-sidebarTone-brand\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='brand']) {
      background-color: var(--background-color-brand-solid);
    }
    @container style(--cmp-variant-sidebarTone: brand) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand-solid);
      }
    }
  }
  .cmp-variant-sidebarTone-brand\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='brand']) {
      color: var(--text-color-on-brand-solid);
    }
    @container style(--cmp-variant-sidebarTone: brand) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-brand-solid);
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:border-r {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:border-r {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      border-right-width: var(--border-thin);
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        border-right-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:bg-tertiary\/50 {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      background-color: color-mix(in srgb, #141d3d 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
      }
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        background-color: color-mix(in srgb, #141d3d 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
        }
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:in-data-\[cmp-variant-surfaces\=open\]\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        background-color: transparent;
      }
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          background-color: transparent;
        }
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:border-r {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:border-r {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      border-right-width: var(--border-thin);
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        border-right-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:bg-surface-1 {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      background-color: var(--background-color-surface-1);
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-surface-1);
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:in-data-\[cmp-variant-surfaces\=open\]\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        background-color: transparent;
      }
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          background-color: transparent;
        }
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:in-data-\[cmp-variant-surfaces\=translucent\]\:bg-primary\/80 {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        background-color: color-mix(in srgb, #05080f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
        }
      }
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          background-color: color-mix(in srgb, #05080f 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-primary) 80%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:in-data-\[cmp-variant-surfaces\=translucent\]\:backdrop-blur-xl {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        --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,);
      }
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          --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,);
        }
      }
    }
  }
  .cmp-variant-size-default\:size-24 {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      width: calc(var(--spacing) * 24);
      height: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 24);
        height: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-size-default\:size-icon-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      width: var(--icon-sm);
      height: var(--icon-sm);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        width: var(--icon-sm);
        height: var(--icon-sm);
      }
    }
  }
  .cmp-variant-size-default\:size-size-2xs {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      width: var(--size-2xs);
      height: var(--size-2xs);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        width: var(--size-2xs);
        height: var(--size-2xs);
      }
    }
  }
  .cmp-variant-size-default\:size-control-md {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      width: var(--control-md-size);
      height: var(--control-md-size);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        width: var(--control-md-size);
        height: var(--control-md-size);
      }
    }
  }
  .cmp-variant-size-default\:h-1\.5 {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      height: calc(var(--spacing) * 1.5);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 1.5);
      }
    }
  }
  .cmp-variant-size-default\:h-2 {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      height: calc(var(--spacing) * 2);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 2);
      }
    }
  }
  .cmp-variant-size-default\:h-14 {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      height: calc(var(--spacing) * 14);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 14);
      }
    }
  }
  .cmp-variant-size-default\:h-24 {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      height: calc(var(--spacing) * 24);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 24);
      }
    }
  }
  .cmp-variant-size-default\:h-control-md {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      height: var(--control-md-size);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        height: var(--control-md-size);
      }
    }
  }
  .cmp-variant-size-default\:h-size-md {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      height: var(--size-md);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        height: var(--size-md);
      }
    }
  }
  .cmp-variant-size-default\:min-w-\[var\(--control-md-size\)\] {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      min-width: var(--control-md-size);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        min-width: var(--control-md-size);
      }
    }
  }
  .cmp-variant-size-default\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-size-default\:gap-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      gap: var(--space-xl);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        gap: var(--space-xl);
      }
    }
  }
  .cmp-variant-size-default\:p-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      padding: var(--space-xl);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        padding: var(--space-xl);
      }
    }
  }
  .cmp-variant-size-default\:px-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      padding-inline: var(--space-sm);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-sm);
      }
    }
  }
  .cmp-variant-size-default\:py-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      padding-block: var(--space-lg);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-lg);
      }
    }
  }
  .cmp-variant-size-default\:py-control-md {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      padding-top: var(--control-md-padding-block);
      padding-bottom: var(--control-md-padding-block);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        padding-top: var(--control-md-padding-block);
        padding-bottom: var(--control-md-padding-block);
      }
    }
  }
  .cmp-variant-size-default\:px-control-md {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      padding-left: var(--control-md-padding-inline);
      padding-right: var(--control-md-padding-inline);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        padding-left: var(--control-md-padding-inline);
        padding-right: var(--control-md-padding-inline);
      }
    }
  }
  .cmp-variant-size-default\:px-control-md-tight {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      padding-left: var(--control-md-padding-inline-tight);
      padding-right: var(--control-md-padding-inline-tight);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        padding-left: var(--control-md-padding-inline-tight);
        padding-right: var(--control-md-padding-inline-tight);
      }
    }
  }
  .cmp-variant-size-default\:typography-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      font-size: var(--text-lg);
      line-height: var(--text-lg--line-height);
      letter-spacing: var(--text-lg--letter-spacing);
      font-weight: var(--weight-lg);
      font-style: var(--style-lg);
      font-variation-settings: var(--font-variation-lg);
      font-family: var(--font-lg);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
        letter-spacing: var(--text-lg--letter-spacing);
        font-weight: var(--weight-lg);
        font-style: var(--style-lg);
        font-variation-settings: var(--font-variation-lg);
        font-family: var(--font-lg);
      }
    }
  }
  .cmp-variant-size-default\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      letter-spacing: var(--text-sm--letter-spacing);
      font-weight: var(--weight-sm);
      font-style: var(--style-sm);
      font-variation-settings: var(--font-variation-sm);
      font-family: var(--font-sm);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
    }
  }
  .cmp-variant-size-default\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      font-size: var(--text-xs);
      line-height: var(--text-xs--line-height);
      letter-spacing: var(--text-xs--letter-spacing);
      font-weight: var(--weight-xs);
      font-style: var(--style-xs);
      font-variation-settings: var(--font-variation-xs);
      font-family: var(--font-xs);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
    }
  }
  .cmp-variant-size-default\:font-medium {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
      }
    }
  }
  .cmp-variant-size-default\:md\:h-14 {
    &:where([data-component-root='true'][data-cmp-variant-size='default']) {
      @media (width >= 48rem) {
        height: calc(var(--spacing) * 14);
      }
    }
    @container style(--cmp-variant-size: default) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          height: calc(var(--spacing) * 14);
        }
      }
    }
  }
  .cmp-variant-iconPosition-left\:cmp-variant-size-default\:pr-control-md {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='left']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-right: var(--control-md-padding-inline);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-right: var(--control-md-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: left) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-right: var(--control-md-padding-inline);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-right: var(--control-md-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-iconPosition-left\:cmp-variant-size-default\:pl-control-md-tight {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='left']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-left: var(--control-md-padding-inline-tight);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-md-padding-inline-tight);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: left) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-left: var(--control-md-padding-inline-tight);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-md-padding-inline-tight);
          }
        }
      }
    }
  }
  .cmp-variant-iconPosition-right\:cmp-variant-size-default\:pr-control-md-tight {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='right']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-right: var(--control-md-padding-inline-tight);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-right: var(--control-md-padding-inline-tight);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: right) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-right: var(--control-md-padding-inline-tight);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-right: var(--control-md-padding-inline-tight);
          }
        }
      }
    }
  }
  .cmp-variant-iconPosition-right\:cmp-variant-size-default\:pl-control-md {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='right']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-left: var(--control-md-padding-inline);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-md-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: right) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-left: var(--control-md-padding-inline);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-md-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-shape-circle\:cmp-variant-size-default\:size-10 {
    &:where([data-component-root='true'][data-cmp-variant-shape='circle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          width: calc(var(--spacing) * 10);
          height: calc(var(--spacing) * 10);
        }
      }
    }
    @container style(--cmp-variant-shape: circle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          width: calc(var(--spacing) * 10);
          height: calc(var(--spacing) * 10);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            width: calc(var(--spacing) * 10);
            height: calc(var(--spacing) * 10);
          }
        }
      }
    }
  }
  .cmp-variant-shape-rectangle\:cmp-variant-size-default\:h-24 {
    &:where([data-component-root='true'][data-cmp-variant-shape='rectangle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        height: calc(var(--spacing) * 24);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          height: calc(var(--spacing) * 24);
        }
      }
    }
    @container style(--cmp-variant-shape: rectangle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          height: calc(var(--spacing) * 24);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            height: calc(var(--spacing) * 24);
          }
        }
      }
    }
  }
  .cmp-variant-shape-circle\:cmp-variant-size-font\:size-\[1em\] {
    &:where([data-component-root='true'][data-cmp-variant-shape='circle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='font']) {
        width: 1em;
        height: 1em;
      }
      @container style(--cmp-variant-size: font) {
        &:not([data-component-root='true']) {
          width: 1em;
          height: 1em;
        }
      }
    }
    @container style(--cmp-variant-shape: circle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='font']) {
          width: 1em;
          height: 1em;
        }
        @container style(--cmp-variant-size: font) {
          &:not([data-component-root='true']) {
            width: 1em;
            height: 1em;
          }
        }
      }
    }
  }
  .cmp-variant-shape-rectangle\:cmp-variant-size-font\:h-\[1em\] {
    &:where([data-component-root='true'][data-cmp-variant-shape='rectangle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='font']) {
        height: 1em;
      }
      @container style(--cmp-variant-size: font) {
        &:not([data-component-root='true']) {
          height: 1em;
        }
      }
    }
    @container style(--cmp-variant-shape: rectangle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='font']) {
          height: 1em;
        }
        @container style(--cmp-variant-size: font) {
          &:not([data-component-root='true']) {
            height: 1em;
          }
        }
      }
    }
  }
  .cmp-variant-size-icon\:size-control-md {
    &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
      width: var(--control-md-size);
      height: var(--control-md-size);
    }
    @container style(--cmp-variant-size: icon) {
      &:not([data-component-root='true']) {
        width: var(--control-md-size);
        height: var(--control-md-size);
      }
    }
  }
  .cmp-variant-size-icon\:p-0 {
    &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
      padding: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-size: icon) {
      &:not([data-component-root='true']) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-size-lg\:right-\[-3px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      right: -3px;
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        right: -3px;
      }
    }
  }
  .cmp-variant-size-lg\:bottom-\[-3px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      bottom: -3px;
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        bottom: -3px;
      }
    }
  }
  .cmp-variant-size-lg\:size-32 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      width: calc(var(--spacing) * 32);
      height: calc(var(--spacing) * 32);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 32);
        height: calc(var(--spacing) * 32);
      }
    }
  }
  .cmp-variant-size-lg\:size-icon-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      width: var(--icon-lg);
      height: var(--icon-lg);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        width: var(--icon-lg);
        height: var(--icon-lg);
      }
    }
  }
  .cmp-variant-size-lg\:size-size-2xl {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      width: var(--size-2xl);
      height: var(--size-2xl);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        width: var(--size-2xl);
        height: var(--size-2xl);
      }
    }
  }
  .cmp-variant-size-lg\:size-size-2xs {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      width: var(--size-2xs);
      height: var(--size-2xs);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        width: var(--size-2xs);
        height: var(--size-2xs);
      }
    }
  }
  .cmp-variant-size-lg\:size-size-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      width: var(--size-xs);
      height: var(--size-xs);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        width: var(--size-xs);
        height: var(--size-xs);
      }
    }
  }
  .cmp-variant-size-lg\:size-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      width: var(--control-lg-size);
      height: var(--control-lg-size);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        width: var(--control-lg-size);
        height: var(--control-lg-size);
      }
    }
  }
  .cmp-variant-size-lg\:h-2 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      height: calc(var(--spacing) * 2);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 2);
      }
    }
  }
  .cmp-variant-size-lg\:h-3 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      height: calc(var(--spacing) * 3);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 3);
      }
    }
  }
  .cmp-variant-size-lg\:h-16 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      height: calc(var(--spacing) * 16);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 16);
      }
    }
  }
  .cmp-variant-size-lg\:h-26 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      height: calc(var(--spacing) * 26);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 26);
      }
    }
  }
  .cmp-variant-size-lg\:h-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      height: var(--control-lg-size);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        height: var(--control-lg-size);
      }
    }
  }
  .cmp-variant-size-lg\:h-size-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      height: var(--size-lg);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        height: var(--size-lg);
      }
    }
  }
  .cmp-variant-size-lg\:min-w-\[var\(--control-lg-size\)\] {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      min-width: var(--control-lg-size);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        min-width: var(--control-lg-size);
      }
    }
  }
  .cmp-variant-size-lg\:px-space-md {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      padding-inline: var(--space-md);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-md);
      }
    }
  }
  .cmp-variant-size-lg\:py-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      padding-block: var(--space-xl);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-xl);
      }
    }
  }
  .cmp-variant-size-lg\:py-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      padding-top: var(--control-lg-padding-block);
      padding-bottom: var(--control-lg-padding-block);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        padding-top: var(--control-lg-padding-block);
        padding-bottom: var(--control-lg-padding-block);
      }
    }
  }
  .cmp-variant-size-lg\:px-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      padding-left: var(--control-lg-padding-inline);
      padding-right: var(--control-lg-padding-inline);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        padding-left: var(--control-lg-padding-inline);
        padding-right: var(--control-lg-padding-inline);
      }
    }
  }
  .cmp-variant-size-lg\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      font-size: var(--text-base);
      line-height: var(--text-base--line-height);
      letter-spacing: var(--text-base--letter-spacing);
      font-weight: var(--weight-base);
      font-style: var(--style-base);
      font-variation-settings: var(--font-variation-base);
      font-family: var(--font-base);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
    }
  }
  .cmp-variant-size-lg\:typography-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      font-size: var(--text-lg);
      line-height: var(--text-lg--line-height);
      letter-spacing: var(--text-lg--letter-spacing);
      font-weight: var(--weight-lg);
      font-style: var(--style-lg);
      font-variation-settings: var(--font-variation-lg);
      font-family: var(--font-lg);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
        letter-spacing: var(--text-lg--letter-spacing);
        font-weight: var(--weight-lg);
        font-style: var(--style-lg);
        font-variation-settings: var(--font-variation-lg);
        font-family: var(--font-lg);
      }
    }
  }
  .cmp-variant-size-lg\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      letter-spacing: var(--text-sm--letter-spacing);
      font-weight: var(--weight-sm);
      font-style: var(--style-sm);
      font-variation-settings: var(--font-variation-sm);
      font-family: var(--font-sm);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
    }
  }
  .cmp-variant-size-lg\:typography-xl {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      font-size: var(--text-xl);
      line-height: var(--text-xl--line-height);
      letter-spacing: var(--text-xl--letter-spacing);
      font-weight: var(--weight-xl);
      font-style: var(--style-xl);
      font-variation-settings: var(--font-variation-xl);
      font-family: var(--font-xl);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        font-size: var(--text-xl);
        line-height: var(--text-xl--line-height);
        letter-spacing: var(--text-xl--letter-spacing);
        font-weight: var(--weight-xl);
        font-style: var(--style-xl);
        font-variation-settings: var(--font-variation-xl);
        font-family: var(--font-xl);
      }
    }
  }
  .cmp-variant-size-lg\:leading-7 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      --tw-leading: calc(var(--spacing) * 7);
      line-height: calc(var(--spacing) * 7);
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        --tw-leading: calc(var(--spacing) * 7);
        line-height: calc(var(--spacing) * 7);
      }
    }
  }
  .cmp-variant-size-lg\:md\:h-16 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      @media (width >= 48rem) {
        height: calc(var(--spacing) * 16);
      }
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          height: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .cmp-variant-iconPosition-left\:cmp-variant-size-lg\:px-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='left']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-left: var(--control-lg-padding-inline);
        padding-right: var(--control-lg-padding-inline);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: left) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-lg-padding-inline);
            padding-right: var(--control-lg-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-iconPosition-right\:cmp-variant-size-lg\:px-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='right']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-left: var(--control-lg-padding-inline);
        padding-right: var(--control-lg-padding-inline);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: right) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-lg-padding-inline);
            padding-right: var(--control-lg-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-shape-circle\:cmp-variant-size-lg\:size-12 {
    &:where([data-component-root='true'][data-cmp-variant-shape='circle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        width: calc(var(--spacing) * 12);
        height: calc(var(--spacing) * 12);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          width: calc(var(--spacing) * 12);
          height: calc(var(--spacing) * 12);
        }
      }
    }
    @container style(--cmp-variant-shape: circle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          width: calc(var(--spacing) * 12);
          height: calc(var(--spacing) * 12);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            width: calc(var(--spacing) * 12);
            height: calc(var(--spacing) * 12);
          }
        }
      }
    }
  }
  .cmp-variant-shape-rectangle\:cmp-variant-size-lg\:h-40 {
    &:where([data-component-root='true'][data-cmp-variant-shape='rectangle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        height: calc(var(--spacing) * 40);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          height: calc(var(--spacing) * 40);
        }
      }
    }
    @container style(--cmp-variant-shape: rectangle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          height: calc(var(--spacing) * 40);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            height: calc(var(--spacing) * 40);
          }
        }
      }
    }
  }
  .cmp-variant-size-md\:right-\[-2px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      right: -2px;
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        right: -2px;
      }
    }
  }
  .cmp-variant-size-md\:bottom-\[-2px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      bottom: -2px;
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        bottom: -2px;
      }
    }
  }
  .cmp-variant-size-md\:size-icon-md {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      width: var(--icon-md);
      height: var(--icon-md);
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        width: var(--icon-md);
        height: var(--icon-md);
      }
    }
  }
  .cmp-variant-size-md\:size-size-2xs {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      width: var(--size-2xs);
      height: var(--size-2xs);
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        width: var(--size-2xs);
        height: var(--size-2xs);
      }
    }
  }
  .cmp-variant-size-md\:size-size-xl {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      width: var(--size-xl);
      height: var(--size-xl);
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        width: var(--size-xl);
        height: var(--size-xl);
      }
    }
  }
  .cmp-variant-size-md\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      font-size: var(--text-base);
      line-height: var(--text-base--line-height);
      letter-spacing: var(--text-base--letter-spacing);
      font-weight: var(--weight-base);
      font-style: var(--style-base);
      font-variation-settings: var(--font-variation-base);
      font-family: var(--font-base);
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
    }
  }
  .cmp-variant-size-md\:leading-6 {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
      }
    }
  }
  .cmp-variant-size-normal\:size-icon-md {
    &:where([data-component-root='true'][data-cmp-variant-size='normal']) {
      width: var(--icon-md);
      height: var(--icon-md);
    }
    @container style(--cmp-variant-size: normal) {
      &:not([data-component-root='true']) {
        width: var(--icon-md);
        height: var(--icon-md);
      }
    }
  }
  .cmp-variant-size-normal\:gap-x-space-md {
    &:where([data-component-root='true'][data-cmp-variant-size='normal']) {
      column-gap: var(--space-md);
    }
    @container style(--cmp-variant-size: normal) {
      &:not([data-component-root='true']) {
        column-gap: var(--space-md);
      }
    }
  }
  .cmp-variant-size-normal\:p-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-size='normal']) {
      padding: var(--space-lg);
    }
    @container style(--cmp-variant-size: normal) {
      &:not([data-component-root='true']) {
        padding: var(--space-lg);
      }
    }
  }
  .cmp-variant-size-normal\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='normal']) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      letter-spacing: var(--text-sm--letter-spacing);
      font-weight: var(--weight-sm);
      font-style: var(--style-sm);
      font-variation-settings: var(--font-variation-sm);
      font-family: var(--font-sm);
    }
    @container style(--cmp-variant-size: normal) {
      &:not([data-component-root='true']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
    }
  }
  .cmp-variant-size-sm\:right-\[-2px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      right: -2px;
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        right: -2px;
      }
    }
  }
  .cmp-variant-size-sm\:bottom-\[-2px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      bottom: -2px;
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        bottom: -2px;
      }
    }
  }
  .cmp-variant-size-sm\:size-16 {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      width: calc(var(--spacing) * 16);
      height: calc(var(--spacing) * 16);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 16);
        height: calc(var(--spacing) * 16);
      }
    }
  }
  .cmp-variant-size-sm\:size-icon-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      width: var(--icon-sm);
      height: var(--icon-sm);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        width: var(--icon-sm);
        height: var(--icon-sm);
      }
    }
  }
  .cmp-variant-size-sm\:size-icon-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      width: var(--icon-xs);
      height: var(--icon-xs);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        width: var(--icon-xs);
        height: var(--icon-xs);
      }
    }
  }
  .cmp-variant-size-sm\:size-size-3xs {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      width: var(--size-3xs);
      height: var(--size-3xs);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        width: var(--size-3xs);
        height: var(--size-3xs);
      }
    }
  }
  .cmp-variant-size-sm\:size-size-md {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      width: var(--size-md);
      height: var(--size-md);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        width: var(--size-md);
        height: var(--size-md);
      }
    }
  }
  .cmp-variant-size-sm\:size-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      width: var(--control-sm-size);
      height: var(--control-sm-size);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        width: var(--control-sm-size);
        height: var(--control-sm-size);
      }
    }
  }
  .cmp-variant-size-sm\:h-1 {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      height: calc(var(--spacing) * 1);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 1);
      }
    }
  }
  .cmp-variant-size-sm\:h-12 {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      height: calc(var(--spacing) * 12);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 12);
      }
    }
  }
  .cmp-variant-size-sm\:h-22 {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      height: calc(var(--spacing) * 22);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        height: calc(var(--spacing) * 22);
      }
    }
  }
  .cmp-variant-size-sm\:h-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      height: var(--control-sm-size);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        height: var(--control-sm-size);
      }
    }
  }
  .cmp-variant-size-sm\:h-size-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      height: var(--size-sm);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        height: var(--size-sm);
      }
    }
  }
  .cmp-variant-size-sm\:min-w-\[var\(--control-sm-size\)\] {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      min-width: var(--control-sm-size);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        min-width: var(--control-sm-size);
      }
    }
  }
  .cmp-variant-size-sm\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-size-sm\:gap-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      gap: var(--space-xs);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        gap: var(--space-xs);
      }
    }
  }
  .cmp-variant-size-sm\:p-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      padding: var(--space-sm);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        padding: var(--space-sm);
      }
    }
  }
  .cmp-variant-size-sm\:px-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      padding-inline: var(--space-sm);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-sm);
      }
    }
  }
  .cmp-variant-size-sm\:px-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      padding-inline: var(--space-xs);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-xs);
      }
    }
  }
  .cmp-variant-size-sm\:py-space-md {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      padding-block: var(--space-md);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-md);
      }
    }
  }
  .cmp-variant-size-sm\:py-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      padding-top: var(--control-sm-padding-block);
      padding-bottom: var(--control-sm-padding-block);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        padding-top: var(--control-sm-padding-block);
        padding-bottom: var(--control-sm-padding-block);
      }
    }
  }
  .cmp-variant-size-sm\:px-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      padding-left: var(--control-sm-padding-inline);
      padding-right: var(--control-sm-padding-inline);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        padding-left: var(--control-sm-padding-inline);
        padding-right: var(--control-sm-padding-inline);
      }
    }
  }
  .cmp-variant-size-sm\:px-control-sm-tight {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      padding-left: var(--control-sm-padding-inline-tight);
      padding-right: var(--control-sm-padding-inline-tight);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        padding-left: var(--control-sm-padding-inline-tight);
        padding-right: var(--control-sm-padding-inline-tight);
      }
    }
  }
  .cmp-variant-size-sm\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      font-size: var(--text-base);
      line-height: var(--text-base--line-height);
      letter-spacing: var(--text-base--letter-spacing);
      font-weight: var(--weight-base);
      font-style: var(--style-base);
      font-variation-settings: var(--font-variation-base);
      font-family: var(--font-base);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
    }
  }
  .cmp-variant-size-sm\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      letter-spacing: var(--text-sm--letter-spacing);
      font-weight: var(--weight-sm);
      font-style: var(--style-sm);
      font-variation-settings: var(--font-variation-sm);
      font-family: var(--font-sm);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
    }
  }
  .cmp-variant-size-sm\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      font-size: var(--text-xs);
      line-height: var(--text-xs--line-height);
      letter-spacing: var(--text-xs--letter-spacing);
      font-weight: var(--weight-xs);
      font-style: var(--style-xs);
      font-variation-settings: var(--font-variation-xs);
      font-family: var(--font-xs);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
    }
  }
  .cmp-variant-size-sm\:leading-5 {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      --tw-leading: calc(var(--spacing) * 5);
      line-height: calc(var(--spacing) * 5);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5);
      }
    }
  }
  .cmp-variant-size-sm\:font-medium {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
      }
    }
  }
  .cmp-variant-size-sm\:md\:h-12 {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      @media (width >= 48rem) {
        height: calc(var(--spacing) * 12);
      }
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          height: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .cmp-variant-iconPosition-left\:cmp-variant-size-sm\:pr-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='left']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-right: var(--control-sm-padding-inline);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-right: var(--control-sm-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: left) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-right: var(--control-sm-padding-inline);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-right: var(--control-sm-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-iconPosition-left\:cmp-variant-size-sm\:pl-control-sm-tight {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='left']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-left: var(--control-sm-padding-inline-tight);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-sm-padding-inline-tight);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: left) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-left: var(--control-sm-padding-inline-tight);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-sm-padding-inline-tight);
          }
        }
      }
    }
  }
  .cmp-variant-iconPosition-right\:cmp-variant-size-sm\:pr-control-sm-tight {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='right']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-right: var(--control-sm-padding-inline-tight);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-right: var(--control-sm-padding-inline-tight);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: right) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-right: var(--control-sm-padding-inline-tight);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-right: var(--control-sm-padding-inline-tight);
          }
        }
      }
    }
  }
  .cmp-variant-iconPosition-right\:cmp-variant-size-sm\:pl-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-iconposition='right']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-left: var(--control-sm-padding-inline);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-sm-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-iconPosition: right) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-left: var(--control-sm-padding-inline);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-sm-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-shape-circle\:cmp-variant-size-sm\:size-8 {
    &:where([data-component-root='true'][data-cmp-variant-shape='circle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          width: calc(var(--spacing) * 8);
          height: calc(var(--spacing) * 8);
        }
      }
    }
    @container style(--cmp-variant-shape: circle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          width: calc(var(--spacing) * 8);
          height: calc(var(--spacing) * 8);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            width: calc(var(--spacing) * 8);
            height: calc(var(--spacing) * 8);
          }
        }
      }
    }
  }
  .cmp-variant-shape-rectangle\:cmp-variant-size-sm\:h-16 {
    &:where([data-component-root='true'][data-cmp-variant-shape='rectangle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        height: calc(var(--spacing) * 16);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          height: calc(var(--spacing) * 16);
        }
      }
    }
    @container style(--cmp-variant-shape: rectangle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          height: calc(var(--spacing) * 16);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            height: calc(var(--spacing) * 16);
          }
        }
      }
    }
  }
  .cmp-variant-size-small\:size-icon-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='small']) {
      width: var(--icon-sm);
      height: var(--icon-sm);
    }
    @container style(--cmp-variant-size: small) {
      &:not([data-component-root='true']) {
        width: var(--icon-sm);
        height: var(--icon-sm);
      }
    }
  }
  .cmp-variant-size-small\:gap-x-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='small']) {
      column-gap: var(--space-sm);
    }
    @container style(--cmp-variant-size: small) {
      &:not([data-component-root='true']) {
        column-gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-size-small\:p-space-md {
    &:where([data-component-root='true'][data-cmp-variant-size='small']) {
      padding: var(--space-md);
    }
    @container style(--cmp-variant-size: small) {
      &:not([data-component-root='true']) {
        padding: var(--space-md);
      }
    }
  }
  .cmp-variant-size-small\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='small']) {
      font-size: var(--text-xs);
      line-height: var(--text-xs--line-height);
      letter-spacing: var(--text-xs--letter-spacing);
      font-weight: var(--weight-xs);
      font-style: var(--style-xs);
      font-variation-settings: var(--font-variation-xs);
      font-family: var(--font-xs);
    }
    @container style(--cmp-variant-size: small) {
      &:not([data-component-root='true']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
    }
  }
  .cmp-variant-size-xl\:size-48 {
    &:where([data-component-root='true'][data-cmp-variant-size='xl']) {
      width: calc(var(--spacing) * 48);
      height: calc(var(--spacing) * 48);
    }
    @container style(--cmp-variant-size: xl) {
      &:not([data-component-root='true']) {
        width: calc(var(--spacing) * 48);
        height: calc(var(--spacing) * 48);
      }
    }
  }
  .cmp-variant-size-xl\:typography-3xl {
    &:where([data-component-root='true'][data-cmp-variant-size='xl']) {
      font-size: var(--text-3xl);
      line-height: var(--text-3xl--line-height);
      letter-spacing: var(--text-3xl--letter-spacing);
      font-weight: var(--weight-3xl);
      font-style: var(--style-3xl);
      font-variation-settings: var(--font-variation-3xl);
      font-family: var(--font-3xl);
    }
    @container style(--cmp-variant-size: xl) {
      &:not([data-component-root='true']) {
        font-size: var(--text-3xl);
        line-height: var(--text-3xl--line-height);
        letter-spacing: var(--text-3xl--letter-spacing);
        font-weight: var(--weight-3xl);
        font-style: var(--style-3xl);
        font-variation-settings: var(--font-variation-3xl);
        font-family: var(--font-3xl);
      }
    }
  }
  .cmp-variant-shape-circle\:cmp-variant-size-xl\:size-16 {
    &:where([data-component-root='true'][data-cmp-variant-shape='circle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='xl']) {
        width: calc(var(--spacing) * 16);
        height: calc(var(--spacing) * 16);
      }
      @container style(--cmp-variant-size: xl) {
        &:not([data-component-root='true']) {
          width: calc(var(--spacing) * 16);
          height: calc(var(--spacing) * 16);
        }
      }
    }
    @container style(--cmp-variant-shape: circle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='xl']) {
          width: calc(var(--spacing) * 16);
          height: calc(var(--spacing) * 16);
        }
        @container style(--cmp-variant-size: xl) {
          &:not([data-component-root='true']) {
            width: calc(var(--spacing) * 16);
            height: calc(var(--spacing) * 16);
          }
        }
      }
    }
  }
  .cmp-variant-shape-rectangle\:cmp-variant-size-xl\:h-64 {
    &:where([data-component-root='true'][data-cmp-variant-shape='rectangle']) {
      &:where([data-component-root='true'][data-cmp-variant-size='xl']) {
        height: calc(var(--spacing) * 64);
      }
      @container style(--cmp-variant-size: xl) {
        &:not([data-component-root='true']) {
          height: calc(var(--spacing) * 64);
        }
      }
    }
    @container style(--cmp-variant-shape: rectangle) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='xl']) {
          height: calc(var(--spacing) * 64);
        }
        @container style(--cmp-variant-size: xl) {
          &:not([data-component-root='true']) {
            height: calc(var(--spacing) * 64);
          }
        }
      }
    }
  }
  .cmp-variant-size-xs\:right-\[-1px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      right: -1px;
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        right: -1px;
      }
    }
  }
  .cmp-variant-size-xs\:bottom-\[-1px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      bottom: -1px;
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        bottom: -1px;
      }
    }
  }
  .cmp-variant-size-xs\:size-icon-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      width: var(--icon-xs);
      height: var(--icon-xs);
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        width: var(--icon-xs);
        height: var(--icon-xs);
      }
    }
  }
  .cmp-variant-size-xs\:size-size-3xs {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      width: var(--size-3xs);
      height: var(--size-3xs);
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        width: var(--size-3xs);
        height: var(--size-3xs);
      }
    }
  }
  .cmp-variant-size-xs\:size-size-sm {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      width: var(--size-sm);
      height: var(--size-sm);
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        width: var(--size-sm);
        height: var(--size-sm);
      }
    }
  }
  .cmp-variant-size-xs\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      font-size: var(--text-xs);
      line-height: var(--text-xs--line-height);
      letter-spacing: var(--text-xs--letter-spacing);
      font-weight: var(--weight-xs);
      font-style: var(--style-xs);
      font-variation-settings: var(--font-variation-xs);
      font-family: var(--font-xs);
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
    }
  }
  .cmp-variant-size-xs\:leading-\[18px\] {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      --tw-leading: 18px;
      line-height: 18px;
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        --tw-leading: 18px;
        line-height: 18px;
      }
    }
  }
  .cmp-variant-spacing-compact\:mr-space-md {
    &:where([data-component-root='true'][data-cmp-variant-spacing='compact']) {
      margin-right: var(--space-md);
    }
    @container style(--cmp-variant-spacing: compact) {
      &:not([data-component-root='true']) {
        margin-right: var(--space-md);
      }
    }
  }
  .cmp-variant-spacing-compact\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-spacing='compact']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-spacing: compact) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-spacing-compact\:px-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-spacing='compact']) {
      padding-inline: var(--space-lg);
    }
    @container style(--cmp-variant-spacing: compact) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-lg);
      }
    }
  }
  .cmp-variant-spacing-default\:mr-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-spacing='default']) {
      margin-right: var(--space-lg);
    }
    @container style(--cmp-variant-spacing: default) {
      &:not([data-component-root='true']) {
        margin-right: var(--space-lg);
      }
    }
  }
  .cmp-variant-spacing-default\:gap-space-md {
    &:where([data-component-root='true'][data-cmp-variant-spacing='default']) {
      gap: var(--space-md);
    }
    @container style(--cmp-variant-spacing: default) {
      &:not([data-component-root='true']) {
        gap: var(--space-md);
      }
    }
  }
  .cmp-variant-spacing-default\:px-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-spacing='default']) {
      padding-inline: var(--space-xl);
    }
    @container style(--cmp-variant-spacing: default) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-xl);
      }
    }
  }
  .cmp-variant-spacing-spacious\:mr-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-spacing='spacious']) {
      margin-right: var(--space-xl);
    }
    @container style(--cmp-variant-spacing: spacious) {
      &:not([data-component-root='true']) {
        margin-right: var(--space-xl);
      }
    }
  }
  .cmp-variant-spacing-spacious\:gap-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-spacing='spacious']) {
      gap: var(--space-lg);
    }
    @container style(--cmp-variant-spacing: spacious) {
      &:not([data-component-root='true']) {
        gap: var(--space-lg);
      }
    }
  }
  .cmp-variant-spacing-spacious\:px-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-spacing='spacious']) {
      padding-inline: var(--space-3xl);
    }
    @container style(--cmp-variant-spacing: spacious) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-3xl);
      }
    }
  }
  .cmp-variant-span-12\:sm\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 40rem) {
        flex-direction: row;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          flex-direction: row;
        }
      }
    }
  }
  .cmp-variant-span-12\:sm\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 40rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-12\:sm\:justify-between {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 40rem) {
        justify-content: space-between;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          justify-content: space-between;
        }
      }
    }
  }
  .cmp-variant-span-12\:md\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 48rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-12\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 64rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-12\:lg\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 64rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-span-12\:lg\:col-span-12 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 64rem) {
        grid-column: span 12 / span 12;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 12 / span 12;
        }
      }
    }
  }
  .cmp-variant-span-12\:lg\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-12\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-12\:lg\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 64rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-12\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      @media (width >= 64rem) {
        gap: var(--space-3xl);
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-2\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 2) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 2) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-3\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-3\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-4\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-4\:lg\:grid-cols-4 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-5\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-5\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-columns-5\:xl\:grid-cols-5 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 80rem) {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 80rem) {
              grid-template-columns: repeat(5, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-layout-split\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-layout-split\:lg\:max-w-none {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          max-width: none;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              max-width: none;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-layout-split\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-layout-split\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              gap: var(--space-3xl);
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-mediaSide-left\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-mediaSide-left\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-mediaSide-right\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-mediaSide-right\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-3\:md\:col-span-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='3']) {
      @media (width >= 48rem) {
        grid-column: span 1 / span 1;
      }
    }
    @container style(--cmp-variant-span: 3) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 1 / span 1;
        }
      }
    }
  }
  .cmp-variant-span-3\:lg\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='3']) {
      @media (width >= 64rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-span: 3) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-span-4\:md\:col-span-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='4']) {
      @media (width >= 48rem) {
        grid-column: span 1 / span 1;
      }
    }
    @container style(--cmp-variant-span: 4) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 1 / span 1;
        }
      }
    }
  }
  .cmp-variant-span-4\:lg\:col-span-4 {
    &:where([data-component-root='true'][data-cmp-variant-span='4']) {
      @media (width >= 64rem) {
        grid-column: span 4 / span 4;
      }
    }
    @container style(--cmp-variant-span: 4) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 4 / span 4;
        }
      }
    }
  }
  .cmp-variant-span-6\:sm\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 40rem) {
        flex-direction: row;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          flex-direction: row;
        }
      }
    }
  }
  .cmp-variant-span-6\:sm\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 40rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-6\:sm\:justify-between {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 40rem) {
        justify-content: space-between;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          justify-content: space-between;
        }
      }
    }
  }
  .cmp-variant-span-6\:md\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 48rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-6\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 64rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-6\:lg\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 64rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-span-6\:lg\:col-span-6 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 64rem) {
        grid-column: span 6 / span 6;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 6 / span 6;
        }
      }
    }
  }
  .cmp-variant-span-6\:lg\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-6\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-6\:lg\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 64rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-6\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      @media (width >= 64rem) {
        gap: var(--space-3xl);
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-2\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 2) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 2) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-3\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-3\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-4\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-4\:lg\:grid-cols-4 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-5\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-5\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-columns-5\:xl\:grid-cols-5 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 80rem) {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 80rem) {
              grid-template-columns: repeat(5, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-layout-split\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-layout-split\:lg\:max-w-none {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          max-width: none;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              max-width: none;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-layout-split\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-layout-split\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              gap: var(--space-3xl);
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-mediaSide-left\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-mediaSide-left\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-mediaSide-right\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-mediaSide-right\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:sm\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 40rem) {
        flex-direction: row;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          flex-direction: row;
        }
      }
    }
  }
  .cmp-variant-span-8\:sm\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 40rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-8\:sm\:justify-between {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 40rem) {
        justify-content: space-between;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          justify-content: space-between;
        }
      }
    }
  }
  .cmp-variant-span-8\:md\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 48rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-8\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 64rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-8\:lg\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 64rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-span-8\:lg\:col-span-8 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 64rem) {
        grid-column: span 8 / span 8;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 8 / span 8;
        }
      }
    }
  }
  .cmp-variant-span-8\:lg\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-8\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-8\:lg\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 64rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-8\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      @media (width >= 64rem) {
        gap: var(--space-3xl);
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-2\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 2) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 2) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-3\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-3\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-4\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-4\:lg\:grid-cols-4 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-5\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-5\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-columns-5\:xl\:grid-cols-5 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 80rem) {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 80rem) {
              grid-template-columns: repeat(5, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-layout-split\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-layout-split\:lg\:max-w-none {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          max-width: none;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              max-width: none;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-layout-split\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-layout-split\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              gap: var(--space-3xl);
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-mediaSide-left\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-mediaSide-left\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-mediaSide-right\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-mediaSide-right\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:sm\:flex-row {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 40rem) {
        flex-direction: row;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          flex-direction: row;
        }
      }
    }
  }
  .cmp-variant-span-9\:sm\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 40rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-9\:sm\:justify-between {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 40rem) {
        justify-content: space-between;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          justify-content: space-between;
        }
      }
    }
  }
  .cmp-variant-span-9\:md\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 48rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-9\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 64rem) {
        grid-column: span 2 / span 2;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
  }
  .cmp-variant-span-9\:lg\:col-span-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 64rem) {
        grid-column: span 3 / span 3;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 3 / span 3;
        }
      }
    }
  }
  .cmp-variant-span-9\:lg\:col-span-9 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 64rem) {
        grid-column: span 9 / span 9;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-column: span 9 / span 9;
        }
      }
    }
  }
  .cmp-variant-span-9\:lg\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-9\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-span-9\:lg\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 64rem) {
        align-items: center;
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          align-items: center;
        }
      }
    }
  }
  .cmp-variant-span-9\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      @media (width >= 64rem) {
        gap: var(--space-3xl);
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-2\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 2) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='2']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 2) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-3\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-3\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 3) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='3']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 3) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-4\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-4\:lg\:grid-cols-4 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 4) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='4']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 4) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-5\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-5\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-columns-5\:xl\:grid-cols-5 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
        @media (width >= 80rem) {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-columns: 5) {
        &:not([data-component-root='true']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-columns='5']) {
          @media (width >= 80rem) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-columns: 5) {
          &:not([data-component-root='true']) {
            @media (width >= 80rem) {
              grid-template-columns: repeat(5, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-layout-split\:lg\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-column: span 2 / span 2;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-column: span 2 / span 2;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-layout-split\:lg\:max-w-none {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          max-width: none;
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            max-width: none;
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              max-width: none;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-layout-split\:lg\:grid-cols-3 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-layout-split\:lg\:gap-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
        @media (width >= 64rem) {
          gap: var(--space-3xl);
        }
      }
      @container style(--cmp-variant-layout: split) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-layout='split']) {
          @media (width >= 64rem) {
            gap: var(--space-3xl);
          }
        }
        @container style(--cmp-variant-layout: split) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              gap: var(--space-3xl);
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-mediaSide-left\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-mediaSide-left\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: left) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='left']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: left) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-mediaSide-right\:lg\:order-1 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 1;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 1;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 1;
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-mediaSide-right\:lg\:order-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
        @media (width >= 64rem) {
          order: 2;
        }
      }
      @container style(--cmp-variant-mediaSide: right) {
        &:not([data-component-root='true']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-mediaside='right']) {
          @media (width >= 64rem) {
            order: 2;
          }
        }
        @container style(--cmp-variant-mediaSide: right) {
          &:not([data-component-root='true']) {
            @media (width >= 64rem) {
              order: 2;
            }
          }
        }
      }
    }
  }
  .cmp-variant-speed-fast\:\[animation-duration\:1s\] {
    &:where([data-component-root='true'][data-cmp-variant-speed='fast']) {
      animation-duration: 1s;
    }
    @container style(--cmp-variant-speed: fast) {
      &:not([data-component-root='true']) {
        animation-duration: 1s;
      }
    }
  }
  .cmp-variant-speed-medium\:\[animation-duration\:1\.5s\] {
    &:where([data-component-root='true'][data-cmp-variant-speed='medium']) {
      animation-duration: 1.5s;
    }
    @container style(--cmp-variant-speed: medium) {
      &:not([data-component-root='true']) {
        animation-duration: 1.5s;
      }
    }
  }
  .cmp-variant-speed-slow\:\[animation-duration\:2s\] {
    &:where([data-component-root='true'][data-cmp-variant-speed='slow']) {
      animation-duration: 2s;
    }
    @container style(--cmp-variant-speed: slow) {
      &:not([data-component-root='true']) {
        animation-duration: 2s;
      }
    }
  }
  .cmp-variant-state-none\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-state='none']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-state: none) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-state-none\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='none']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-state: none) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-state-none\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='none']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-state: none) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-state-none\:text-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-state='none']) {
      color: var(--text-color-tertiary);
    }
    @container style(--cmp-variant-state: none) {
      &:not([data-component-root='true']) {
        color: var(--text-color-tertiary);
      }
    }
  }
  .cmp-variant-state-none\:in-data-\[cmp-variant-surfaces\=open\]\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-state='none']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        color: var(--text-color-secondary);
      }
    }
    @container style(--cmp-variant-state: none) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          color: var(--text-color-secondary);
        }
      }
    }
  }
  .cmp-variant-state-none\:in-data-\[cmp-variant-surfaces\=translucent\]\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-state='none']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        color: var(--text-color-secondary);
      }
    }
    @container style(--cmp-variant-state: none) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          color: var(--text-color-secondary);
        }
      }
    }
  }
  .cmp-variant-state-upcoming\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-state='upcoming']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-state: upcoming) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-state-upcoming\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='upcoming']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-state: upcoming) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-state-upcoming\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='upcoming']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-state: upcoming) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-state-upcoming\:text-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-state='upcoming']) {
      color: var(--text-color-tertiary);
    }
    @container style(--cmp-variant-state: upcoming) {
      &:not([data-component-root='true']) {
        color: var(--text-color-tertiary);
      }
    }
  }
  .cmp-variant-state-upcoming\:opacity-60 {
    &:where([data-component-root='true'][data-cmp-variant-state='upcoming']) {
      opacity: 60%;
    }
    @container style(--cmp-variant-state: upcoming) {
      &:not([data-component-root='true']) {
        opacity: 60%;
      }
    }
  }
  .cmp-variant-state-upcoming\:in-data-\[cmp-variant-surfaces\=open\]\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-state='upcoming']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        color: var(--text-color-secondary);
      }
    }
    @container style(--cmp-variant-state: upcoming) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          color: var(--text-color-secondary);
        }
      }
    }
  }
  .cmp-variant-state-upcoming\:in-data-\[cmp-variant-surfaces\=translucent\]\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-state='upcoming']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        color: var(--text-color-secondary);
      }
    }
    @container style(--cmp-variant-state: upcoming) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          color: var(--text-color-secondary);
        }
      }
    }
  }
  .cmp-variant-tableStyle-grid\:border {
    &:where([data-component-root='true'][data-cmp-variant-tablestyle='grid']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-tableStyle: grid) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-tableStyle-grid\:border {
    &:where([data-component-root='true'][data-cmp-variant-tablestyle='grid']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-tableStyle: grid) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-tableStyle-grid\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-tablestyle='grid']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-tableStyle: grid) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-today-disc\:rounded-full {
    &:where([data-component-root='true'][data-cmp-variant-today='disc']) {
      border-radius: var(--radius-full);
    }
    @container style(--cmp-variant-today: disc) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-full);
      }
    }
  }
  .cmp-variant-today-disc\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-today='disc']) {
      background-color: var(--background-color-brand-solid);
    }
    @container style(--cmp-variant-today: disc) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand-solid);
      }
    }
  }
  .cmp-variant-today-disc\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-today='disc']) {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    @container style(--cmp-variant-today: disc) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
    }
  }
  .cmp-variant-today-disc\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-today='disc']) {
      color: var(--text-color-on-brand-solid);
    }
    @container style(--cmp-variant-today: disc) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-brand-solid);
      }
    }
  }
  .cmp-variant-today-ring\:rounded-full {
    &:where([data-component-root='true'][data-cmp-variant-today='ring']) {
      border-radius: var(--radius-full);
    }
    @container style(--cmp-variant-today: ring) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-full);
      }
    }
  }
  .cmp-variant-today-ring\:border-thick {
    &:where([data-component-root='true'][data-cmp-variant-today='ring']) {
      border-left-style: var(--tw-border-style, solid);
      border-left-width: var(--border-thick);
      border-right-style: var(--tw-border-style, solid);
      border-right-width: var(--border-thick);
      border-top-style: var(--tw-border-style, solid);
      border-top-width: var(--border-thick);
      border-bottom-style: var(--tw-border-style, solid);
      border-bottom-width: var(--border-thick);
    }
    @container style(--cmp-variant-today: ring) {
      &:not([data-component-root='true']) {
        border-left-style: var(--tw-border-style, solid);
        border-left-width: var(--border-thick);
        border-right-style: var(--tw-border-style, solid);
        border-right-width: var(--border-thick);
        border-top-style: var(--tw-border-style, solid);
        border-top-width: var(--border-thick);
        border-bottom-style: var(--tw-border-style, solid);
        border-bottom-width: var(--border-thick);
      }
    }
  }
  .cmp-variant-today-ring\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-today='ring']) {
      border-color: var(--border-color-brand);
    }
    @container style(--cmp-variant-today: ring) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-brand);
      }
    }
  }
  .cmp-variant-today-ring\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-today='ring']) {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    @container style(--cmp-variant-today: ring) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
    }
  }
  .cmp-variant-today-ring\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-today='ring']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-today: ring) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-today-subtle\:rounded-full {
    &:where([data-component-root='true'][data-cmp-variant-today='subtle']) {
      border-radius: var(--radius-full);
    }
    @container style(--cmp-variant-today: subtle) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-full);
      }
    }
  }
  .cmp-variant-today-subtle\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-today='subtle']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-today: subtle) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-today-subtle\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-today='subtle']) {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    @container style(--cmp-variant-today: subtle) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
    }
  }
  .cmp-variant-today-subtle\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-today='subtle']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-today: subtle) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-tone-error\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
      border-color: var(--border-color-danger);
    }
    @container style(--cmp-variant-tone: error) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-danger);
      }
    }
  }
  .cmp-variant-tone-error\:bg-danger {
    &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
      background-color: var(--background-color-danger);
    }
    @container style(--cmp-variant-tone: error) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-danger);
      }
    }
  }
  .cmp-variant-tone-error\:bg-danger-solid {
    &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
      background-color: var(--background-color-danger-solid);
    }
    @container style(--cmp-variant-tone: error) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-danger-solid);
      }
    }
  }
  .cmp-variant-tone-error\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
      color: var(--text-color-danger);
    }
    @container style(--cmp-variant-tone: error) {
      &:not([data-component-root='true']) {
        color: var(--text-color-danger);
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-error\:border-l-thick {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-left-style: var(--tw-border-style, solid);
        border-left-width: var(--border-thick);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-left-style: var(--tw-border-style, solid);
            border-left-width: var(--border-thick);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-error\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-color: var(--border-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-danger);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-color: var(--border-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-error\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        background-color: var(--background-color-secondary);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          background-color: var(--background-color-secondary);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-error\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        color: var(--text-color-primary);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          color: var(--text-color-primary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          color: var(--text-color-primary);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            color: var(--text-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-error\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-color: var(--border-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-danger);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-color: var(--border-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-error\:bg-danger {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        background-color: var(--background-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-danger);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          background-color: var(--background-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-error\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        color: var(--text-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          color: var(--text-color-danger);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          color: var(--text-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            color: var(--text-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-color: var(--border-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-danger);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-color: var(--border-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:border-transparent {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-color: transparent;
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-color: transparent;
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:bg-danger {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        background-color: var(--background-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-danger);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          background-color: var(--background-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:bg-danger-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        background-color: var(--background-color-danger-solid);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-danger-solid);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          background-color: var(--background-color-danger-solid);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-danger-solid);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        color: var(--text-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          color: var(--text-color-danger);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          color: var(--text-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            color: var(--text-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:text-on-danger-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        color: var(--text-color-on-danger-solid);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          color: var(--text-color-on-danger-solid);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          color: var(--text-color-on-danger-solid);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            color: var(--text-color-on-danger-solid);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        --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);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          --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);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          --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);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            --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);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-error\:ring-focus {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        --tw-ring-color: var(--color-focus);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          --tw-ring-color: var(--color-focus);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          --tw-ring-color: var(--color-focus);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            --tw-ring-color: var(--color-focus);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-error\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        border-color: var(--border-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-danger);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          border-color: var(--border-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-error\:bg-danger {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        background-color: var(--background-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-danger);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          background-color: var(--background-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-error\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
        color: var(--text-color-danger);
      }
      @container style(--cmp-variant-tone: error) {
        &:not([data-component-root='true']) {
          color: var(--text-color-danger);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='error']) {
          color: var(--text-color-danger);
        }
        @container style(--cmp-variant-tone: error) {
          &:not([data-component-root='true']) {
            color: var(--text-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-tone-info\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
      border-color: var(--border-color-brand);
    }
    @container style(--cmp-variant-tone: info) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-brand);
      }
    }
  }
  .cmp-variant-tone-info\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-tone: info) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-tone-info\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
      background-color: var(--background-color-brand-solid);
    }
    @container style(--cmp-variant-tone: info) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand-solid);
      }
    }
  }
  .cmp-variant-tone-info\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-tone: info) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-info\:border-l-thick {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-left-style: var(--tw-border-style, solid);
        border-left-width: var(--border-thick);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-left-style: var(--tw-border-style, solid);
            border-left-width: var(--border-thick);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-info\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-color: var(--border-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-brand);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-color: var(--border-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-info\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        background-color: var(--background-color-secondary);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          background-color: var(--background-color-secondary);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-info\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        color: var(--text-color-primary);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          color: var(--text-color-primary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          color: var(--text-color-primary);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            color: var(--text-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-info\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-color: var(--border-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-brand);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-color: var(--border-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-info\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        background-color: var(--background-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          background-color: var(--background-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-info\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        color: var(--text-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          color: var(--text-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-color: var(--border-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-color: var(--border-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:border-transparent {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-color: transparent;
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-color: transparent;
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        background-color: var(--background-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          background-color: var(--background-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        background-color: var(--background-color-brand-solid);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          background-color: var(--background-color-brand-solid);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        color: var(--text-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          color: var(--text-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        color: var(--text-color-on-brand-solid);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          color: var(--text-color-on-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          color: var(--text-color-on-brand-solid);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            color: var(--text-color-on-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        --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);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          --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);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          --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);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            --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);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-info\:ring-focus {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        --tw-ring-color: var(--color-focus);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          --tw-ring-color: var(--color-focus);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          --tw-ring-color: var(--color-focus);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            --tw-ring-color: var(--color-focus);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-info\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        border-color: var(--border-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          border-color: var(--border-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-info\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        background-color: var(--background-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          background-color: var(--background-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-info\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
        color: var(--text-color-brand);
      }
      @container style(--cmp-variant-tone: info) {
        &:not([data-component-root='true']) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='info']) {
          color: var(--text-color-brand);
        }
        @container style(--cmp-variant-tone: info) {
          &:not([data-component-root='true']) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-tone-neutral\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-tone: neutral) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-tone-neutral\:bg-quaternary {
    &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
      background-color: var(--background-color-quaternary);
    }
    @container style(--cmp-variant-tone: neutral) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-quaternary);
      }
    }
  }
  .cmp-variant-tone-neutral\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
      background-color: var(--background-color-secondary);
    }
    @container style(--cmp-variant-tone: neutral) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-secondary);
      }
    }
  }
  .cmp-variant-tone-neutral\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-tone: neutral) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-neutral\:border-l-thick {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        border-left-style: var(--tw-border-style, solid);
        border-left-width: var(--border-thick);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            border-left-style: var(--tw-border-style, solid);
            border-left-width: var(--border-thick);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-neutral\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        border-color: var(--border-color-tertiary);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-tertiary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          border-color: var(--border-color-tertiary);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-tertiary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-neutral\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        background-color: var(--background-color-secondary);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          background-color: var(--background-color-secondary);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-neutral\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        color: var(--text-color-primary);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          color: var(--text-color-primary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          color: var(--text-color-primary);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            color: var(--text-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-neutral\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-neutral\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-neutral\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        border-color: var(--border-color-tertiary);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-tertiary);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          border-color: var(--border-color-tertiary);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-tertiary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-neutral\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        background-color: var(--background-color-tertiary);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-tertiary);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          background-color: var(--background-color-tertiary);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-tertiary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-neutral\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
        color: var(--text-color-secondary);
      }
      @container style(--cmp-variant-tone: neutral) {
        &:not([data-component-root='true']) {
          color: var(--text-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='neutral']) {
          color: var(--text-color-secondary);
        }
        @container style(--cmp-variant-tone: neutral) {
          &:not([data-component-root='true']) {
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:border-transparent {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        border-color: transparent;
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          border-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          border-color: transparent;
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            border-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        background-color: var(--background-color-brand);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          background-color: var(--background-color-brand);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        background-color: var(--background-color-brand-solid);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          background-color: var(--background-color-brand-solid);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        color: var(--text-color-brand);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          color: var(--text-color-brand);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        color: var(--text-color-on-brand-solid);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          color: var(--text-color-on-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          color: var(--text-color-on-brand-solid);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            color: var(--text-color-on-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        --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);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          --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);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          --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);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            --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);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-none\:ring-focus {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        --tw-ring-color: var(--color-focus);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          --tw-ring-color: var(--color-focus);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          --tw-ring-color: var(--color-focus);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            --tw-ring-color: var(--color-focus);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-none\:border-transparent {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        border-color: transparent;
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          border-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          border-color: transparent;
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            border-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-none\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        background-color: var(--background-color-brand);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          background-color: var(--background-color-brand);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-none\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        background-color: var(--background-color-brand-solid);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          background-color: var(--background-color-brand-solid);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-none\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        color: var(--text-color-brand);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          color: var(--text-color-brand);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-none\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
        color: var(--text-color-on-brand-solid);
      }
      @container style(--cmp-variant-tone: none) {
        &:not([data-component-root='true']) {
          color: var(--text-color-on-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='none']) {
          color: var(--text-color-on-brand-solid);
        }
        @container style(--cmp-variant-tone: none) {
          &:not([data-component-root='true']) {
            color: var(--text-color-on-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-tone-success\:border-success {
    &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
      border-color: var(--border-color-success);
    }
    @container style(--cmp-variant-tone: success) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-success);
      }
    }
  }
  .cmp-variant-tone-success\:bg-success {
    &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
      background-color: var(--background-color-success);
    }
    @container style(--cmp-variant-tone: success) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-success);
      }
    }
  }
  .cmp-variant-tone-success\:bg-success-solid {
    &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
      background-color: var(--background-color-success-solid);
    }
    @container style(--cmp-variant-tone: success) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-success-solid);
      }
    }
  }
  .cmp-variant-tone-success\:text-success {
    &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
      color: var(--text-color-success);
    }
    @container style(--cmp-variant-tone: success) {
      &:not([data-component-root='true']) {
        color: var(--text-color-success);
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-success\:border-l-thick {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-left-style: var(--tw-border-style, solid);
        border-left-width: var(--border-thick);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-left-style: var(--tw-border-style, solid);
            border-left-width: var(--border-thick);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-success\:border-success {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-color: var(--border-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-success);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-color: var(--border-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-success\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        background-color: var(--background-color-secondary);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          background-color: var(--background-color-secondary);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-success\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        color: var(--text-color-primary);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          color: var(--text-color-primary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          color: var(--text-color-primary);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            color: var(--text-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-success\:border-success {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-color: var(--border-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-success);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-color: var(--border-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-success\:bg-success {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        background-color: var(--background-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-success);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          background-color: var(--background-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-success\:text-success {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        color: var(--text-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          color: var(--text-color-success);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          color: var(--text-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            color: var(--text-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:border-success {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-color: var(--border-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-success);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-color: var(--border-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:bg-success {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        background-color: var(--background-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-success);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          background-color: var(--background-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:text-success {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        color: var(--text-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          color: var(--text-color-success);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          color: var(--text-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            color: var(--text-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        --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);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          --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);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          --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);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            --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);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-success\:ring-focus {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        --tw-ring-color: var(--color-focus);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          --tw-ring-color: var(--color-focus);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          --tw-ring-color: var(--color-focus);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            --tw-ring-color: var(--color-focus);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-success\:border-success {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        border-color: var(--border-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-success);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          border-color: var(--border-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-success\:bg-success {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        background-color: var(--background-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-success);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          background-color: var(--background-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-success\:text-success {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
        color: var(--text-color-success);
      }
      @container style(--cmp-variant-tone: success) {
        &:not([data-component-root='true']) {
          color: var(--text-color-success);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='success']) {
          color: var(--text-color-success);
        }
        @container style(--cmp-variant-tone: success) {
          &:not([data-component-root='true']) {
            color: var(--text-color-success);
          }
        }
      }
    }
  }
  .cmp-variant-tone-warning\:border-warning {
    &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
      border-color: var(--border-color-warning);
    }
    @container style(--cmp-variant-tone: warning) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-warning);
      }
    }
  }
  .cmp-variant-tone-warning\:bg-warning {
    &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
      background-color: var(--background-color-warning);
    }
    @container style(--cmp-variant-tone: warning) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-warning);
      }
    }
  }
  .cmp-variant-tone-warning\:bg-warning-solid {
    &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
      background-color: var(--background-color-warning-solid);
    }
    @container style(--cmp-variant-tone: warning) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-warning-solid);
      }
    }
  }
  .cmp-variant-tone-warning\:text-warning {
    &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
      color: var(--text-color-warning);
    }
    @container style(--cmp-variant-tone: warning) {
      &:not([data-component-root='true']) {
        color: var(--text-color-warning);
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-warning\:border-l-thick {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-left-style: var(--tw-border-style, solid);
        border-left-width: var(--border-thick);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-left-style: var(--tw-border-style, solid);
          border-left-width: var(--border-thick);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-left-style: var(--tw-border-style, solid);
            border-left-width: var(--border-thick);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-warning\:border-warning {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-color: var(--border-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-warning);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-color: var(--border-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-warning\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        background-color: var(--background-color-secondary);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          background-color: var(--background-color-secondary);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-bar\:cmp-variant-tone-warning\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-appearance='bar']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        color: var(--text-color-primary);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          color: var(--text-color-primary);
        }
      }
    }
    @container style(--cmp-variant-appearance: bar) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          color: var(--text-color-primary);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            color: var(--text-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-warning\:border-warning {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-color: var(--border-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-warning);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-color: var(--border-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-warning\:bg-warning {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        background-color: var(--background-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-warning);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          background-color: var(--background-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-appearance-chip\:cmp-variant-tone-warning\:text-warning {
    &:where([data-component-root='true'][data-cmp-variant-appearance='chip']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        color: var(--text-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          color: var(--text-color-warning);
        }
      }
    }
    @container style(--cmp-variant-appearance: chip) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          color: var(--text-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            color: var(--text-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:border-warning {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-color: var(--border-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-warning);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-color: var(--border-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:bg-warning {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        background-color: var(--background-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-warning);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          background-color: var(--background-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:font-semibold {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:text-warning {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        color: var(--text-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          color: var(--text-color-warning);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          color: var(--text-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            color: var(--text-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        --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);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          --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);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          --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);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            --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);
          }
        }
      }
    }
  }
  .cmp-variant-state-current\:cmp-variant-tone-warning\:ring-focus {
    &:where([data-component-root='true'][data-cmp-variant-state='current']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        --tw-ring-color: var(--color-focus);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          --tw-ring-color: var(--color-focus);
        }
      }
    }
    @container style(--cmp-variant-state: current) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          --tw-ring-color: var(--color-focus);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            --tw-ring-color: var(--color-focus);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-warning\:border-warning {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        border-color: var(--border-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-warning);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          border-color: var(--border-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-warning\:bg-warning {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        background-color: var(--background-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-warning);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          background-color: var(--background-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-state-done\:cmp-variant-tone-warning\:text-warning {
    &:where([data-component-root='true'][data-cmp-variant-state='done']) {
      &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
        color: var(--text-color-warning);
      }
      @container style(--cmp-variant-tone: warning) {
        &:not([data-component-root='true']) {
          color: var(--text-color-warning);
        }
      }
    }
    @container style(--cmp-variant-state: done) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-tone='warning']) {
          color: var(--text-color-warning);
        }
        @container style(--cmp-variant-tone: warning) {
          &:not([data-component-root='true']) {
            color: var(--text-color-warning);
          }
        }
      }
    }
  }
  .cmp-variant-variant-bordered\:rounded-track {
    &:where([data-component-root='true'][data-cmp-variant-variant='bordered']) {
      border-radius: var(--radius-track);
    }
    @container style(--cmp-variant-variant: bordered) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-track);
      }
    }
  }
  .cmp-variant-variant-bordered\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='bordered']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: bordered) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-bordered\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='bordered']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: bordered) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-bordered\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='bordered']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: bordered) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-bordered\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='bordered']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-variant: bordered) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-variant-bordered\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='bordered']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-variant: bordered) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-variant-button\:inline-flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      display: inline-flex;
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        display: inline-flex;
      }
    }
  }
  .cmp-variant-variant-button\:w-fit {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      width: fit-content;
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        width: fit-content;
      }
    }
  }
  .cmp-variant-variant-button\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      align-items: center;
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-variant-button\:gap-space-2xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      gap: var(--space-2xs);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xs);
      }
    }
  }
  .cmp-variant-variant-button\:rounded-nested {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      border-radius: var(--radius-nested);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-nested);
      }
    }
  }
  .cmp-variant-variant-button\:rounded-track {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      border-radius: var(--radius-track);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-track);
      }
    }
  }
  .cmp-variant-variant-button\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-button\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-button\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-button\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-variant-button\:bg-surface-sunken {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      background-color: var(--background-color-surface-sunken);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-surface-sunken);
      }
    }
  }
  .cmp-variant-variant-button\:p-inset-nested {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      padding: var(--inset-nested);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        padding: var(--inset-nested);
      }
    }
  }
  .cmp-variant-variant-button\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-variant-button\:text-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      color: var(--text-color-tertiary);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        color: var(--text-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-button\:shadow-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      --tw-shadow: var(--elevation-shadow-xs);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        --tw-shadow: var(--elevation-shadow-xs);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .cmp-variant-variant-button\:hover\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='button']) {
      &:hover {
        @media (hover: hover) {
          color: var(--text-color-primary);
        }
      }
    }
    @container style(--cmp-variant-variant: button) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            color: var(--text-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-compact\:sr-only {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
      }
    }
  }
  .cmp-variant-variant-compact\:flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      display: flex;
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-variant-compact\:min-w-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      min-width: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        min-width: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-variant-compact\:shrink-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      flex-shrink: 0;
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        flex-shrink: 0;
      }
    }
  }
  .cmp-variant-variant-compact\:items-baseline {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      align-items: baseline;
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        align-items: baseline;
      }
    }
  }
  .cmp-variant-variant-compact\:gap-space-2xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      gap: var(--space-2xs);
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xs);
      }
    }
  }
  .cmp-variant-variant-compact\:truncate {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .cmp-variant-variant-compact\:px-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      padding-inline: var(--space-xs);
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-xs);
      }
    }
  }
  .cmp-variant-variant-compact\:font-medium {
    &:where([data-component-root='true'][data-cmp-variant-variant='compact']) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    @container style(--cmp-variant-variant: compact) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
      }
    }
  }
  .cmp-variant-variant-cover\:flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='cover']) {
      display: flex;
    }
    @container style(--cmp-variant-variant: cover) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-variant-cover\:min-h-96 {
    &:where([data-component-root='true'][data-cmp-variant-variant='cover']) {
      min-height: calc(var(--spacing) * 96);
    }
    @container style(--cmp-variant-variant: cover) {
      &:not([data-component-root='true']) {
        min-height: calc(var(--spacing) * 96);
      }
    }
  }
  .cmp-variant-variant-cover\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-variant='cover']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-variant: cover) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-variant-cover\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='cover']) {
      justify-content: center;
    }
    @container style(--cmp-variant-variant: cover) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-variant-cover\:md\:min-h-\[70svh\] {
    &:where([data-component-root='true'][data-cmp-variant-variant='cover']) {
      @media (width >= 48rem) {
        min-height: 70svh;
      }
    }
    @container style(--cmp-variant-variant: cover) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          min-height: 70svh;
        }
      }
    }
  }
  .cmp-variant-variant-default\:flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      display: flex;
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-variant-default\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      width: 100%;
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-variant-default\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-variant-default\:overflow-hidden {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      overflow: hidden;
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        overflow: hidden;
      }
    }
  }
  .cmp-variant-variant-default\:rounded-container {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      border-radius: var(--radius-container);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-container);
      }
    }
  }
  .cmp-variant-variant-default\:rounded-control {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      border-radius: var(--radius-control);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-control);
      }
    }
  }
  .cmp-variant-variant-default\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-default\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-default\:border-b {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
      }
    }
  }
  .cmp-variant-variant-default\:border-b {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-default\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-default\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      background-color: var(--background-color-brand-solid);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand-solid);
      }
    }
  }
  .cmp-variant-variant-default\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      background-color: var(--background-color-secondary);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-secondary);
      }
    }
  }
  .cmp-variant-variant-default\:bg-surface-1 {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      background-color: var(--background-color-surface-1);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-surface-1);
      }
    }
  }
  .cmp-variant-variant-default\:stroke-current {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      stroke: currentcolor;
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        stroke: currentcolor;
      }
    }
  }
  .cmp-variant-variant-default\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-variant-default\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      color: var(--text-color-on-brand-solid);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-brand-solid);
      }
    }
  }
  .cmp-variant-variant-default\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-variant-default\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-variant-default\:shadow-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      --tw-shadow: var(--elevation-shadow-xs);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        --tw-shadow: var(--elevation-shadow-xs);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .cmp-variant-variant-default\:peer-disabled\:bg-white {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      &:is(:where(.peer):disabled ~ *) {
        background-color: var(--color-white);
      }
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        &:is(:where(.peer):disabled ~ *) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .cmp-variant-variant-default\:peer-disabled\:shadow-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      &:is(:where(.peer):disabled ~ *) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        &:is(:where(.peer):disabled ~ *) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .cmp-variant-variant-default\:hover\:bg-brand-solid-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-brand-solid-hover);
        }
      }
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-brand-solid-hover);
          }
        }
      }
    }
  }
  .cmp-variant-variant-destructive\:bg-danger-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='destructive']) {
      background-color: var(--background-color-danger-solid);
    }
    @container style(--cmp-variant-variant: destructive) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-danger-solid);
      }
    }
  }
  .cmp-variant-variant-destructive\:stroke-current {
    &:where([data-component-root='true'][data-cmp-variant-variant='destructive']) {
      stroke: currentcolor;
    }
    @container style(--cmp-variant-variant: destructive) {
      &:not([data-component-root='true']) {
        stroke: currentcolor;
      }
    }
  }
  .cmp-variant-variant-destructive\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='destructive']) {
      color: var(--text-color-danger);
    }
    @container style(--cmp-variant-variant: destructive) {
      &:not([data-component-root='true']) {
        color: var(--text-color-danger);
      }
    }
  }
  .cmp-variant-variant-destructive\:text-on-danger-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='destructive']) {
      color: var(--text-color-on-danger-solid);
    }
    @container style(--cmp-variant-variant: destructive) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-danger-solid);
      }
    }
  }
  .cmp-variant-variant-destructive\:hover\:bg-danger-solid-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='destructive']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-danger-solid-hover);
        }
      }
    }
    @container style(--cmp-variant-variant: destructive) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-danger-solid-hover);
          }
        }
      }
    }
  }
  .cmp-variant-variant-elevated\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='elevated']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: elevated) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-elevated\:bg-surface-1 {
    &:where([data-component-root='true'][data-cmp-variant-variant='elevated']) {
      background-color: var(--background-color-surface-1);
    }
    @container style(--cmp-variant-variant: elevated) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-surface-1);
      }
    }
  }
  .cmp-variant-variant-elevated\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='elevated']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-variant: elevated) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-variant-elevated\:shadow-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='elevated']) {
      --tw-shadow: var(--elevation-shadow-xs);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    @container style(--cmp-variant-variant: elevated) {
      &:not([data-component-root='true']) {
        --tw-shadow: var(--elevation-shadow-xs);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .cmp-variant-variant-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='error']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: error) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-error\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='error']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: error) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-error\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='error']) {
      border-color: var(--border-color-danger);
    }
    @container style(--cmp-variant-variant: error) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-danger);
      }
    }
  }
  .cmp-variant-variant-error\:bg-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='error']) {
      background-color: var(--background-color-danger);
    }
    @container style(--cmp-variant-variant: error) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-danger);
      }
    }
  }
  .cmp-variant-variant-error\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='error']) {
      color: var(--text-color-danger);
    }
    @container style(--cmp-variant-variant: error) {
      &:not([data-component-root='true']) {
        color: var(--text-color-danger);
      }
    }
  }
  .cmp-variant-variant-form\:flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='form']) {
      display: flex;
    }
    @container style(--cmp-variant-variant: form) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-variant-form\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-variant='form']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-variant: form) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-variant-form\:gap-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-variant='form']) {
      gap: var(--space-xl);
    }
    @container style(--cmp-variant-variant: form) {
      &:not([data-component-root='true']) {
        gap: var(--space-xl);
      }
    }
  }
  .cmp-variant-variant-full\:flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      display: flex;
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-variant-full\:min-w-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      min-width: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        min-width: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-variant-full\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-variant-full\:gap-space-2xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      gap: var(--space-2xs);
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        gap: var(--space-2xs);
      }
    }
  }
  .cmp-variant-variant-full\:px-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      padding-inline: var(--space-sm);
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        padding-inline: var(--space-sm);
      }
    }
  }
  .cmp-variant-variant-full\:py-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      padding-block: var(--space-xs);
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        padding-block: var(--space-xs);
      }
    }
  }
  .cmp-variant-variant-full\:font-medium {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
      }
    }
  }
  .cmp-variant-variant-full\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='full']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-variant: full) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-variant-grid\:grid {
    &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
      display: grid;
    }
    @container style(--cmp-variant-variant: grid) {
      &:not([data-component-root='true']) {
        display: grid;
      }
    }
  }
  .cmp-variant-variant-grid\:grid-cols-1 {
    &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    @container style(--cmp-variant-variant: grid) {
      &:not([data-component-root='true']) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
    }
  }
  .cmp-variant-variant-grid\:gap-x-space-2xl {
    &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
      column-gap: var(--space-2xl);
    }
    @container style(--cmp-variant-variant: grid) {
      &:not([data-component-root='true']) {
        column-gap: var(--space-2xl);
      }
    }
  }
  .cmp-variant-variant-grid\:gap-y-space-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
      row-gap: var(--space-md);
    }
    @container style(--cmp-variant-variant: grid) {
      &:not([data-component-root='true']) {
        row-gap: var(--space-md);
      }
    }
  }
  .cmp-variant-variant-grid\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
      @media (width >= 40rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @container style(--cmp-variant-variant: grid) {
      &:not([data-component-root='true']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-variant-grid\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-variant: grid) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-variant: grid) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-variant-grid\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-variant: grid) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-variant: grid) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-variant-grid\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-variant: grid) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-variant: grid) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-variant-grid\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-variant: grid) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-variant: grid) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-variant-grid\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-variant: grid) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-variant: grid) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-variant-grid\:sm\:grid-cols-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
        @media (width >= 40rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @container style(--cmp-variant-variant: grid) {
        &:not([data-component-root='true']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='grid']) {
          @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @container style(--cmp-variant-variant: grid) {
          &:not([data-component-root='true']) {
            @media (width >= 40rem) {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='info']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: info) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-info\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='info']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: info) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-info\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='info']) {
      border-color: var(--border-color-brand);
    }
    @container style(--cmp-variant-variant: info) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-brand);
      }
    }
  }
  .cmp-variant-variant-info\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='info']) {
      background-color: var(--background-color-brand);
    }
    @container style(--cmp-variant-variant: info) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand);
      }
    }
  }
  .cmp-variant-variant-info\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='info']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-variant: info) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-variant-inverse\:inline-flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      display: inline-flex;
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        display: inline-flex;
      }
    }
  }
  .cmp-variant-variant-inverse\:cursor-pointer {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      cursor: pointer;
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        cursor: pointer;
      }
    }
  }
  .cmp-variant-variant-inverse\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      align-items: center;
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-variant-inverse\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      justify-content: center;
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-variant-inverse\:gap-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      column-gap: var(--control-md-gap);
      row-gap: var(--control-md-gap);
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        column-gap: var(--control-md-gap);
        row-gap: var(--control-md-gap);
      }
    }
  }
  .cmp-variant-variant-inverse\:rounded-control {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      border-radius: var(--radius-control);
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-control);
      }
    }
  }
  .cmp-variant-variant-inverse\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-variant-inverse\:whitespace-nowrap {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      white-space: nowrap;
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        white-space: nowrap;
      }
    }
  }
  .cmp-variant-variant-inverse\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-variant-inverse\:outline-hidden {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        --tw-outline-style: none;
        outline-style: none;
        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:hover\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-brand);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:focus-visible\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:focus-visible\:ring-focus\/50 {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:focus-visible {
        --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:disabled {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:disabled {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:disabled {
        background-color: var(--background-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:disabled {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:disabled {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:aria-disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &[aria-disabled="true"] {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:aria-disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &[aria-disabled="true"] {
        background-color: var(--background-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          background-color: var(--background-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:aria-disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &[aria-disabled="true"] {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-default\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        background-color: var(--background-color-primary);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          background-color: var(--background-color-primary);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-default\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        color: var(--text-color-brand);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          color: var(--text-color-brand);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-default\:hover\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-brand);
          }
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-brand);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-brand);
            }
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-brand);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-default\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:disabled {
              background-color: var(--background-color-disabled);
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-destructive\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        background-color: var(--background-color-primary);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          background-color: var(--background-color-primary);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-destructive\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        color: var(--text-color-danger);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          color: var(--text-color-danger);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          color: var(--text-color-danger);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            color: var(--text-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-destructive\:hover\:bg-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-danger);
          }
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-danger);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-danger);
            }
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-danger);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-intent-destructive\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:disabled {
              background-color: var(--background-color-disabled);
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-default\:h-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-default\:py-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-top: var(--control-md-padding-block);
        padding-bottom: var(--control-md-padding-block);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-md-padding-block);
            padding-bottom: var(--control-md-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-default\:px-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-left: var(--control-md-padding-inline);
        padding-right: var(--control-md-padding-inline);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-md-padding-inline);
            padding-right: var(--control-md-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-default\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-icon\:size-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        width: var(--control-md-size);
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            width: var(--control-md-size);
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-icon\:p-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        padding: calc(var(--spacing) * 0);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          padding: calc(var(--spacing) * 0);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            padding: calc(var(--spacing) * 0);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-icon\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            letter-spacing: var(--text-base--letter-spacing);
            font-weight: var(--weight-base);
            font-style: var(--style-base);
            font-variation-settings: var(--font-variation-base);
            font-family: var(--font-base);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-lg\:h-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        height: var(--control-lg-size);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          height: var(--control-lg-size);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          height: var(--control-lg-size);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            height: var(--control-lg-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-lg\:py-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-top: var(--control-lg-padding-block);
        padding-bottom: var(--control-lg-padding-block);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-lg-padding-block);
            padding-bottom: var(--control-lg-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-lg\:px-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-left: var(--control-lg-padding-inline);
        padding-right: var(--control-lg-padding-inline);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-lg-padding-inline);
            padding-right: var(--control-lg-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-lg\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-sm\:h-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        height: var(--control-sm-size);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          height: var(--control-sm-size);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          height: var(--control-sm-size);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            height: var(--control-sm-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-sm\:py-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-top: var(--control-sm-padding-block);
        padding-bottom: var(--control-sm-padding-block);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-sm-padding-block);
            padding-bottom: var(--control-sm-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-sm\:px-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-left: var(--control-sm-padding-inline);
        padding-right: var(--control-sm-padding-inline);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-sm-padding-inline);
            padding-right: var(--control-sm-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-inverse\:cmp-variant-size-sm\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='inverse']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
      }
    }
    @container style(--cmp-variant-variant: inverse) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            letter-spacing: var(--text-xs--letter-spacing);
            font-weight: var(--weight-xs);
            font-style: var(--style-xs);
            font-variation-settings: var(--font-variation-xs);
            font-family: var(--font-xs);
          }
        }
      }
    }
  }
  .cmp-variant-variant-lane\:min-h-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      min-height: calc(var(--spacing) * 0);
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        min-height: calc(var(--spacing) * 0);
      }
    }
  }
  .cmp-variant-variant-lane\:min-w-72 {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      min-width: calc(var(--spacing) * 72);
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        min-width: calc(var(--spacing) * 72);
      }
    }
  }
  .cmp-variant-variant-lane\:shrink-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      flex-shrink: 0;
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        flex-shrink: 0;
      }
    }
  }
  .cmp-variant-variant-lane\:gap-space-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      gap: var(--space-md);
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        gap: var(--space-md);
      }
    }
  }
  .cmp-variant-variant-lane\:overflow-y-auto {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      overflow-y: auto;
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        overflow-y: auto;
      }
    }
  }
  .cmp-variant-variant-lane\:rounded-container {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      border-radius: var(--radius-container);
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-container);
      }
    }
  }
  .cmp-variant-variant-lane\:bg-surface-sunken {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      background-color: var(--background-color-surface-sunken);
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-surface-sunken);
      }
    }
  }
  .cmp-variant-variant-lane\:p-space-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='lane']) {
      padding: var(--space-md);
    }
    @container style(--cmp-variant-variant: lane) {
      &:not([data-component-root='true']) {
        padding: var(--space-md);
      }
    }
  }
  .cmp-variant-variant-link\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      color: var(--text-color-brand);
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        color: var(--text-color-brand);
      }
    }
  }
  .cmp-variant-variant-link\:underline-offset-4 {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      text-underline-offset: 4px;
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        text-underline-offset: 4px;
      }
    }
  }
  .cmp-variant-variant-link\:hover\:text-brand-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:hover {
        @media (hover: hover) {
          color: var(--text-color-brand-hover);
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            color: var(--text-color-brand-hover);
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:hover\:underline {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:hover {
        @media (hover: hover) {
          text-decoration-line: underline;
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            text-decoration-line: underline;
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:aria-disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &[aria-disabled="true"] {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-link\:aria-disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &[aria-disabled="true"] {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-default\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        color: var(--text-color-brand);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          color: var(--text-color-brand);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-default\:underline-offset-4 {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        text-underline-offset: 4px;
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          text-underline-offset: 4px;
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          text-underline-offset: 4px;
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            text-underline-offset: 4px;
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-default\:hover\:text-brand-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:hover {
          @media (hover: hover) {
            color: var(--text-color-brand-hover);
          }
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              color: var(--text-color-brand-hover);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:hover {
            @media (hover: hover) {
              color: var(--text-color-brand-hover);
            }
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                color: var(--text-color-brand-hover);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-default\:hover\:underline {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:hover {
          @media (hover: hover) {
            text-decoration-line: underline;
          }
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              text-decoration-line: underline;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:hover {
            @media (hover: hover) {
              text-decoration-line: underline;
            }
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                text-decoration-line: underline;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-destructive\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        color: var(--text-color-danger);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          color: var(--text-color-danger);
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          color: var(--text-color-danger);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            color: var(--text-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-destructive\:underline-offset-4 {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        text-underline-offset: 4px;
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          text-underline-offset: 4px;
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          text-underline-offset: 4px;
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            text-underline-offset: 4px;
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-destructive\:hover\:text-danger-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:hover {
          @media (hover: hover) {
            color: var(--text-color-danger-hover);
          }
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              color: var(--text-color-danger-hover);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:hover {
            @media (hover: hover) {
              color: var(--text-color-danger-hover);
            }
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                color: var(--text-color-danger-hover);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-intent-destructive\:hover\:underline {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:hover {
          @media (hover: hover) {
            text-decoration-line: underline;
          }
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              text-decoration-line: underline;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:hover {
            @media (hover: hover) {
              text-decoration-line: underline;
            }
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                text-decoration-line: underline;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-size-default\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-size-icon\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            letter-spacing: var(--text-base--letter-spacing);
            font-weight: var(--weight-base);
            font-style: var(--style-base);
            font-variation-settings: var(--font-variation-base);
            font-family: var(--font-base);
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-size-lg\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            letter-spacing: var(--text-base--letter-spacing);
            font-weight: var(--weight-base);
            font-style: var(--style-base);
            font-variation-settings: var(--font-variation-base);
            font-family: var(--font-base);
          }
        }
      }
    }
  }
  .cmp-variant-variant-link\:cmp-variant-size-sm\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='link']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
      }
    }
    @container style(--cmp-variant-variant: link) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            letter-spacing: var(--text-xs--letter-spacing);
            font-weight: var(--weight-xs);
            font-style: var(--style-xs);
            font-variation-settings: var(--font-variation-xs);
            font-family: var(--font-xs);
          }
        }
      }
    }
  }
  .cmp-variant-variant-list\:flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='list']) {
      display: flex;
    }
    @container style(--cmp-variant-variant: list) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-variant-list\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-variant='list']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-variant: list) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-variant-list\:gap-space-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='list']) {
      gap: var(--space-md);
    }
    @container style(--cmp-variant-variant: list) {
      &:not([data-component-root='true']) {
        gap: var(--space-md);
      }
    }
  }
  .cmp-variant-variant-outline\:rounded-container {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      border-radius: var(--radius-container);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-container);
      }
    }
  }
  .cmp-variant-variant-outline\:rounded-control {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      border-radius: var(--radius-control);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-control);
      }
    }
  }
  .cmp-variant-variant-outline\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-outline\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-outline\:border-dashed {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      --tw-border-style: dashed;
      border-style: dashed;
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        --tw-border-style: dashed;
        border-style: dashed;
      }
    }
  }
  .cmp-variant-variant-outline\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-outline\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-variant-outline\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      background-color: transparent;
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        background-color: transparent;
      }
    }
  }
  .cmp-variant-variant-outline\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-variant-outline\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-variant-outline\:shadow-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      --tw-shadow: var(--elevation-shadow-xs);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        --tw-shadow: var(--elevation-shadow-xs);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .cmp-variant-variant-outline\:hover\:bg-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-brand);
        }
      }
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-variant-outline\:hover\:text-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      &:hover {
        @media (hover: hover) {
          color: var(--text-color-brand);
        }
      }
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            color: var(--text-color-brand);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:inline-flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      display: inline-flex;
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        display: inline-flex;
      }
    }
  }
  .cmp-variant-variant-primary\:cursor-pointer {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      cursor: pointer;
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        cursor: pointer;
      }
    }
  }
  .cmp-variant-variant-primary\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      align-items: center;
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-variant-primary\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      justify-content: center;
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-variant-primary\:gap-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      column-gap: var(--control-md-gap);
      row-gap: var(--control-md-gap);
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        column-gap: var(--control-md-gap);
        row-gap: var(--control-md-gap);
      }
    }
  }
  .cmp-variant-variant-primary\:rounded-control {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      border-radius: var(--radius-control);
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-control);
      }
    }
  }
  .cmp-variant-variant-primary\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      background-color: var(--background-color-brand-solid);
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-brand-solid);
      }
    }
  }
  .cmp-variant-variant-primary\:whitespace-nowrap {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      white-space: nowrap;
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        white-space: nowrap;
      }
    }
  }
  .cmp-variant-variant-primary\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      color: var(--text-color-on-brand-solid);
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        color: var(--text-color-on-brand-solid);
      }
    }
  }
  .cmp-variant-variant-primary\:outline-hidden {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        --tw-outline-style: none;
        outline-style: none;
        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
      }
    }
  }
  .cmp-variant-variant-primary\:hover\:bg-brand-solid-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-brand-solid-hover);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-brand-solid-hover);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:focus-visible\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .cmp-variant-variant-primary\:focus-visible\:ring-focus\/50 {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:focus-visible {
        --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:disabled {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:disabled {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-primary\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:disabled {
        background-color: var(--background-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-primary\:disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:disabled {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:disabled {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-primary\:aria-disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &[aria-disabled="true"] {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-primary\:aria-disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &[aria-disabled="true"] {
        background-color: var(--background-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          background-color: var(--background-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-primary\:aria-disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &[aria-disabled="true"] {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-default\:bg-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        background-color: var(--background-color-brand-solid);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          background-color: var(--background-color-brand-solid);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-default\:text-on-brand-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        color: var(--text-color-on-brand-solid);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          color: var(--text-color-on-brand-solid);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          color: var(--text-color-on-brand-solid);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            color: var(--text-color-on-brand-solid);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-default\:hover\:bg-brand-solid-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-brand-solid-hover);
          }
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-brand-solid-hover);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-brand-solid-hover);
            }
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-brand-solid-hover);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-default\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:disabled {
              background-color: var(--background-color-disabled);
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-destructive\:bg-danger-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        background-color: var(--background-color-danger-solid);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          background-color: var(--background-color-danger-solid);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          background-color: var(--background-color-danger-solid);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            background-color: var(--background-color-danger-solid);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-destructive\:text-on-danger-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        color: var(--text-color-on-danger-solid);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          color: var(--text-color-on-danger-solid);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          color: var(--text-color-on-danger-solid);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            color: var(--text-color-on-danger-solid);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-destructive\:hover\:bg-danger-solid-hover {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-danger-solid-hover);
          }
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-danger-solid-hover);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-danger-solid-hover);
            }
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-danger-solid-hover);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-intent-destructive\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:disabled {
              background-color: var(--background-color-disabled);
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-default\:h-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-default\:py-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-top: var(--control-md-padding-block);
        padding-bottom: var(--control-md-padding-block);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-md-padding-block);
            padding-bottom: var(--control-md-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-default\:px-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-left: var(--control-md-padding-inline);
        padding-right: var(--control-md-padding-inline);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-md-padding-inline);
            padding-right: var(--control-md-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-default\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-icon\:size-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        width: var(--control-md-size);
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            width: var(--control-md-size);
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-icon\:p-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        padding: calc(var(--spacing) * 0);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          padding: calc(var(--spacing) * 0);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            padding: calc(var(--spacing) * 0);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-icon\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            letter-spacing: var(--text-base--letter-spacing);
            font-weight: var(--weight-base);
            font-style: var(--style-base);
            font-variation-settings: var(--font-variation-base);
            font-family: var(--font-base);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-lg\:h-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        height: var(--control-lg-size);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          height: var(--control-lg-size);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          height: var(--control-lg-size);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            height: var(--control-lg-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-lg\:py-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-top: var(--control-lg-padding-block);
        padding-bottom: var(--control-lg-padding-block);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-lg-padding-block);
            padding-bottom: var(--control-lg-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-lg\:px-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-left: var(--control-lg-padding-inline);
        padding-right: var(--control-lg-padding-inline);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-lg-padding-inline);
            padding-right: var(--control-lg-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-lg\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-sm\:h-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        height: var(--control-sm-size);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          height: var(--control-sm-size);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          height: var(--control-sm-size);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            height: var(--control-sm-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-sm\:py-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-top: var(--control-sm-padding-block);
        padding-bottom: var(--control-sm-padding-block);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-sm-padding-block);
            padding-bottom: var(--control-sm-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-sm\:px-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-left: var(--control-sm-padding-inline);
        padding-right: var(--control-sm-padding-inline);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-sm-padding-inline);
            padding-right: var(--control-sm-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-primary\:cmp-variant-size-sm\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='primary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
      }
    }
    @container style(--cmp-variant-variant: primary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            letter-spacing: var(--text-xs--letter-spacing);
            font-weight: var(--weight-xs);
            font-style: var(--style-xs);
            font-variation-settings: var(--font-variation-xs);
            font-family: var(--font-xs);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:inline-flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      display: inline-flex;
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        display: inline-flex;
      }
    }
  }
  .cmp-variant-variant-secondary\:cursor-pointer {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      cursor: pointer;
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        cursor: pointer;
      }
    }
  }
  .cmp-variant-variant-secondary\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      align-items: center;
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-variant-secondary\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      justify-content: center;
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-variant-secondary\:gap-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      column-gap: var(--control-md-gap);
      row-gap: var(--control-md-gap);
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        column-gap: var(--control-md-gap);
        row-gap: var(--control-md-gap);
      }
    }
  }
  .cmp-variant-variant-secondary\:rounded-control {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      border-radius: var(--radius-control);
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-control);
      }
    }
  }
  .cmp-variant-variant-secondary\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-secondary\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-secondary\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-secondary\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      background-color: var(--background-color-tertiary);
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-secondary\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      background-color: transparent;
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        background-color: transparent;
      }
    }
  }
  .cmp-variant-variant-secondary\:whitespace-nowrap {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      white-space: nowrap;
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        white-space: nowrap;
      }
    }
  }
  .cmp-variant-variant-secondary\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-variant-secondary\:outline-hidden {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        --tw-outline-style: none;
        outline-style: none;
        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:hover\:bg-quaternary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-quaternary);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-quaternary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:hover\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-tertiary);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-tertiary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:focus-visible\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:focus-visible\:ring-focus\/50 {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:focus-visible {
        --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:disabled {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:disabled {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:disabled {
        background-color: var(--background-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:disabled {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:disabled {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:aria-disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &[aria-disabled="true"] {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:aria-disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &[aria-disabled="true"] {
        background-color: var(--background-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          background-color: var(--background-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:aria-disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &[aria-disabled="true"] {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-default\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          border-style: var(--tw-border-style);
          border-width: 1px;
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            border-style: var(--tw-border-style);
            border-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-default\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          border-left-width: var(--border-thin);
          border-right-width: var(--border-thin);
          border-top-width: var(--border-thin);
          border-bottom-width: var(--border-thin);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            border-left-width: var(--border-thin);
            border-right-width: var(--border-thin);
            border-top-width: var(--border-thin);
            border-bottom-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-default\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        border-color: var(--border-color-tertiary);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-tertiary);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          border-color: var(--border-color-tertiary);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-tertiary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-default\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        background-color: transparent;
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          background-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          background-color: transparent;
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            background-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-default\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        color: var(--text-color-secondary);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          color: var(--text-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          color: var(--text-color-secondary);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-default\:hover\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-tertiary);
          }
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-tertiary);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-default\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:disabled {
              background-color: var(--background-color-disabled);
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-destructive\:border-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        border-color: var(--border-color-danger);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          border-color: var(--border-color-danger);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          border-color: var(--border-color-danger);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            border-color: var(--border-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-destructive\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        background-color: transparent;
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          background-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          background-color: transparent;
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            background-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-destructive\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        color: var(--text-color-danger);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          color: var(--text-color-danger);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          color: var(--text-color-danger);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            color: var(--text-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-destructive\:hover\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-tertiary);
          }
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-tertiary);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-intent-destructive\:disabled\:bg-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:disabled {
          background-color: var(--background-color-disabled);
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:disabled {
            background-color: var(--background-color-disabled);
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:disabled {
              background-color: var(--background-color-disabled);
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-default\:h-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-default\:py-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-top: var(--control-md-padding-block);
        padding-bottom: var(--control-md-padding-block);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-md-padding-block);
            padding-bottom: var(--control-md-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-default\:px-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-left: var(--control-md-padding-inline);
        padding-right: var(--control-md-padding-inline);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-md-padding-inline);
            padding-right: var(--control-md-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-default\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-icon\:size-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        width: var(--control-md-size);
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            width: var(--control-md-size);
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-icon\:p-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        padding: calc(var(--spacing) * 0);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          padding: calc(var(--spacing) * 0);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            padding: calc(var(--spacing) * 0);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-icon\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            letter-spacing: var(--text-base--letter-spacing);
            font-weight: var(--weight-base);
            font-style: var(--style-base);
            font-variation-settings: var(--font-variation-base);
            font-family: var(--font-base);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-lg\:h-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        height: var(--control-lg-size);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          height: var(--control-lg-size);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          height: var(--control-lg-size);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            height: var(--control-lg-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-lg\:py-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-top: var(--control-lg-padding-block);
        padding-bottom: var(--control-lg-padding-block);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-lg-padding-block);
            padding-bottom: var(--control-lg-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-lg\:px-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-left: var(--control-lg-padding-inline);
        padding-right: var(--control-lg-padding-inline);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-lg-padding-inline);
            padding-right: var(--control-lg-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-lg\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-sm\:h-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        height: var(--control-sm-size);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          height: var(--control-sm-size);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          height: var(--control-sm-size);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            height: var(--control-sm-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-sm\:py-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-top: var(--control-sm-padding-block);
        padding-bottom: var(--control-sm-padding-block);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-sm-padding-block);
            padding-bottom: var(--control-sm-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-sm\:px-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-left: var(--control-sm-padding-inline);
        padding-right: var(--control-sm-padding-inline);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-sm-padding-inline);
            padding-right: var(--control-sm-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-secondary\:cmp-variant-size-sm\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='secondary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
      }
    }
    @container style(--cmp-variant-variant: secondary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            letter-spacing: var(--text-xs--letter-spacing);
            font-weight: var(--weight-xs);
            font-style: var(--style-xs);
            font-variation-settings: var(--font-variation-xs);
            font-family: var(--font-xs);
          }
        }
      }
    }
  }
  .cmp-variant-variant-separated\:flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      display: flex;
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        display: flex;
      }
    }
  }
  .cmp-variant-variant-separated\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      width: 100%;
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-variant-separated\:flex-col {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      flex-direction: column;
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        flex-direction: column;
      }
    }
  }
  .cmp-variant-variant-separated\:gap-space-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      gap: var(--space-sm);
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        gap: var(--space-sm);
      }
    }
  }
  .cmp-variant-variant-separated\:overflow-hidden {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      overflow: hidden;
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        overflow: hidden;
      }
    }
  }
  .cmp-variant-variant-separated\:rounded-container {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      border-radius: var(--radius-container);
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-container);
      }
    }
  }
  .cmp-variant-variant-separated\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-separated\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-separated\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-separated\:bg-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      background-color: var(--background-color-secondary);
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-secondary);
      }
    }
  }
  .cmp-variant-variant-separated\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='separated']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-variant: separated) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-variant-slim\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-slim\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-slim\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      border-color: var(--border-color-tertiary);
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-slim\:shadow-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      --tw-shadow: var(--elevation-shadow-xs);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        --tw-shadow: var(--elevation-shadow-xs);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .cmp-variant-variant-slim\:peer-checked\:border-brand {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      &:is(:where(.peer):checked ~ *) {
        border-color: var(--border-color-brand);
      }
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        &:is(:where(.peer):checked ~ *) {
          border-color: var(--border-color-brand);
        }
      }
    }
  }
  .cmp-variant-variant-slim\:peer-disabled\:border-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      &:is(:where(.peer):disabled ~ *) {
        border-color: var(--border-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        &:is(:where(.peer):disabled ~ *) {
          border-color: var(--border-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-slim\:peer-disabled\:bg-white {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      &:is(:where(.peer):disabled ~ *) {
        background-color: var(--color-white);
      }
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        &:is(:where(.peer):disabled ~ *) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .cmp-variant-variant-slim\:peer-disabled\:shadow-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='slim']) {
      &:is(:where(.peer):disabled ~ *) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    @container style(--cmp-variant-variant: slim) {
      &:not([data-component-root='true']) {
        &:is(:where(.peer):disabled ~ *) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .cmp-variant-variant-stack\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-variant='stack']) {
      width: 100%;
    }
    @container style(--cmp-variant-variant: stack) {
      &:not([data-component-root='true']) {
        width: 100%;
      }
    }
  }
  .cmp-variant-variant-stack\:gap-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='stack']) {
      gap: var(--space-lg);
    }
    @container style(--cmp-variant-variant: stack) {
      &:not([data-component-root='true']) {
        gap: var(--space-lg);
      }
    }
  }
  .cmp-variant-variant-stack\:gap-space-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='stack']) {
      gap: var(--space-xs);
    }
    @container style(--cmp-variant-variant: stack) {
      &:not([data-component-root='true']) {
        gap: var(--space-xs);
      }
    }
  }
  .cmp-variant-variant-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='success']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: success) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-success\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='success']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: success) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-success\:border-success {
    &:where([data-component-root='true'][data-cmp-variant-variant='success']) {
      border-color: var(--border-color-success);
    }
    @container style(--cmp-variant-variant: success) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-success);
      }
    }
  }
  .cmp-variant-variant-success\:bg-success {
    &:where([data-component-root='true'][data-cmp-variant-variant='success']) {
      background-color: var(--background-color-success);
    }
    @container style(--cmp-variant-variant: success) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-success);
      }
    }
  }
  .cmp-variant-variant-success\:bg-success-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='success']) {
      background-color: var(--background-color-success-solid);
    }
    @container style(--cmp-variant-variant: success) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-success-solid);
      }
    }
  }
  .cmp-variant-variant-success\:stroke-current {
    &:where([data-component-root='true'][data-cmp-variant-variant='success']) {
      stroke: currentcolor;
    }
    @container style(--cmp-variant-variant: success) {
      &:not([data-component-root='true']) {
        stroke: currentcolor;
      }
    }
  }
  .cmp-variant-variant-success\:text-success {
    &:where([data-component-root='true'][data-cmp-variant-variant='success']) {
      color: var(--text-color-success);
    }
    @container style(--cmp-variant-variant: success) {
      &:not([data-component-root='true']) {
        color: var(--text-color-success);
      }
    }
  }
  .cmp-variant-variant-tertiary\:inline-flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      display: inline-flex;
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        display: inline-flex;
      }
    }
  }
  .cmp-variant-variant-tertiary\:cursor-pointer {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      cursor: pointer;
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        cursor: pointer;
      }
    }
  }
  .cmp-variant-variant-tertiary\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      align-items: center;
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-variant-tertiary\:justify-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      justify-content: center;
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        justify-content: center;
      }
    }
  }
  .cmp-variant-variant-tertiary\:gap-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      column-gap: var(--control-md-gap);
      row-gap: var(--control-md-gap);
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        column-gap: var(--control-md-gap);
        row-gap: var(--control-md-gap);
      }
    }
  }
  .cmp-variant-variant-tertiary\:rounded-control {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      border-radius: var(--radius-control);
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        border-radius: var(--radius-control);
      }
    }
  }
  .cmp-variant-variant-tertiary\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      background-color: transparent;
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        background-color: transparent;
      }
    }
  }
  .cmp-variant-variant-tertiary\:whitespace-nowrap {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      white-space: nowrap;
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        white-space: nowrap;
      }
    }
  }
  .cmp-variant-variant-tertiary\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      color: var(--text-color-secondary);
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        color: var(--text-color-secondary);
      }
    }
  }
  .cmp-variant-variant-tertiary\:outline-hidden {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        --tw-outline-style: none;
        outline-style: none;
        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:hover\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-tertiary);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-tertiary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:focus-visible\:ring-2 {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:focus-visible\:ring-focus\/50 {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:focus-visible {
        --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:focus-visible {
          --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-focus) 50%, transparent);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:disabled {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:disabled {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:disabled {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:disabled {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:aria-disabled\:pointer-events-none {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &[aria-disabled="true"] {
        pointer-events: none;
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          pointer-events: none;
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:aria-disabled\:text-disabled {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &[aria-disabled="true"] {
        color: var(--text-color-disabled);
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &[aria-disabled="true"] {
          color: var(--text-color-disabled);
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-intent-default\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        background-color: transparent;
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          background-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          background-color: transparent;
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            background-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-intent-default\:text-secondary {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        color: var(--text-color-secondary);
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          color: var(--text-color-secondary);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          color: var(--text-color-secondary);
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-intent-default\:hover\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-tertiary);
          }
        }
      }
      @container style(--cmp-variant-intent: default) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='default']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
        @container style(--cmp-variant-intent: default) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-tertiary);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-intent-destructive\:bg-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        background-color: transparent;
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          background-color: transparent;
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          background-color: transparent;
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            background-color: transparent;
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-intent-destructive\:text-danger {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        color: var(--text-color-danger);
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          color: var(--text-color-danger);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          color: var(--text-color-danger);
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            color: var(--text-color-danger);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-intent-destructive\:hover\:bg-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--background-color-tertiary);
          }
        }
      }
      @container style(--cmp-variant-intent: destructive) {
        &:not([data-component-root='true']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-intent='destructive']) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--background-color-tertiary);
            }
          }
        }
        @container style(--cmp-variant-intent: destructive) {
          &:not([data-component-root='true']) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--background-color-tertiary);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-default\:h-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-default\:py-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-top: var(--control-md-padding-block);
        padding-bottom: var(--control-md-padding-block);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-top: var(--control-md-padding-block);
          padding-bottom: var(--control-md-padding-block);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-md-padding-block);
            padding-bottom: var(--control-md-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-default\:px-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        padding-left: var(--control-md-padding-inline);
        padding-right: var(--control-md-padding-inline);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          padding-left: var(--control-md-padding-inline);
          padding-right: var(--control-md-padding-inline);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-md-padding-inline);
            padding-right: var(--control-md-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-default\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-icon\:size-control-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        width: var(--control-md-size);
        height: var(--control-md-size);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          width: var(--control-md-size);
          height: var(--control-md-size);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            width: var(--control-md-size);
            height: var(--control-md-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-icon\:p-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        padding: calc(var(--spacing) * 0);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          padding: calc(var(--spacing) * 0);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            padding: calc(var(--spacing) * 0);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-icon\:typography-base {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
        letter-spacing: var(--text-base--letter-spacing);
        font-weight: var(--weight-base);
        font-style: var(--style-base);
        font-variation-settings: var(--font-variation-base);
        font-family: var(--font-base);
      }
      @container style(--cmp-variant-size: icon) {
        &:not([data-component-root='true']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='icon']) {
          font-size: var(--text-base);
          line-height: var(--text-base--line-height);
          letter-spacing: var(--text-base--letter-spacing);
          font-weight: var(--weight-base);
          font-style: var(--style-base);
          font-variation-settings: var(--font-variation-base);
          font-family: var(--font-base);
        }
        @container style(--cmp-variant-size: icon) {
          &:not([data-component-root='true']) {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            letter-spacing: var(--text-base--letter-spacing);
            font-weight: var(--weight-base);
            font-style: var(--style-base);
            font-variation-settings: var(--font-variation-base);
            font-family: var(--font-base);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-lg\:h-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        height: var(--control-lg-size);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          height: var(--control-lg-size);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          height: var(--control-lg-size);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            height: var(--control-lg-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-lg\:py-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-top: var(--control-lg-padding-block);
        padding-bottom: var(--control-lg-padding-block);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-top: var(--control-lg-padding-block);
          padding-bottom: var(--control-lg-padding-block);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-lg-padding-block);
            padding-bottom: var(--control-lg-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-lg\:px-control-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        padding-left: var(--control-lg-padding-inline);
        padding-right: var(--control-lg-padding-inline);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          padding-left: var(--control-lg-padding-inline);
          padding-right: var(--control-lg-padding-inline);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-lg-padding-inline);
            padding-right: var(--control-lg-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-lg\:typography-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        letter-spacing: var(--text-sm--letter-spacing);
        font-weight: var(--weight-sm);
        font-style: var(--style-sm);
        font-variation-settings: var(--font-variation-sm);
        font-family: var(--font-sm);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          font-size: var(--text-sm);
          line-height: var(--text-sm--line-height);
          letter-spacing: var(--text-sm--letter-spacing);
          font-weight: var(--weight-sm);
          font-style: var(--style-sm);
          font-variation-settings: var(--font-variation-sm);
          font-family: var(--font-sm);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            letter-spacing: var(--text-sm--letter-spacing);
            font-weight: var(--weight-sm);
            font-style: var(--style-sm);
            font-variation-settings: var(--font-variation-sm);
            font-family: var(--font-sm);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-sm\:h-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        height: var(--control-sm-size);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          height: var(--control-sm-size);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          height: var(--control-sm-size);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            height: var(--control-sm-size);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-sm\:py-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-top: var(--control-sm-padding-block);
        padding-bottom: var(--control-sm-padding-block);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-top: var(--control-sm-padding-block);
          padding-bottom: var(--control-sm-padding-block);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-top: var(--control-sm-padding-block);
            padding-bottom: var(--control-sm-padding-block);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-sm\:px-control-sm {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        padding-left: var(--control-sm-padding-inline);
        padding-right: var(--control-sm-padding-inline);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          padding-left: var(--control-sm-padding-inline);
          padding-right: var(--control-sm-padding-inline);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            padding-left: var(--control-sm-padding-inline);
            padding-right: var(--control-sm-padding-inline);
          }
        }
      }
    }
  }
  .cmp-variant-variant-tertiary\:cmp-variant-size-sm\:typography-xs {
    &:where([data-component-root='true'][data-cmp-variant-variant='tertiary']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        font-size: var(--text-xs);
        line-height: var(--text-xs--line-height);
        letter-spacing: var(--text-xs--letter-spacing);
        font-weight: var(--weight-xs);
        font-style: var(--style-xs);
        font-variation-settings: var(--font-variation-xs);
        font-family: var(--font-xs);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
      }
    }
    @container style(--cmp-variant-variant: tertiary) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          font-size: var(--text-xs);
          line-height: var(--text-xs--line-height);
          letter-spacing: var(--text-xs--letter-spacing);
          font-weight: var(--weight-xs);
          font-style: var(--style-xs);
          font-variation-settings: var(--font-variation-xs);
          font-family: var(--font-xs);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            letter-spacing: var(--text-xs--letter-spacing);
            font-weight: var(--weight-xs);
            font-style: var(--style-xs);
            font-variation-settings: var(--font-variation-xs);
            font-family: var(--font-xs);
          }
        }
      }
    }
  }
  .cmp-variant-variant-underline\:inline-flex {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      display: inline-flex;
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        display: inline-flex;
      }
    }
  }
  .cmp-variant-variant-underline\:w-fit {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      width: fit-content;
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        width: fit-content;
      }
    }
  }
  .cmp-variant-variant-underline\:items-center {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      align-items: center;
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        align-items: center;
      }
    }
  }
  .cmp-variant-variant-underline\:border-b-thick {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      border-bottom-style: var(--tw-border-style, solid);
      border-bottom-width: var(--border-thick);
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        border-bottom-style: var(--tw-border-style, solid);
        border-bottom-width: var(--border-thick);
      }
    }
  }
  .cmp-variant-variant-underline\:border-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      border-color: var(--border-color-primary);
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-primary);
      }
    }
  }
  .cmp-variant-variant-underline\:border-transparent {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      border-color: transparent;
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        border-color: transparent;
      }
    }
  }
  .cmp-variant-variant-underline\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      color: var(--text-color-primary);
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        color: var(--text-color-primary);
      }
    }
  }
  .cmp-variant-variant-underline\:text-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      color: var(--text-color-tertiary);
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        color: var(--text-color-tertiary);
      }
    }
  }
  .cmp-variant-variant-underline\:hover\:text-primary {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      &:hover {
        @media (hover: hover) {
          color: var(--text-color-primary);
        }
      }
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        &:hover {
          @media (hover: hover) {
            color: var(--text-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-variant-underline\:cmp-variant-size-default\:gap-space-lg {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      &:where([data-component-root='true'][data-cmp-variant-size='default']) {
        gap: var(--space-lg);
      }
      @container style(--cmp-variant-size: default) {
        &:not([data-component-root='true']) {
          gap: var(--space-lg);
        }
      }
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='default']) {
          gap: var(--space-lg);
        }
        @container style(--cmp-variant-size: default) {
          &:not([data-component-root='true']) {
            gap: var(--space-lg);
          }
        }
      }
    }
  }
  .cmp-variant-variant-underline\:cmp-variant-size-lg\:gap-space-xl {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
        gap: var(--space-xl);
      }
      @container style(--cmp-variant-size: lg) {
        &:not([data-component-root='true']) {
          gap: var(--space-xl);
        }
      }
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
          gap: var(--space-xl);
        }
        @container style(--cmp-variant-size: lg) {
          &:not([data-component-root='true']) {
            gap: var(--space-xl);
          }
        }
      }
    }
  }
  .cmp-variant-variant-underline\:cmp-variant-size-sm\:gap-space-md {
    &:where([data-component-root='true'][data-cmp-variant-variant='underline']) {
      &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
        gap: var(--space-md);
      }
      @container style(--cmp-variant-size: sm) {
        &:not([data-component-root='true']) {
          gap: var(--space-md);
        }
      }
    }
    @container style(--cmp-variant-variant: underline) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
          gap: var(--space-md);
        }
        @container style(--cmp-variant-size: sm) {
          &:not([data-component-root='true']) {
            gap: var(--space-md);
          }
        }
      }
    }
  }
  .cmp-variant-variant-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='warning']) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
    @container style(--cmp-variant-variant: warning) {
      &:not([data-component-root='true']) {
        border-style: var(--tw-border-style);
        border-width: 1px;
      }
    }
  }
  .cmp-variant-variant-warning\:border {
    &:where([data-component-root='true'][data-cmp-variant-variant='warning']) {
      border-left-width: var(--border-thin);
      border-right-width: var(--border-thin);
      border-top-width: var(--border-thin);
      border-bottom-width: var(--border-thin);
    }
    @container style(--cmp-variant-variant: warning) {
      &:not([data-component-root='true']) {
        border-left-width: var(--border-thin);
        border-right-width: var(--border-thin);
        border-top-width: var(--border-thin);
        border-bottom-width: var(--border-thin);
      }
    }
  }
  .cmp-variant-variant-warning\:border-warning {
    &:where([data-component-root='true'][data-cmp-variant-variant='warning']) {
      border-color: var(--border-color-warning);
    }
    @container style(--cmp-variant-variant: warning) {
      &:not([data-component-root='true']) {
        border-color: var(--border-color-warning);
      }
    }
  }
  .cmp-variant-variant-warning\:bg-warning {
    &:where([data-component-root='true'][data-cmp-variant-variant='warning']) {
      background-color: var(--background-color-warning);
    }
    @container style(--cmp-variant-variant: warning) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-warning);
      }
    }
  }
  .cmp-variant-variant-warning\:bg-warning-solid {
    &:where([data-component-root='true'][data-cmp-variant-variant='warning']) {
      background-color: var(--background-color-warning-solid);
    }
    @container style(--cmp-variant-variant: warning) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-warning-solid);
      }
    }
  }
  .cmp-variant-variant-warning\:stroke-current {
    &:where([data-component-root='true'][data-cmp-variant-variant='warning']) {
      stroke: currentcolor;
    }
    @container style(--cmp-variant-variant: warning) {
      &:not([data-component-root='true']) {
        stroke: currentcolor;
      }
    }
  }
  .cmp-variant-variant-warning\:text-warning {
    &:where([data-component-root='true'][data-cmp-variant-variant='warning']) {
      color: var(--text-color-warning);
    }
    @container style(--cmp-variant-variant: warning) {
      &:not([data-component-root='true']) {
        color: var(--text-color-warning);
      }
    }
  }
  .cmp-variant-weekends-plain\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-weekends='plain']) {
      background-color: var(--background-color-primary);
    }
    @container style(--cmp-variant-weekends: plain) {
      &:not([data-component-root='true']) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .cmp-variant-weekends-shaded\:bg-tertiary\/50 {
    &:where([data-component-root='true'][data-cmp-variant-weekends='shaded']) {
      background-color: color-mix(in srgb, #141d3d 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
      }
    }
    @container style(--cmp-variant-weekends: shaded) {
      &:not([data-component-root='true']) {
        background-color: color-mix(in srgb, #141d3d 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
        }
      }
    }
  }
  .cmp-variant-width-3xl\:max-w-3xl {
    &:where([data-component-root='true'][data-cmp-variant-width='3xl']) {
      max-width: var(--container-3xl);
    }
    @container style(--cmp-variant-width: 3xl) {
      &:not([data-component-root='true']) {
        max-width: var(--container-3xl);
      }
    }
  }
  .cmp-variant-width-4xl\:max-w-4xl {
    &:where([data-component-root='true'][data-cmp-variant-width='4xl']) {
      max-width: var(--container-4xl);
    }
    @container style(--cmp-variant-width: 4xl) {
      &:not([data-component-root='true']) {
        max-width: var(--container-4xl);
      }
    }
  }
  .cmp-variant-width-5xl\:max-w-5xl {
    &:where([data-component-root='true'][data-cmp-variant-width='5xl']) {
      max-width: var(--container-5xl);
    }
    @container style(--cmp-variant-width: 5xl) {
      &:not([data-component-root='true']) {
        max-width: var(--container-5xl);
      }
    }
  }
  .cmp-variant-width-6xl\:max-w-6xl {
    &:where([data-component-root='true'][data-cmp-variant-width='6xl']) {
      max-width: var(--container-6xl);
    }
    @container style(--cmp-variant-width: 6xl) {
      &:not([data-component-root='true']) {
        max-width: var(--container-6xl);
      }
    }
  }
  .cmp-variant-width-7xl\:max-w-7xl {
    &:where([data-component-root='true'][data-cmp-variant-width='7xl']) {
      max-width: var(--container-7xl);
    }
    @container style(--cmp-variant-width: 7xl) {
      &:not([data-component-root='true']) {
        max-width: var(--container-7xl);
      }
    }
  }
  .cmp-state-disabled\:pointer-events-none {
    &:is( [data-component-root='true']:where(:disabled, [data-cmp-state-disabled='true']):not( [data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true']) * ):not([data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true'])) ), [data-component-root='true']:where(:disabled, [data-cmp-state-disabled='true']) &:not([data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true']) *):not( [data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true']) ) {
      pointer-events: none;
    }
  }
  .cmp-state-disabled\:text-disabled {
    &:is( [data-component-root='true']:where(:disabled, [data-cmp-state-disabled='true']):not( [data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true']) * ):not([data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true'])) ), [data-component-root='true']:where(:disabled, [data-cmp-state-disabled='true']) &:not([data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true']) *):not( [data-component-root='true']:not(:disabled):not([data-cmp-state-disabled='true']) ) {
      color: var(--text-color-disabled);
    }
  }
  .cmp-variant-tableStyle-striped\:\[\&_tbody_tr\]\:border-b-0 {
    &:where([data-component-root='true'][data-cmp-variant-tablestyle='striped']) {
      & tbody tr {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0px;
      }
    }
    @container style(--cmp-variant-tableStyle: striped) {
      &:not([data-component-root='true']) {
        & tbody tr {
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 0px;
        }
      }
    }
  }
  .\[\&_tbody_tr\:nth-child\(even\)\]\:bg-tertiary\/50 {
    & tbody tr:nth-child(even) {
      background-color: color-mix(in srgb, #141d3d 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
      }
    }
  }
  .cmp-variant-tableStyle-striped\:\[\&_tbody_tr\:nth-child\(even\)\]\:bg-tertiary\/50 {
    &:where([data-component-root='true'][data-cmp-variant-tablestyle='striped']) {
      & tbody tr:nth-child(even) {
        background-color: color-mix(in srgb, #141d3d 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
        }
      }
    }
    @container style(--cmp-variant-tableStyle: striped) {
      &:not([data-component-root='true']) {
        & tbody tr:nth-child(even) {
          background-color: color-mix(in srgb, #141d3d 50%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--background-color-tertiary) 50%, transparent);
          }
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_td\]\:border-r {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & td {
          border-right-style: var(--tw-border-style);
          border-right-width: 1px;
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_td\]\:border-r {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & td {
          border-right-width: var(--border-thin);
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_td\]\:border-tertiary {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & td {
          border-color: var(--border-color-tertiary);
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_td\:last-child\]\:border-r-0 {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & td:last-child {
          border-right-style: var(--tw-border-style);
          border-right-width: 0px;
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_th\]\:border-r {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & th {
          border-right-style: var(--tw-border-style);
          border-right-width: 1px;
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_th\]\:border-r {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & th {
          border-right-width: var(--border-thin);
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_th\]\:border-tertiary {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & th {
          border-color: var(--border-color-tertiary);
        }
      }
    }
  }
  .in-data-\[cmp-variant-tablestyle\=grid\]\:sm\:\[\&_th\:last-child\]\:border-r-0 {
    :where(*[data-cmp-variant-tablestyle="grid"]) & {
      @media (width >= 40rem) {
        & th:last-child {
          border-right-style: var(--tw-border-style);
          border-right-width: 0px;
        }
      }
    }
  }
  .cmp-variant-variant-default\:\[\&\:not\(\:first-child\)\]\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      &:not(:first-child) {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
      }
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        &:not(:first-child) {
          border-top-style: var(--tw-border-style);
          border-top-width: 1px;
        }
      }
    }
  }
  .cmp-variant-variant-default\:\[\&\:not\(\:first-child\)\]\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      &:not(:first-child) {
        border-top-width: var(--border-thin);
      }
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        &:not(:first-child) {
          border-top-width: var(--border-thin);
        }
      }
    }
  }
  .cmp-variant-variant-default\:\[\&\:not\(\:first-child\)\]\:border-tertiary {
    &:where([data-component-root='true'][data-cmp-variant-variant='default']) {
      &:not(:first-child) {
        border-color: var(--border-color-tertiary);
      }
    }
    @container style(--cmp-variant-variant: default) {
      &:not([data-component-root='true']) {
        &:not(:first-child) {
          border-color: var(--border-color-tertiary);
        }
      }
    }
  }
  .\[\&\>\*\]\:size-16 {
    &>* {
      width: calc(var(--spacing) * 16);
      height: calc(var(--spacing) * 16);
    }
  }
  .\[\&\>\*\]\:size-size-xl {
    &>* {
      width: var(--size-xl);
      height: var(--size-xl);
    }
  }
  .\[\&\>\*\]\:h-full {
    &>* {
      height: 100%;
    }
  }
  .\[\&\>\*\]\:min-h-0 {
    &>* {
      min-height: calc(var(--spacing) * 0);
    }
  }
  .\[\&\>\*\]\:w-full {
    &>* {
      width: 100%;
    }
  }
  .\[\&\>\*\]\:max-w-full {
    &>* {
      max-width: 100%;
    }
  }
  .\[\&\>\*\]\:flex-1 {
    &>* {
      flex: 1;
    }
  }
  .\[\&\>\*\]\:rounded-full {
    &>* {
      border-radius: var(--radius-full);
    }
  }
  .\[\&\>\*\]\:object-cover {
    &>* {
      object-fit: cover;
    }
  }
  .\[\&\>\*\]\: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-\[var\(--background-color-primary\)\] {
    &>* {
      --tw-ring-color: var(--background-color-primary);
    }
  }
  .\[\&\>\*\]\:focus-visible\:relative {
    &>* {
      &:focus-visible {
        position: relative;
      }
    }
  }
  .\[\&\>\*\]\:focus-visible\:z-10 {
    &>* {
      &:focus-visible {
        z-index: 10;
      }
    }
  }
  .cmp-variant-fit-contain\:\[\&\>\*\]\:max-h-full {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      &>* {
        max-height: 100%;
      }
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        &>* {
          max-height: 100%;
        }
      }
    }
  }
  .cmp-variant-fit-contain\:\[\&\>\*\]\:w-auto {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      &>* {
        width: auto;
      }
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        &>* {
          width: auto;
        }
      }
    }
  }
  .cmp-variant-fit-contain\:\[\&\>\*\]\:object-contain {
    &:where([data-component-root='true'][data-cmp-variant-fit='contain']) {
      &>* {
        object-fit: contain;
      }
    }
    @container style(--cmp-variant-fit: contain) {
      &:not([data-component-root='true']) {
        &>* {
          object-fit: contain;
        }
      }
    }
  }
  .cmp-variant-fit-cover\:\[\&\>\*\]\:h-full {
    &:where([data-component-root='true'][data-cmp-variant-fit='cover']) {
      &>* {
        height: 100%;
      }
    }
    @container style(--cmp-variant-fit: cover) {
      &:not([data-component-root='true']) {
        &>* {
          height: 100%;
        }
      }
    }
  }
  .cmp-variant-fit-cover\:\[\&\>\*\]\:w-full {
    &:where([data-component-root='true'][data-cmp-variant-fit='cover']) {
      &>* {
        width: 100%;
      }
    }
    @container style(--cmp-variant-fit: cover) {
      &:not([data-component-root='true']) {
        &>* {
          width: 100%;
        }
      }
    }
  }
  .cmp-variant-fit-cover\:\[\&\>\*\]\:object-cover {
    &:where([data-component-root='true'][data-cmp-variant-fit='cover']) {
      &>* {
        object-fit: cover;
      }
    }
    @container style(--cmp-variant-fit: cover) {
      &:not([data-component-root='true']) {
        &>* {
          object-fit: cover;
        }
      }
    }
  }
  .\[\&\>\*\+\*\]\:border-t {
    &>*+* {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .\[\&\>\*\+\*\]\:border-t {
    &>*+* {
      border-top-width: var(--border-thin);
    }
  }
  .\[\&\>\*\+\*\]\:border-tertiary {
    &>*+* {
      border-color: var(--border-color-tertiary);
    }
  }
  .\[\&\>\*\+\*\]\:pt-space-xl {
    &>*+* {
      padding-top: var(--space-xl);
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                grid-column: span 2 / span 2;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-band\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:\[--lead-tile-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
    &:where([data-component-root='true'][data-cmp-variant-presentation='band']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            --lead-tile-columns: repeat(2,minmax(0,1fr));
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: band) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                --lead-tile-columns: repeat(2,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                grid-column: span 2 / span 2;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-presentation-block\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:\[--lead-tile-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
    &:where([data-component-root='true'][data-cmp-variant-presentation='block']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            --lead-tile-columns: repeat(2,minmax(0,1fr));
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
      }
    }
    @container style(--cmp-variant-presentation: block) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                --lead-tile-columns: repeat(2,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                grid-column: span 2 / span 2;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-12\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:\[--lead-tile-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
    &:where([data-component-root='true'][data-cmp-variant-span='12']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            --lead-tile-columns: repeat(2,minmax(0,1fr));
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 12) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                --lead-tile-columns: repeat(2,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                grid-column: span 2 / span 2;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-6\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:\[--lead-tile-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
    &:where([data-component-root='true'][data-cmp-variant-span='6']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            --lead-tile-columns: repeat(2,minmax(0,1fr));
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 6) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                --lead-tile-columns: repeat(2,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                grid-column: span 2 / span 2;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-8\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:\[--lead-tile-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
    &:where([data-component-root='true'][data-cmp-variant-span='8']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            --lead-tile-columns: repeat(2,minmax(0,1fr));
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 8) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                --lead-tile-columns: repeat(2,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:col-span-2 {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            grid-column: span 2 / span 2;
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              grid-column: span 2 / span 2;
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                grid-column: span 2 / span 2;
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-span-9\:cmp-variant-variant-bento\:\[\&\>\*\:first-child\]\:sm\:\[--lead-tile-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
    &:where([data-component-root='true'][data-cmp-variant-span='9']) {
      &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
        &>*:first-child {
          @media (width >= 40rem) {
            --lead-tile-columns: repeat(2,minmax(0,1fr));
          }
        }
      }
      @container style(--cmp-variant-variant: bento) {
        &:not([data-component-root='true']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
      }
    }
    @container style(--cmp-variant-span: 9) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-variant='bento']) {
          &>*:first-child {
            @media (width >= 40rem) {
              --lead-tile-columns: repeat(2,minmax(0,1fr));
            }
          }
        }
        @container style(--cmp-variant-variant: bento) {
          &:not([data-component-root='true']) {
            &>*:first-child {
              @media (width >= 40rem) {
                --lead-tile-columns: repeat(2,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
  }
  .\[\&\>\*\:last-child\]\:hidden {
    &>*:last-child {
      display: none;
    }
  }
  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none {
    &>*:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  .\[\&\>\*\:not\(\:first-child\)\]\:border-l-0 {
    &>*:not(:first-child) {
      border-left-style: var(--tw-border-style);
      border-left-width: 0px;
    }
  }
  .cmp-variant-size-lg\:\[\&\>\*\:not\(\:first-child\)\]\:-ml-2\.5 {
    &:where([data-component-root='true'][data-cmp-variant-size='lg']) {
      &>*:not(:first-child) {
        margin-left: calc(var(--spacing) * -2.5);
      }
    }
    @container style(--cmp-variant-size: lg) {
      &:not([data-component-root='true']) {
        &>*:not(:first-child) {
          margin-left: calc(var(--spacing) * -2.5);
        }
      }
    }
  }
  .cmp-variant-size-md\:\[\&\>\*\:not\(\:first-child\)\]\:-ml-2 {
    &:where([data-component-root='true'][data-cmp-variant-size='md']) {
      &>*:not(:first-child) {
        margin-left: calc(var(--spacing) * -2);
      }
    }
    @container style(--cmp-variant-size: md) {
      &:not([data-component-root='true']) {
        &>*:not(:first-child) {
          margin-left: calc(var(--spacing) * -2);
        }
      }
    }
  }
  .cmp-variant-size-sm\:\[\&\>\*\:not\(\:first-child\)\]\:-ml-1\.5 {
    &:where([data-component-root='true'][data-cmp-variant-size='sm']) {
      &>*:not(:first-child) {
        margin-left: calc(var(--spacing) * -1.5);
      }
    }
    @container style(--cmp-variant-size: sm) {
      &:not([data-component-root='true']) {
        &>*:not(:first-child) {
          margin-left: calc(var(--spacing) * -1.5);
        }
      }
    }
  }
  .cmp-variant-size-xs\:\[\&\>\*\:not\(\:first-child\)\]\:-ml-1 {
    &:where([data-component-root='true'][data-cmp-variant-size='xs']) {
      &>*:not(:first-child) {
        margin-left: calc(var(--spacing) * -1);
      }
    }
    @container style(--cmp-variant-size: xs) {
      &:not([data-component-root='true']) {
        &>*:not(:first-child) {
          margin-left: calc(var(--spacing) * -1);
        }
      }
    }
  }
  .cmp-variant-variant-outline\:\[\&\>\*\:not\(\:first-child\)\]\:border-l-0 {
    &:where([data-component-root='true'][data-cmp-variant-variant='outline']) {
      &>*:not(:first-child) {
        border-left-style: var(--tw-border-style);
        border-left-width: 0px;
      }
    }
    @container style(--cmp-variant-variant: outline) {
      &:not([data-component-root='true']) {
        &>*:not(:first-child) {
          border-left-style: var(--tw-border-style);
          border-left-width: 0px;
        }
      }
    }
  }
  .\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none {
    &>*:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  .\[\&\>div\]\:w-auto {
    &>div {
      width: auto;
    }
  }
  .\[\&\>div\]\:min-w-40 {
    &>div {
      min-width: calc(var(--spacing) * 40);
    }
  }
  .\[\&\>div\[data-cmp-variant-type\]\]\:max-w-md {
    &>div[data-cmp-variant-type] {
      max-width: var(--container-md);
    }
  }
  .\[\&\>div\[data-cmp-variant-type\]\]\:min-w-48 {
    &>div[data-cmp-variant-type] {
      min-width: calc(var(--spacing) * 48);
    }
  }
  .\[\&\>div\[data-cmp-variant-type\]\]\:grow {
    &>div[data-cmp-variant-type] {
      flex-grow: 1;
    }
  }
  .\[\&\>img\]\:size-size-md {
    &>img {
      width: var(--size-md);
      height: var(--size-md);
    }
  }
  .\[\&\>img\]\:object-cover {
    &>img {
      object-fit: cover;
    }
  }
  .\[\&\>li\:not\(\:first-child\)\]\:before\:mx-space-sm {
    &>li:not(:first-child) {
      &::before {
        content: var(--tw-content);
        margin-inline: var(--space-sm);
      }
    }
  }
  .\[\&\>li\:not\(\:first-child\)\]\:before\:text-quaternary {
    &>li:not(:first-child) {
      &::before {
        content: var(--tw-content);
        color: var(--text-color-quaternary);
      }
    }
  }
  .\[\&\>li\:not\(\:first-child\)\]\:before\:content-\[\'\>\'\] {
    &>li:not(:first-child) {
      &::before {
        --tw-content: '>';
        content: var(--tw-content);
      }
    }
  }
  .cmp-variant-background-base\:\[\:where\(\[data-cmp-variant-background\=alternate\]\)\+\&\]\:in-data-\[cmp-variant-surfaces\=open\]\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where([data-cmp-variant-background=alternate])+& {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          border-top-style: var(--tw-border-style);
          border-top-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where([data-cmp-variant-background=alternate])+& {
          :where(*[data-cmp-variant-surfaces="open"]) & {
            border-top-style: var(--tw-border-style);
            border-top-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:\[\:where\(\[data-cmp-variant-background\=alternate\]\)\+\&\]\:in-data-\[cmp-variant-surfaces\=open\]\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where([data-cmp-variant-background=alternate])+& {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          border-top-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where([data-cmp-variant-background=alternate])+& {
          :where(*[data-cmp-variant-surfaces="open"]) & {
            border-top-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-background-alternate\:\[\:where\(\[data-cmp-variant-background\=base\]\)\+\&\]\:in-data-\[cmp-variant-surfaces\=open\]\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where([data-cmp-variant-background=base])+& {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          border-top-style: var(--tw-border-style);
          border-top-width: 1px;
        }
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where([data-cmp-variant-background=base])+& {
          :where(*[data-cmp-variant-surfaces="open"]) & {
            border-top-style: var(--tw-border-style);
            border-top-width: 1px;
          }
        }
      }
    }
  }
  .cmp-variant-background-alternate\:\[\:where\(\[data-cmp-variant-background\=base\]\)\+\&\]\:in-data-\[cmp-variant-surfaces\=open\]\:border-t {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where([data-cmp-variant-background=base])+& {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          border-top-width: var(--border-thin);
        }
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where([data-cmp-variant-background=base])+& {
          :where(*[data-cmp-variant-surfaces="open"]) & {
            border-top-width: var(--border-thin);
          }
        }
      }
    }
  }
  .cmp-variant-rhythm-joined\:\[\:where\(\[data-cmp-variant-rhythm\=hero\]\,\[data-cmp-variant-rhythm\=normal\]\,\[data-cmp-variant-rhythm\=joined\]\)\+\&\]\:-mt-space-3xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='joined']) {
      :where([data-cmp-variant-rhythm=hero],[data-cmp-variant-rhythm=normal],[data-cmp-variant-rhythm=joined])+& {
        margin-top: calc(var(--space-3xl) * -1);
      }
    }
    @container style(--cmp-variant-rhythm: joined) {
      &:not([data-component-root='true']) {
        :where([data-cmp-variant-rhythm=hero],[data-cmp-variant-rhythm=normal],[data-cmp-variant-rhythm=joined])+& {
          margin-top: calc(var(--space-3xl) * -1);
        }
      }
    }
  }
  .cmp-variant-rhythm-joined\:md\:\[\:where\(\[data-cmp-variant-rhythm\=hero\]\,\[data-cmp-variant-rhythm\=normal\]\,\[data-cmp-variant-rhythm\=joined\]\)\+\&\]\:-mt-space-4xl {
    &:where([data-component-root='true'][data-cmp-variant-rhythm='joined']) {
      @media (width >= 48rem) {
        :where([data-cmp-variant-rhythm=hero],[data-cmp-variant-rhythm=normal],[data-cmp-variant-rhythm=joined])+& {
          margin-top: calc(var(--space-4xl) * -1);
        }
      }
    }
    @container style(--cmp-variant-rhythm: joined) {
      &:not([data-component-root='true']) {
        @media (width >= 48rem) {
          :where([data-cmp-variant-rhythm=hero],[data-cmp-variant-rhythm=normal],[data-cmp-variant-rhythm=joined])+& {
            margin-top: calc(var(--space-4xl) * -1);
          }
        }
      }
    }
  }
  .\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    @media (prefers-reduced-transparency:reduce) {
      background-color: var(--background-color-primary);
    }
  }
  .\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    @media (prefers-reduced-transparency:reduce) {
      --tw-backdrop-blur:  ;
      -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,);
    }
  }
  .in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    :where(*[data-cmp-variant-surfaces="open"]) & {
      @media (prefers-reduced-transparency:reduce) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    :where(*[data-cmp-variant-surfaces="open"]) & {
      @media (prefers-reduced-transparency:reduce) {
        --tw-backdrop-blur:  ;
        -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,);
      }
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      @media (prefers-reduced-transparency:reduce) {
        background-color: var(--background-color-primary);
      }
    }
  }
  .in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    :where(*[data-cmp-variant-surfaces="translucent"]) & {
      @media (prefers-reduced-transparency:reduce) {
        --tw-backdrop-blur:  ;
        -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,);
      }
    }
  }
  .cmp-variant-background-alternate\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-background-alternate\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-background='alternate']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-background: alternate) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-bordered\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='bordered']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: bordered) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-solid\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='solid']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: solid) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=open\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="open"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="open"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-headerTreatment-subtle\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-headertreatment='subtle']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-headerTreatment: subtle) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            @media (prefers-reduced-transparency:reduce) {
              background-color: var(--background-color-primary);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            @media (prefers-reduced-transparency:reduce) {
              background-color: var(--background-color-primary);
            }
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              @media (prefers-reduced-transparency:reduce) {
                background-color: var(--background-color-primary);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-background-base\:cmp-variant-rhythm-hero\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-background='base']) {
      &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
      @container style(--cmp-variant-rhythm: hero) {
        &:not([data-component-root='true']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            @media (prefers-reduced-transparency:reduce) {
              --tw-backdrop-blur:  ;
              -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,);
            }
          }
        }
      }
    }
    @container style(--cmp-variant-background: base) {
      &:not([data-component-root='true']) {
        &:where([data-component-root='true'][data-cmp-variant-rhythm='hero']) {
          :where(*[data-cmp-variant-surfaces="translucent"]) & {
            @media (prefers-reduced-transparency:reduce) {
              --tw-backdrop-blur:  ;
              -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,);
            }
          }
        }
        @container style(--cmp-variant-rhythm: hero) {
          &:not([data-component-root='true']) {
            :where(*[data-cmp-variant-surfaces="translucent"]) & {
              @media (prefers-reduced-transparency:reduce) {
                --tw-backdrop-blur:  ;
                -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,);
              }
            }
          }
        }
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-sidebarTone-muted\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='muted']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-sidebarTone: muted) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:bg-primary {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          background-color: var(--background-color-primary);
        }
      }
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            background-color: var(--background-color-primary);
          }
        }
      }
    }
  }
  .cmp-variant-sidebarTone-plain\:in-data-\[cmp-variant-surfaces\=translucent\]\:\[\@media\(prefers-reduced-transparency\:reduce\)\]\:backdrop-blur-none {
    &:where([data-component-root='true'][data-cmp-variant-sidebartone='plain']) {
      :where(*[data-cmp-variant-surfaces="translucent"]) & {
        @media (prefers-reduced-transparency:reduce) {
          --tw-backdrop-blur:  ;
          -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,);
        }
      }
    }
    @container style(--cmp-variant-sidebarTone: plain) {
      &:not([data-component-root='true']) {
        :where(*[data-cmp-variant-surfaces="translucent"]) & {
          @media (prefers-reduced-transparency:reduce) {
            --tw-backdrop-blur:  ;
            -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,);
          }
        }
      }
    }
  }
}
:root, :host {
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --space-6xl: 128px;
  --control-xs-size: 24px;
  --control-sm-size: 32px;
  --control-md-size: 36px;
  --control-lg-size: 44px;
  --control-box-size: 16px;
  --control-xs-padding-block: 2px;
  --control-sm-padding-block: 6px;
  --control-md-padding-block: 8px;
  --control-lg-padding-block: 12px;
  --control-sm-padding-inline: 12px;
  --control-md-padding-inline: 16px;
  --control-lg-padding-inline: 24px;
  --control-sm-padding-inline-tight: 8px;
  --control-md-padding-inline-tight: 12px;
  --control-field-padding-inline: 16px;
  --control-field-padding-inline-tight: 12px;
  --control-xs-gap: 4px;
  --control-sm-gap: 8px;
  --control-md-gap: 8px;
  --control-lg-gap: 8px;
  --control-group-gap: 8px;
  --size-3xs: 12px;
  --size-2xs: 16px;
  --size-xs: 20px;
  --size-sm: 24px;
  --size-md: 32px;
  --size-lg: 36px;
  --size-xl: 40px;
  --size-2xl: 48px;
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --inset-nested: 4px;
  --component-toggle-track-width: 34px;
  --component-toggle-track-height: 18px;
  --component-toggle-knob-size: 16px;
  --component-toggle-knob-inset: 1px;
  --component-radio-dot-size: 8px;
  --border-thin: 1px;
  --border-thick: 2px;
  --border-heavy: 4px;
}
:host(.density-condensed) {
  --space-2xs: 0px;
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 64px;
  --space-6xl: 96px;
  --control-sm-padding-inline: 8px;
  --control-md-padding-inline: 12px;
  --control-lg-padding-inline: 16px;
  --control-sm-padding-inline-tight: 4px;
  --control-md-padding-inline-tight: 8px;
  --size-3xs: 8px;
  --size-2xs: 12px;
  --size-xs: 16px;
  --size-sm: 20px;
  --size-md: 28px;
  --size-lg: 32px;
  --size-xl: 36px;
  --size-2xl: 40px;
}
:host(.density-normal) {
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --space-6xl: 128px;
  --control-sm-padding-inline: 12px;
  --control-md-padding-inline: 16px;
  --control-lg-padding-inline: 24px;
  --control-sm-padding-inline-tight: 8px;
  --control-md-padding-inline-tight: 12px;
  --size-3xs: 12px;
  --size-2xs: 16px;
  --size-xs: 20px;
  --size-sm: 24px;
  --size-md: 32px;
  --size-lg: 36px;
  --size-xl: 40px;
  --size-2xl: 48px;
}
:host(.density-spacious) {
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-6xl: 160px;
  --control-sm-padding-inline: 16px;
  --control-md-padding-inline: 24px;
  --control-lg-padding-inline: 32px;
  --control-sm-padding-inline-tight: 12px;
  --control-md-padding-inline-tight: 20px;
  --size-3xs: 16px;
  --size-2xs: 20px;
  --size-xs: 24px;
  --size-sm: 28px;
  --size-md: 36px;
  --size-lg: 40px;
  --size-xl: 48px;
  --size-2xl: 56px;
}
:host(.shape-rounded) {
  --radius-inline: 4px;
  --radius-nested: 6px;
  --radius-control: 8px;
  --radius-popover: 10px;
  --radius-track: 10px;
  --radius-container: 12px;
  --radius-surface: 16px;
}
:host(.shape-soft) {
  --radius-inline: 6px;
  --radius-nested: 10px;
  --radius-control: 12px;
  --radius-popover: 14px;
  --radius-track: 14px;
  --radius-container: 16px;
  --radius-surface: 24px;
}
:host(.shape-sharp) {
  --radius-inline: 0px;
  --radius-nested: 0px;
  --radius-control: 2px;
  --radius-popover: 2px;
  --radius-track: 2px;
  --radius-container: 4px;
  --radius-surface: 4px;
}
:root, :host {
  --elevation-shadow-none: 0 0 #0000;
  --elevation-shadow-xs: 0px 0px 1px 0px var(--color-shadow-ambient), 0px 1px 2px 0px var(--color-shadow-key);
  --elevation-shadow-sm: 0px 0px 1px 0px var(--color-shadow-ambient), 0px 2px 4px 0px var(--color-shadow-key);
  --elevation-shadow-md: 0px 0px 1px 0px var(--color-shadow-ambient), 0px 4px 8px 0px var(--color-shadow-key);
  --elevation-shadow-lg: 0px 0px 1px 0px var(--color-shadow-ambient), 0px 8px 16px 0px var(--color-shadow-key);
}
:host(.dark-preview) {
  color-scheme: dark;
  --text-color-primary: var(--color-gray-50);
  --text-decoration-color-primary: var(--text-color-primary);
  --text-color-secondary: var(--color-gray-300);
  --text-decoration-color-secondary: var(--text-color-secondary);
  --text-color-tertiary: var(--color-gray-400);
  --text-decoration-color-tertiary: var(--text-color-tertiary);
  --text-color-quaternary: var(--color-gray-500);
  --text-decoration-color-quaternary: var(--text-color-quaternary);
  --text-color-brand: var(--color-cyan-300);
  --text-decoration-color-brand: var(--text-color-brand);
  --text-color-brand-hover: var(--color-cyan-200);
  --text-decoration-color-brand-hover: var(--text-color-brand-hover);
  --text-color-brand-active: var(--color-cyan-100);
  --text-decoration-color-brand-active: var(--text-color-brand-active);
  --text-color-on-brand-solid: var(--color-brand-50);
  --text-decoration-color-on-brand-solid: var(--text-color-on-brand-solid);
  --text-color-danger: var(--color-red-400);
  --text-decoration-color-danger: var(--text-color-danger);
  --text-color-danger-hover: var(--color-red-300);
  --text-decoration-color-danger-hover: var(--text-color-danger-hover);
  --text-color-danger-active: var(--color-red-200);
  --text-decoration-color-danger-active: var(--text-color-danger-active);
  --text-color-on-danger-solid: var(--color-red-50);
  --text-decoration-color-on-danger-solid: var(--text-color-on-danger-solid);
  --text-color-warning: var(--color-orange-400);
  --text-decoration-color-warning: var(--text-color-warning);
  --text-color-success: var(--color-green-400);
  --text-decoration-color-success: var(--text-color-success);
  --text-color-disabled: var(--color-gray-500);
  --text-decoration-color-disabled: var(--text-color-disabled);
  --text-color-black: var(--color-black);
  --text-decoration-color-black: var(--text-color-black);
  --text-color-white: var(--color-white);
  --text-decoration-color-white: var(--text-color-white);
  --text-color-inverse: var(--color-gray-950);
  --text-decoration-color-inverse: var(--text-color-inverse);
  --text-color-blue: var(--color-blue-300);
  --text-decoration-color-blue: var(--text-color-blue);
  --text-color-green: var(--color-green-300);
  --text-decoration-color-green: var(--text-color-green);
  --text-color-sky: var(--color-sky-300);
  --text-decoration-color-sky: var(--text-color-sky);
  --text-color-purple: var(--color-purple-300);
  --text-decoration-color-purple: var(--text-color-purple);
  --text-color-orange: var(--color-orange-300);
  --text-decoration-color-orange: var(--text-color-orange);
  --background-color-primary: var(--color-void-950);
  --background-color-secondary: var(--color-void-900);
  --background-color-tertiary: var(--color-void-800);
  --background-color-quaternary: var(--color-void-700);
  --background-color-surface-sunken: #02040a;
  --background-color-surface-0: var(--color-void-950);
  --background-color-surface-1: var(--color-void-900);
  --background-color-surface-2: var(--color-void-800);
  --background-color-surface-3: var(--color-void-800);
  --background-color-surface-4: var(--color-void-700);
  --background-color-brand-solid: var(--color-violet-600);
  --background-color-brand-solid-hover: var(--color-violet-500);
  --background-color-brand-solid-active: var(--color-violet-700);
  --background-color-brand: var(--color-violet-950);
  --background-color-danger-solid: var(--color-red-500);
  --background-color-danger-solid-hover: var(--color-red-600);
  --background-color-danger-solid-active: var(--color-red-700);
  --background-color-danger: var(--color-red-950);
  --background-color-warning-solid: var(--color-orange-500);
  --background-color-warning: var(--color-orange-950);
  --background-color-success-solid: var(--color-green-500);
  --background-color-success: var(--color-green-950);
  --background-color-disabled: var(--color-void-800);
  --background-color-inverse: var(--color-gray-50);
  --background-color-blue: var(--color-blue-950);
  --background-color-green: var(--color-green-950);
  --background-color-sky: var(--color-sky-950);
  --background-color-purple: var(--color-purple-950);
  --background-color-orange: var(--color-orange-950);
  --background-color-gray: var(--color-gray-700);
  --background-color-gray-2: var(--color-gray-800);
  --border-color-primary: var(--color-void-500);
  --outline-color-primary: var(--border-color-primary);
  --border-color-secondary: var(--color-void-600);
  --outline-color-secondary: var(--border-color-secondary);
  --border-color-tertiary: var(--color-void-700);
  --outline-color-tertiary: var(--border-color-tertiary);
  --border-color-quaternary: var(--color-void-800);
  --outline-color-quaternary: var(--border-color-quaternary);
  --border-color-brand: var(--color-cyan-400);
  --outline-color-brand: var(--border-color-brand);
  --border-color-danger: var(--color-red-400);
  --outline-color-danger: var(--border-color-danger);
  --border-color-warning: var(--color-orange-400);
  --outline-color-warning: var(--border-color-warning);
  --border-color-success: var(--color-green-400);
  --outline-color-success: var(--border-color-success);
  --border-color-disabled: var(--color-gray-600);
  --outline-color-disabled: var(--border-color-disabled);
  --border-color-focus: var(--color-cyan-300);
  --outline-color-focus: var(--border-color-focus);
  --color-focus: var(--border-color-focus);
  --border-color-blue: var(--color-blue-700);
  --outline-color-blue: var(--border-color-blue);
  --border-color-green: var(--color-green-700);
  --outline-color-green: var(--border-color-green);
  --border-color-sky: var(--color-sky-700);
  --outline-color-sky: var(--border-color-sky);
  --border-color-purple: var(--color-purple-700);
  --outline-color-purple: var(--border-color-purple);
  --border-color-orange: var(--color-orange-700);
  --outline-color-orange: var(--border-color-orange);
  --color-primary-icon: var(--color-gray-50);
  --color-secondary-icon: var(--color-gray-300);
  --color-tertiary-icon: var(--color-gray-400);
  --color-quaternary-icon: var(--color-gray-600);
  --color-brand-icon: var(--color-cyan-300);
  --color-on-brand-solid-icon: var(--color-brand-50);
  --color-on-danger-icon: var(--color-red-50);
  --color-danger-icon: var(--color-red-400);
  --color-warning-icon: var(--color-orange-500);
  --color-success-icon: var(--color-green-500);
  --color-disabled-icon: var(--color-gray-500);
  --color-blue-icon: var(--color-blue-300);
  --color-green-icon: var(--color-green-300);
  --color-sky-icon: var(--color-sky-300);
  --color-purple-icon: var(--color-purple-300);
  --color-orange-icon: var(--color-orange-300);
  --color-shadow-key: rgb(0 0 0 / 0.5);
  --color-shadow-ambient: rgb(0 0 0 / 0.35);
  --color-gradient-start: var(--color-violet-600);
  --color-gradient-end: var(--color-cyan-500);
  --color-chart-1: var(--color-cyan-400);
  --color-chart-2: var(--color-violet-400);
  --color-chart-3: var(--color-indigo-300);
  --color-chart-4: var(--color-cyan-700);
  --color-chart-5: var(--color-violet-700);
  --color-on-chart-1: var(--color-void-950);
  --color-on-chart-2: var(--color-void-950);
  --color-on-chart-3: var(--color-void-950);
  --color-on-chart-4: var(--color-gray-50);
  --color-on-chart-5: var(--color-gray-50);
  --color-neon-glow: rgb(34 211 238 / 0.35);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-quaternary) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--color-quaternary);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-quaternary-hover);
}
*::-webkit-scrollbar-thumb:active {
  background-color: var(--color-quaternary-active);
}
@layer base {
  :root, :host {
    color-scheme: light;
  }
}
@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-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@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: "<percentage>";
  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: "<percentage>";
  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: "<length>";
  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-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-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@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)))) {
    *, ::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-border-style: solid;
      --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-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-ease: initial;
      --tw-outline-style: solid;
      --tw-content: "";
    }
  }
}
:root, :host {
  --asset-qrpvwkxv8nyfi1uwsw5o39ac: url("/_/assets/qakxlb875xjhstgnbbtdqqrn/abstract-futuristic-visualization-of-the-future-of-web-domains-a-glowing-neon-el.png");
}