soroban-abacus-flashcards/apps/web/styled-system/chunks/src__app__page.css

@layer utilities {

  .min-h_100vh {
    min-height: 100vh
    }

  .bg_gradient-to-br_from-brand\.50_to-brand\.100 {
    background: gradient-to-br from-brand.50 to-brand.100
    }

  .leading_tight {
    line-height: var(--line-heights-tight)
    }

  .text_brand\.600 {
    color: var(--colors-brand-600)
    }

  .max-w_2xl {
    max-width: var(--sizes-2xl)
    }

  .bg_brand\.600 {
    background: var(--colors-brand-600)
    }

  .text_white {
    color: var(--colors-white)
    }

  .px_8 {
    padding-inline: var(--spacing-8)
    }

  .py_4 {
    padding-block: var(--spacing-4)
    }

  .text_brand\.700 {
    color: var(--colors-brand-700)
    }

  .fs_lg {
    font-size: var(--font-sizes-lg)
    }

  .font_semibold {
    font-weight: var(--font-weights-semibold)
    }

  .rounded_xl {
    border-radius: var(--radii-xl)
    }

  .border_2px_solid {
    border: 2px solid
    }

  .border_brand\.200 {
    border-color: var(--colors-brand-200)
    }

  .d_grid {
    display: grid
    }

  .grid-cols_1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
    }

  .gap_8 {
    gap: var(--spacing-8)
    }

  .mt_16 {
    margin-top: var(--spacing-16)
    }

  .w_full {
    width: var(--sizes-full)
    }

  .p_8 {
    padding: var(--spacing-8)
    }

  .bg_white {
    background: var(--colors-white)
    }

  .rounded_2xl {
    border-radius: var(--radii-2xl)
    }

  .shadow_card {
    box-shadow: var(--shadows-card)
    }

  .transition_all {
    transition-property: var(--transition-prop, all);
    transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--transition-duration, 150ms)
    }

  .fs_4xl {
    font-size: var(--font-sizes-4xl)
    }

  .mb_4 {
    margin-bottom: var(--spacing-4)
    }

  .fs_xl {
    font-size: var(--font-sizes-xl)
    }

  .font_bold {
    font-weight: var(--font-weights-bold)
    }

  .text_gray\.900 {
    color: var(--colors-gray-900)
    }

  .mb_3 {
    margin-bottom: var(--spacing-3)
    }

  .text_gray\.600 {
    color: var(--colors-gray-600)
    }

  .leading_relaxed {
    line-height: var(--line-heights-relaxed)
    }

  .pos_relative {
    position: relative
    }

  .max-w_6xl {
    max-width: var(--sizes-6xl)
    }

  .mx_auto {
    margin-inline: auto
    }

  .px_4 {
    padding-inline: var(--spacing-4)
    }

  .gap_12 {
    gap: var(--spacing-12)
    }

  .py_16 {
    padding-block: var(--spacing-16)
    }

  .text_center {
    text-align: center
    }

  .flex_column {
    flex-direction: column
    }

  .gap_6 {
    gap: var(--spacing-6)
    }

  .max-w_4xl {
    max-width: var(--sizes-4xl)
    }

  .d_flex {
    display: flex
    }

  .items_center {
    align-items: center
    }

  .justify_center {
    justify-content: center
    }

  .gap_4 {
    gap: var(--spacing-4)
    }

  .flex_row {
    flex-direction: row
    }

  .mt_8 {
    margin-top: var(--spacing-8)
    }

  .hover\:bg_brand\.700:is(:hover, [data-hover]) {
    background: var(--colors-brand-700)
        }

  .hover\:border_brand\.400:is(:hover, [data-hover]) {
    border-color: var(--colors-brand-400)
        }

  .hover\:transform_translateY\(-2px\):is(:hover, [data-hover]) {
    transform: translateY(-2px)
        }

  .hover\:transform_translateY\(-4px\):is(:hover, [data-hover]) {
    transform: translateY(-4px)
        }

  .hover\:shadow_modal:is(:hover, [data-hover]) {
    box-shadow: var(--shadows-modal)
        }
    @media screen and (min-width: 48em) {

  .md\:fs_6xl {
      font-size: var(--font-sizes-6xl)
    }

  .md\:fs_xl {
      font-size: var(--font-sizes-xl)
    }

  .md\:grid-cols_3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:fs_6xl {
      font-size: var(--font-sizes-6xl)
    }

    .md\:fs_xl {
      font-size: var(--font-sizes-xl)
    }

    .md\:grid-cols_3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }
        }
}