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

@layer utilities {

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

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

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

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

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

  .w_240 {
    width: 240px
    }

  .w_300 {
    width: 300px
    }

  .h_320 {
    height: 320px
    }

  .h_400 {
    height: 400px
    }

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

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

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

  .overflow_hidden {
    overflow: hidden
    }

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

  .origin_center {
    transform-origin: center
    }

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

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

  .border_2px_solid {
    border: 2px solid
    }

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

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

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

  .pos_relative {
    position: relative
    }

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

  .pos_absolute {
    position: absolute
    }

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

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

  .animation_pulse_1s_infinite {
    animation: pulse 1s infinite
    }

  .flex-wrap_nowrap {
    flex-wrap: nowrap
    }

  .items_center {
    align-items: center
    }

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

  .justify_center {
    justify-content: center
    }

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

  .min-w_auto {
    min-width: auto
    }

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

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

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

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

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

  .flex_column {
    flex-direction: column
    }

  .flex_row {
    flex-direction: row
    }

  .d_flex {
    display: flex
    }

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

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

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

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

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

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

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

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

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

  .cursor_pointer {
    cursor: pointer
    }

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

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

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

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

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

  .text_center {
    text-align: center
    }

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

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

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

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

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

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

  .border_1px_solid {
    border: 1px solid
    }

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

  .w_144pt {
    width: 144pt
    }

  .w_180pt {
    width: 180pt
    }

  .h_192pt {
    height: 192pt
    }

  .h_240pt {
    height: 240pt
    }

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

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