@pandacss/studio 0.27.2 → 0.28.0

package/styled-system/styles.css

@@ -178,7 +178,7 @@
   input[type="search"],
   input[type="password"] {
     -webkit-appearance: none;
-    -moz-appearance: none; 
+    -moz-appearance: none;
   }
 
   input[type='search'] {
@@ -215,29 +215,29 @@
 }
 
 @layer base{
-  :root{
+  :root {
     --made-with-panda: '🐼';
-  }
+}
 
-  *, *::before, *::after, ::backdrop{
-    --blur:   ;
-    --brightness:   ;
-    --contrast:   ;
-    --grayscale:   ;
-    --hue-rotate:   ;
-    --invert:   ;
-    --saturate:   ;
-    --sepia:   ;
-    --drop-shadow:   ;
-    --backdrop-blur:   ;
-    --backdrop-brightness:   ;
-    --backdrop-contrast:   ;
-    --backdrop-grayscale:   ;
-    --backdrop-hue-rotate:   ;
-    --backdrop-invert:   ;
-    --backdrop-opacity:   ;
-    --backdrop-saturate:   ;
-    --backdrop-sepia:   ;
+  *,*::before,*::after,::backdrop {
+    --blur: /*-*/ /*-*/;
+    --brightness: /*-*/ /*-*/;
+    --contrast: /*-*/ /*-*/;
+    --grayscale: /*-*/ /*-*/;
+    --hue-rotate: /*-*/ /*-*/;
+    --invert: /*-*/ /*-*/;
+    --saturate: /*-*/ /*-*/;
+    --sepia: /*-*/ /*-*/;
+    --drop-shadow: /*-*/ /*-*/;
+    --backdrop-blur: /*-*/ /*-*/;
+    --backdrop-brightness: /*-*/ /*-*/;
+    --backdrop-contrast: /*-*/ /*-*/;
+    --backdrop-grayscale: /*-*/ /*-*/;
+    --backdrop-hue-rotate: /*-*/ /*-*/;
+    --backdrop-invert: /*-*/ /*-*/;
+    --backdrop-opacity: /*-*/ /*-*/;
+    --backdrop-saturate: /*-*/ /*-*/;
+    --backdrop-sepia: /*-*/ /*-*/;
     --scroll-snap-strictness: proximity;
     --border-spacing-x: 0;
     --border-spacing-y: 0;
@@ -248,33 +248,39 @@
     --skew-y: 0;
     --scale-x: 1;
     --scale-y: 1;
-  }
+}
 
-  :root{
+  :root {
     --global-color-border: var(--colors-border);
     --global-color-placeholder: var(--colors-neutral-500);
     font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: var(--font-sizes-md);
+    font-size: 0.84em;
     line-height: var(--line-heights-normal);
     font-weight: var(--font-weights-normal);
     color-scheme: light dark;
     color: var(--colors-text);
     background: var(--colors-bg);
-  }
+}
 
-  a{
+  a {
     color: unset;
     text-decoration: none;
-  }
+}
 
-  body{
+  body {
     margin: var(--spacing-0);
-    min-height: 100vh;
-  }
+    min-height: 100dvh;
+}
 }
 
 @layer tokens{
   :where(:root, :host) {
+    --aspect-ratios-square: 1 / 1;
+    --aspect-ratios-landscape: 4 / 3;
+    --aspect-ratios-portrait: 3 / 4;
+    --aspect-ratios-wide: 16 / 9;
+    --aspect-ratios-ultrawide: 18 / 5;
+    --aspect-ratios-golden: 1.618 / 1;
     --borders-none: none;
     --easings-default: cubic-bezier(0.4, 0, 0.2, 1);
     --easings-linear: linear;
@@ -698,7 +704,8 @@
     --colors-text: var(--colors-black);
     --colors-bg: var(--colors-white);
     --colors-card: var(--colors-neutral-200);
-    --colors-border: var(--colors-neutral-300)
+    --colors-border: var(--colors-neutral-300);
+    --colors-accent: var(--colors-yellow-600);
 }
 
   .dark {
@@ -706,774 +713,876 @@
     --colors-text: var(--colors-neutral-200);
     --colors-bg: var(--colors-neutral-900);
     --colors-card: var(--colors-neutral-800);
-    --colors-border: var(--colors-neutral-700)
+    --colors-border: var(--colors-neutral-700);
+    --colors-accent: var(--colors-yellow-300)
 }
 
-  @keyframes spin{
-    to{
+  @keyframes spin {
+    to {
       transform: rotate(360deg);
-    }
-  }
+}
+}
 
-  @keyframes ping{
-    75%, 100%{
+  @keyframes ping {
+    75%,100% {
       transform: scale(2);
       opacity: 0;
-    }
-  }
+}
+}
 
-  @keyframes pulse{
-    50%{
-      opacity: .5;
-    }
-  }
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+}
+}
 
-  @keyframes bounce{
-    0%, 100%{
+  @keyframes bounce {
+    0%,100% {
       transform: translateY(-25%);
       animation-timing-function: cubic-bezier(0.8,0,1,1);
-    }
+}
 
-    50%{
+    50% {
       transform: none;
       animation-timing-function: cubic-bezier(0,0,0.2,1);
-    }
-  }
+}
+}
 }
 
 @layer utilities{
-  .text_red\.400{
-    color: var(--colors-red-400);
-  }
 
-  .bg_\#646cff{
-    background: #646cff;
-  }
+  .d_flex {
+    display: flex;
+}
 
-  .px_6{
-    padding-inline: var(--spacing-6);
-  }
+  .items_center {
+    align-items: center;
+}
 
-  .mt_6{
-    margin-top: var(--spacing-6);
-  }
+  .gap_3 {
+    gap: var(--spacing-3);
+}
 
-  .\[\&\.active\]\:text_yellow\.300.active{
-    color: var(--colors-yellow-300);
-    }
+  .flex_row {
+    flex-direction: row;
+}
 
-  .sr_true{
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
+  .p_2 {
+    padding: var(--spacing-2);
+}
 
-  .bg_transparent{
-    background: var(--colors-transparent);
-  }
+  .justify_center {
+    justify-content: center;
+}
 
-  .text_neutral\.600{
-    color: var(--colors-neutral-600);
-  }
+  .gap_10px {
+    gap: 10px;
+}
 
-  .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300{
-    color: var(--colors-neutral-300);
-    }
+  .font_semibold {
+    font-weight: var(--font-weights-semibold);
+}
 
-  .shadow_sm{
-    box-shadow: var(--shadows-sm);
-  }
+  .fs_2xl {
+    font-size: var(--font-sizes-2xl);
+}
 
-  .border_border{
-    border-color: var(--colors-border);
-  }
+  .ring_none {
+    outline: var(--borders-none);
+}
 
-  .pt_16{
-    padding-top: var(--spacing-16);
-  }
+  .border-w_1px {
+    border-width: 1px;
+}
 
-  .mt_10{
-    margin-top: var(--spacing-10);
-  }
+  .border_card {
+    border-color: var(--colors-card);
+}
 
-  .opacity_0\.5{
-    opacity: 0.5;
-  }
+  .flex_column {
+    flex-direction: column;
+}
 
-  .h_10{
-    height: var(--sizes-10);
-  }
+  .flex_1 {
+    flex: 1 1 0%;
+}
 
-  .overflow_hidden{
-    overflow: hidden;
-  }
+  .pt_16 {
+    padding-top: var(--spacing-16);
+}
 
-  .shadow_inset{
-    box-shadow: var(--shadows-inset);
-  }
+  .gap_5 {
+    gap: var(--spacing-5);
+}
 
-  .before\:content_\'\'::before{
-    content: '';
-    }
+  .mt_10 {
+    margin-top: var(--spacing-10);
+}
 
-  .before\:pos_absolute::before{
-    position: absolute;
-    }
+  .gap_2\.5 {
+    gap: var(--spacing-2\.5);
+}
 
-  .before\:rounded_sm::before{
-    border-radius: var(--radii-sm);
-    }
+  .text_center {
+    text-align: center;
+}
 
-  .before\:w_100\%::before{
-    width: 100%;
-    }
+  .font_bold {
+    font-weight: var(--font-weights-bold);
+}
 
-  .before\:h_100\%::before{
-    height: 100%;
-    }
+  .fs_4xl {
+    font-size: var(--font-sizes-4xl);
+}
 
-  .before\:bg_24px::before{
-    background-size: 24px;
-    }
+  .opacity_0\.5 {
+    opacity: 0.5;
+}
 
-  .before\:z_-1::before{
-    z-index: -1;
-    }
+  .gap_4 {
+    gap: var(--spacing-4);
+}
 
-  .before\:bg-img_check::before{
-    background-image: var(--assets-check);
-    }
+  .w_full {
+    width: var(--sizes-full);
+}
 
-  .fs_xl{
-    font-size: var(--font-sizes-xl);
-  }
+  .h_10 {
+    height: var(--sizes-10);
+}
 
-  .fs_5xl{
-    font-size: var(--font-sizes-5xl);
-  }
+  .rounded_sm {
+    border-radius: var(--radii-sm);
+}
 
-  .fs_100px{
-    font-size: 100px;
-  }
+  .pos_relative {
+    position: relative;
+}
 
-  .leading_1{
-    line-height: 1;
-  }
+  .overflow_hidden {
+    overflow: hidden;
+}
 
-  .mb_3\.5{
-    margin-bottom: var(--spacing-3\.5);
-  }
+  .shadow_inset {
+    box-shadow: var(--shadows-inset);
+}
 
-  .pos_sticky{
-    position: sticky;
-  }
+  .gap_2 {
+    gap: var(--spacing-2);
+}
 
-  .top_0{
-    top: var(--spacing-0);
-  }
+  .gap_10 {
+    gap: var(--spacing-10);
+}
 
-  .z_1{
-    z-index: 1;
-  }
+  .gap_1 {
+    gap: var(--spacing-1);
+}
 
-  .resize_vertical{
-    resize: vertical;
-  }
+  .gap_0\.5 {
+    gap: var(--spacing-0\.5);
+}
 
-  .opacity_0\.4{
-    opacity: 0.4;
-  }
+  .mt_2 {
+    margin-top: var(--spacing-2);
+}
 
-  .fs_4xl{
-    font-size: var(--font-sizes-4xl);
-  }
+  .font_medium {
+    font-weight: var(--font-weights-medium);
+}
 
-  .leading_normal{
-    line-height: var(--line-heights-normal);
-  }
+  .text_capitalize {
+    text-transform: capitalize;
+}
 
-  .divide-y_1px > :not([hidden]) ~ :not([hidden]){
-    border-top-width: 1px;
-    border-bottom-width: 0px;
-    }
+  .fs_xl {
+    font-size: var(--font-sizes-xl);
+}
 
-  .divide_card > :not([hidden]) ~ :not([hidden]){
-    border-color: var(--colors-card);
-    }
+  .opacity_0\.7 {
+    opacity: 0.7;
+}
 
-  .mt_1\.5{
-    margin-top: var(--spacing-1\.5);
-  }
+  .fs_sm {
+    font-size: var(--font-sizes-sm);
+}
 
-  .h_20{
-    height: var(--sizes-20);
-  }
+  .text_uppercase {
+    text-transform: uppercase;
+}
 
-  .w_60{
-    width: var(--sizes-60);
-  }
+  .d_grid {
+    display: grid;
+}
 
-  .rounded_sm{
-    border-radius: var(--radii-sm);
-  }
+  .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+}
 
-  .p_4{
-    padding: var(--spacing-4);
-  }
+  .my_5 {
+    margin-block: var(--spacing-5);
+}
 
-  .transition_all_0\.2s_ease{
-    transition: all 0.2s ease;
-  }
+  .mx_0 {
+    margin-inline: var(--spacing-0);
+}
 
-  .\[\&_svg\]\:font_normal svg{
-    font-weight: var(--font-weights-normal);
-    }
+  .h_full {
+    height: var(--sizes-full);
+}
 
-  .\[\&_svg\]\:fs_xx-large svg{
-    font-size: xx-large;
-    }
+  .min-h_40vh {
+    min-height: 40vh;
+}
 
-  .\[\&_svg\]\:mb_6 svg{
-    margin-bottom: var(--spacing-6);
-    }
+  .opacity_0\.8 {
+    opacity: 0.8;
+}
 
-  .\[\&_svg\]\:h_6 svg{
-    height: var(--sizes-6);
-    }
+  .fs_5xl {
+    font-size: var(--font-sizes-5xl);
+}
 
-  .\[\&_svg\]\:w_6 svg{
-    width: var(--sizes-6);
-    }
+  .gap_8 {
+    gap: var(--spacing-8);
+}
 
-  .mt_3{
-    margin-top: var(--spacing-3);
-  }
+  .fs_100px {
+    font-size: 100px;
+}
 
-  .py_24{
-    padding-block: var(--spacing-24);
-  }
+  .leading_1 {
+    line-height: 1;
+}
 
-  .mb_10{
-    margin-bottom: var(--spacing-10);
-  }
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
 
-  .px_8{
-    padding-inline: var(--spacing-8);
-  }
+  .fs_24px {
+    font-size: 24px;
+}
 
-  .py_4{
-    padding-block: var(--spacing-4);
-  }
+  .mt_8 {
+    margin-top: var(--spacing-8);
+}
 
-  .mb_6{
-    margin-bottom: var(--spacing-6);
-  }
+  .flex_0_0_auto {
+    flex: 0 0 auto;
+}
 
-  .w_80px{
-    width: 80px;
-  }
+  .w_8 {
+    width: var(--sizes-8);
+}
 
-  .h_80px{
-    height: 80px;
-  }
+  .h_8 {
+    height: var(--sizes-8);
+}
 
-  .h_12{
-    height: var(--sizes-12);
-  }
+  .text_lowercase {
+    text-transform: lowercase;
+}
 
-  .min-w_5{
-    min-width: var(--sizes-5);
-  }
+  .resize_vertical {
+    resize: vertical;
+}
 
-  .bg_neutral\.800{
-    background: var(--colors-neutral-800);
-  }
+  .gap_3\.5 {
+    gap: var(--spacing-3\.5);
+}
 
-  .py_1{
-    padding-block: var(--spacing-1);
-  }
+  .opacity_0\.4 {
+    opacity: 0.4;
+}
 
-  .text_white{
-    color: var(--colors-white);
-  }
+  .leading_normal {
+    line-height: var(--line-heights-normal);
+}
 
-  .rounded-br_sm{
-    border-bottom-right-radius: var(--radii-sm);
-  }
+  .bg_card {
+    background: var(--colors-card);
+}
 
-  .border_neutral\.700{
-    border-color: var(--colors-neutral-700);
-  }
+  .px_4 {
+    padding-inline: var(--spacing-4);
+}
 
-  .fs_sm{
-    font-size: var(--font-sizes-sm);
-  }
+  .py_2 {
+    padding-block: var(--spacing-2);
+}
 
-  .d_block{
-    display: block;
-  }
+  .rounded_md {
+    border-radius: var(--radii-md);
+}
 
-  .py_1\.5{
-    padding-block: var(--spacing-1\.5);
-  }
+  .text_neutral\.600 {
+    color: var(--colors-neutral-600);
+}
 
-  .cursor_pointer{
-    cursor: pointer;
-  }
+  .shadow_sm {
+    box-shadow: var(--shadows-sm);
+}
 
-  .fs_md{
-    font-size: var(--font-sizes-md);
-  }
+  .border_border {
+    border-color: var(--colors-border);
+}
 
-  .currentPage\:text_yellow\.300[aria-current=page]{
-    color: var(--colors-yellow-300);
-    }
+  .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
+    border-top-width: 1px;
+    border-bottom-width: 0px;
+}
+
+  .divide_card > :not([hidden]) ~ :not([hidden]) {
+    border-color: var(--colors-card);
+}
 
-  .fs_small{
+  .px_1 {
+    padding-inline: var(--spacing-1);
+}
+
+  .py_2\.5 {
+    padding-block: var(--spacing-2\.5);
+}
+
+  .fs_small {
     font-size: small;
-  }
+}
 
-  .opacity_0\.7{
-    opacity: 0.7;
-  }
+  .flex_auto {
+    flex: 1 1 auto;
+}
 
-  .list_none{
-    list-style-type: none;
-  }
+  .mt_1\.5 {
+    margin-top: var(--spacing-1\.5);
+}
 
-  .col-span_span_3_\/_span_3{
-    grid-column: span 3 / span 3;
-  }
+  .mt_5 {
+    margin-top: var(--spacing-5);
+}
 
-  .h_5{
-    height: var(--sizes-5);
-  }
+  .my_3 {
+    margin-block: var(--spacing-3);
+}
 
-  .bg_rgba\(255\,_192\,_203\,_0\.5\){
-    background: rgba(255, 192, 203, 0.5);
-  }
+  .h_20 {
+    height: var(--sizes-20);
+}
 
-  .col-span_span_2_\/_span_2{
-    grid-column: span 2 / span 2;
-  }
+  .w_60 {
+    width: var(--sizes-60);
+}
 
-  .col-span_span_5_\/_span_5{
-    grid-column: span 5 / span 5;
-  }
+  .p_4 {
+    padding: var(--spacing-4);
+}
 
-  .px_1{
-    padding-inline: var(--spacing-1);
-  }
+  .transition_all_0\.2s_ease {
+    transition: all 0.2s ease;
+}
 
-  .py_2\.5{
-    padding-block: var(--spacing-2\.5);
-  }
+  .mb_3 {
+    margin-bottom: var(--spacing-3);
+}
 
-  .flex_auto{
-    flex: 1 1 auto;
-  }
+  .d_inline-flex {
+    display: inline-flex;
+}
 
-  .my_3{
-    margin-block: var(--spacing-3);
-  }
+  .px_6 {
+    padding-inline: var(--spacing-6);
+}
 
-  .truncate_true{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+  .py_3 {
+    padding-block: var(--spacing-3);
+}
 
-  .gap_12{
-    gap: var(--spacing-12);
-  }
+  .bg_yellow\.300 {
+    background: var(--colors-yellow-300);
+}
 
-  .mt_5{
-    margin-top: var(--spacing-5);
-  }
+  .text_black {
+    color: var(--colors-black);
+}
 
-  .bg_card{
-    background: var(--colors-card);
-  }
+  .text_yellow\.300 {
+    color: var(--colors-yellow-300);
+}
 
-  .ring_0{
-    outline: 0;
-  }
+  .min-h_dvh {
+    min-height: 100dvh;
+}
 
-  .pt_28{
-    padding-top: var(--spacing-28);
-  }
+  .px_8 {
+    padding-inline: var(--spacing-8);
+}
 
-  .pb_28{
-    padding-bottom: var(--spacing-28);
-  }
+  .py_24 {
+    padding-block: var(--spacing-24);
+}
 
-  .w_fit-content{
-    width: fit-content;
-  }
+  .mb_10 {
+    margin-bottom: var(--spacing-10);
+}
 
-  .gap_1\.5{
-    gap: var(--spacing-1\.5);
-  }
+  .my_10 {
+    margin-block: var(--spacing-10);
+}
 
-  .white-space_nowrap{
-    white-space: nowrap;
-  }
+  .fs_12rem {
+    font-size: 12rem;
+}
 
-  .w_48{
-    width: var(--sizes-48);
-  }
+  .tracking_tight {
+    letter-spacing: var(--letter-spacings-tight);
+}
 
-  .text_capitalize{
-    text-transform: capitalize;
-  }
+  .gap_6 {
+    gap: var(--spacing-6);
+}
 
-  .mr_2{
-    margin-right: var(--spacing-2);
-  }
+  .grid-cols_repeat\(auto-fit\,_minmax\(10rem\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+}
 
-  .h_calc\(100vh_-_env\(safe-area-inset-bottom\)\){
-    height: calc(100vh - env(safe-area-inset-bottom));
-  }
+  .w_80px {
+    width: 80px;
+}
 
-  .font_bold{
-    font-weight: var(--font-weights-bold);
-  }
+  .h_80px {
+    height: 80px;
+}
 
-  .w_16{
-    width: var(--sizes-16);
-  }
+  .bg_rgba\(255\,_192\,_203\,_0\.5\) {
+    background: rgba(255, 192, 203, 0.5);
+}
 
-  .mt_4{
-    margin-top: var(--spacing-4);
-  }
+  .h_12 {
+    height: var(--sizes-12);
+}
 
-  .pt_14{
-    padding-top: var(--spacing-14);
-  }
+  .min-w_5 {
+    min-width: var(--sizes-5);
+}
 
-  .pb_8{
-    padding-bottom: var(--spacing-8);
-  }
+  .bg_neutral\.800 {
+    background: var(--colors-neutral-800);
+}
 
-  .fs_3xl{
-    font-size: var(--font-sizes-3xl);
-  }
+  .py_1 {
+    padding-block: var(--spacing-1);
+}
+
+  .text_white {
+    color: var(--colors-white);
+}
+
+  .rounded-br_sm {
+    border-bottom-right-radius: var(--radii-sm);
+}
+
+  .border_neutral\.700 {
+    border-color: var(--colors-neutral-700);
+}
+
+  .d_block {
+    display: block;
+}
+
+  .py_1\.5 {
+    padding-block: var(--spacing-1\.5);
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
+  .fs_md {
+    font-size: var(--font-sizes-md);
+}
 
-  .mb_8{
+  .mb_8 {
     margin-bottom: var(--spacing-8);
-  }
+}
 
-  .tracking_tight{
-    letter-spacing: var(--letter-spacings-tight);
-  }
+  .list_none {
+    list-style-type: none;
+}
 
-  .justify_space-between{
-    justify-content: space-between;
-  }
+  .p_0 {
+    padding: var(--spacing-0);
+}
 
-  .font_medium{
-    font-weight: var(--font-weights-medium);
-  }
+  .my_2 {
+    margin-block: var(--spacing-2);
+}
 
-  .gap_2{
-    gap: var(--spacing-2);
-  }
+  .grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+}
 
-  .font_semibold{
-    font-weight: var(--font-weights-semibold);
-  }
+  .gap-y_10 {
+    column-gap: var(--spacing-10);
+}
 
-  .fs_2xl{
-    font-size: var(--font-sizes-2xl);
-  }
+  .gap-x_2\.5 {
+    row-gap: var(--spacing-2\.5);
+}
 
-  .p_2{
-    padding: var(--spacing-2);
-  }
+  .col-span_span_3_\/_span_3 {
+    grid-column: span 3 / span 3;
+}
 
-  .ring_none{
-    outline: var(--borders-none);
-  }
+  .h_5 {
+    height: var(--sizes-5);
+}
 
-  .border_card{
-    border-color: var(--colors-card);
-  }
+  .col-span_span_2_\/_span_2 {
+    grid-column: span 2 / span 2;
+}
 
-  .gap_2\.5{
-    gap: var(--spacing-2\.5);
-  }
+  .col-span_span_5_\/_span_5 {
+    grid-column: span 5 / span 5;
+}
 
-  .text_center{
-    text-align: center;
-  }
+  .pos_sticky {
+    position: sticky;
+}
 
-  .flex_1{
-    flex: 1 1 0%;
-  }
+  .top_6 {
+    top: var(--spacing-6);
+}
 
-  .gap_0\.5{
-    gap: var(--spacing-0\.5);
-  }
+  .z_1 {
+    z-index: 1;
+}
 
-  .mt_2{
-    margin-top: var(--spacing-2);
-  }
+  .mb_4 {
+    margin-bottom: var(--spacing-4);
+}
 
-  .gap_5{
-    gap: var(--spacing-5);
-  }
+  .justify_space-between {
+    justify-content: space-between;
+}
 
-  .min-h_40vh{
-    min-height: 40vh;
-  }
+  .truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 
-  .opacity_0\.8{
-    opacity: 0.8;
-  }
+  .px_2 {
+    padding-inline: var(--spacing-2);
+}
 
-  .gap_8{
-    gap: var(--spacing-8);
-  }
+  .self_flex-start {
+    align-self: flex-start;
+}
 
-  .gap_3\.5{
-    gap: var(--spacing-3\.5);
-  }
+  .text_inherit {
+    color: inherit;
+}
 
-  .gap_1{
-    gap: var(--spacing-1);
-  }
+  .sr_true {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
 
-  .gap_10px{
-    gap: 10px;
-  }
+  .gap_12 {
+    gap: var(--spacing-12);
+}
 
-  .h_full{
-    height: var(--sizes-full);
-  }
+  .ring_0 {
+    outline: 0;
+}
+
+  .pt_28 {
+    padding-top: var(--spacing-28);
+}
+
+  .pb_28 {
+    padding-bottom: var(--spacing-28);
+}
 
-  .min-w_60{
+  .mx_auto {
+    margin-inline: auto;
+}
+
+  .w_fit-content {
+    width: fit-content;
+}
+
+  .gap_1\.5 {
+    gap: var(--spacing-1\.5);
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .w_48 {
+    width: var(--sizes-48);
+}
+
+  .mr_2 {
+    margin-right: var(--spacing-2);
+}
+
+  .h_calc\(100vh_-_env\(safe-area-inset-bottom\)\) {
+    height: calc(100vh - env(safe-area-inset-bottom));
+}
+
+  .min-w_60 {
     min-width: var(--sizes-60);
-  }
+}
 
-  .px_12{
+  .overflow_auto {
+    overflow: auto;
+}
+
+  .px_12 {
     padding-inline: var(--spacing-12);
-  }
+}
 
-  .py_8{
+  .py_8 {
     padding-block: var(--spacing-8);
-  }
+}
 
-  .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\){
-    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
-  }
+  .w_16 {
+    width: var(--sizes-16);
+}
 
-  .grid-cols_repeat\(auto-fit\,_minmax\(30rem\,_1fr\)\){
-    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-  }
+  .mt_4 {
+    margin-top: var(--spacing-4);
+}
 
-  .gap_4{
-    gap: var(--spacing-4);
-  }
+  .pt_10 {
+    padding-top: var(--spacing-10);
+}
 
-  .my_5{
-    margin-block: var(--spacing-5);
-  }
+  .pb_8 {
+    padding-bottom: var(--spacing-8);
+}
 
-  .mx_0{
-    margin-inline: var(--spacing-0);
-  }
+  .max-w_8xl {
+    max-width: var(--sizes-8xl);
+}
 
-  .grid-cols_repeat\(auto-fit\,_minmax\(10rem\,_1fr\)\){
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
+  .pb_10 {
+    padding-bottom: var(--spacing-10);
+}
 
-  .gap_10{
-    gap: var(--spacing-10);
-  }
+  .fs_3xl {
+    font-size: var(--font-sizes-3xl);
+}
 
-  .d_grid{
-    display: grid;
-  }
+  .px_3 {
+    padding-inline: var(--spacing-3);
+}
 
-  .grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\){
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
+  .leading_1\.2 {
+    line-height: 1.2;
+}
 
-  .gap-y_10{
-    column-gap: var(--spacing-10);
-  }
+  .pt_2 {
+    padding-top: var(--spacing-2);
+}
 
-  .gap-x_2\.5{
-    row-gap: var(--spacing-2\.5);
-  }
+  .pb_1 {
+    padding-bottom: var(--spacing-1);
+}
 
-  .fs_24px{
-    font-size: 24px;
-  }
+  .pb_3 {
+    padding-bottom: var(--spacing-3);
+}
 
-  .mt_8{
-    margin-top: var(--spacing-8);
-  }
+  .pb_2 {
+    padding-bottom: var(--spacing-2);
+}
 
-  .flex_column{
-    flex-direction: column;
-  }
+  .pb_9px {
+    padding-bottom: 9px;
+}
 
-  .text_uppercase{
-    text-transform: uppercase;
-  }
+  .fs_24rem {
+    font-size: 24rem;
+}
 
-  .justify_center{
-    justify-content: center;
-  }
+  .fs_8xl {
+    font-size: var(--font-sizes-8xl);
+}
 
-  .flex_0_0_auto{
-    flex: 0 0 auto;
-  }
+  .fs_7xl {
+    font-size: var(--font-sizes-7xl);
+}
 
-  .w_8{
-    width: var(--sizes-8);
-  }
+  .py_30dvh {
+    padding-block: 30dvh;
+}
 
-  .h_8{
-    height: var(--sizes-8);
-  }
+  .py_10dvh {
+    padding-block: 10dvh;
+}
 
-  .text_lowercase{
-    text-transform: lowercase;
-  }
+  .py_24dvh {
+    padding-block: 24dvh;
+}
 
-  .p_8{
-    padding: var(--spacing-8);
-  }
+  .py_12dvh {
+    padding-block: 12dvh;
+}
 
-  .flex-wrap_wrap{
-    flex-wrap: wrap;
-  }
+  .tracking_tighter {
+    letter-spacing: var(--letter-spacings-tighter);
+}
 
-  .gap_6{
-    gap: var(--spacing-6);
-  }
+  .text_accent {
+    color: var(--colors-accent);
+}
 
-  .my_2{
-    margin-block: var(--spacing-2);
-  }
+  .border_0 {
+    border-color: 0;
+}
 
-  .p_0{
-    padding: var(--spacing-0);
-  }
+  .border_c {
+    border-color: c;
+}
 
-  .d_flex{
-    display: flex;
-  }
+  .w_0 {
+    width: var(--sizes-0);
+}
 
-  .items_center{
-    align-items: center;
-  }
+  .h_0 {
+    height: var(--sizes-0);
+}
 
-  .gap_3{
-    gap: var(--spacing-3);
-  }
+  .w_10 {
+    width: var(--sizes-10);
+}
 
-  .flex_row{
-    flex-direction: row;
-  }
+  .w_20 {
+    width: var(--sizes-20);
+}
 
-  .rounded_md{
-    border-radius: var(--radii-md);
-  }
+  .mt_20 {
+    margin-top: var(--spacing-20);
+}
 
-  .px_2{
-    padding-inline: var(--spacing-2);
-  }
+  .border-tw_2px {
+    border-top-width: 2px;
+}
 
-  .py_2{
-    padding-block: var(--spacing-2);
-  }
+  .border-tw_8px {
+    border-top-width: 8px;
+}
 
-  .border-w_1px{
-    border-width: 1px;
-  }
+  .border_accent {
+    border-color: var(--colors-accent);
+}
 
-  .self_flex-start{
-    align-self: flex-start;
-  }
+  .border-t_accent {
+    border-top-color: var(--colors-accent);
+}
 
-  .text_inherit{
-    color: inherit;
-  }
+  .before\:content_\'\'::before {
+    content: '';
+}
 
-  .pos_relative{
-    position: relative;
-  }
+  .before\:pos_absolute::before {
+    position: absolute;
+}
 
-  .max-w_8xl{
-    max-width: var(--sizes-8xl);
-  }
+  .before\:rounded_sm::before {
+    border-radius: var(--radii-sm);
+}
 
-  .mx_auto{
-    margin-inline: auto;
-  }
+  .before\:w_100\%::before {
+    width: 100%;
+}
 
-  .px_4{
-    padding-inline: var(--spacing-4);
-  }
+  .before\:h_100\%::before {
+    height: 100%;
+}
 
-  .w_full{
-    width: var(--sizes-full);
-  }
+  .before\:bg_24px::before {
+    background-size: 24px;
+}
 
-  .overflow_auto{
-    overflow: auto;
-  }
+  .before\:z_-1::before {
+    z-index: -1;
+}
+
+  .before\:bg-img_check::before {
+    background-image: var(--assets-check);
+}
+
+  .dark\:text_neutral\.300.dark,.dark .dark\:text_neutral\.300 {
+    color: var(--colors-neutral-300);
+}
+
+  .\[\&_svg\]\:font_normal svg {
+    font-weight: var(--font-weights-normal);
+}
 
-  .focusWithin\:outline-style_solid:focus-within{
+  .\[\&_svg\]\:fs_xx-large svg {
+    font-size: xx-large;
+}
+
+  .\[\&_svg\]\:mb_6 svg {
+    margin-bottom: var(--spacing-6);
+}
+
+  .\[\&_svg\]\:h_6 svg {
+    height: var(--sizes-6);
+}
+
+  .\[\&_svg\]\:w_6 svg {
+    width: var(--sizes-6);
+}
+
+  .currentPage\:text_accent[aria-current=page],.\[\&\.active\]\:text_accent.active {
+    color: var(--colors-accent);
+}
+
+  .focusWithin\:outline-style_solid:focus-within {
     outline-style: solid;
-    }
+}
 
-  .focusWithin\:ring_2px:focus-within{
+  .focusWithin\:ring_2px:focus-within {
     outline-width: 2px;
-    }
+}
 
-  .focusWithin\:ring_2px:focus-within{
+  .focusWithin\:ring_2px:focus-within {
     outline-offset: 2px;
-    }
+}
 
-  .focusWithin\:ring_neutral\.400:focus-within{
+  .focusWithin\:ring_neutral\.400:focus-within {
     outline-color: var(--colors-neutral-400);
-    }
+}
 
-  .hover\:shadow_lg:is(:hover, [data-hover]){
+  .hover\:shadow_lg:is(:hover, [data-hover]) {
     box-shadow: var(--shadows-lg);
-    }
-
-  .hover\:text_yellow\.300:is(:hover, [data-hover]){
-    color: var(--colors-yellow-300);
-    }
-
-  .\[\&\:hover\]\:bg_\#4049f0:hover{
-    background: #4049f0;
-    }
+}
 
-  .\[\&\:hover\]\:shadow_lg:hover{
-    box-shadow: var(--shadows-lg);
-    }
+  .hover\:text_accent:is(:hover, [data-hover]) {
+    color: var(--colors-accent);
+}
 
-  @media screen and (min-width: 48em){
-    .md\:px_6{
-      padding-inline: var(--spacing-6)
-  }
-    }
+  @media screen and (min-width: 48em) {
+    .md\:px_6 {
+      padding-inline: var(--spacing-6);
+}
+}
 
-  @media screen and (min-width: 64em){
-    .lg\:px_8{
-      padding-inline: var(--spacing-8)
-  }
-    }
+  @media screen and (min-width: 64em) {
+    .lg\:px_8 {
+      padding-inline: var(--spacing-8);
+}
+}
 }