astro___style_reference:
  info: "> Deep space mission control with a single purple nebula glow"

  theme: "dark"

  info: "Astro speaks in the language of a cosmic command bridge: near-black canvas, a single signature purple-magenta nebula gradient that blooms from the hero, and white display type that reads like mission copy. The system is overwhelmingly achromatic — 4% colorfulness — so every chromatic pixel is doing real work: a mint-aqua syntax highlight, a violet link, a sky-blue inline chip. Components are geometric and confident: pill-shaped interactive controls at 9999px radius, 16px cards, 8px chips, and thin hairline borders at 8% opacity rather than colored dividers. The custom display face 'Obviously' does the heavy lifting with its wide, open apertures and quirky alternates (salt, ss06, ss11) that give headlines a friendly, slightly retrofuturist swagger against the dark void."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Canvas | `#1f232e` | `--color-void-canvas` | Primary page background — the base layer for hero, sections, and footer. Slight cool-blue undertone, never pure black, so colored elements feel like they're floating in space rather than printed on paper |"
    info: "| Abyss | `#0c0f19` | `--color-abyss` | Deeper surface level for elevated cards, code blocks, and inset wells. One step darker than the canvas to create depth without using shadows |"
    info: "| Singularity | `#060913` | `--color-singularity` | Darkest surface for terminal windows, CLI boxes, and high-contrast containers. Almost pure black with a blue whisper |"
    info: "| Carbon | `#17191e` | `--color-carbon` | Mid-elevation card surface, sitting between canvas and abyss. Used for theme preview tiles and nested cards |"
    info: "| Lunar White | `#f2f6fa` | `--color-lunar-white` | Primary text and high-contrast foreground. The slightly cool tint keeps it from feeling clinical against the dark canvas |"
    info: "| Platinum | `#e5e7eb` | `--color-platinum` | Secondary text, icon strokes, and light dividers. Most-used achromatic token for hairline borders and muted foregrounds |"
    info: "| Mist | `#bfc1c9` | `--color-mist` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Steel | `#858b98` | `--color-steel` | Muted body text and subdued descriptions. The default for paragraphs that should recede behind headlines |"
    info: "| Gunmetal | `#545864` | `--color-gunmetal` | Hairline borders and dividers on the dark canvas. Low contrast on purpose — structural, not decorative |"
    info: "| Nebula Gradient | `linear-gradient(83.21deg, rgb(50, 69, 255), rgb(184, 69, 237))` | `--color-nebula-gradient` | Primary brand gradient stop — the blue origin of the hero nebula and the color of highlighted CTAs and accent rings |"
    info: "| Plasma Gradient | `linear-gradient(66.77deg, rgb(216, 51, 51), rgb(240, 65, 255))` | `--color-plasma-gradient` | Secondary gradient (red-to-magenta) used sparingly for illustration accents and decorative energy bands |"
    info: "| Aurora Mint | `#4bf3c8` | `--color-aurora-mint` | Teal supporting accent for decorative details and low-frequency emphasis |"
    info: "| Plasma Blue | `#54b9ff` | `--color-plasma-blue` | Blue supporting accent for decorative details and low-frequency emphasis |"
    info: "| Ultraviolet | `#acafff` | `--color-ultraviolet` | Code keywords, violet link variant, and decorative highlight. A desaturated violet that complements the nebula gradient without competing |"
    info: "| Electric Cyan | `#00daef` | `--color-electric-cyan` | Secondary syntax token — reserved for specific code contexts and rare accent strokes |"
    info: "| Amber | `#ffd493` | `--color-amber` | Yellow supporting accent for decorative details and low-frequency emphasis |"
    info: "| Signal Blue | `#61dafb` | `--color-signal-blue` | Decorative dot and badge accent — used for version pills and notification indicators |"

  tokens___typography:

    ui_sans_serif___body_and_ui_text___system_stack_fallback__weight_400_for_body_copy__500_600_for_button_labels_and_nav__700_for_subheadings__line_height_1_65_at_14px_keeps_dense_ui_readable_without_feeling_airy_____font_ui_sans_serif:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 300, 400, 500, 600, 700"
      - "**Sizes:** 14px, 16px, 20px"
      - "**Line height:** 1.40, 1.50, 1.65, 1.81"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"calt\", \"zero\"`"
      - "**Role:** Body and UI text — system stack fallback. Weight 400 for body copy, 500/600 for button labels and nav, 700 for subheadings. Line-height 1.65 at 14px keeps dense UI readable without feeling airy."

    obviously___display_and_headline_face___the_custom_workhorse__weight_300_400_used_for_the_largest_headlines__700_for_the_hero__the_cv09_and_salt_alternates_give_it_a_distinctive_wide__slightly_retro_character__ss06_and_ss11_add_quirky_details__no_web_safe_substitute_captures_the_feel___inter_black_or_space_grotesk_bold_approximate_it_____font_obviously:
      - "**Substitute:** Space Grotesk, Inter"
      - "**Weights:** 300, 400, 700"
      - "**Sizes:** 20px, 30px, 36px, 48px"
      - "**Line height:** 1.10, 1.11, 1.20, 1.40"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"calt\", \"cv09\", \"liga\", \"salt\", \"ss06\", \"ss11\"`"
      - "**Role:** Display and headline face — the custom workhorse. Weight 300/400 used for the largest headlines, 700 for the hero. The cv09 and salt alternates give it a distinctive wide, slightly retro character; ss06 and ss11 add quirky details. No web-safe substitute captures the feel — Inter Black or Space Grotesk Bold approximate it."

    ui_monospace___code_blocks__terminal_commands__and_inline_code__fixed_14px_with_generous_1_65_line_height_for_readability_of_multi_line_snippets_____font_ui_monospace:
      - "**Substitute:** JetBrains Mono, Fira Code"
      - "**Weights:** 300, 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.65"
      - "**OpenType features:** `\"calt\", \"zero\"`"
      - "**Role:** Code blocks, terminal commands, and inline code. Fixed 14px with generous 1.65 line-height for readability of multi-line snippets."

    mdio___icon_and_badge_face___used_at_12_16px_with_widened_tracking_0_0250em_for_small_labels_and_version_chips__the_slight_letter_spacing_and_geometric_forms_give_badges_a_technical__instrument_panel_feel_____font_mdio:
      - "**Substitute:** Space Mono, IBM Plex Mono"
      - "**Weights:** 300, 400"
      - "**Sizes:** 12px, 16px"
      - "**Line height:** 1.00, 1.33, 1.50"
      - "**Letter spacing:** 0.0250em"
      - "**OpenType features:** `\"calt\", \"zero\"`"
      - "**Role:** Icon and badge face — used at 12-16px with widened tracking (0.0250em) for small labels and version chips. The slight letter-spacing and geometric forms give badges a technical, instrument-panel feel."

    inter___inter___detected_in_extracted_data_but_not_described_by_ai____font_inter:
      - "**Weights:** 200, 400"
      - "**Sizes:** 16px, 18px"
      - "**Line height:** 1.5"
      - "**Role:** Inter — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.3px | `--text-caption` |"
      info: "| body-sm | 14px | 1.65 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.11 | — | `--text-heading` |"
      info: "| display | 48px | 1.1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 16px |"
      info: "| chips | 9999px |"
      info: "| images | 12px |"
      info: "| buttons | 9999px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    primary_pill_button:
      role: "Main call-to-action (e.g., 'Get Started')"

      info: "Full pill shape at 9999px radius, background #ffffff, text #1f232 at 16px weight 600, padding 12px 24px. High contrast inverted style — white on dark. No border. The inversion (white bg, dark text) is the system's signature CTA pattern."

    terminal_command_box:
      role: "CLI install command display"

      info: "Background #060913 with 1px border at #1f232, 8px radius, padding 12px 16px. Contains monospace 14px text in #f2f6fa with a copy icon at right. Rounded corners are soft, not pill — the box should feel like a terminal window embedded in the page."

    version_badge:
      role: "Release announcement pill (e.g., 'Astro 6.1')"

      info: "Inline pill at 9999px radius, background #1f232 with 1px border #2c303b, padding 4px 12px. Text in #f2f6fa at 14px weight 500. Optionally preceded by a colored dot (Signal Blue #61dafb). Compact, instrument-panel aesthetic."

    feature_icon_circle:
      role: "Icon container in feature columns"

      info: "48px circle with 1px colored border (blue, pink, or amber), transparent background. Contains a small inline icon. The colored border is the only color in the feature row — makes the icon feel like a charged node."

    theme_preview_card:
      role: "Showcase tile for theme marketplace"

      info: "16px radius, background #17191, 1px border #1f232e. Internal image fills at 12px radius. Padding 0 (image bleeds to edges). Title and metadata appear below the image, not overlaid. The card sits on the void canvas with a barely-there border."

    filter_tab_pill:
      role: "Category filter for grids (e.g., 'Trending', 'E-Commerce')"

      9999px_radius__two_states: "active = background #1f232 + border #2c303b + white text; inactive = transparent + border transparent + #858b98 text. Padding 8px 16px, text 14px weight 500. Active state uses the border as the only visual differentiator."

    logo_cloud_item:
      role: "Customer/partner logo display"

      info: "Inverted to white (#f2f6fa) on the dark canvas. No container or border — logos float directly on the background. Sized to a consistent visual weight (~24-32px height). Arranged in a single row or two-row wrap."

    section_header:
      role: "Eyebrow label + headline + description block"

      info: "Eyebrow at 14px weight 600 in a chromatic accent (violet #acafff, teal #4bf3c8, or blue #54b9ff). Headline in Obviously 36px weight 300-400 in #f2f6fa. Description in body 16px weight 400 in #858b98. The colored eyebrow is the only chromatic punctuation in the section."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent background, sits on the void canvas. Logo (Astro mark) left, nav links center-right, GitHub icon far right. Nav text in #f2f6fa at 14px weight 500. No border or shadow — the nav is position-relative and disappears into the canvas."

    hero_gradient_backdrop:
      role: "Atmospheric background glow behind hero content"

      info: "Radial gradient blooming from center-top, combining the nebula blue (#3245ff at 30% opacity) blending into the void canvas (#1f232e). The gradient is positioned above the text layer with mix-blend-mode for a soft cosmic glow effect. No hard edges."

    stats_bar:
      role: "Performance metric display (e.g., '% of real-world sites with good Core Web Vitals')"

      info: "Horizontal bar chart on a #060913 background with 1px #1f232 border, 8px radius. Bars in the brand gradient (#3245ff → #b845ed). Label in 14px monospace, value in 16px weight 600 #f2f6fa."

  do_s_and_don_ts:

    do:
      - "Use 9999px radius for all interactive elements (buttons, tabs, badges, chips)"
      - "Set the primary CTA to white background (#ffffff) with dark text (#1f232e) — inversion is the system's signature action pattern"
      - "Use the nebula gradient (linear-gradient(83.21deg, #3245ff, #b845ed)) only for hero atmospheric backdrops and stat bars — never for buttons or cards"
      - "Set section eyebrows (14px weight 600) in chromatic accent colors (#4bf3c8, #acafff, #54b9ff) to create the only color punctuation in each section"
      - "Use Obviously at weight 300-400 for headlines to keep the voice whisper-confident rather than shouty"
      - "Maintain 4px base unit for all spacing — element gaps at 8px or 16px, section gaps at 80px"
      - "Place colored borders (1px) on circular icon containers in feature columns using Aurora Mint, Plasma Blue, or Amber"

    don_t:
      - "Don't use drop shadows for elevation — the system relies on 1px borders in slightly lighter dark shades"
      - "Don't apply the nebula gradient to text — it destroys legibility against the dark canvas"
      - "Don't use chromatic colors for large background fills — they break the cosmic void atmosphere"
      - "Don't use radius values between 12px and 16px on cards — the system snaps to 8px, 12px, or 16px"
      - "Don't set body text below 14px or above 18px — the type scale is tight to maintain the instrument-panel density"
      - "Don't use obviously > 700 for headlines — the weight 300-400 range is the signature restraint"
      - "Don't add decorative icons inside buttons — pills should be text-only or text + chevron"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Void Canvas | `#1f232` | Page background — the deep space floor |"
    info: "| 2 | Carbon Card | `#17191` | Elevated card and panel surfaces |"
    info: "| 3 | Abyss Well | `#0c0f19` | Inset wells, terminal boxes, and nested containers |"
    info: "| 4 | Singularity | `#060913` | Deepest surface for high-contrast CLI and code blocks |"

  elevation:

    - "**Theme Preview Card:** `0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(31, 35, 46, 1)`"
    - "**Terminal Command Box:** `inset 0 0 0 1px #1f232`"

  imagery:

    imagery_is_minimal_and_functional: "the hero relies on a single purple-magenta radial gradient glow with no photographic content. The rest of the site uses product screenshots (theme previews, terminal windows) contained within rounded card frames. The only photographic-style visuals are customer logos in the trust strip, rendered in white monochrome. No lifestyle photography, no abstract illustrations, no 3D renders — the void canvas is the visual statement. When illustrations appear (feature icons, decorative elements), they are flat, single-color line icons or small geometric shapes in the chromatic accent palette."

  layout:

    info: "Full-width dark canvas with content constrained to 1200px max-width, centered. Hero is a centered stack: badge → headline → subhead → primary CTA → terminal box → logo cloud, with the nebula gradient blooming behind the headline. Sections alternate between full-bleed dark bands with no dividers, creating a seamless vertical flow. Feature sections use a 3-column grid for icon+text blocks. Content sections use 2-column text-left/visual-right or centered text-over-grid patterns. Theme showcase uses a 3-column card grid with 24px gaps. Navigation is a single transparent top bar with no sticky behavior. Vertical rhythm is maintained at 80px between major sections, with 32px between sub-blocks within a section."

  agent_prompt_guide:

  quick_color_reference:
    - "Primary background: #1f232e"
    - "Primary text: #f2f6fa"
    - "Secondary text: #858b98"
    - "Border/hairline: #545864"
    - "Accent gradient: linear-gradient(83.21deg, #3245ff, #b845ed)"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Feature Card Grid**: Three columns on #1f232e background, 24px gap. Each card: 48px circle icon container with 1px border in #4bf3c8 (or #54b9ff, or #ffd493), transparent fill, small line icon centered. Headline in Obviously 20px weight 400 #f2f6fa. Body in 14px weight 400 #858b98, line-height 1.65."

    - "**Theme Preview Card**: 16px radius, background #17191e, 1px border #1f232e. Internal image fills card to edges at 12px radius (overflow hidden). Title in 16px weight 500 #f2f6fa below image. Padding 0 on card, 16px below image for metadata."

    - "**Version Badge Pill**: Inline element, 9999px radius, background #1f232e, 1px border #2c303b, padding 4px 12px. Small dot (8px circle) in #61dafb at left. Text 'Astro 6.1' in 14px weight 500 #f2f6fa."

    - "**Section Header**: Eyebrow text in #acafff (or #4bf3c8), 14px weight 600, uppercase optional. Headline in Obviously 36px weight 300, #f2f6fa, line-height 1.11. Description in 16px weight 400 #858b98, max-width 640px."

  similar_brands:

    - "**Vercel** — Same dark cosmic canvas with a single brand-gradient hero glow, wide display type, and pill-shaped CTAs centered in a vertical stack"
    - "**Linear** — Near-black background, hairline border elevation strategy, and geometric sans-serif headlines — the 'devtools dark void' language"
    - "**Svelte** — Similar developer-framework landing page structure with centered hero, terminal command box, and logo cloud trust strip on dark background"
    - "**GitHub** — Dark mode with achromatic palette, monospace code accents, and the same instrument-panel badge/tab aesthetic"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-canvas: #1f232e;
          --color-abyss: #0c0f19;
          --color-singularity: #060913;
          --color-carbon: #17191e;
          --color-lunar-white: #f2f6fa;
          --color-platinum: #e5e7eb;
          --color-mist: #bfc1c9;
          --color-steel: #858b98;
          --color-gunmetal: #545864;
          --color-nebula-gradient: #3245ff;
          --gradient-nebula-gradient: linear-gradient(83.21deg, rgb(50, 69, 255), rgb(184, 69, 237));
          --color-plasma-gradient: #d83333;
          --gradient-plasma-gradient: linear-gradient(66.77deg, rgb(216, 51, 51), rgb(240, 65, 255));
          --color-aurora-mint: #4bf3c8;
          --color-plasma-blue: #54b9ff;
          --color-ultraviolet: #acafff;
          --color-electric-cyan: #00daef;
          --color-amber: #ffd493;
          --color-signal-blue: #61dafb;
        
          /* Typography — Font Families */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-obviously: 'Obviously', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-mdio: 'MDIO', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.65;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --text-display: 48px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-extralight: 200;
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-224: 224px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 16px;
          --radius-chips: 9999px;
          --radius-images: 12px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-void-canvas: #1f232;
          --surface-carbon-card: #17191;
          --surface-abyss-well: #0c0f19;
          --surface-singularity: #060913;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-canvas: #1f232e;
          --color-abyss: #0c0f19;
          --color-singularity: #060913;
          --color-carbon: #17191e;
          --color-lunar-white: #f2f6fa;
          --color-platinum: #e5e7eb;
          --color-mist: #bfc1c9;
          --color-steel: #858b98;
          --color-gunmetal: #545864;
          --color-nebula-gradient: #3245ff;
          --color-plasma-gradient: #d83333;
          --color-aurora-mint: #4bf3c8;
          --color-plasma-blue: #54b9ff;
          --color-ultraviolet: #acafff;
          --color-electric-cyan: #00daef;
          --color-amber: #ffd493;
          --color-signal-blue: #61dafb;
        
          /* Typography */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-obviously: 'Obviously', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-mdio: 'MDIO', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.65;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --text-display: 48px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        }