diff --git a/apps/web/styled-system/chunks/src__app__create__page.css b/apps/web/styled-system/chunks/src__app__create__page.css
index 4b654be1..f335d830 100644
--- a/apps/web/styled-system/chunks/src__app__create__page.css
+++ b/apps/web/styled-system/chunks/src__app__create__page.css
@@ -52,8 +52,8 @@
     color: var(--colors-gray-900)
     }
 
-  .fs_lg {
-    font-size: var(--font-sizes-lg)
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
     }
 
   .text_gray\.600 {
@@ -64,10 +64,103 @@
     background: var(--colors-white)
     }
 
+  .p_6 {
+    padding: var(--spacing-6)
+    }
+
+  .border-t_1px_solid {
+    border-top: 1px solid
+    }
+
+  .border_gray\.200 {
+    border-color: var(--colors-gray-200)
+    }
+
+  .pt_6 {
+    padding-top: var(--spacing-6)
+    }
+
+  .mb_4 {
+    margin-bottom: var(--spacing-4)
+    }
+
+  .cursor_not-allowed {
+    cursor: not-allowed
+    }
+
+  .cursor_pointer {
+    cursor: pointer
+    }
+
+  .opacity_0\.7 {
+    opacity: 0.7
+    }
+
+  .opacity_1 {
+    opacity: 1
+    }
+    .hover\:bg_brand\.700:is(:hover, [data-hover]) {
+      background: var(--colors-brand-700)
+        }
+    .hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
+      transform: translateY(-1px)
+        }
+    .hover\:shadow_modal:is(:hover, [data-hover]) {
+      box-shadow: var(--shadows-modal)
+        }
+
+  .w_full {
+    width: var(--sizes-full)
+    }
+
+  .px_6 {
+    padding-inline: var(--spacing-6)
+    }
+
+  .bg_brand\.600 {
+    background: var(--colors-brand-600)
+    }
+
+  .fs_lg {
+    font-size: var(--font-sizes-lg)
+    }
+
+  .rounded_xl {
+    border-radius: var(--radii-xl)
+    }
+
   .shadow_card {
     box-shadow: var(--shadows-card)
     }
 
+  .w_5 {
+    width: var(--sizes-5)
+    }
+
+  .h_5 {
+    height: var(--sizes-5)
+    }
+
+  .border_2px_solid {
+    border: 2px solid
+    }
+
+  .border_white {
+    border-color: var(--colors-white)
+    }
+
+  .border-t_transparent {
+    border-top-color: var(--colors-transparent)
+    }
+
+  .rounded_full {
+    border-radius: var(--radii-full)
+    }
+
+  .animation_spin_1s_linear_infinite {
+    animation: spin 1s linear infinite
+    }
+
   .bg_red\.50 {
     background: var(--colors-red-50)
     }
@@ -88,6 +181,10 @@
     padding: var(--spacing-8)
     }
 
+  .mt_8 {
+    margin-top: var(--spacing-8)
+    }
+
   .fs_2xl {
     font-size: var(--font-sizes-2xl)
     }
@@ -174,6 +271,10 @@
     gap: 10px
     }
 
+  .justify_center {
+    justify-content: center
+    }
+
   .items_center {
     align-items: center
     }
@@ -198,6 +299,10 @@
     text-align: center
     }
 
+  .gap_1 {
+    gap: var(--spacing-1)
+    }
+
   .gap_6 {
     gap: var(--spacing-6)
     }
@@ -237,8 +342,11 @@
   .hover\:bg_red\.700:is(:hover, [data-hover]) {
     background: var(--colors-red-700)
         }
+    @media screen and (min-width: 64em) {
 
-  @media screen and (min-width: 64em) {
+  .lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(3, minmax(0, 1fr))
+    }
     .lg\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(2, minmax(0, 1fr))
     }
diff --git a/apps/web/styled-system/chunks/src__app__games__memory-quiz__page.css b/apps/web/styled-system/chunks/src__app__games__memory-quiz__page.css
new file mode 100644
index 00000000..07381dc9
--- /dev/null
+++ b/apps/web/styled-system/chunks/src__app__games__memory-quiz__page.css
@@ -0,0 +1,752 @@
+@layer utilities {
+
+  .max-w_600px {
+    max-width: 600px
+    }
+
+  .gap_12px {
+    gap: 12px
+    }
+
+  .p_12px_16px {
+    padding: 12px 16px
+    }
+
+  .gap_4px {
+    gap: 4px
+    }
+    .hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
+      transform: translateY(-1px)
+        }
+
+  .fs_11px {
+    font-size: 11px
+    }
+
+  .border_blue\.500 {
+    border-color: var(--colors-blue-500)
+    }
+
+  .border_gray\.300 {
+    border-color: var(--colors-gray-300)
+    }
+    .hover\:bg_gray\.50:is(:hover, [data-hover]) {
+      background: var(--colors-gray-50)
+        }
+
+  .p_10px_20px {
+    padding: 10px 20px
+    }
+    .hover\:border_blue\.400:is(:hover, [data-hover]) {
+      border-color: var(--colors-blue-400)
+        }
+
+  .d_block {
+    display: block
+    }
+
+  .flex_1 {
+    flex: 1 1 0%
+    }
+
+  .max-w_300px {
+    max-width: 300px
+    }
+
+  .min-w_50px {
+    min-width: 50px
+    }
+
+  .p_15px_30px {
+    padding: 15px 30px
+    }
+
+  .min-h_100vh {
+    min-height: 100vh
+    }
+
+  .box_border-box {
+    box-sizing: border-box
+    }
+
+  .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
+    }
+
+  .top_-20px {
+    top: -20px
+    }
+
+  .right_20px {
+    right: 20px
+    }
+
+  .bg_red\.500 {
+    background: var(--colors-red-500)
+    }
+
+  .rounded_6px {
+    border-radius: 6px
+    }
+
+  .transition_background_0\.2s_ease {
+    transition: background 0.2s ease
+    }
+    .hover\:bg_red\.600:is(:hover, [data-hover]) {
+      background: var(--colors-red-600)
+        }
+
+  .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
+    }
+
+  .text-shadow_2px_2px_4px_rgba\(0\,0\,0\,0\.1\) {
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1)
+    }
+
+  .w_min\(85vw\,_700px\) {
+    width: min(85vw, 700px)
+    }
+
+  .h_min\(50vh\,_400px\) {
+    height: min(50vh, 400px)
+    }
+
+  .transition_transform_0\.3s_ease {
+    transition: transform 0.3s ease
+    }
+    .\[\&_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
+        }
+
+  .mt_32px {
+    margin-top: 32px
+    }
+
+  .border_2px_solid {
+    border: 2px solid
+    }
+
+  .font_600 {
+    font-weight: 600
+    }
+
+  .d_grid {
+    display: grid
+    }
+
+  .grid-cols_repeat\(auto-fit\,_minmax\(140px\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
+    }
+
+  .gap_16px {
+    gap: 16px
+    }
+
+  .max-w_800px {
+    max-width: 800px
+    }
+
+  .perspective_1000px {
+    perspective: 1000px
+    }
+
+  .h_180px {
+    height: 180px
+    }
+
+  .transform_rotateY\(0deg\) {
+    transform: rotateY(0deg)
+    }
+
+  .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
+    }
+
+  .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)
+    }
+
+  .border_3px_solid_\#28a745 {
+    border: 3px solid #28a745
+    }
+
+  .transform_rotateY\(180deg\) {
+    transform: rotateY(180deg)
+    }
+
+  .w_100\% {
+    width: 100%
+    }
+
+  .h_100\% {
+    height: 100%
+    }
+
+  .mb_20px {
+    margin-bottom: 20px
+    }
+
+  .fs_14px {
+    font-size: 14px
+    }
+
+  .pos_relative {
+    position: relative
+    }
+
+  .m_40px_0 {
+    margin: 40px 0
+    }
+
+  .mb_15px {
+    margin-bottom: 15px
+    }
+
+  .font_normal {
+    font-weight: var(--font-weights-normal)
+    }
+
+  .text_gray\.500 {
+    color: var(--colors-gray-500)
+    }
+
+  .bg_gray\.200 {
+    background: var(--colors-gray-200)
+    }
+
+  .bg_linear-gradient\(135deg\,_\#f8f9fa\,_\#e9ecef\) {
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef)
+    }
+
+  .bg_linear-gradient\(45deg\,_\#f8d7da\,_\#f1b0b7\) {
+    background: linear-gradient(45deg, #f8d7da, #f1b0b7)
+    }
+
+  .bg_linear-gradient\(45deg\,_\#d4edda\,_\#c3e6cb\) {
+    background: linear-gradient(45deg, #d4edda, #c3e6cb)
+    }
+
+  .border_2px_solid_\#6c757d {
+    border: 2px solid #6c757d
+    }
+
+  .border_3px_solid_\#adb5bd {
+    border: 3px solid #adb5bd
+    }
+
+  .border_2px_solid_\#dc3545 {
+    border: 2px solid #dc3545
+    }
+
+  .border_2px_solid_\#28a745 {
+    border: 2px solid #28a745
+    }
+
+  .shadow_0_0_20px_rgba\(220\,_53\,_69\,_0\.3\) {
+    box-shadow: 0 0 20px rgba(220, 53, 69, 0.3)
+    }
+
+  .shadow_0_4px_6px_rgba\(0\,_0\,_0\,_0\.1\) {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
+    }
+
+  .shadow_0_0_20px_rgba\(40\,_167\,_69\,_0\.3\) {
+    box-shadow: 0 0 20px rgba(40, 167, 69, 0.3)
+    }
+
+  .cursor_not-allowed {
+    cursor: not-allowed
+    }
+
+  .cursor_default {
+    cursor: default
+    }
+
+  .min-h_80px {
+    min-height: 80px
+    }
+
+  .p_24px {
+    padding: 24px
+    }
+
+  .fs_36px {
+    font-size: 36px
+    }
+
+  .font_Courier_New\,_Monaco\,_monospace {
+    font-family: Courier New, Monaco, monospace
+    }
+
+  .tracking_4px {
+    letter-spacing: 4px
+    }
+
+  .transition_all_0\.3s_ease {
+    transition: all 0.3s ease
+    }
+
+  .opacity_1 {
+    opacity: 1
+    }
+
+  .flex-wrap_wrap {
+    flex-wrap: wrap
+    }
+
+  .m_20px_0 {
+    margin: 20px 0
+    }
+
+  .min-h_60px {
+    min-height: 60px
+    }
+
+  .p_15px {
+    padding: 15px
+    }
+
+  .p_8px_16px {
+    padding: 8px 16px
+    }
+
+  .rounded_20px {
+    border-radius: 20px
+    }
+
+  .animation_fadeInScale_0\.3s_ease {
+    animation: fadeInScale 0.3s ease
+    }
+
+  .pos_fixed {
+    position: fixed
+    }
+
+  .top_0 {
+    top: var(--spacing-0)
+    }
+
+  .left_0 {
+    left: var(--spacing-0)
+    }
+
+  .w_100vw {
+    width: 100vw
+    }
+
+  .h_100vh {
+    height: 100vh
+    }
+
+  .pointer-events_none {
+    pointer-events: none
+    }
+
+  .z_1000 {
+    z-index: 1000
+    }
+
+  .pos_absolute {
+    position: absolute
+    }
+
+  .top_50\% {
+    top: 50%
+    }
+
+  .left_50\% {
+    left: 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
+    }
+
+  .bg_blue\.500 {
+    background: var(--colors-blue-500)
+    }
+    .hover\:bg_blue\.600:is(:hover, [data-hover]) {
+      background: var(--colors-blue-600)
+        }
+
+  .p_40px_20px {
+    padding: 40px 20px
+    }
+
+  .max-w_700px {
+    max-width: 700px
+    }
+
+  .m_0_auto {
+    margin: 0 auto
+    }
+
+  .text_gray\.800 {
+    color: var(--colors-gray-800)
+    }
+
+  .gap_30px {
+    gap: 30px
+    }
+
+  .mb_30px {
+    margin-bottom: 30px
+    }
+
+  .p_20px {
+    padding: 20px
+    }
+
+  .bg_gray\.50 {
+    background: var(--colors-gray-50)
+    }
+
+  .rounded_12px {
+    border-radius: 12px
+    }
+
+  .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
+    }
+
+  .flex_column {
+    flex-direction: column
+    }
+
+  .gap_10px {
+    gap: 10px
+    }
+
+  .gap_20px {
+    gap: 20px
+    }
+
+  .fs_18px {
+    font-size: 18px
+    }
+
+  .mt_16px {
+    margin-top: 16px
+    }
+
+  .mb_16px {
+    margin-bottom: 16px
+    }
+
+  .text_gray\.700 {
+    color: var(--colors-gray-700)
+    }
+
+  .bg_green\.50 {
+    background: var(--colors-green-50)
+    }
+
+  .bg_red\.50 {
+    background: var(--colors-red-50)
+    }
+
+  .border_green\.200 {
+    border-color: var(--colors-green-200)
+    }
+
+  .border_red\.200 {
+    border-color: var(--colors-red-200)
+    }
+
+  .m_8px_0 {
+    margin: 8px 0
+    }
+
+  .p_8px {
+    padding: 8px
+    }
+
+  .rounded_4px {
+    border-radius: 4px
+    }
+
+  .justify_space-between {
+    justify-content: space-between
+    }
+
+  .font_500 {
+    font-weight: 500
+    }
+
+  .d_flex {
+    display: flex
+    }
+
+  .justify_center {
+    justify-content: center
+    }
+
+  .gap_15px {
+    gap: 15px
+    }
+
+  .mt_20px {
+    margin-top: 20px
+    }
+
+  .bg_green\.500 {
+    background: var(--colors-green-500)
+    }
+    .hover\:bg_green\.600:is(:hover, [data-hover]) {
+      background: var(--colors-green-600)
+        }
+
+  .p_12px_24px {
+    padding: 12px 24px
+    }
+
+  .border_none {
+    border: var(--borders-none)
+    }
+
+  .rounded_8px {
+    border-radius: 8px
+    }
+
+  .fs_16px {
+    font-size: 16px
+    }
+
+  .font_bold {
+    font-weight: var(--font-weights-bold)
+    }
+
+  .cursor_pointer {
+    cursor: pointer
+    }
+
+  .transition_all_0\.2s_ease {
+    transition: all 0.2s ease
+    }
+
+  .bg_gray\.500 {
+    background: var(--colors-gray-500)
+    }
+
+  .text_white {
+    color: var(--colors-white)
+    }
+    .hover\:bg_gray\.600:is(:hover, [data-hover]) {
+      background: var(--colors-gray-600)
+        }
+
+  .min-h_screen {
+    min-height: 100vh
+    }
+
+  .bg_gradient-to-br {
+    background: gradient-to-br
+    }
+
+  .from_green\.50 {
+    --gradient-from: var(--colors-green-50)
+    }
+
+  .to_blue\.50 {
+    --gradient-to: var(--colors-blue-50)
+    }
+
+  .py_4 {
+    padding-block: var(--spacing-4)
+    }
+
+  .max-w_6xl {
+    max-width: var(--sizes-6xl)
+    }
+
+  .mx_auto {
+    margin-inline: auto
+    }
+
+  .px_4 {
+    padding-inline: var(--spacing-4)
+    }
+
+  .text_center {
+    text-align: center
+    }
+
+  .mb_6 {
+    margin-bottom: var(--spacing-6)
+    }
+
+  .d_inline-flex {
+    display: inline-flex
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .text_gray\.600 {
+    color: var(--colors-gray-600)
+    }
+
+  .text-decor_none {
+    text-decoration: none
+    }
+
+  .mb_4 {
+    margin-bottom: var(--spacing-4)
+    }
+    .hover\:text_gray\.800:is(:hover, [data-hover]) {
+      color: var(--colors-gray-800)
+        }
+
+  .bg_white {
+    background: var(--colors-white)
+    }
+
+  .rounded_xl {
+    border-radius: var(--radii-xl)
+    }
+
+  .shadow_xl {
+    box-shadow: var(--shadows-xl)
+    }
+
+  .overflow_hidden {
+    overflow: hidden
+    }
+
+  .border_1px_solid {
+    border: 1px solid
+    }
+
+  .border_gray\.200 {
+    border-color: var(--colors-gray-200)
+    }
+
+  .w_280 {
+    width: 280px
+    }
+
+  .h_360 {
+    height: 360px
+    }
+
+  .w_120 {
+    width: 120px
+    }
+
+  .h_160 {
+    height: 160px
+    }
+
+  .color-scheme_place-value {
+    color-scheme: place-value
+    }
+    @media screen and (min-width: 48em) {
+
+  .md\:px_6 {
+      padding-inline: var(--spacing-6)
+    }
+        }
+}
\ No newline at end of file
diff --git a/apps/web/styled-system/chunks/src__app__games__page.css b/apps/web/styled-system/chunks/src__app__games__page.css
new file mode 100644
index 00000000..4739fc88
--- /dev/null
+++ b/apps/web/styled-system/chunks/src__app__games__page.css
@@ -0,0 +1,362 @@
+@layer utilities {
+  .min-h_screen {
+    min-height: 100vh
+    }
+
+  .from_blue\.50 {
+    --gradient-from: var(--colors-blue-50)
+    }
+
+  .to_purple\.50 {
+    --gradient-to: var(--colors-purple-50)
+    }
+
+  .py_8 {
+    padding-block: var(--spacing-8)
+    }
+
+  .max-w_6xl {
+    max-width: var(--sizes-6xl)
+    }
+
+  .px_4 {
+    padding-inline: var(--spacing-4)
+    }
+
+  .mb_12 {
+    margin-bottom: var(--spacing-12)
+    }
+
+  .fs_3xl {
+    font-size: var(--font-sizes-3xl)
+    }
+
+  .fs_xl {
+    font-size: var(--font-sizes-xl)
+    }
+
+  .max-w_2xl {
+    max-width: var(--sizes-2xl)
+    }
+
+  .mx_auto {
+    margin-inline: auto
+    }
+
+  .d_block {
+    display: block
+    }
+
+  .transition_all_0\.3s {
+    transition: all 0.3s
+    }
+    .hover\:transform_translateY\(-4px\):is(:hover, [data-hover]) {
+      transform: translateY(-4px)
+        }
+
+  .h_full {
+    height: var(--sizes-full)
+    }
+
+  .from_green\.400 {
+    --gradient-from: var(--colors-green-400)
+    }
+
+  .to_green\.600 {
+    --gradient-to: var(--colors-green-600)
+    }
+
+  .bg_blue\.100 {
+    background: var(--colors-blue-100)
+    }
+
+  .text_blue\.700 {
+    color: var(--colors-blue-700)
+    }
+
+  .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)
+    }
+
+  .text_purple\.700 {
+    color: var(--colors-purple-700)
+    }
+
+  .bg_gray\.100 {
+    background: var(--colors-gray-100)
+    }
+
+  .text_gray\.700 {
+    color: var(--colors-gray-700)
+    }
+
+  .from_red\.400 {
+    --gradient-from: var(--colors-red-400)
+    }
+
+  .to_red\.600 {
+    --gradient-to: var(--colors-red-600)
+    }
+
+  .bg_red\.100 {
+    background: var(--colors-red-100)
+    }
+
+  .text_red\.700 {
+    color: var(--colors-red-700)
+    }
+
+  .bg_yellow\.100 {
+    background: var(--colors-yellow-100)
+    }
+
+  .text_yellow\.700 {
+    color: var(--colors-yellow-700)
+    }
+
+  .shadow_lg {
+    box-shadow: var(--shadows-lg)
+    }
+
+  .border_1px_solid {
+    border: 1px solid
+    }
+
+  .border_gray\.200 {
+    border-color: var(--colors-gray-200)
+    }
+
+  .opacity_0\.6 {
+    opacity: 0.6
+    }
+
+  .w_16 {
+    width: var(--sizes-16)
+    }
+
+  .h_16 {
+    height: var(--sizes-16)
+    }
+
+  .bg_gradient-to-br {
+    background: gradient-to-br
+    }
+
+  .from_indigo\.400 {
+    --gradient-from: var(--colors-indigo-400)
+    }
+
+  .to_indigo\.600 {
+    --gradient-to: var(--colors-indigo-600)
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .justify_center {
+    justify-content: center
+    }
+
+  .text_gray\.900 {
+    color: var(--colors-gray-900)
+    }
+
+  .mb_3 {
+    margin-bottom: var(--spacing-3)
+    }
+
+  .text_orange\.600 {
+    color: var(--colors-orange-600)
+    }
+
+  .ml_2 {
+    margin-left: var(--spacing-2)
+    }
+
+  .bg_orange\.100 {
+    background: var(--colors-orange-100)
+    }
+
+  .px_2 {
+    padding-inline: var(--spacing-2)
+    }
+
+  .rounded_md {
+    border-radius: var(--radii-md)
+    }
+
+  .leading_relaxed {
+    line-height: var(--line-heights-relaxed)
+    }
+
+  .d_flex {
+    display: flex
+    }
+
+  .gap_2 {
+    gap: var(--spacing-2)
+    }
+
+  .flex-wrap_wrap {
+    flex-wrap: wrap
+    }
+
+  .bg_indigo\.100 {
+    background: var(--colors-indigo-100)
+    }
+
+  .text_indigo\.700 {
+    color: var(--colors-indigo-700)
+    }
+
+  .px_3 {
+    padding-inline: var(--spacing-3)
+    }
+
+  .py_1 {
+    padding-block: var(--spacing-1)
+    }
+
+  .bg_green\.100 {
+    background: var(--colors-green-100)
+    }
+
+  .text_green\.700 {
+    color: var(--colors-green-700)
+    }
+
+  .rounded_full {
+    border-radius: var(--radii-full)
+    }
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
+    }
+
+  .font_medium {
+    font-weight: var(--font-weights-medium)
+    }
+
+  .mt_16 {
+    margin-top: var(--spacing-16)
+    }
+
+  .text_center {
+    text-align: center
+    }
+
+  .bg_white {
+    background: var(--colors-white)
+    }
+
+  .rounded_xl {
+    border-radius: var(--radii-xl)
+    }
+
+  .p_8 {
+    padding: var(--spacing-8)
+    }
+
+  .shadow_sm {
+    box-shadow: var(--shadows-sm)
+    }
+
+  .fs_2xl {
+    font-size: var(--font-sizes-2xl)
+    }
+
+  .font_bold {
+    font-weight: var(--font-weights-bold)
+    }
+
+  .mb_4 {
+    margin-bottom: var(--spacing-4)
+    }
+
+  .text_gray\.600 {
+    color: var(--colors-gray-600)
+    }
+
+  .mb_6 {
+    margin-bottom: var(--spacing-6)
+    }
+
+  .d_inline-block {
+    display: inline-block
+    }
+
+  .px_6 {
+    padding-inline: var(--spacing-6)
+    }
+
+  .py_3 {
+    padding-block: var(--spacing-3)
+    }
+
+  .bg_blue\.600 {
+    background: var(--colors-blue-600)
+    }
+
+  .text_white {
+    color: var(--colors-white)
+    }
+
+  .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)
+    }
+    .hover\:bg_blue\.700:is(:hover, [data-hover]) {
+      background: var(--colors-blue-700)
+        }
+    .hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
+      transform: translateY(-1px)
+        }
+
+  .d_grid {
+    display: grid
+    }
+
+  .grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(1, minmax(0, 1fr))
+    }
+
+  .gap_8 {
+    gap: var(--spacing-8)
+    }
+    @media screen and (min-width: 48em) {
+
+  .md\:px_6 {
+      padding-inline: var(--spacing-6)
+    }
+
+  .md\:fs_5xl {
+      font-size: var(--font-sizes-5xl)
+    }
+
+  .md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(2, minmax(0, 1fr))
+    }
+        }
+}
\ No newline at end of file
diff --git a/apps/web/styled-system/chunks/src__app__guide__page.css b/apps/web/styled-system/chunks/src__app__guide__page.css
new file mode 100644
index 00000000..c34116fa
--- /dev/null
+++ b/apps/web/styled-system/chunks/src__app__guide__page.css
@@ -0,0 +1,664 @@
+@layer utilities {
+  .min-h_100vh {
+    min-height: 100vh
+    }
+
+  .pos_sticky {
+    position: sticky
+    }
+
+  .top_0 {
+    top: var(--spacing-0)
+    }
+
+  .z_10 {
+    z-index: 10
+    }
+
+  .text_brand\.800 {
+    color: var(--colors-brand-800)
+    }
+
+  .py_2 {
+    padding-block: var(--spacing-2)
+    }
+
+  .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)
+    }
+    .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)
+        }
+
+  .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
+    }
+
+  .border_gray\.300 {
+    border-color: var(--colors-gray-300)
+    }
+
+  .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
+    }
+
+  .mb_1 {
+    margin-bottom: var(--spacing-1)
+    }
+
+  .bg_blue\.50 {
+    background: var(--colors-blue-50)
+    }
+
+  .text_blue\.800 {
+    color: var(--colors-blue-800)
+    }
+
+  .border_blue\.300 {
+    border-color: var(--colors-blue-300)
+    }
+
+  .w_100\% {
+    width: 100%
+    }
+
+  .aspect_3\/4 {
+    aspect-ratio: 3/4
+    }
+
+  .max-w_180px {
+    max-width: 180px
+    }
+
+  .bg_gray\.50 {
+    background: var(--colors-gray-50)
+    }
+
+  .border_blue\.200 {
+    border-color: var(--colors-blue-200)
+    }
+
+  .rounded_md {
+    border-radius: var(--radii-md)
+    }
+
+  .overflow_hidden {
+    overflow: hidden
+    }
+
+  .w_full {
+    width: var(--sizes-full)
+    }
+
+  .h_full {
+    height: var(--sizes-full)
+    }
+    .\[\&_svg\]\:w_100\% svg {
+      width: 100%
+        }
+    .\[\&_svg\]\:h_100\% svg {
+      height: 100%
+        }
+    .\[\&_svg\]\:object_contain svg {
+      object-fit: contain
+        }
+
+  .fs_xs {
+    font-size: var(--font-sizes-xs)
+    }
+
+  .text_blue\.700 {
+    color: var(--colors-blue-700)
+    }
+
+  .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)
+    }
+
+  .justify_center {
+    justify-content: center
+    }
+
+  .text_gray\.900 {
+    color: var(--colors-gray-900)
+    }
+
+  .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)
+    }
+
+  .leading_relaxed {
+    line-height: var(--line-heights-relaxed)
+    }
+
+  .bg_blue\.600 {
+    background: var(--colors-blue-600)
+    }
+
+  .text_blue\.600 {
+    color: 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)
+    }
+
+  .text_red\.600 {
+    color: var(--colors-red-600)
+    }
+
+  .pl_6 {
+    padding-left: var(--spacing-6)
+    }
+
+  .space_y-2 {
+    space: y-2
+    }
+
+  .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)
+    }
+
+  .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)
+    }
+    .hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
+      transform: translateY(-1px)
+        }
+    .hover\:shadow_lg:is(:hover, [data-hover]) {
+      box-shadow: var(--shadows-lg)
+        }
+
+  .w_120 {
+    width: 120px
+    }
+
+  .h_336 {
+    height: 336px
+    }
+
+  .w_180 {
+    width: 180px
+    }
+
+  .h_240 {
+    height: 240px
+    }
+
+  .color-scheme_place-value {
+    color-scheme: place-value
+    }
+
+  .w_80 {
+    width: var(--sizes-80)
+    }
+
+  .h_120 {
+    height: 120px
+    }
+
+  .py_4 {
+    padding-block: var(--spacing-4)
+    }
+
+  .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)
+    }
+
+  .justify_space-between {
+    justify-content: space-between
+    }
+
+  .gap_10px {
+    gap: 10px
+    }
+
+  .gap_3 {
+    gap: var(--spacing-3)
+    }
+
+  .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)
+    }
+    @media screen and (min-width: 48em) {
+
+  .md\:p_8 {
+      padding: var(--spacing-8)
+    }
+
+  .md\:fs_3xl {
+      font-size: var(--font-sizes-3xl)
+    }
+        }
+    @media screen and (min-width: 64em) {
+
+  .lg\:grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(5, minmax(0, 1fr))
+    }
+        }
+    @media screen and (min-width: 48em) {
+
+  .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))
+    }
+        }
+}
\ No newline at end of file
diff --git a/apps/web/styled-system/chunks/src__app__page.css b/apps/web/styled-system/chunks/src__app__page.css
index 81511eb6..fd3a4680 100644
--- a/apps/web/styled-system/chunks/src__app__page.css
+++ b/apps/web/styled-system/chunks/src__app__page.css
@@ -23,6 +23,9 @@
   .text_brand\.800 {
     color: var(--colors-brand-800)
     }
+    .hover\:bg_brand\.50:is(:hover, [data-hover]) {
+      background: var(--colors-brand-50)
+        }
 
   .py_2 {
     padding-block: var(--spacing-2)
@@ -278,6 +281,7 @@
   .md\:px_6 {
       padding-inline: var(--spacing-6)
     }
+
     .md\:fs_6xl {
       font-size: var(--font-sizes-6xl)
     }
diff --git a/apps/web/styled-system/chunks/src__components__ConfigurationFormWithoutGenerate.css b/apps/web/styled-system/chunks/src__components__ConfigurationFormWithoutGenerate.css
new file mode 100644
index 00000000..cefd4dd0
--- /dev/null
+++ b/apps/web/styled-system/chunks/src__components__ConfigurationFormWithoutGenerate.css
@@ -0,0 +1,366 @@
+@layer utilities {
+  .fs_2xl {
+    font-size: var(--font-sizes-2xl)
+    }
+
+  .font_bold {
+    font-weight: var(--font-weights-bold)
+    }
+
+  .bg_gray\.100 {
+    background: var(--colors-gray-100)
+    }
+
+  .p_1 {
+    padding: var(--spacing-1)
+    }
+    .hover\:text_gray\.900:is(:hover, [data-hover]) {
+      color: var(--colors-gray-900)
+        }
+    .\[\&\[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)
+        }
+
+  .mr_2 {
+    margin-right: var(--spacing-2)
+    }
+
+  .mt_6 {
+    margin-top: var(--spacing-6)
+    }
+
+  .p_4 {
+    padding: var(--spacing-4)
+    }
+
+  .bg_blue\.50 {
+    background: var(--colors-blue-50)
+    }
+
+  .border_blue\.200 {
+    border-color: var(--colors-blue-200)
+    }
+
+  .fs_md {
+    font-size: var(--font-sizes-md)
+    }
+
+  .text_blue\.800 {
+    color: var(--colors-blue-800)
+    }
+
+  .text_blue\.700 {
+    color: var(--colors-blue-700)
+    }
+
+  .font_semibold {
+    font-weight: var(--font-weights-semibold)
+    }
+
+  .bg_gray\.300 {
+    background: var(--colors-gray-300)
+    }
+    .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)
+        }
+
+  .w_11 {
+    width: var(--sizes-11)
+    }
+
+  .h_6 {
+    height: var(--sizes-6)
+    }
+
+  .transform_translateX\(20px\) {
+    transform: translateX(20px)
+    }
+
+  .transform_translateX\(0px\) {
+    transform: translateX(0px)
+    }
+
+  .transition_transform_0\.2s {
+    transition: transform 0.2s
+    }
+
+  .will-change_transform {
+    will-change: transform
+    }
+    .hover\:border_brand\.400:is(:hover, [data-hover]) {
+      border-color: var(--colors-brand-400)
+        }
+    .\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
+      border-color: var(--colors-brand-600)
+        }
+
+  .justify_center {
+    justify-content: center
+    }
+    .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)
+        }
+
+  .text_gray\.900 {
+    color: var(--colors-gray-900)
+    }
+
+  .fs_xs {
+    font-size: var(--font-sizes-xs)
+    }
+
+  .rounded_xl {
+    border-radius: var(--radii-xl)
+    }
+
+  .shadow_modal {
+    box-shadow: var(--shadows-modal)
+    }
+
+  .border_gray\.200 {
+    border-color: var(--colors-gray-200)
+    }
+
+  .p_2 {
+    padding: var(--spacing-2)
+    }
+
+  .z_50 {
+    z-index: 50
+    }
+
+  .px_3 {
+    padding-inline: var(--spacing-3)
+    }
+
+  .py_2 {
+    padding-block: var(--spacing-2)
+    }
+    .hover\:bg_brand\.50:is(:hover, [data-hover]) {
+      background: var(--colors-brand-50)
+        }
+    .\[\&\[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)
+        }
+
+  .font_medium {
+    font-weight: var(--font-weights-medium)
+    }
+
+  .text_brand\.600 {
+    color: var(--colors-brand-600)
+    }
+
+  .text_gray\.600 {
+    color: var(--colors-gray-600)
+    }
+
+  .select_none {
+    -webkit-user-select: none;
+    user-select: none
+    }
+
+  .touch_none {
+    touch-action: none
+    }
+
+  .bg_gray\.200 {
+    background: var(--colors-gray-200)
+    }
+
+  .pos_relative {
+    position: relative
+    }
+
+  .grow_1 {
+    flex-grow: 1
+    }
+
+  .h_2 {
+    height: var(--sizes-2)
+    }
+
+  .pos_absolute {
+    position: absolute
+    }
+
+  .bg_brand\.600 {
+    background: var(--colors-brand-600)
+    }
+
+  .h_full {
+    height: var(--sizes-full)
+    }
+
+  .d_block {
+    display: block
+    }
+
+  .w_5 {
+    width: var(--sizes-5)
+    }
+
+  .h_5 {
+    height: var(--sizes-5)
+    }
+
+  .shadow_card {
+    box-shadow: var(--shadows-card)
+    }
+
+  .rounded_full {
+    border-radius: var(--radii-full)
+    }
+
+  .border_2px_solid {
+    border: 2px solid
+    }
+
+  .border_brand\.600 {
+    border-color: var(--colors-brand-600)
+    }
+
+  .cursor_pointer {
+    cursor: pointer
+    }
+    .hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
+      transform: scale(1.1)
+        }
+
+  .w_full {
+    width: var(--sizes-full)
+    }
+
+  .px_4 {
+    padding-inline: var(--spacing-4)
+    }
+
+  .py_3 {
+    padding-block: var(--spacing-3)
+    }
+
+  .bg_white {
+    background: var(--colors-white)
+    }
+
+  .border_1px_solid {
+    border: 1px solid
+    }
+
+  .border_gray\.300 {
+    border-color: var(--colors-gray-300)
+    }
+
+  .rounded_lg {
+    border-radius: var(--radii-lg)
+    }
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
+    }
+
+  .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)
+    }
+    .hover\:border_gray\.400:is(:hover, [data-hover]) {
+      border-color: var(--colors-gray-400)
+        }
+    .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)
+        }
+
+  .gap_6 {
+    gap: var(--spacing-6)
+    }
+
+  .gap_2 {
+    gap: var(--spacing-2)
+    }
+
+  .gap_1 {
+    gap: var(--spacing-1)
+    }
+
+  .flex_1 {
+    flex: 1 1 0%
+    }
+
+  .flex_column {
+    flex-direction: column
+    }
+
+  .d_grid {
+    display: grid
+    }
+
+  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+    }
+
+  .gap_4 {
+    gap: var(--spacing-4)
+    }
+
+  .items_start {
+    align-items: start
+    }
+
+  .gap_3 {
+    gap: var(--spacing-3)
+    }
+
+  .d_flex {
+    display: flex
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .justify_space-between {
+    justify-content: space-between
+    }
+
+  .gap_10px {
+    gap: 10px
+    }
+
+  .flex_row {
+    flex-direction: row
+    }
+}
\ No newline at end of file
diff --git a/apps/web/styled-system/chunks/src__components__FormatSelectField.css b/apps/web/styled-system/chunks/src__components__FormatSelectField.css
new file mode 100644
index 00000000..3688b4d1
--- /dev/null
+++ b/apps/web/styled-system/chunks/src__components__FormatSelectField.css
@@ -0,0 +1,203 @@
+@layer utilities {
+  .w_full {
+    width: var(--sizes-full)
+    }
+
+  .px_4 {
+    padding-inline: var(--spacing-4)
+    }
+
+  .border_gray\.300 {
+    border-color: var(--colors-gray-300)
+    }
+
+  .select_none {
+    -webkit-user-select: none;
+    user-select: none
+    }
+    .hover\:border_gray\.400:is(:hover, [data-hover]) {
+      border-color: var(--colors-gray-400)
+        }
+    .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)
+        }
+    .\[\&\[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)
+        }
+
+  .justify_space-between {
+    justify-content: space-between
+    }
+
+  .min-h_12 {
+    min-height: var(--sizes-12)
+    }
+
+  .fs_lg {
+    font-size: var(--font-sizes-lg)
+    }
+
+  .text_gray\.900 {
+    color: var(--colors-gray-900)
+    }
+
+  .text_gray\.500 {
+    color: var(--colors-gray-500)
+    }
+
+  .leading_tight {
+    line-height: var(--line-heights-tight)
+    }
+
+  .text_gray\.400 {
+    color: var(--colors-gray-400)
+    }
+
+  .bg_white {
+    background: var(--colors-white)
+    }
+
+  .rounded_xl {
+    border-radius: var(--radii-xl)
+    }
+
+  .shadow_modal {
+    box-shadow: var(--shadows-modal)
+    }
+
+  .border_1px_solid {
+    border: 1px solid
+    }
+
+  .border_gray\.200 {
+    border-color: var(--colors-gray-200)
+    }
+
+  .p_2 {
+    padding: var(--spacing-2)
+    }
+
+  .z_999 {
+    z-index: 999
+    }
+
+  .min-w_320px {
+    min-width: 320px
+    }
+
+  .max-h_300px {
+    max-height: 300px
+    }
+
+  .overflow_hidden {
+    overflow: hidden
+    }
+
+  .px_3 {
+    padding-inline: var(--spacing-3)
+    }
+
+  .py_3 {
+    padding-block: var(--spacing-3)
+    }
+
+  .rounded_lg {
+    border-radius: var(--radii-lg)
+    }
+
+  .cursor_pointer {
+    cursor: pointer
+    }
+
+  .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)
+    }
+
+  .ring_none {
+    outline: var(--borders-none)
+    }
+    .hover\:bg_brand\.50:is(:hover, [data-hover]) {
+      background: var(--colors-brand-50)
+        }
+    .\[\&\[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)
+        }
+
+  .fs_xl {
+    font-size: var(--font-sizes-xl)
+    }
+
+  .font_medium {
+    font-weight: var(--font-weights-medium)
+    }
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
+    }
+
+  .fs_xs {
+    font-size: var(--font-sizes-xs)
+    }
+
+  .text_gray\.600 {
+    color: var(--colors-gray-600)
+    }
+
+  .leading_relaxed {
+    line-height: var(--line-heights-relaxed)
+    }
+
+  .pos_popper {
+    position: popper
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .gap_3 {
+    gap: var(--spacing-3)
+    }
+
+  .flex_row {
+    flex-direction: row
+    }
+
+  .gap_0 {
+    gap: var(--spacing-0)
+    }
+
+  .d_flex {
+    display: flex
+    }
+
+  .flex_column {
+    flex-direction: column
+    }
+
+  .items_start {
+    align-items: start
+    }
+
+  .gap_1 {
+    gap: var(--spacing-1)
+    }
+
+  .flex_1 {
+    flex: 1 1 0%
+    }
+}
\ No newline at end of file
diff --git a/apps/web/styled-system/chunks/src__components__LivePreview.css b/apps/web/styled-system/chunks/src__components__LivePreview.css
index 167ecc7e..5aed1619 100644
--- a/apps/web/styled-system/chunks/src__components__LivePreview.css
+++ b/apps/web/styled-system/chunks/src__components__LivePreview.css
@@ -52,10 +52,6 @@
     border-color: var(--colors-gray-200)
     }
 
-  .overflow_hidden {
-    overflow: hidden
-    }
-
   .cursor_pointer {
     cursor: pointer
     }
@@ -118,6 +114,10 @@
     padding: var(--spacing-4)
     }
 
+  .overflow_hidden {
+    overflow: hidden
+    }
+
   .max-w_full {
     max-width: var(--sizes-full)
     }
@@ -125,6 +125,18 @@
   .max-h_full {
     max-height: var(--sizes-full)
     }
+    .\[\&_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
+        }
 
   .w_full {
     width: var(--sizes-full)
diff --git a/apps/web/styled-system/chunks/src__components__ServerSorobanSVG.css b/apps/web/styled-system/chunks/src__components__ServerSorobanSVG.css
new file mode 100644
index 00000000..31409860
--- /dev/null
+++ b/apps/web/styled-system/chunks/src__components__ServerSorobanSVG.css
@@ -0,0 +1,66 @@
+@layer utilities {
+
+  .w_4 {
+    width: var(--sizes-4)
+    }
+
+  .h_4 {
+    height: var(--sizes-4)
+    }
+
+  .border_2px_solid {
+    border: 2px solid
+    }
+
+  .border_gray\.300 {
+    border-color: var(--colors-gray-300)
+    }
+
+  .border-t_transparent {
+    border-top-color: var(--colors-transparent)
+    }
+
+  .rounded_full {
+    border-radius: var(--radii-full)
+    }
+
+  .animation_spin_1s_linear_infinite {
+    animation: spin 1s linear infinite
+    }
+
+  .mr_2 {
+    margin-right: var(--spacing-2)
+    }
+
+  .d_flex {
+    display: flex
+    }
+
+  .flex_column {
+    flex-direction: column
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .justify_center {
+    justify-content: center
+    }
+
+  .text_gray\.400 {
+    color: var(--colors-gray-400)
+    }
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
+    }
+
+  .gap_1 {
+    gap: var(--spacing-1)
+    }
+
+  .fs_2xl {
+    font-size: var(--font-sizes-2xl)
+    }
+}
\ No newline at end of file
diff --git a/apps/web/styled-system/chunks/src__components__StyleControls.css b/apps/web/styled-system/chunks/src__components__StyleControls.css
new file mode 100644
index 00000000..6d0949bb
--- /dev/null
+++ b/apps/web/styled-system/chunks/src__components__StyleControls.css
@@ -0,0 +1,202 @@
+@layer utilities {
+
+  .font_semibold {
+    font-weight: var(--font-weights-semibold)
+    }
+
+  .bg_brand\.600 {
+    background: var(--colors-brand-600)
+    }
+
+  .bg_gray\.300 {
+    background: var(--colors-gray-300)
+    }
+    .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)
+        }
+
+  .w_11 {
+    width: var(--sizes-11)
+    }
+
+  .h_6 {
+    height: var(--sizes-6)
+    }
+
+  .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)
+    }
+
+  .rounded_full {
+    border-radius: var(--radii-full)
+    }
+
+  .border_2px_solid {
+    border: 2px solid
+    }
+
+  .border_gray\.300 {
+    border-color: var(--colors-gray-300)
+    }
+
+  .bg_white {
+    background: var(--colors-white)
+    }
+
+  .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)
+    }
+    .hover\:border_brand\.400:is(:hover, [data-hover]) {
+      border-color: var(--colors-brand-400)
+        }
+    .\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
+      border-color: var(--colors-brand-600)
+        }
+
+  .mt_0\.5 {
+    margin-top: var(--spacing-0\.5)
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .justify_center {
+    justify-content: center
+    }
+
+  .w_full {
+    width: var(--sizes-full)
+    }
+
+  .h_full {
+    height: var(--sizes-full)
+    }
+
+  .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)
+        }
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
+    }
+
+  .font_medium {
+    font-weight: var(--font-weights-medium)
+    }
+
+  .text_gray\.900 {
+    color: var(--colors-gray-900)
+    }
+
+  .cursor_pointer {
+    cursor: pointer
+    }
+
+  .fs_xs {
+    font-size: var(--font-sizes-xs)
+    }
+
+  .text_gray\.600 {
+    color: var(--colors-gray-600)
+    }
+
+  .leading_tight {
+    line-height: var(--line-heights-tight)
+    }
+
+  .gap_2 {
+    gap: var(--spacing-2)
+    }
+
+  .flex_column {
+    flex-direction: column
+    }
+
+  .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)
+    }
+
+  .d_flex {
+    display: flex
+    }
+
+  .items_start {
+    align-items: start
+    }
+
+  .gap_3 {
+    gap: var(--spacing-3)
+    }
+
+  .flex_row {
+    flex-direction: row
+    }
+}
\ No newline at end of file
diff --git a/apps/web/styled-system/styles.css b/apps/web/styled-system/styles.css
index 002206c3..86976ba6 100644
--- a/apps/web/styled-system/styles.css
+++ b/apps/web/styled-system/styles.css
@@ -13,6 +13,623 @@
     sticky: top
     }
 
+  .self_start {
+    align-self: start
+    }
+
+  .bg_red\.600 {
+    background: var(--colors-red-600)
+    }
+
+  .max-w_600px {
+    max-width: 600px
+    }
+
+  .gap_12px {
+    gap: 12px
+    }
+
+  .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
+    }
+
+  .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
+    }
+
+  .right_20px {
+    right: 20px
+    }
+
+  .bg_red\.500 {
+    background: var(--colors-red-500)
+    }
+
+  .rounded_6px {
+    border-radius: 6px
+    }
+
+  .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
+    }
+
+  .text-shadow_2px_2px_4px_rgba\(0\,0\,0\,0\.1\) {
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1)
+    }
+
+  .w_min\(85vw\,_700px\) {
+    width: min(85vw, 700px)
+    }
+
+  .h_min\(50vh\,_400px\) {
+    height: min(50vh, 400px)
+    }
+
+  .transition_transform_0\.3s_ease {
+    transition: transform 0.3s ease
+    }
+
+  .mt_32px {
+    margin-top: 32px
+    }
+
+  .font_600 {
+    font-weight: 600
+    }
+
+  .grid-cols_repeat\(auto-fit\,_minmax\(140px\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
+    }
+
+  .gap_16px {
+    gap: 16px
+    }
+
+  .max-w_800px {
+    max-width: 800px
+    }
+
+  .perspective_1000px {
+    perspective: 1000px
+    }
+
+  .h_180px {
+    height: 180px
+    }
+
+  .transform_rotateY\(0deg\) {
+    transform: rotateY(0deg)
+    }
+
+  .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
+    }
+
+  .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)
+    }
+
+  .border_3px_solid_\#28a745 {
+    border: 3px solid #28a745
+    }
+
+  .transform_rotateY\(180deg\) {
+    transform: rotateY(180deg)
+    }
+
+  .h_100\% {
+    height: 100%
+    }
+
+  .mb_20px {
+    margin-bottom: 20px
+    }
+
+  .fs_14px {
+    font-size: 14px
+    }
+
+  .m_40px_0 {
+    margin: 40px 0
+    }
+
+  .mb_15px {
+    margin-bottom: 15px
+    }
+
+  .font_normal {
+    font-weight: var(--font-weights-normal)
+    }
+
+  .bg_linear-gradient\(135deg\,_\#f8f9fa\,_\#e9ecef\) {
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef)
+    }
+
+  .bg_linear-gradient\(45deg\,_\#f8d7da\,_\#f1b0b7\) {
+    background: linear-gradient(45deg, #f8d7da, #f1b0b7)
+    }
+
+  .bg_linear-gradient\(45deg\,_\#d4edda\,_\#c3e6cb\) {
+    background: linear-gradient(45deg, #d4edda, #c3e6cb)
+    }
+
+  .border_2px_solid_\#6c757d {
+    border: 2px solid #6c757d
+    }
+
+  .border_3px_solid_\#adb5bd {
+    border: 3px solid #adb5bd
+    }
+
+  .border_2px_solid_\#dc3545 {
+    border: 2px solid #dc3545
+    }
+
+  .border_2px_solid_\#28a745 {
+    border: 2px solid #28a745
+    }
+
+  .shadow_0_0_20px_rgba\(220\,_53\,_69\,_0\.3\) {
+    box-shadow: 0 0 20px rgba(220, 53, 69, 0.3)
+    }
+
+  .shadow_0_4px_6px_rgba\(0\,_0\,_0\,_0\.1\) {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
+    }
+
+  .shadow_0_0_20px_rgba\(40\,_167\,_69\,_0\.3\) {
+    box-shadow: 0 0 20px rgba(40, 167, 69, 0.3)
+    }
+
+  .cursor_default {
+    cursor: default
+    }
+
+  .min-h_80px {
+    min-height: 80px
+    }
+
+  .p_24px {
+    padding: 24px
+    }
+
+  .fs_36px {
+    font-size: 36px
+    }
+
+  .font_Courier_New\,_Monaco\,_monospace {
+    font-family: Courier New, Monaco, monospace
+    }
+
+  .tracking_4px {
+    letter-spacing: 4px
+    }
+
+  .transition_all_0\.3s_ease {
+    transition: all 0.3s ease
+    }
+
+  .m_20px_0 {
+    margin: 20px 0
+    }
+
+  .min-h_60px {
+    min-height: 60px
+    }
+
+  .p_15px {
+    padding: 15px
+    }
+
+  .p_8px_16px {
+    padding: 8px 16px
+    }
+
+  .rounded_20px {
+    border-radius: 20px
+    }
+
+  .animation_fadeInScale_0\.3s_ease {
+    animation: fadeInScale 0.3s ease
+    }
+
+  .pos_fixed {
+    position: fixed
+    }
+
+  .left_0 {
+    left: var(--spacing-0)
+    }
+
+  .w_100vw {
+    width: 100vw
+    }
+
+  .h_100vh {
+    height: 100vh
+    }
+
+  .pointer-events_none {
+    pointer-events: none
+    }
+
+  .z_1000 {
+    z-index: 1000
+    }
+
+  .top_50\% {
+    top: 50%
+    }
+
+  .left_50\% {
+    left: 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
+    }
+
+  .bg_blue\.500 {
+    background: var(--colors-blue-500)
+    }
+
+  .p_40px_20px {
+    padding: 40px 20px
+    }
+
+  .max-w_700px {
+    max-width: 700px
+    }
+
+  .m_0_auto {
+    margin: 0 auto
+    }
+
+  .text_gray\.800 {
+    color: var(--colors-gray-800)
+    }
+
+  .gap_30px {
+    gap: 30px
+    }
+
+  .mb_30px {
+    margin-bottom: 30px
+    }
+
+  .p_20px {
+    padding: 20px
+    }
+
+  .rounded_12px {
+    border-radius: 12px
+    }
+
+  .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
+    }
+
+  .mt_16px {
+    margin-top: 16px
+    }
+
+  .mb_16px {
+    margin-bottom: 16px
+    }
+
+  .m_8px_0 {
+    margin: 8px 0
+    }
+
+  .p_8px {
+    padding: 8px
+    }
+
+  .rounded_4px {
+    border-radius: 4px
+    }
+
+  .font_500 {
+    font-weight: 500
+    }
+
+  .gap_15px {
+    gap: 15px
+    }
+
+  .mt_20px {
+    margin-top: 20px
+    }
+
+  .bg_green\.500 {
+    background: var(--colors-green-500)
+    }
+
+  .p_12px_24px {
+    padding: 12px 24px
+    }
+
+  .border_none {
+    border: var(--borders-none)
+    }
+
+  .rounded_8px {
+    border-radius: 8px
+    }
+
+  .fs_16px {
+    font-size: 16px
+    }
+
+  .transition_all_0\.2s_ease {
+    transition: all 0.2s ease
+    }
+
+  .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)
+    }
+
+  .d_inline-flex {
+    display: inline-flex
+    }
+
+  .shadow_xl {
+    box-shadow: var(--shadows-xl)
+    }
+
+  .w_280 {
+    width: 280px
+    }
+
+  .h_360 {
+    height: 360px
+    }
+
+  .h_160 {
+    height: 160px
+    }
+
+  .min-h_screen {
+    min-height: 100vh
+    }
+
+  .from_blue\.50 {
+    --gradient-from: var(--colors-blue-50)
+    }
+
+  .to_purple\.50 {
+    --gradient-to: var(--colors-purple-50)
+    }
+
+  .py_8 {
+    padding-block: var(--spacing-8)
+    }
+
+  .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)
+    }
+
+  .bg_blue\.100 {
+    background: var(--colors-blue-100)
+    }
+
+  .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_red\.100 {
+    background: var(--colors-red-100)
+    }
+
+  .bg_yellow\.100 {
+    background: var(--colors-yellow-100)
+    }
+
+  .text_yellow\.700 {
+    color: var(--colors-yellow-700)
+    }
+
+  .shadow_lg {
+    box-shadow: var(--shadows-lg)
+    }
+
+  .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)
+    }
+
   .pos_sticky {
     position: sticky
     }
@@ -21,8 +638,140 @@
     top: var(--spacing-0)
     }
 
-  .text-decor_none {
-    text-decoration: none
+  .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-b_1px_solid {
+    border-bottom: 1px solid
+    }
+
+  .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
+    }
+
+  .mb_1 {
+    margin-bottom: var(--spacing-1)
+    }
+
+  .border_blue\.300 {
+    border-color: var(--colors-blue-300)
+    }
+
+  .w_100\% {
+    width: 100%
+    }
+
+  .max-w_180px {
+    max-width: 180px
+    }
+
+  .\[\&_svg\]\:w_100\% svg {
+    width: 100%
+        }
+
+  .\[\&_svg\]\:h_100\% svg {
+    height: 100%
+        }
+
+  .\[\&_svg\]\:object_contain svg {
+    object-fit: contain
+        }
+
+  .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)
+    }
+
+  .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_red\.600 {
+    color: var(--colors-red-600)
+    }
+
+  .pl_6 {
+    padding-left: var(--spacing-6)
+    }
+
+  .space_y-2 {
+    space: y-2
     }
 
   .bg_red\.50 {
@@ -41,20 +790,112 @@
     color: var(--colors-red-700)
     }
 
-  .self_start {
-    align-self: start
+  .shadow_sm {
+    box-shadow: var(--shadows-sm)
     }
 
-  .bg_red\.600 {
-    background: var(--colors-red-600)
+  .mb_6 {
+    margin-bottom: var(--spacing-6)
     }
 
-  .py_8 {
-    padding-block: var(--spacing-8)
+  .bg_purple\.50 {
+    background: var(--colors-purple-50)
     }
 
-  .mb_8 {
-    margin-bottom: var(--spacing-8)
+  .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)
+    }
+
+  .opacity_0\.9 {
+    opacity: 0.9
+    }
+
+  .d_inline-block {
+    display: inline-block
+    }
+
+  .text_purple\.600 {
+    color: var(--colors-purple-600)
+    }
+
+  .text-decor_none {
+    text-decoration: none
+    }
+
+  .w_120 {
+    width: 120px
+    }
+
+  .h_336 {
+    height: 336px
+    }
+
+  .w_180 {
+    width: 180px
+    }
+
+  .h_240 {
+    height: 240px
+    }
+
+  .color-scheme_place-value {
+    color-scheme: place-value
+    }
+
+  .w_80 {
+    width: var(--sizes-80)
+    }
+
+  .h_120 {
+    height: 120px
+    }
+
+  .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 {
@@ -69,10 +910,6 @@
     padding-block: var(--spacing-6)
     }
 
-  .leading_tight {
-    line-height: var(--line-heights-tight)
-    }
-
   .max-w_2xl {
     max-width: var(--sizes-2xl)
     }
@@ -137,6 +974,10 @@
     align: start
     }
 
+  .pt_6 {
+    padding-top: var(--spacing-6)
+    }
+
   .\[\&\[data-state\=active\]\]\:bg_white[data-state=active] {
     background: var(--colors-white)
         }
@@ -149,95 +990,18 @@
     box-shadow: var(--shadows-card)
         }
 
-  .mr_2 {
-    margin-right: var(--spacing-2)
-    }
-
   .mt_6 {
     margin-top: var(--spacing-6)
     }
 
-  .pt_6 {
-    padding-top: var(--spacing-6)
-    }
-
-  .bg_gray\.300 {
-    background: var(--colors-gray-300)
-    }
-
-  .w_11 {
-    width: var(--sizes-11)
-    }
-
-  .h_6 {
-    height: var(--sizes-6)
-    }
-
-  .transform_translateX\(20px\) {
-    transform: translateX(20px)
-    }
-
-  .transform_translateX\(0px\) {
-    transform: translateX(0px)
-    }
-
-  .transition_transform_0\.2s {
-    transition: transform 0.2s
-    }
-
-  .will-change_transform {
-    will-change: transform
-    }
-
-  .\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
-    border-color: var(--colors-brand-600)
-        }
-
-  .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)
-        }
-
-  .shadow_modal {
-    box-shadow: var(--shadows-modal)
+  .fs_md {
+    font-size: var(--font-sizes-md)
     }
 
   .z_50 {
     z-index: 50
     }
 
-  .\[\&\[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)
-        }
-
-  .select_none {
-    -webkit-user-select: none;
-    user-select: none
-    }
-
   .touch_none {
     touch-action: none
     }
@@ -246,18 +1010,10 @@
     flex-grow: 1
     }
 
-  .d_block {
-    display: block
-    }
-
   .border_brand\.600 {
     border-color: var(--colors-brand-600)
     }
 
-  .items_start {
-    align-items: start
-    }
-
   .bg_gradient-to-r_from-green\.50_to-emerald\.50 {
     background: gradient-to-r from-green.50 to-emerald.50
     }
@@ -302,10 +1058,6 @@
     background: var(--colors-green-100)
     }
 
-  .p_2 {
-    padding: var(--spacing-2)
-    }
-
   .flex-wrap_wrap {
     flex-wrap: wrap
     }
@@ -346,22 +1098,10 @@
     color: var(--colors-white)
     }
 
-  .w_5 {
-    width: var(--sizes-5)
-    }
-
-  .h_5 {
-    height: var(--sizes-5)
-    }
-
   .border_white {
     border-color: var(--colors-white)
     }
 
-  .border-t_transparent {
-    border-top-color: var(--colors-transparent)
-    }
-
   .py_4 {
     padding-block: var(--spacing-4)
     }
@@ -370,10 +1110,6 @@
     color: var(--colors-blue-600)
     }
 
-  .fs_lg {
-    font-size: var(--font-sizes-lg)
-    }
-
   .pt_4 {
     padding-top: var(--spacing-4)
     }
@@ -386,14 +1122,6 @@
     border-color: var(--colors-green-200)
     }
 
-  .px_4 {
-    padding-inline: var(--spacing-4)
-    }
-
-  .py_3 {
-    padding-block: var(--spacing-3)
-    }
-
   .bg_transparent {
     background: var(--colors-transparent)
     }
@@ -402,10 +1130,6 @@
     color: var(--colors-green-700)
     }
 
-  .rounded_lg {
-    border-radius: var(--radii-lg)
-    }
-
   .border_green\.300 {
     border-color: var(--colors-green-300)
     }
@@ -422,6 +1146,75 @@
     opacity: 0.3
     }
 
+  .px_4 {
+    padding-inline: var(--spacing-4)
+    }
+
+  .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)
+    }
+
+  .p_2 {
+    padding: var(--spacing-2)
+    }
+
+  .z_999 {
+    z-index: 999
+    }
+
+  .min-w_320px {
+    min-width: 320px
+    }
+
+  .max-h_300px {
+    max-height: 300px
+    }
+
+  .py_3 {
+    padding-block: var(--spacing-3)
+    }
+
+  .rounded_lg {
+    border-radius: var(--radii-lg)
+    }
+
+  .ring_none {
+    outline: var(--borders-none)
+    }
+
+  .\[\&\[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)
     }
@@ -446,10 +1239,6 @@
     border-color: var(--colors-brand-500)
     }
 
-  .border_gray\.300 {
-    border-color: var(--colors-gray-300)
-    }
-
   .border_green\.500 {
     border-color: var(--colors-green-500)
     }
@@ -478,10 +1267,6 @@
     height: var(--sizes-3)
     }
 
-  .bg_brand\.600 {
-    background: var(--colors-brand-600)
-    }
-
   .w_2 {
     width: var(--sizes-2)
     }
@@ -530,10 +1315,6 @@
     gap: var(--spacing-0)
     }
 
-  .flex_1 {
-    flex: 1 1 0%
-    }
-
   .py_2 {
     padding-block: var(--spacing-2)
     }
@@ -546,10 +1327,6 @@
     align: center
     }
 
-  .animation_spin_1s_linear_infinite {
-    animation: spin 1s linear infinite
-    }
-
   .text_brand\.600 {
     color: var(--colors-brand-600)
     }
@@ -570,40 +1347,14 @@
     color: var(--colors-brand-800)
     }
 
-  .font_semibold {
-    font-weight: var(--font-weights-semibold)
-    }
-
   .mb_3 {
     margin-bottom: var(--spacing-3)
     }
 
-  .pos_relative {
-    position: relative
-    }
-
-  .border_2px_solid {
-    border: 2px solid
-    }
-
   .border_gray\.200 {
     border-color: var(--colors-gray-200)
     }
 
-  .overflow_hidden {
-    overflow: hidden
-    }
-
-  .cursor_pointer {
-    cursor: pointer
-    }
-
-  .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)
-    }
-
   .pos_absolute {
     position: absolute
     }
@@ -620,18 +1371,6 @@
     padding: var(--spacing-1)
     }
 
-  .bg_white {
-    background: var(--colors-white)
-    }
-
-  .rounded_full {
-    border-radius: var(--radii-full)
-    }
-
-  .shadow_card {
-    box-shadow: var(--shadows-card)
-    }
-
   .z_10 {
     z-index: 10
     }
@@ -656,6 +1395,10 @@
     padding: var(--spacing-4)
     }
 
+  .overflow_hidden {
+    overflow: hidden
+    }
+
   .max-w_full {
     max-width: var(--sizes-full)
     }
@@ -664,21 +1407,21 @@
     max-height: var(--sizes-full)
     }
 
-  .w_full {
-    width: var(--sizes-full)
-    }
+  .\[\&_svg\]\:max-w_100\% svg {
+    max-width: 100%
+        }
 
-  .h_full {
-    height: var(--sizes-full)
-    }
+  .\[\&_svg\]\:max-h_100\% svg {
+    max-height: 100%
+        }
 
-  .justify_center {
-    justify-content: center
-    }
+  .\[\&_svg\]\:w_auto svg {
+    width: auto
+        }
 
-  .text_gray\.400 {
-    color: var(--colors-gray-400)
-    }
+  .\[\&_svg\]\:h_auto svg {
+    height: auto
+        }
 
   .fs_3xl {
     font-size: var(--font-sizes-3xl)
@@ -720,10 +1463,6 @@
     text-align: center
     }
 
-  .fs_2xl {
-    font-size: var(--font-sizes-2xl)
-    }
-
   .mb_2 {
     margin-bottom: var(--spacing-2)
     }
@@ -732,10 +1471,6 @@
     color: var(--colors-amber-800)
     }
 
-  .fs_sm {
-    font-size: var(--font-sizes-sm)
-    }
-
   .text_amber\.700 {
     color: var(--colors-amber-700)
     }
@@ -744,34 +1479,10 @@
     margin-top: var(--spacing-1)
     }
 
-  .fs_xs {
-    font-size: var(--font-sizes-xs)
-    }
-
-  .text_gray\.600 {
-    color: var(--colors-gray-600)
-    }
-
-  .font_medium {
-    font-weight: var(--font-weights-medium)
-    }
-
-  .text_gray\.900 {
-    color: var(--colors-gray-900)
-    }
-
   .gap_6 {
     gap: var(--spacing-6)
     }
 
-  .flex_column {
-    flex-direction: column
-    }
-
-  .gap_1 {
-    gap: var(--spacing-1)
-    }
-
   .justify_space-between {
     justify-content: space-between
     }
@@ -780,28 +1491,210 @@
     gap: 10px
     }
 
-  .d_flex {
-    display: flex
+  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+    }
+
+  .w_4 {
+    width: var(--sizes-4)
+    }
+
+  .h_4 {
+    height: var(--sizes-4)
+    }
+
+  .border-t_transparent {
+    border-top-color: var(--colors-transparent)
+    }
+
+  .animation_spin_1s_linear_infinite {
+    animation: spin 1s linear infinite
+    }
+
+  .mr_2 {
+    margin-right: var(--spacing-2)
+    }
+
+  .text_gray\.400 {
+    color: var(--colors-gray-400)
+    }
+
+  .gap_1 {
+    gap: var(--spacing-1)
+    }
+
+  .fs_2xl {
+    font-size: var(--font-sizes-2xl)
+    }
+
+  .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)
+    }
+
+  .h_6 {
+    height: var(--sizes-6)
+    }
+
+  .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)
+    }
+
+  .rounded_full {
+    border-radius: var(--radii-full)
+    }
+
+  .border_2px_solid {
+    border: 2px solid
+    }
+
+  .border_gray\.300 {
+    border-color: var(--colors-gray-300)
+    }
+
+  .bg_white {
+    background: var(--colors-white)
+    }
+
+  .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)
+    }
+
+  .\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
+    border-color: var(--colors-brand-600)
+        }
+
+  .mt_0\.5 {
+    margin-top: var(--spacing-0\.5)
     }
 
   .items_center {
     align-items: center
     }
 
+  .justify_center {
+    justify-content: center
+    }
+
+  .w_full {
+    width: var(--sizes-full)
+    }
+
+  .h_full {
+    height: var(--sizes-full)
+    }
+
+  .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)
+        }
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
+    }
+
+  .font_medium {
+    font-weight: var(--font-weights-medium)
+    }
+
+  .text_gray\.900 {
+    color: var(--colors-gray-900)
+    }
+
+  .cursor_pointer {
+    cursor: pointer
+    }
+
+  .fs_xs {
+    font-size: var(--font-sizes-xs)
+    }
+
+  .text_gray\.600 {
+    color: var(--colors-gray-600)
+    }
+
+  .leading_tight {
+    line-height: var(--line-heights-tight)
+    }
+
   .gap_2 {
     gap: var(--spacing-2)
     }
 
-  .flex_row {
-    flex-direction: row
+  .flex_column {
+    flex-direction: column
     }
 
-  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
-    grid-template-columns: repeat(2, minmax(0, 1fr))
+  .gap_0\.5 {
+    gap: var(--spacing-0\.5)
     }
 
-  .gap_3 {
-    gap: var(--spacing-3)
+  .flex_1 {
+    flex: 1 1 0%
     }
 
   .d_grid {
@@ -816,6 +1709,22 @@
     gap: var(--spacing-4)
     }
 
+  .d_flex {
+    display: flex
+    }
+
+  .items_start {
+    align-items: start
+    }
+
+  .gap_3 {
+    gap: var(--spacing-3)
+    }
+
+  .flex_row {
+    flex-direction: row
+    }
+
   .focus\:ring_none:is(:focus, [data-focus]) {
     outline: var(--borders-none)
         }
@@ -832,6 +1741,42 @@
     background: var(--colors-red-700)
         }
 
+  .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\: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\:shadow_lg:is(:hover, [data-hover]) {
+    box-shadow: var(--shadows-lg)
+        }
+
   .hover\:transform_translateY\(-4px\):is(:hover, [data-hover]) {
     transform: translateY(-4px)
         }
@@ -840,30 +1785,10 @@
     color: var(--colors-gray-900)
         }
 
-  .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_brand\.50:is(:hover, [data-hover]) {
-    background: var(--colors-brand-50)
-        }
-
   .hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
     transform: scale(1.1)
         }
 
-  .hover\:border_gray\.400:is(:hover, [data-hover]) {
-    border-color: var(--colors-gray-400)
-        }
-
   .hover\:bg_green\.700:is(:hover, [data-hover]) {
     background: var(--colors-green-700)
         }
@@ -888,6 +1813,14 @@
     border-color: var(--colors-green-400)
         }
 
+  .hover\:border_gray\.400:is(:hover, [data-hover]) {
+    border-color: var(--colors-gray-400)
+        }
+
+  .hover\:bg_brand\.50:is(:hover, [data-hover]) {
+    background: var(--colors-brand-50)
+        }
+
   .hover\:border_brand\.300:is(:hover, [data-hover]) {
     border-color: var(--colors-brand-300)
         }
@@ -900,7 +1833,39 @@
     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)
+        }
+
   @media screen and (min-width: 48em) {
+    .md\:px_6,.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)
     }
@@ -923,10 +1888,15 @@
         }
 
   @media screen and (min-width: 64em) {
+
     .lg\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 
+    .lg\:grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(5, minmax(0, 1fr))
+    }
+
     .lg\:px_8 {
       padding-inline: var(--spacing-8)
     }