soroban-abacus-flashcards/apps/web/styled-system/styles.css

@layer reset, base, tokens, recipes, utilities;

@import './reset.css';

@import './global.css';

@import './tokens/index.css';

@import './tokens/keyframes.css';

@layer utilities {
  .self_start {
    align-self: start
    }

  .max-w_600px {
    max-width: 600px
    }

  .grid-cols_repeat\(auto-fit\,_minmax\(140px\,_1fr\)\) {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
    }

  .p_12px_16px {
    padding: 12px 16px
    }

  .gap_4px {
    gap: 4px
    }

  .fs_11px {
    font-size: 11px
    }

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

  .p_10px_20px {
    padding: 10px 20px
    }

  .max-w_300px {
    max-width: 300px
    }

  .min-w_50px {
    min-width: 50px
    }

  .p_15px_30px {
    padding: 15px 30px
    }

  .box_border-box {
    box-sizing: border-box
    }

  .gap_16px {
    gap: 16px
    }

  .h_10px {
    height: 10px
    }

  .mb_10px {
    margin-bottom: 10px
    }

  .bg_linear-gradient\(90deg\,_\#28a745\,_\#20c997\) {
    background: linear-gradient(90deg, #28a745, #20c997)
    }

  .rounded_5px {
    border-radius: 5px
    }

  .w_0\% {
    width: 0%
    }

  .transition_width_0\.5s_ease {
    transition: width 0.5s ease
    }

  .justify_flex-end {
    justify-content: flex-end
    }

  .rounded_6px {
    border-radius: 6px
    }

  .p_8px_16px {
    padding: 8px 16px
    }

  .transition_background_0\.2s_ease {
    transition: background 0.2s ease
    }

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

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

  .animation_pulse_0\.3s_ease {
    animation: pulse 0.3s ease
    }

  .fs_3rem {
    font-size: 3rem
    }

  .m_20px_0 {
    margin: 20px 0
    }

  .text-shadow_2px_2px_4px_rgba\(0\,0\,0\,0\.1\) {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1)
    }

  .w_min\(90vw\,_800px\) {
    width: min(90vw, 800px)
    }

  .h_min\(70vh\,_600px\) {
    height: min(70vh, 600px)
    }

  .transition_transform_0\.3s_ease {
    transition: transform 0.3s ease
    }

  .transform_scale\(1\.5\) {
    transform: scale(1.5)
    }

  .max-h_60vh {
    max-height: 60vh
    }

  .mb_16px {
    margin-bottom: 16px
    }

  .w_fit-content {
    width: fit-content
    }

  .max-w_200px {
    max-width: 200px
    }

  .transform_rotateY\(0deg\) {
    transform: rotateY(0deg)
    }

  .border_3px_solid_\#28a745 {
    border: 3px solid #28a745
    }

  .p_8px {
    padding: 8px
    }

  .perspective_1000px {
    perspective: 1000px
    }

  .transition_transform_0\.8s {
    transition: transform 0.8s
    }

  .transform-style_preserve-3d {
    transform-style: preserve-3d
    }

  .bg_linear-gradient\(135deg\,_\#6c5ce7\,_\#a29bfe\) {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe)
    }

  .fs_48px {
    font-size: 48px
    }

  .border_3px_solid_\#5f3dc4 {
    border: 3px solid #5f3dc4
    }

  .opacity_0\.8 {
    opacity: 0.8
    }

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

  .backface_hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
    }

  .shadow_0_4px_8px_rgba\(0\,_0\,_0\,_0\.1\) {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
    }

  .transform_rotateY\(180deg\) {
    transform: rotateY(180deg)
    }

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

  .top_8px {
    top: 8px
    }

  .right_8px {
    right: 8px
    }

  .w_32px {
    width: 32px
    }

  .h_32px {
    height: 32px
    }

  .shadow_0_2px_4px_rgba\(0\,_0\,_0\,_0\.2\) {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
    }

  .bottom_8px {
    bottom: 8px
    }

  .left_8px {
    left: 8px
    }

  .p_4px_8px {
    padding: 4px 8px
    }

  .rounded_4px {
    border-radius: 4px
    }

  .bg_rgba\(0\,_0\,_0\,_0\.7\) {
    background: rgba(0, 0, 0, 0.7)
    }

  .fs_12px {
    font-size: 12px
    }

  .mt_12px {
    margin-top: 12px
    }

  .p_8px_12px {
    padding: 8px 12px
    }

  .ml_8px {
    margin-left: 8px
    }

  .font_normal {
    font-weight: var(--font-weights-normal)
    }

  .mb_20px {
    margin-bottom: 20px
    }

  .m_24px_0 {
    margin: 24px 0
    }

  .fs_14px {
    font-size: 14px
    }

  .mb_12px {
    margin-bottom: 12px
    }

  .bg_linear-gradient\(135deg\,_\#f0f8ff\,_\#e6f3ff\) {
    background: linear-gradient(135deg, #f0f8ff, #e6f3ff)
    }

  .bg_linear-gradient\(45deg\,_\#f8d7da\,_\#f1b0b7\) {
    background: linear-gradient(45deg, #f8d7da, #f1b0b7)
    }

  .bg_linear-gradient\(45deg\,_\#d4edda\,_\#c3e6cb\) {
    background: linear-gradient(45deg, #d4edda, #c3e6cb)
    }

  .\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#6c757d\,_\#adb5bd\)::before {
    background: linear-gradient(45deg, #6c757d, #adb5bd)
        }

  .\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#007bff\,_\#4dabf7\)::before {
    background: linear-gradient(45deg, #007bff, #4dabf7)
        }

  .\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#dc3545\,_\#e74c3c\)::before {
    background: linear-gradient(45deg, #dc3545, #e74c3c)
        }

  .\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#28a745\,_\#20c997\)::before {
    background: linear-gradient(45deg, #28a745, #20c997)
        }

  .shadow_0_8px_25px_rgba\(220\,_53\,_69\,_0\.2\) {
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.2)
    }

  .shadow_0_6px_20px_rgba\(0\,_123\,_255\,_0\.15\) {
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15)
    }

  .shadow_0_8px_25px_rgba\(40\,_167\,_69\,_0\.2\) {
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2)
    }

  .min-h_60px {
    min-height: 60px
    }

  .p_16px_20px {
    padding: 16px 20px
    }

  .fs_28px {
    font-size: 28px
    }

  .font_system-ui\,_-apple-system\,_sans-serif {
    font-family: system-ui, -apple-system, sans-serif
    }

  .font_600 {
    font-weight: 600
    }

  .tracking_2px {
    letter-spacing: 2px
    }

  .rounded_16px {
    border-radius: 16px
    }

  .\[\&\:\:before\]\:content_\"\"::before {
    content: ""
        }

  .\[\&\:\:before\]\:pos_absolute::before {
    position: absolute
        }

  .\[\&\:\:before\]\:inset_0::before {
    inset: var(--spacing-0)
        }

  .\[\&\:\:before\]\:rounded_16px::before {
    border-radius: 16px
        }

  .\[\&\:\:before\]\:p_2px::before {
    padding: 2px
        }

  .\[\&\:\:before\]\:mask_linear-gradient\(\#fff_0_0\)_content-box\,_linear-gradient\(\#fff_0_0\)::before {
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
        }

  .\[\&\:\:before\]\:mask-composite_xor::before {
    mask-composite: xor
        }

  .right_-8px {
    right: -8px
    }

  .transform_translateY\(-50\%\) {
    transform: translateY(-50%)
    }

  .w_2px {
    width: 2px
    }

  .h_24px {
    height: 24px
    }

  .bg_\#007bff {
    background: #007bff
    }

  .animation_blink_1s_infinite {
    animation: blink 1s infinite
    }

  .min-h_0 {
    min-height: var(--sizes-0)
    }

  .left_0 {
    left: var(--spacing-0)
    }

  .w_100vw {
    width: 100vw
    }

  .pointer-events_none {
    pointer-events: none
    }

  .z_1000 {
    z-index: 1000
    }

  .top_50\% {
    top: 50%
    }

  .transform_translate\(-50\%\,_-50\%\) {
    transform: translate(-50%, -50%)
    }

  .fs_72px {
    font-size: 72px
    }

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

  .text-shadow_2px_2px_4px_rgba\(0\,_0\,_0\,_0\.3\) {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3)
    }

  .animation_explode_1\.5s_ease-out_forwards {
    animation: explode 1.5s ease-out forwards
    }

  .gap_12px {
    gap: 12px
    }

  .pt_16px {
    padding-top: 16px
    }

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

  .max-w_800px {
    max-width: 800px
    }

  .m_0_auto {
    margin: 0 auto
    }

  .justify_flex-start {
    justify-content: flex-start
    }

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

  .gap_30px {
    gap: 30px
    }

  .mb_30px {
    margin-bottom: 30px
    }

  .w_120px {
    width: 120px
    }

  .h_120px {
    height: 120px
    }

  .rounded_50\% {
    border-radius: 50%
    }

  .bg_linear-gradient\(45deg\,_\#007bff\,_\#0056b3\) {
    background: linear-gradient(45deg, #007bff, #0056b3)
    }

  .fs_24px {
    font-size: 24px
    }

  .gap_20px {
    gap: 20px
    }

  .fs_18px {
    font-size: 18px
    }

  .font_500 {
    font-weight: 500
    }

  .mt_16px {
    margin-top: 16px
    }

  .gap_15px {
    gap: 15px
    }

  .mt_20px {
    margin-top: 20px
    }

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

  .p_12px_24px {
    padding: 12px 24px
    }

  .rounded_8px {
    border-radius: 8px
    }

  .fs_16px {
    font-size: 16px
    }

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

  .from_green\.50 {
    --gradient-from: var(--colors-green-50)
    }

  .to_blue\.50 {
    --gradient-to: var(--colors-blue-50)
    }

  .h_100vh {
    height: 100vh
    }

  .shrink_0 {
    flex-shrink: 0
    }

  .d_inline-flex {
    display: inline-flex
    }

  .shadow_xl {
    box-shadow: var(--shadows-xl)
    }

  .overflow_auto {
    overflow: auto
    }

  .w_600pt {
    width: 600pt
    }

  .h_500pt {
    height: 500pt
    }

  .w_240pt {
    width: 240pt
    }

  .h_320pt {
    height: 320pt
    }

  .from_blue\.50 {
    --gradient-from: var(--colors-blue-50)
    }

  .to_purple\.50 {
    --gradient-to: var(--colors-purple-50)
    }

  .mb_12 {
    margin-bottom: var(--spacing-12)
    }

  .transition_all_0\.3s {
    transition: all 0.3s
    }

  .from_green\.400 {
    --gradient-from: var(--colors-green-400)
    }

  .to_green\.600 {
    --gradient-to: var(--colors-green-600)
    }

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

  .to_purple\.600 {
    --gradient-to: var(--colors-purple-600)
    }

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

  .from_red\.400 {
    --gradient-from: var(--colors-red-400)
    }

  .to_red\.600 {
    --gradient-to: var(--colors-red-600)
    }

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

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

  .w_16 {
    width: var(--sizes-16)
    }

  .h_16 {
    height: var(--sizes-16)
    }

  .from_indigo\.400 {
    --gradient-from: var(--colors-indigo-400)
    }

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

  .ml_2 {
    margin-left: var(--spacing-2)
    }

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

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

  .transform_scale\(2\.5\) {
    transform: scale(2.5)
    }

  .w_80pt {
    width: 80pt
    }

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

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

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

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

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

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

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

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

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

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

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

  .mt_auto {
    margin-top: auto
    }

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

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

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

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

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

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

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

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

  .w_160px {
    width: 160px
    }

  .h_240px {
    height: 240px
    }

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

  .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_indigo\.200 {
    border-color: var(--colors-indigo-200)
    }

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

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

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

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

  .d_inline-block {
    display: inline-block
    }

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

  .h_200pt {
    height: 200pt
    }

  .columns_3 {
    columns: 3
    }

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

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

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

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

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

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

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

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

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

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

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

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

  .py_8 {
    padding-block: var(--spacing-8)
    }

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

  .w_20 {
    width: var(--sizes-20)
    }

  .min-h_300px {
    min-height: 300px
    }

  .max-w_sm {
    max-width: var(--sizes-sm)
    }

  .max-h_400px {
    max-height: 400px
    }

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

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

  .w_200pt {
    width: 200pt
    }

  .h_250pt {
    height: 250pt
    }

  .w_100pt {
    width: 100pt
    }

  .h_120pt {
    height: 120pt
    }

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

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

  .transform_rotate\(180deg\) {
    transform: rotate(180deg)
    }

  .transform_rotate\(0deg\) {
    transform: rotate(0deg)
    }

  .shadow_lg {
    box-shadow: var(--shadows-lg)
    }

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

  .max-w_400px {
    max-width: 400px
    }

  .max-h_80vh {
    max-height: 80vh
    }

  .overflow-y_auto {
    overflow-y: auto
    }

  .after\:w_1\.5::after {
    width: var(--sizes-1\.5)
        }

  .after\:h_1\.5::after {
    height: var(--sizes-1\.5)
        }

  .pos_fixed {
    position: fixed
    }

  .z_40 {
    z-index: 40
    }

  .opacity_0\.9 {
    opacity: 0.9
    }

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

  .w_1px {
    width: 1px
    }

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

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

  .pos_sticky {
    position: sticky
    }

  .top_0 {
    top: var(--spacing-0)
    }

  .z_30 {
    z-index: 30
    }

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

  .text-decor_none {
    text-decoration: none
    }

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

  .mx_auto {
    margin-inline: auto
    }

  .pt_6 {
    padding-top: var(--spacing-6)
    }

  .\[\&\[data-state\=active\]\]\:bg_white[data-state=active] {
    background: var(--colors-white)
        }

  .\[\&\[data-state\=active\]\]\:text_brand\.600[data-state=active] {
    color: var(--colors-brand-600)
        }

  .\[\&\[data-state\=active\]\]\:shadow_card[data-state=active] {
    box-shadow: var(--shadows-card)
        }

  .mt_6 {
    margin-top: var(--spacing-6)
    }

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

  .z_50 {
    z-index: 50
    }

  .touch_none {
    touch-action: none
    }

  .grow_1 {
    flex-grow: 1
    }

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

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

  .bg_gradient-to-r_from-green\.50_to-emerald\.50 {
    background: gradient-to-r from-green.50 to-emerald.50
    }

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

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

  .top_-20px {
    top: -20px
    }

  .right_-20px {
    right: -20px
    }

  .w_40px {
    width: 40px
    }

  .h_40px {
    height: 40px
    }

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

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

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

  .cursor_not-allowed {
    cursor: not-allowed
    }

  .opacity_0\.7 {
    opacity: 0.7
    }

  .opacity_1 {
    opacity: 1
    }

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

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

  .border_white {
    border-color: var(--colors-white)
    }

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

  .pt_4 {
    padding-top: var(--spacing-4)
    }

  .border-t_1px_solid {
    border-top: 1px solid
    }

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

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

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

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

  .top_4 {
    top: var(--spacing-4)
    }

  .right_4 {
    right: var(--spacing-4)
    }

  .opacity_0\.3 {
    opacity: 0.3
    }

  .select_none {
    -webkit-user-select: none;
    user-select: none
    }

  .\[\&\[data-state\=open\]\]\:border_brand\.500[data-state=open] {
    border-color: var(--colors-brand-500)
        }

  .\[\&\[data-state\=open\]\]\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\)[data-state=open] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
        }

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

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

  .shadow_modal {
    box-shadow: var(--shadows-modal)
    }

  .z_999 {
    z-index: 999
    }

  .min-w_320px {
    min-width: 320px
    }

  .max-h_300px {
    max-height: 300px
    }

  .\[\&\[data-state\=checked\]\]\:bg_brand\.100[data-state=checked] {
    background: var(--colors-brand-100)
        }

  .\[\&\[data-state\=checked\]\]\:text_brand\.800[data-state=checked] {
    color: var(--colors-brand-800)
        }

  .pos_popper {
    position: popper
    }

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

  .transform_translateZ\(0\) {
    transform: translateZ(0)
    }

  .bg_gradient-to-r_from-brand\.500_to-brand\.600 {
    background: gradient-to-r from-brand.500 to-brand.600
    }

  .transition_transform_0\.3s_cubic-bezier\(0\.65\,_0\,_0\.35\,_1\) {
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1)
    }

  .origin_left {
    transform-origin: left
    }

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

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

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

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

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

  .w_3 {
    width: var(--sizes-3)
    }

  .h_3 {
    height: var(--sizes-3)
    }

  .animation_pulse {
    animation: var(--animations-pulse)
    }

  .w_2 {
    width: var(--sizes-2)
    }

  .h_2 {
    height: var(--sizes-2)
    }

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

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

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

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

  .w_240 {
    width: 240px
    }

  .w_300 {
    width: 300px
    }

  .h_320 {
    height: 320px
    }

  .h_400 {
    height: 400px
    }

  .h_320px {
    height: 320px
    }

  .h_400px {
    height: 400px
    }

  .p_16px {
    padding: 16px
    }

  .p_20px {
    padding: 20px
    }

  .border_3px_solid {
    border: 3px solid
    }

  .rounded_12px {
    border-radius: 12px
    }

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

  .from_amber\.50 {
    --gradient-from: var(--colors-amber-50)
    }

  .to_orange\.100 {
    --gradient-to: var(--colors-orange-100)
    }

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

  .w_100\% {
    width: 100%
    }

  .h_100\% {
    height: 100%
    }

  .transform_scale\(2\.2\) {
    transform: scale(2.2)
    }

  .transition_all_0\.3s_ease {
    transition: all 0.3s ease
    }

  .\[\&_\[data-bead-type\]\]\:cursor_pointer [data-bead-type] {
    cursor: pointer
        }

  .\[\&_\[data-bead-type\]\]\:transition_all_0\.2s_ease [data-bead-type] {
    transition: all 0.2s ease
        }

  .bottom_-45px {
    bottom: -45px
    }

  .bottom_-55px {
    bottom: -55px
    }

  .w_240px {
    width: 240px
    }

  .w_300px {
    width: 300px
    }

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

  .cursor_default {
    cursor: default
    }

  .shadow_0_4px_12px_rgba\(59\,_130\,_246\,_0\.15\) {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15)
    }

  .ring_none {
    outline: var(--borders-none)
    }

  .bottom_-2px {
    bottom: -2px
    }

  .left_50\% {
    left: 50%
    }

  .transform_translateX\(-50\%\) {
    transform: translateX(-50%)
    }

  .w_80\% {
    width: 80%
    }

  .h_2px {
    height: 2px
    }

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

  .animation_pulse_1s_infinite {
    animation: pulse 1s infinite
    }

  .flex-wrap_nowrap {
    flex-wrap: nowrap
    }

  .min-w_60px {
    min-width: 60px
    }

  .min-w_auto {
    min-width: auto
    }

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

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

  .flex-wrap_wrap {
    flex-wrap: wrap
    }

  .min-w_40px {
    min-width: 40px
    }

  .min-w_32px {
    min-width: 32px
    }

  .px_2 {
    padding-inline: var(--spacing-2)
    }

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

  .transition_all_0\.2s_ease {
    transition: all 0.2s ease
    }

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

  .mt_0 {
    margin-top: var(--spacing-0)
    }

  .max-w_450px {
    max-width: 450px
    }

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

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

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

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

  .w_144pt {
    width: 144pt
    }

  .w_180pt {
    width: 180pt
    }

  .h_192pt {
    height: 192pt
    }

  .h_240pt {
    height: 240pt
    }

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

  .py_1 {
    padding-block: var(--spacing-1)
    }

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

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

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

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

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

  .pos_absolute {
    position: absolute
    }

  .top_2 {
    top: var(--spacing-2)
    }

  .right_2 {
    right: var(--spacing-2)
    }

  .p_1 {
    padding: var(--spacing-1)
    }

  .z_10 {
    z-index: 10
    }

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

  .font_mono {
    font-family: var(--fonts-mono)
    }

  .p_2 {
    padding: var(--spacing-2)
    }

  .transform_scale\(1\.8\) {
    transform: scale(1.8)
    }

  .origin_center {
    transform-origin: center
    }

  .max-w_100\% {
    max-width: 100%
    }

  .max-h_100\% {
    max-height: 100%
    }

  .\[\&_svg\]\:d_block svg {
    display: block
        }

  .w_120pt {
    width: 120pt
    }

  .h_160pt {
    height: 160pt
    }

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

  .justify_space-between {
    justify-content: space-between
    }

  .gap_10px {
    gap: 10px
    }

  .w_4 {
    width: var(--sizes-4)
    }

  .h_4 {
    height: var(--sizes-4)
    }

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

  .mr_2 {
    margin-right: var(--spacing-2)
    }

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

  .gap_1 {
    gap: var(--spacing-1)
    }

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

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

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

  .w_11 {
    width: var(--sizes-11)
    }

  .transform_translateX\(20px\) {
    transform: translateX(20px)
    }

  .transform_translateX\(0px\) {
    transform: translateX(0px)
    }

  .d_block {
    display: block
    }

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

  .transition_transform_0\.2s {
    transition: transform 0.2s
    }

  .will-change_transform {
    will-change: transform
    }

  .w_5 {
    width: var(--sizes-5)
    }

  .h_5 {
    height: var(--sizes-5)
    }

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

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

  .\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
    border-color: var(--colors-brand-600)
        }

  .mt_0\.5 {
    margin-top: var(--spacing-0\.5)
    }

  .pos_relative {
    position: relative
    }

  .after\:content_\"\"::after {
    content: ""
        }

  .after\:d_block::after {
    display: block
        }

  .after\:w_2::after {
    width: var(--sizes-2)
        }

  .after\:h_2::after {
    height: var(--sizes-2)
        }

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

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

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

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

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

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

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

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

  .flex_1 {
    flex: 1 1 0%
    }

  .d_grid {
    display: grid
    }

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

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

  .items_start {
    align-items: start
    }

  .gap_3 {
    gap: var(--spacing-3)
    }

  .flex_row {
    flex-direction: row
    }

  .bg_green\.25 {
    background: green.25
    }

  .\[\&_svg\]\:w_100\%\! svg {
    width: 100% !important
        }

  .\[\&_svg\]\:h_100\%\! svg {
    height: 100% !important
        }

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

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

  .bg_blue\.25 {
    background: blue.25
    }

  .w_6 {
    width: var(--sizes-6)
    }

  .h_6 {
    height: var(--sizes-6)
    }

  .border-t_blue\.500 {
    border-top-color: var(--colors-blue-500)
    }

  .bg_red\.25 {
    background: red.25
    }

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

  .opacity_0\.6 {
    opacity: 0.6
    }

  .overflow_hidden {
    overflow: hidden
    }

  .\[\&_svg\]\:w_100\% svg {
    width: 100%
        }

  .\[\&_svg\]\:h_100\% svg {
    height: 100%
        }

  .\[\&_svg\]\:object_contain svg {
    object-fit: contain
        }

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

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

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

  .\[\&_svg\]\:max-w_100\% svg {
    max-width: 100%
        }

  .\[\&_svg\]\:max-h_100\% svg {
    max-height: 100%
        }

  .\[\&_svg\]\:w_auto svg {
    width: auto
        }

  .\[\&_svg\]\:h_auto svg {
    height: auto
        }

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

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

  .w_8 {
    width: var(--sizes-8)
    }

  .h_8 {
    height: var(--sizes-8)
    }

  .border_2px_solid {
    border: 2px solid
    }

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

  .border-t_blue\.600 {
    border-top-color: var(--colors-blue-600)
    }

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

  .animation_spin_1s_linear_infinite {
    animation: spin 1s linear infinite
    }

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

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

  .mt_1 {
    margin-top: var(--spacing-1)
    }

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

  .h_full {
    height: var(--sizes-full)
    }

  .d_flex {
    display: flex
    }

  .flex_column {
    flex-direction: column
    }

  .items_center {
    align-items: center
    }

  .justify_center {
    justify-content: center
    }

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

  .border_1px_solid {
    border: 1px solid
    }

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

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

  .min-h_200px {
    min-height: 200px
    }

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

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

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

  .text_center {
    text-align: center
    }

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

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

  .px_3 {
    padding-inline: var(--spacing-3)
    }

  .py_2 {
    padding-block: var(--spacing-2)
    }

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

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

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

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

  .border_none {
    border: var(--borders-none)
    }

  .cursor_pointer {
    cursor: pointer
    }

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

  .focus\:ring_2px:is(:focus, [data-focus]) {
    outline: 2px
        }

  .focus\:ring_brand\.500:is(:focus, [data-focus]) {
    outline-color: var(--colors-brand-500)
        }

  .focus\:ring_1px:is(:focus, [data-focus]) {
    outline-offset: 1px
        }

  .focus\:ring_none:is(:focus, [data-focus]) {
    outline: var(--borders-none)
        }

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

  .focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
        }

  .hover\:bg_red\.600:is(:hover, [data-hover]) {
    background: var(--colors-red-600)
        }

  .hover\:bg_blue\.600:is(:hover, [data-hover]) {
    background: var(--colors-blue-600)
        }

  .hover\:bg_green\.600:is(:hover, [data-hover]) {
    background: var(--colors-green-600)
        }

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

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

  .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\:shadow_lg:is(:hover, [data-hover]) {
    box-shadow: var(--shadows-lg)
        }

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

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

  .hover\:border_gray\.300:is(:hover, [data-hover]) {
    border-color: var(--colors-gray-300)
        }

  .hover\:opacity_1:is(:hover, [data-hover]) {
    opacity: 1
        }

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

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

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

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

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

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

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

  .hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
    transform: scale(1.1)
        }

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

  .hover\:shadow_modal:is(:hover, [data-hover]) {
    box-shadow: var(--shadows-modal)
        }

  .hover\:bg_green\.100:is(:hover, [data-hover]) {
    background: var(--colors-green-100)
        }

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

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

  .hover\:shadow_0_12px_32px_rgba\(0\,_0\,_0\,_0\.15\):is(:hover, [data-hover]) {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15)
        }

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

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

  .hover\:bg_blue\.200:is(:hover, [data-hover]) {
    background: var(--colors-blue-200)
        }

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

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

  .\[\&_\[data-bead-type\]\]\:hover\:filter_brightness\(1\.2\) [data-bead-type]:is(:hover, [data-hover]) {
    filter: brightness(1.2)
            }

  .\[\&_\[data-bead-type\]\]\:hover\:transform_scale\(1\.05\) [data-bead-type]:is(:hover, [data-hover]) {
    transform: scale(1.05)
            }

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

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

  .hover\:shadow_card:is(:hover, [data-hover]) {
    box-shadow: var(--shadows-card)
        }

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

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

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

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

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

  .hover\:transform_scale\(1\.02\):is(:hover, [data-hover]) {
    transform: scale(1.02)
        }

  .hover\:opacity_0\.8:is(:hover, [data-hover]) {
    opacity: 0.8
        }

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

  .active\:transform_scale\(0\.95\):is(:active, [data-active]) {
    transform: scale(0.95)
        }

  @media screen and (min-width: 48em) {
    .md\:px_4 {
      padding-inline: var(--spacing-4)
    }

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

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

    .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\:fs_6xl {
      font-size: var(--font-sizes-6xl)
    }

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

    .md\:grid-cols_3,.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 (min-width: 1024px) {
    .\[\@media_\(min-width\:_1024px\)\]\:aspect_3\/4 {
      aspect-ratio: 3/4
    }

    .\[\@media_\(min-width\:_1024px\)\]\:h_120px {
      height: 120px
    }

    .\[\@media_\(min-width\:_1024px\)\]\:min-w_90px {
      min-width: 90px
    }
        }

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

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

  @media (max-width: 768px) {

    .\[\@media_\(max-width\:_768px\)\]\:gap_10px {
      gap: 10px
    }

    .\[\@media_\(max-width\:_768px\)\]\:h_130px {
      height: 130px
    }

    .\[\@media_\(max-width\:_768px\)\]\:min-w_100px {
      min-width: 100px
    }

    .\[\@media_\(max-width\:_768px\)\]\:fs_40px {
      font-size: 40px
    }
        }

  @media (max-width: 480px) {

    .\[\@media_\(max-width\:_480px\)\]\:gap_8px {
      gap: 8px
    }

    .\[\@media_\(max-width\:_480px\)\]\:h_120px {
      height: 120px
    }

    .\[\@media_\(max-width\:_480px\)\]\:min-w_90px {
      min-width: 90px
    }

    .\[\@media_\(max-width\:_480px\)\]\:fs_32px {
      font-size: 32px
    }
        }
}