nan___style_reference:
  info: "> mint greenhouse of living letters — a pastel type lab where every headline is the product itself"

  theme: "light"

  info: "NaN runs its website like a working specimen sheet: the mint-green canvas is the page, and the page is the product. Massive custom display faces (200-336px) are the visual architecture; a monospaced sans (NaN Holo Mono) set in uppercase with 0.075em tracking is the chrome that holds everything together. The palette is ruthlessly tight — one pastel canvas, near-black text (#262626, never pure black), one bright lime accent (#00ff00) for raw typographic flourishes, and a single pink-purple-blue gradient for the lone chromatic CTA. Borders do the work that shadows usually do: 1-2px hairlines define cards, inputs, and the type tester frame with no elevation. The interaction model is a live font tester — sliders for size and leading, dropdowns for family and weight — letting visitors steer the display in real time, which makes the site function as both storefront and demo."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Mint Canvas | `#b7ffb4` | `--color-mint-canvas` | Page background, card surfaces — the signature pastel that makes dark type appear sunlit rather than printed |"
    info: "| Lime Spark | `#00ff00` | `--color-lime-spark` | Decorative typographic flourishes and SVG scribble overlays — a raw signal-green that contrasts the pastel canvas without warming it |"
    info: "| Carbon Ink | `#262626` | `--color-carbon-ink` | Primary text, borders, icon strokes, button outlines — softer than pure black, sits on mint without vibrating |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Display-type fills at the largest sizes, pure-black SVG fills for the heaviest display specimens |"
    info: "| Fog | `#999999` | `--color-fog` | Muted helper text, inactive borders, disabled controls — the quietest readable neutral on the mint canvas |"
    info: "| Smoke | `#767676` | `--color-smoke` | Input field borders in resting state — darker than fog to signal interactivity without competing with the canvas |"
    info: "| Bone | `#efefef` | `--color-bone` | Light surface for elevated UI bits (button hover, inverted controls) — provides a near-white counterpoint when the canvas needs to recede |"
    info: "| Paper | `#ffffff` | `--color-paper` | Input field interior, pure-white text on dark inverted moments |"
    info: "| Aurora Gradient | `linear-gradient(270deg, rgb(255, 163, 182), rgb(221, 169, 255) 33%, rgb(162, 209, 255) 66%, rgb(255, 163, 182))` | `--color-aurora-gradient` | Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color |"

  tokens___typography:

    nan_holo_mono___all_interface_chrome___navigation__labels__buttons__form_controls__metadata__keyboard_hints__set_uppercase_with__0_075em_tracking__the_letter_spacing_is_the_signature_that_makes_mono_read_as_a_deliberate_ui_system_rather_than_terminal_output__the_weight_range_lets_it_flex_from_thin_nav_links_to_heavy_button_text_without_leaving_the_family_____font_nan_holo_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 300, 400, 500, 700, 800, 900"
      - "**Sizes:** 12, 13, 14, 16, 20, 24, 26, 32, 45px"
      - "**Line height:** 1.0–3.0"
      - "**Letter spacing:** 0.075em (≈1.2px at 16px, ≈3.4px at 45px)"
      - "**OpenType features:** `\"dlig\" 0, \"liga\" 0`"
      - "**Role:** All interface chrome — navigation, labels, buttons, form controls, metadata, keyboard hints. Set uppercase with +0.075em tracking, the letter-spacing is the signature that makes mono read as a deliberate UI system rather than terminal output. The weight range lets it flex from thin nav links to heavy button text without leaving the family."

    nan_holo___prose_body_and_large_secondary_headlines_that_need_to_sit_beside_display_specimens_without_competing__the_86px_weight_300_size_is_a_typographic_statement___a_humanist_counterweight_to_the_blocky_display_faces_above_it_____font_nan_holo:
      - "**Substitute:** Inter, Söhne, Untitled Sans"
      - "**Weights:** 300, 400, 700"
      - "**Sizes:** 12, 16, 45, 86px"
      - "**Line height:** 1.2–1.5"
      - "**OpenType features:** `\"dlig\" 0, \"liga\" 0`"
      - "**Role:** Prose body and large secondary headlines that need to sit beside display specimens without competing. The 86px weight-300 size is a typographic statement — a humanist counterweight to the blocky display faces above it."

    nan_archy_on_extrablack___hero_display_headline___the_signature_specimen_face__shown_at_its_native_228px_with_tight_0_90_leading_so_the_letterforms_stack_into_a_near_monolithic_mass__this_is_the_typeface_the_homepage_exists_to_sell_____font_nan_archy_on_extrablack:
      - "**Substitute:** Druk, Compacta, Inter Black Compressed"
      - "**Weights:** 400"
      - "**Sizes:** 228px"
      - "**Line height:** 0.90"
      - "**OpenType features:** `\"dlig\", \"frac\" 0, \"onum\" 0, \"ss01\" 0, \"ss02\" 0, \"ss03\" 0, \"ss05\" 0, \"tnum\" 0`"
      - "**Role:** Hero display headline — the signature specimen face, shown at its native 228px with tight 0.90 leading so the letterforms stack into a near-monolithic mass. This is the typeface the homepage exists to sell."

    nan_superx_sans_display_black___secondary_display_face___ultra_tight_0_85_leading_creates_a_dense_typographic_slab__the_contrast_to_archy_s_rounded_forms__used_in_alternate_hero_rotations_____font_nan_superx_sans_display_black:
      - "**Substitute:** Druk Wide, Inter Black, Söhne Breit"
      - "**Weights:** 400"
      - "**Sizes:** 216px"
      - "**Line height:** 0.85"
      - "**OpenType features:** `\"dlig\", \"frac\" 0, \"onum\" 0, \"ss01\" 0, \"ss02\" 0, \"ss03\" 0, \"tnum\" 0`"
      - "**Role:** Secondary display face — ultra-tight 0.85 leading creates a dense typographic slab, the contrast to Archy's rounded forms. Used in alternate hero rotations."

    nan_superx_serif_text_thin_italic___editorial_italic_display___the_serif_counterpoint_that_proves_the_practice_spans_humanist_letterforms__not_just_geometric_sans__thin_weight_at_216px_is_a_tension_device__fragile_strokes_at_monumental_size_____font_nan_superx_serif_text_thin_italic:
      - "**Substitute:** Tiempos Headline, Domaine Display, Canela"
      - "**Weights:** 400"
      - "**Sizes:** 216px"
      - "**Line height:** 1.00"
      - "**OpenType features:** `\"dlig\" 0, \"frac\" 0, \"onum\" 0, \"ss01\" 0, \"ss02\" 0, \"ss03\" 0, \"ss05\" 0, \"tnum\" 0`"
      - "**Role:** Editorial italic display — the serif counterpoint that proves the practice spans humanist letterforms, not just geometric sans. Thin weight at 216px is a tension device: fragile strokes at monumental size."

    nan_holo_gigawide_ultra1___ultra_condensed_display_at_336px___the_widest_single_character_scale_on_the_site__used_sparingly_as_a_one_word_exclamation_____font_nan_holo_gigawide_ultra1:
      - "**Substitute:** Druk Condensed Super, Compacta Black"
      - "**Weights:** 400"
      - "**Sizes:** 336px"
      - "**Line height:** 0.80"
      - "**OpenType features:** `\"ss01\" 0, \"ss02\" 0, \"ss03\" 0, \"ss04\" 0, \"ss05\" 0, \"ss06\" 0, \"ss07\" 0, \"ss08\" 0, \"ss09\" 0, \"ss10\" 0`"
      - "**Role:** Ultra-condensed display at 336px — the widest single-character scale on the site, used sparingly as a one-word exclamation."

    nan_rage_family_zipp__soft__beau__sans_narrow___card_specimen_headlines_in_the__you_might_have_missed__grid___each_card_shows_the_family_name_rendered_in_that_exact_family_at_86px__making_the_grid_self_documenting_____font_nan_rage_family_zipp_soft_beau_sans_narrow:
      - "**Substitute:** Recoleta, Pangram Sans, GT America"
      - "**Weights:** 400"
      - "**Sizes:** 86px"
      - "**Line height:** 1.00"
      - "**Role:** Card specimen headlines in the 'You Might Have Missed' grid — each card shows the family name rendered in that exact family at 86px, making the grid self-documenting."

    nanragezippnarrowthin___nanragezippnarrowthin___detected_in_extracted_data_but_not_described_by_ai____font_nanragezippnarrowthin:
      - "**Weights:** 400"
      - "**Sizes:** 86px"
      - "**Line height:** 1"
      - "**Role:** NaNRageZippNarrowThin — detected in extracted data but not described by AI"

    nanragesoftxcondensedregular___nanragesoftxcondensedregular___detected_in_extracted_data_but_not_described_by_ai____font_nanragesoftxcondensedregular:
      - "**Weights:** 400"
      - "**Sizes:** 86px"
      - "**Line height:** 1"
      - "**Role:** NaNRageSoftXCondensedRegular — detected in extracted data but not described by AI"

    nanragebeaustandardsemibold___nanragebeaustandardsemibold___detected_in_extracted_data_but_not_described_by_ai____font_nanragebeaustandardsemibold:
      - "**Weights:** 400"
      - "**Sizes:** 86px"
      - "**Line height:** 1"
      - "**Role:** NaNRageBeauStandardSemibold — detected in extracted data but not described by AI"

    nanragesansnarrowmedium___nanragesansnarrowmedium___detected_in_extracted_data_but_not_described_by_ai____font_nanragesansnarrowmedium:
      - "**Weights:** 400"
      - "**Sizes:** 86px"
      - "**Line height:** 1"
      - "**Role:** NaNRageSansNarrowMedium — detected in extracted data but not described by AI"

    nanserfatextlightitalic___nanserfatextlightitalic___detected_in_extracted_data_but_not_described_by_ai____font_nanserfatextlightitalic:
      - "**Weights:** 400"
      - "**Sizes:** 86px"
      - "**Line height:** 1"
      - "**Role:** NaNSerfATextLightItalic — detected in extracted data but not described by AI"

    nanserfsanslightitalic___nanserfsanslightitalic___detected_in_extracted_data_but_not_described_by_ai____font_nanserfsanslightitalic:
      - "**Weights:** 400"
      - "**Sizes:** 86px"
      - "**Line height:** 1"
      - "**Role:** NaNSerfSansLightItalic — 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 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | 1.2px | `--text-body` |"
      info: "| subheading | 20px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| display-sm | 45px | 1.2 | 3.4px | `--text-display-sm` |"
      info: "| display | 86px | 1 | — | `--text-display` |"
      info: "| display-lg | 216px | 0.85 | — | `--text-display-lg` |"
      info: "| display-xl | 228px | 0.9 | — | `--text-display-xl` |"
      info: "| display-mega | 336px | 0.8 | — | `--text-display-mega` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      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: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 18px |"
      info: "| small | 2px |"
      info: "| inputs | 2px |"
      info: "| buttons | 29.4px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    top_navigation_bar:
      role: "Primary site navigation"

      sticky_top_bar_on_b7ffb4_canvas__left: "'NaN' wordmark in NaN Holo Mono 14px uppercase. Center: nav links (FONTS, COMMISSIONS, PROJECTS, TXT, SHOP, STUDIO) in NaN Holo Mono 14px uppercase, #262626, letter-spacing 0.075em, 32px gap. Right: CART (0), ACCOUNT, then a tri-color circle icon and a small 'NaN' dot. No background fill, no shadow — sits directly on canvas. Bottom edge: no border, sections define their own top spacing."

    hero_statement_block:
      role: "Opening brand description"

      info: "Left-aligned paragraph in NaN Holo Mono 26px weight 400, #262626, line-height 2.25. Content fills roughly 75% of viewport width. No background, no border — the text IS the hero. A lime-green (#00ff00) SVG scribble overlays the right portion at ~40% opacity, drawing the eye past the text without blocking it."

    live_font_tester:
      role: "Interactive type specimen controller"

      info: "Sectioned widget with four control rows stacked vertically on a #b7ffb4 canvas. Row 1: small section label (◉ Our Latest Font Release, NaN Holo Mono 14px #262626, 0.075em tracking). Row 2: Size slider (left-aligned label 'Size 220px', then NaN Holo Mono 12px, line-track 1px #262626 with 6px #262626 thumb) + Leading slider (right-side label 'Leading', identical track style) + two select dropdowns (NaN Holo Mono 13px, 1px #262626 border, 2px radius, no fill). Row 3: keyboard-shortcut chips (rounded squares, 1px #262626 border, NaN Holo Mono 12px) + a pear emoji. Row 4: a massive display specimen in the selected family at the selected size. No drop shadows — borders and whitespace define the frame."

    aurora_cta_button:
      role: "Sole chromatic primary action"

      info: "Filled pill button, 29.4px radius, horizontal aurora gradient (pink #ffa3b6 → violet #dda9ff → blue #a2d1ff → pink). Label in NaN Holo Mono 14px weight 500, #262626, uppercase, 0.075em tracking. Padding 14px 20px. Sits centered below the display specimen. One per page — this gradient is rationed because it is the only warm element in a cool palette."

    display_headline_specimen:
      role: "Full-bleed type demonstration"

      info: "Massive custom typeface rendered at 216-336px, weight 400, #000000 or #262626, line-height 0.80-0.90 depending on face. Text bleeds to both edges of the viewport (no max-width clamp) so the letterforms define the page's lateral scale. No background, no border — the type floats on the mint canvas."

    font_specimen_card:
      role: "Library entry in the 'You Might Have Missed' grid"

      info: "Three-column grid on the mint canvas. Each card: 1px #262626 border, 18px radius, transparent fill (shows mint through). Interior padding 20px. The card's own family name is rendered IN that family at 86px, weight 400, #262626, line-height 1.0 — the card is its own specimen. Two-line stack: 'NaN' (smaller) above 'Rage Zipp' (larger). No shadow, no hover elevation — the 1px border does all the work."

    section_label:
      role: "Subsection heading"

      info: "Left-aligned '◉ Section Name' in NaN Holo Mono 14px weight 400, #262626, 0.075em tracking. The hollow circle (◉) is a recurring typographic bullet that marks every new section without using color or weight changes. Followed by generous vertical breathing space (60-80px) before the section content."

    select_dropdown:
      role: "Form control within the font tester"

      info: "Inline select element, NaN Holo Mono 13px, #262626, 1px #262626 border, 2px radius, transparent fill. No focus ring color change — interaction is communicated through a 1-2px border darkening to #000000 on hover/focus. Inline with text controls on a single row."

    range_slider:
      role: "Numeric control for size/leading"

      info: "Native range input styled as a 1px #262626 line track with a 6px square #262626 thumb. Label text in NaN Holo Mono 12px, #262626, sits above the track. No value tooltip — the display specimen updates in real time as the user drags, providing feedback."

    keyboard_hint_chip:
      role: "Reveals power-user shortcuts"

      info: "Small rounded-square button, ~20×20px, 1px #262626 border, 2px radius, NaN Holo Mono 11px #262626 label. Used to surface shortcuts (e.g. 'R', arrows, 'OT') adjacent to the font tester controls."

  do_s_and_don_ts:

    do:
      - "Set all interface text in NaN Holo Mono with 0.075em tracking — the monospace + tracking combo is what reads as 'NaN UI' versus generic mono"
      - "Use #262626 for text and borders, never #000000 for UI chrome — pure black is reserved for the heaviest display specimens"
      - "Let display specimens bleed to viewport edges without a max-width clamp; the type defines the lateral scale"
      - "Use the aurora gradient button (29.4px radius) exactly once per page — the gradient is rationed because it's the only warm element"
      - "Mark every new section with a hollow circle bullet (◉) in 14px NaN Holo Mono, followed by 60-80px vertical space"
      - "Make specimen cards self-documenting: render the card's font name IN that font, not as a label"
      - "Keep all elevation to 1-2px hairline borders in #262626 — never introduce drop shadows"

    don_t:
      - "Don't use #ffffff as a page surface — it kills the mint canvas identity"
      - "Don't use #000000 for body text or UI borders — it fights the pastel canvas"
      - "Don't set the Holo Mono tracking below 0.05em — the letter-spacing is what makes the mono read as deliberate UI"
      - "Don't introduce additional accent colors — the palette is mint, lime, carbon, and the aurora gradient, nothing else"
      - "Don't add drop shadows to cards or buttons — the site defines depth through borders and whitespace only"
      - "Don't use a 4px or 8px radius on cards — the 18px card radius is the signature soft-corner language"
      - "Don't wrap display specimens in centered containers; full-bleed is what makes the type feel architectural"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Mint Canvas | `#b7ffb4` | Page background and base surface for all sections |"
    info: "| 1 | Bone Lift | `#efefef` | Rare elevated surface for inverted or hover states where mint needs to recede |"
    info: "| 2 | Aurora CTA | `#ffa3b6` | The sole gradient surface — the discover-more button |"

  imagery:

    info: "Zero photography, zero illustration beyond the lime SVG scribble overlay. The site IS imagery: each custom typeface is photographed (rendered) at 200-336px and the resulting letterforms ARE the visual content. Product screenshots are absent because the product is the typography itself. The only non-typographic graphical element is a tri-color circle icon (likely a theme/palette swatch) in the nav and a pear emoji in the font tester — small, playful, and accepted as part of the studio's informal voice. Card specimens double as their own photography: the card titled 'Rage Zipp' is photographed by being typeset in Rage Zipp."

  layout:

    info: "Full-bleed canvas with no global max-width clamp on display type. Top nav is a single horizontal row, sticky, with the wordmark left and utility links right. The hero is a left-aligned statement paragraph occupying ~75% viewport width, with no centered hero or split-screen image. Sections stack vertically with 60-80px gaps, each opened by a small mono-uppercase label. The 'You Might Have Missed' section is a 3-column card grid. The display specimens in the font tester span the full viewport width and bleed off the right edge intentionally. Density is sparse and editorial — the mint canvas breathes between sections, and the only dense moment is the font tester control row."

  agent_prompt_guide:

    quick_color_reference:
    - "Page background: #b7ffb4 (Mint Canvas)"
    - "Primary text & borders: #262626 (Carbon Ink)"
    - "Muted text & disabled borders: #999999 (Fog)"
    - "Decorative accent: #00ff00 (Lime Spark)"
    - "Inverted / elevated surface: #efefef (Bone)"
    - "primary action: #b7ffb4 (filled action)"

    example_component_prompts:
    - "*Hero statement*: full-width #b7ffb4 background, left-aligned paragraph in NaN Holo Mono 26px weight 400, #262626, line-height 2.25, letter-spacing 0.075em, occupying ~75% viewport width. Overlay a lime (#00ff00) SVG scribble at the right edge."
    - "*Display specimen*: full-bleed headline in NaN Archy On ExtraBlack 228px, weight 400, #000000, line-height 0.90, bleeding past the right viewport edge. No background, no border, no max-width."
    - "Create a Primary Action Button: #b7ffb4 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "*Font specimen card*: 1px #262626 border, 18px radius, transparent fill (shows #b7ffb4 through), 20px padding. The card's own title rendered in its native family at 86px weight 400 #262626 line-height 1.0. Three-column grid."
    - "*Section label*: left-aligned '◉ Section Name' in NaN Holo Mono 14px weight 400, #262626, 0.075em tracking, followed by 80px vertical space before content begins."

  type_tester_interaction_model:

    info: "The font tester is a signature component: visitors drag Size (80-336px) and Leading (0.8-1.2) sliders and select a family + weight from dropdowns, and a live display specimen updates in real time. The interaction makes the site function as both a storefront and a working demo. When recreating, render the four control elements (size slider, leading slider, family dropdown, weight dropdown) on a single row above the specimen, with section labels in NaN Holo Mono 12px, all borders at 1px #262626, 2px radius, transparent fill. The specimen below should use the same color and padding rhythm as the hero display block. No toggle buttons, no modal — the tester is always visible and always live."

  similar_brands:

    - "**Pangram Pangram** — Same type-foundry-as-website model where custom display faces at 100-200px ARE the page, with a minimal mono-uppercase nav wrapping the specimens"
    - "**Klim Type Foundry** — Same specimen-first architecture — large type specimens dominate the viewport, monospaced metadata labels, single-color canvas with no decorative imagery"
    - "**OH no Type** — Same bold-display-on-pastel-canvas approach and playful studio tone, with type specimens doubling as page composition"
    - "**Future Fonts** — Same experimental-foundry aesthetic — mint-toned canvas, uppercase mono nav, type families presented as cards with the family name set in its own face"
    - "**Commercial Type** — Same live font-tester pattern with sliders and dropdowns controlling a real-time display specimen, and 1px hairline borders defining all UI frames"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-mint-canvas: #b7ffb4;
          --color-lime-spark: #00ff00;
          --color-carbon-ink: #262626;
          --color-obsidian: #000000;
          --color-fog: #999999;
          --color-smoke: #767676;
          --color-bone: #efefef;
          --color-paper: #ffffff;
          --color-aurora-gradient: #ffa3b6;
          --gradient-aurora-gradient: linear-gradient(270deg, rgb(255, 163, 182), rgb(221, 169, 255) 33%, rgb(162, 209, 255) 66%, rgb(255, 163, 182));
        
          /* Typography — Font Families */
          --font-nan-holo-mono: 'NaN Holo Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-nan-holo: 'NaN Holo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-archy-on-extrablack: 'NaN Archy On ExtraBlack', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-superx-sans-display-black: 'NaN SuperX Sans Display Black', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-superx-serif-text-thin-italic: 'NaN SuperX Serif Text Thin Italic', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-nan-holo-gigawide-ultra1: 'NaN Holo Gigawide Ultra1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-rage-family-zipp-soft-beau-sans-narrow: 'NaN Rage family (Zipp, Soft, Beau, Sans Narrow)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragezippnarrowthin: 'NaNRageZippNarrowThin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragesoftxcondensedregular: 'NaNRageSoftXCondensedRegular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragebeaustandardsemibold: 'NaNRageBeauStandardSemibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragesansnarrowmedium: 'NaNRageSansNarrowMedium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanserfatextlightitalic: 'NaNSerfATextLightItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanserfsanslightitalic: 'NaNSerfSansLightItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 1.2px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-display-sm: 45px;
          --leading-display-sm: 1.2;
          --tracking-display-sm: 3.4px;
          --text-display: 86px;
          --leading-display: 1;
          --text-display-lg: 216px;
          --leading-display-lg: 0.85;
          --text-display-xl: 228px;
          --leading-display-xl: 0.9;
          --text-display-mega: 336px;
          --leading-display-mega: 0.8;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 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-60: 60px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-2xl: 18px;
          --radius-3xl: 29.4px;
        
          /* Named Radii */
          --radius-cards: 18px;
          --radius-small: 2px;
          --radius-inputs: 2px;
          --radius-buttons: 29.4px;
        
          /* Surfaces */
          --surface-mint-canvas: #b7ffb4;
          --surface-bone-lift: #efefef;
          --surface-aurora-cta: #ffa3b6;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-mint-canvas: #b7ffb4;
          --color-lime-spark: #00ff00;
          --color-carbon-ink: #262626;
          --color-obsidian: #000000;
          --color-fog: #999999;
          --color-smoke: #767676;
          --color-bone: #efefef;
          --color-paper: #ffffff;
          --color-aurora-gradient: #ffa3b6;
        
          /* Typography */
          --font-nan-holo-mono: 'NaN Holo Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-nan-holo: 'NaN Holo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-archy-on-extrablack: 'NaN Archy On ExtraBlack', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-superx-sans-display-black: 'NaN SuperX Sans Display Black', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-superx-serif-text-thin-italic: 'NaN SuperX Serif Text Thin Italic', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-nan-holo-gigawide-ultra1: 'NaN Holo Gigawide Ultra1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nan-rage-family-zipp-soft-beau-sans-narrow: 'NaN Rage family (Zipp, Soft, Beau, Sans Narrow)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragezippnarrowthin: 'NaNRageZippNarrowThin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragesoftxcondensedregular: 'NaNRageSoftXCondensedRegular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragebeaustandardsemibold: 'NaNRageBeauStandardSemibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanragesansnarrowmedium: 'NaNRageSansNarrowMedium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanserfatextlightitalic: 'NaNSerfATextLightItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanserfsanslightitalic: 'NaNSerfSansLightItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 1.2px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-display-sm: 45px;
          --leading-display-sm: 1.2;
          --tracking-display-sm: 3.4px;
          --text-display: 86px;
          --leading-display: 1;
          --text-display-lg: 216px;
          --leading-display-lg: 0.85;
          --text-display-xl: 228px;
          --leading-display-xl: 0.9;
          --text-display-mega: 336px;
          --leading-display-mega: 0.8;
        
          /* Spacing */
          --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-60: 60px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-2xl: 18px;
          --radius-3xl: 29.4px;
        }