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

@layer utilities {

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

  .bg_linear-gradient\(135deg\,_\#667eea_0\%\,_\#764ba2_100\%\) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
    }

  .py_20 {
    padding-block: var(--spacing-20)
    }

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

  .text-shadow_0_4px_20px_rgba\(0\,0\,0\,0\.3\) {
    text-shadow: 0 4px 20px rgba(0,0,0,0.3)
    }

  .opacity_0\.95 {
    opacity: 0.95
    }

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

  .border-b_1px_solid {
    border-bottom: 1px solid
    }

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

  .border_transparent {
    border-color: var(--colors-transparent)
    }

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

  .bg_transparent {
    background: var(--colors-transparent)
    }

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

  .border-b_2px_solid {
    border-bottom: 2px solid
    }

  .cursor_pointer {
    cursor: pointer
    }

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

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

  .p_10 {
    padding: var(--spacing-10)
    }

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

  .max-w_3xl {
    max-width: var(--sizes-3xl)
    }

  .bg_yellow\.50 {
    background: var(--colors-yellow-50)
    }

  .border_yellow\.300 {
    border-color: var(--colors-yellow-300)
    }

  .fs_md {
    font-size: var(--font-sizes-md)
    }

  .text_yellow\.800 {
    color: var(--colors-yellow-800)
    }

  .font_medium {
    font-weight: var(--font-weights-medium)
    }

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

  .aspect_1\/2\.8 {
    aspect-ratio: 1/2.8
    }

  .max-w_120px {
    max-width: 120px
    }

  .fs_2xs {
    font-size: var(--font-sizes-2xs)
    }

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

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

  .mt_auto {
    margin-top: auto
    }

  .text_blue\.800 {
    color: var(--colors-blue-800)
    }

  .border_blue\.300 {
    border-color: var(--colors-blue-300)
    }

  .aspect_3\/4 {
    aspect-ratio: 3/4
    }

  .max-w_180px {
    max-width: 180px
    }

  .bg_gray\.50 {
    background: var(--colors-gray-50)
    }

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

  .w_12 {
    width: var(--sizes-12)
    }

  .h_12 {
    height: var(--sizes-12)
    }

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

  .rounded_full {
    border-radius: var(--radii-full)
    }

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

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

  .bg_orange\.50 {
    background: var(--colors-orange-50)
    }

  .border_orange\.200 {
    border-color: var(--colors-orange-200)
    }

  .text_orange\.800 {
    color: var(--colors-orange-800)
    }

  .text_orange\.700 {
    color: var(--colors-orange-700)
    }

  .mb_1 {
    margin-bottom: var(--spacing-1)
    }

  .border_2px_solid {
    border: 2px solid
    }

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

  .shadow_0_8px_24px_rgba\(0\,_0\,_0\,_0\.08\) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08)
    }

  .w_100\% {
    width: 100%
    }

  .bg_blue\.600 {
    background: var(--colors-blue-600)
    }

  .bg_gradient-to-br {
    background: gradient-to-br
    }

  .to_indigo\.700 {
    --gradient-to: var(--colors-indigo-700)
    }

  .mb_8 {
    margin-bottom: var(--spacing-8)
    }

  .text_green\.600 {
    color: var(--colors-green-600)
    }

  .bg_green\.50 {
    background: var(--colors-green-50)
    }

  .border_green\.200 {
    border-color: var(--colors-green-200)
    }

  .text_green\.800 {
    color: var(--colors-green-800)
    }

  .text_green\.700 {
    color: var(--colors-green-700)
    }

  .bg_blue\.50 {
    background: var(--colors-blue-50)
    }

  .border_blue\.200 {
    border-color: var(--colors-blue-200)
    }

  .fs_xs {
    font-size: var(--font-sizes-xs)
    }

  .text_blue\.600 {
    color: var(--colors-blue-600)
    }

  .text_blue\.700 {
    color: var(--colors-blue-700)
    }

  .text-decor_underline {
    text-decoration: underline
    }

  .text_red\.600 {
    color: var(--colors-red-600)
    }

  .pl_6 {
    padding-left: var(--spacing-6)
    }

  .bg_red\.50 {
    background: var(--colors-red-50)
    }

  .border_red\.200 {
    border-color: var(--colors-red-200)
    }

  .text_red\.800 {
    color: var(--colors-red-800)
    }

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

  .text_red\.700 {
    color: var(--colors-red-700)
    }

  .w_160px {
    width: 160px
    }

  .h_240px {
    height: 240px
    }

  .border_gray\.300 {
    border-color: var(--colors-gray-300)
    }

  .rounded_md {
    border-radius: var(--radii-md)
    }

  .justify_center {
    justify-content: center
    }

  .overflow_hidden {
    overflow: hidden
    }

  .shadow_sm {
    box-shadow: var(--shadows-sm)
    }

  .border_gray\.200 {
    border-color: var(--colors-gray-200)
    }

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

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

  .gap_2 {
    gap: var(--spacing-2)
    }

  .mb_6 {
    margin-bottom: var(--spacing-6)
    }

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

  .bg_purple\.50 {
    background: var(--colors-purple-50)
    }

  .border_purple\.200 {
    border-color: var(--colors-purple-200)
    }

  .text_purple\.800 {
    color: var(--colors-purple-800)
    }

  .text_purple\.700 {
    color: var(--colors-purple-700)
    }

  .bg_indigo\.50 {
    background: var(--colors-indigo-50)
    }

  .border_1px_solid {
    border: 1px solid
    }

  .border_indigo\.200 {
    border-color: var(--colors-indigo-200)
    }

  .p_4 {
    padding: var(--spacing-4)
    }

  .text_indigo\.800 {
    color: var(--colors-indigo-800)
    }

  .fs_sm {
    font-size: var(--font-sizes-sm)
    }

  .text_indigo\.700 {
    color: var(--colors-indigo-700)
    }

  .pl_4 {
    padding-left: var(--spacing-4)
    }

  .mb_2 {
    margin-bottom: var(--spacing-2)
    }

  .bg_gradient-to-r {
    background: gradient-to-r
    }

  .from_purple\.600 {
    --gradient-from: var(--colors-purple-600)
    }

  .to_indigo\.600 {
    --gradient-to: var(--colors-indigo-600)
    }

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

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

  .p_6 {
    padding: var(--spacing-6)
    }

  .text_center {
    text-align: center
    }

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

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

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

  .opacity_0\.9 {
    opacity: 0.9
    }

  .d_inline-block {
    display: inline-block
    }

  .px_6 {
    padding-inline: var(--spacing-6)
    }

  .py_3 {
    padding-block: var(--spacing-3)
    }

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

  .text_purple\.600 {
    color: var(--colors-purple-600)
    }

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

  .rounded_lg {
    border-radius: var(--radii-lg)
    }

  .text-decor_none {
    text-decoration: none
    }

  .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)
    }

  .columns_auto {
    columns: auto
    }

  .columns_3 {
    columns: 3
    }

  .columns_1 {
    columns: 1
    }

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

  .max-w_7xl {
    max-width: var(--sizes-7xl)
    }

  .pos_relative {
    position: relative
    }

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

  .mx_auto {
    margin-inline: auto
    }

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

  .py_12 {
    padding-block: var(--spacing-12)
    }

  .gap_0 {
    gap: var(--spacing-0)
    }

  .flex_row {
    flex-direction: row
    }

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

  .d_flex {
    display: flex
    }

  .flex_column {
    flex-direction: column
    }

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

  .grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
    grid-template-columns: repeat(3, minmax(0, 1fr))
    }

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

  .items_center {
    align-items: center
    }

  .d_grid {
    display: grid
    }

  .grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
    grid-template-columns: repeat(1, minmax(0, 1fr))
    }

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

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

  .hover\:bg_gray\.50:is(:hover, [data-hover]) {
    background: var(--colors-gray-50)
        }

  .hover\:text_brand\.600:is(:hover, [data-hover]) {
    color: var(--colors-brand-600)
        }

  .hover\:text_gray\.800:is(:hover, [data-hover]) {
    color: var(--colors-gray-800)
        }

  .hover\:text_blue\.800:is(:hover, [data-hover]) {
    color: var(--colors-blue-800)
        }

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

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

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

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

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

  .md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

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

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

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

    .md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }
        }

  @media screen and (min-width: 64em) {
    .lg\:grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
      grid-template-columns: repeat(5, minmax(0, 1fr))
    }
        }
}