pampam_city___style_reference:
  info: "> Old explorer's notebook on warm cream"

  theme: "light"

  info: "PamPam reads as a warm editorial travel journal translated into a modern app: a soft parchment-cream canvas (#faf2ec) carries the interface, with a custom display serif ('Nineties') giving headlines a vintage-magazine voice against a clean, workhorse Inter body. The palette is nearly monochromatic, leaning on a single muted lavender-gray (#9894a8) for borders, links, and hairlines, and reserving one vivid periwinkle blue (#4b72f3) for the one action that must feel switched on. Surfaces stay flat and paper-like — white cards float on cream, never the other way around, and shadows are whisper-quiet so the maps and illustrations can do the emotional work. Components are compact and confident: pill-ish buttons with generous 16px radii, 12px-radius cards, and tight 12–16px internal padding. Color and weight, not elevation, carry hierarchy."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Cream | `#faf2ec` | `--color-parchment-cream` | Page canvas — the warm, paper-like surface that everything sits on; cards and buttons float above it as white or charcoal |"
    info: "| Warm Ink | `#1b1917` | `--color-warm-ink` | Primary text and headline color — a near-black with a brown undertone that harmonizes with the cream canvas instead of fighting it |"
    info: "| Carbon | `#000000` | `--color-carbon` | Secondary text, icon strokes, and heavy dark surfaces (filled dark buttons, logo marks); used sparingly so Warm Ink remains the default reading color |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, input fields, and dark-on-light icon fills — the only true white in the system, reserved for elements that must lift off the cream |"
    info: "| Mist Gray | `#e5e5e5` | `--color-mist-gray` | Section dividers, subtle background bands, and inactive surface washes |"
    info: "| Ash | `#8f8f8f` | `--color-ash` | Muted helper text, tertiary metadata, and disabled labels |"
    info: "| Slate Lavender | `#9894a8` | `--color-slate-lavender` | Default link color, hairline borders, tag outlines, and decorative strokes — the most-used chromatic neutral; soft enough to never compete with the blue accent |"
    info: "| Iron | `#222222` | `--color-iron` | Input field text and dark-mode form borders on light surfaces |"
    info: "| Periwinkle | `#4b72f3` | `--color-periwinkle` | Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"
    info: "| Deep Violet | `#2b3ea7` | `--color-deep-violet` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"

  tokens___typography:

    nineties___display_and_editorial_headlines___a_custom_high_contrast_serif_with_vintage_magazine_dna__used_at_80px_for_hero_statements__48px_for_section_headlines__and_28px_for_sub_headlines__its_old_style_serifs_and_tight_1_08_line_height_create_a_printed_page_rhythm_that_is_the_single_most_distinctive_choice_in_the_system__substitute__dm_serif_display__playfair_display__or_recoleta_____font_nineties:
      - "**Substitute:** DM Serif Display"
      - "**Weights:** 400"
      - "**Sizes:** 28px, 48px, 80px"
      - "**Line height:** 1.08"
      - "**Letter spacing:** 0"
      - "**Role:** Display and editorial headlines — a custom high-contrast serif with vintage-magazine DNA. Used at 80px for hero statements, 48px for section headlines, and 28px for sub-headlines. Its old-style serifs and tight 1.08 line-height create a printed-page rhythm that is the single most distinctive choice in the system. Substitute: DM Serif Display, Playfair Display, or Recoleta."

    inter___body__ui_controls__navigation__buttons__and_small_headings__weight_550_inter_s_semibold_is_used_for_emphasized_text_and_button_labels___heavier_than_typical_body_weight_but_lighter_than_a_full_600__giving_the_ui_a_slightly_lighter_touch_than_standard_inter_implementations__always_rendered_with_opentype_features_cv02__cv03__cv04__cv06__cv11_for_the_alternate_character_set_that_gives_the_text_its_slightly_geometric__brand_tuned_feel_____font_inter:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 550"
      - "**Sizes:** 14px, 16px, 18px, 19px"
      - "**Line height:** 1.43, 1.47, 1.50, 1.56"
      - "**OpenType features:** `\"cv02\", \"cv03\", \"cv04\", \"cv06\", \"cv11\" on`"
      - "**Role:** Body, UI controls, navigation, buttons, and small headings. Weight 550 (Inter's semibold) is used for emphasized text and button labels — heavier than typical body weight but lighter than a full 600, giving the UI a slightly lighter touch than standard Inter implementations. Always rendered with OpenType features cv02, cv03, cv04, cv06, cv11 for the alternate character set that gives the text its slightly geometric, brand-tuned feel."

    apple_system___system_ui___fallback_and_os_native_rendering_for_icons__system_messages__and_any_element_where_a_neutral_sans_is_acceptable__acts_as_the_safety_net_so_the_system_never_breaks_if_inter_fails_to_load_____font_apple_system_system_ui:
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 16px, 18px, 24px"
      - "**Line height:** 1.00, 1.20, 1.56"
      - "**Role:** Fallback and OS-native rendering for icons, system messages, and any element where a neutral sans is acceptable. Acts as the safety net so the system never breaks if Inter fails to load."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 19px | 1.56 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.08 | — | `--text-heading-sm` |"
      info: "| heading | 48px | 1.08 | — | `--text-heading` |"
      info: "| display | 80px | 1.08 | — | `--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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 12px |"
      info: "| cards | 12px |"
      info: "| inputs | 12px |"
      info: "| buttons | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgb(99, 135, 244) 0px...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | `--shadow-subtle-3` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 16px"
      - "**Element gap:** 12px"

  components:

    hero_display_headline:
      role: "Primary page-level statement that anchors the entire viewport"

      info: "Nineties 400 at 80px, line-height 1.08, color #1b1917 (Warm Ink), centered alignment. No letter-spacing manipulation. Sits over the Parchment Cream canvas with generous 56px vertical padding above and below. The tight line-height and high-contrast serif is the signature move — it should always feel like a magazine pull-quote, never a SaaS headline."

    section_headline:
      role: "Secondary heading introducing a new content band"

      info: "Nineties 400 at 48px, line-height 1.08, color #1b1917. Left-aligned when beside body copy, centered when used as a standalone band title. Same serif treatment as the display — the scale drops, the voice stays identical."

    sub_headline:
      role: "Inline heading inside a card or sub-section"

      info: "Nineties 400 at 28px, line-height 1.08, color #1b1917. The smallest size the custom serif is used at — below this, switch to Inter to preserve readability."

    periwinkle_primary_button:
      role: "The single dominant action on a screen"

      info: "Background #4b72f3 (Periwinkle), text #ffffff in Inter 550 at 16px, padding 12px 24px, border-radius 16px. No border, no shadow. The vivid blue against the warm cream is the highest-contrast moment on the page and must be reserved for one action per screen. Hover: deepen to 10% darker; active: inset shadow rgb(99, 135, 244) 0px 2px 0px 0px."

    dark_filled_button:
      role: "Secondary dark action — the contrast twin of the Periwinkle button"

      info: "Background #000000 (Carbon), text #ffffff in Inter 550 at 16px, padding 12px 24px, border-radius 16px. A '+' icon prefix is common. Use for primary in-page actions when the surrounding section already carries blue, or for the nav-level CTA."

    ghost___outlined_button:
      role: "Tertiary or paired alternative action"

      info: "Background transparent, border 1px solid #9894a8 (Slate Lavender) or #000000, text #1b1917 or #000000 in Inter 550 at 16px, padding 11px 23px (1px less to compensate for border), border-radius 16px."

    white_surface_card:
      role: "General-purpose content card for features, integrations, and start-options"

      info: "Background #ffffff, border-radius 12px, border 1px solid #e5e5e5 (Mist), padding 16px–24px. The 1px Mist border is the primary edge; a soft shadow (rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.1) 0 1px 4px) is optional for cards on hero/illustration backgrounds. Contains a colored icon (Periwinkle, Deep Violet, or brand color) above an Inter 550 label."

    cream_card_no_border:
      role: "Card variant for content that should blend into the page rather than lift off it"

      info: "Background #faf2ec (same as canvas), border-radius 12px, padding 24px, no border or shadow. Use when the card is more of a grouping affordance than a discrete surface — the visual cue is spacing and radius, not color contrast."

    input_field:
      role: "Text input for search, queries, and map prompts"

      info: "Background #ffffff, border 1px solid #e5e5e5, border-radius 12px, padding 12px 16px, text in Inter 400 at 16px color #222222. Placeholder text in #8f8f8f. Focus ring: 2px inset rgb(99, 135, 244) — the same Periwinkle used for CTAs, confirming it as the interactive accent."

    press___logo_strip:
      role: "Horizontal row of grayscale partner logos for social proof"

      info: "Logos rendered in #000000 at uniform 24–32px height, evenly spaced with 56px gaps. No background, no border — the strip floats on the cream canvas. Each logo is fully monochrome; the brand color treatment is suppressed to keep the row feeling editorial."

    tag___category_pill:
      role: "Small inline label for map categories, filters, or feature tags"

      info: "Background transparent, border 1px solid #9894a8, border-radius 12px, padding 4px 12px, text Inter 400 at 14px color #1b1917. The Slate Lavender border is the visual identifier — it distinguishes tags from regular text without needing a fill."

    google_sign_in_button:
      role: "Top-right authentication affordance"

      info: "Background #ffffff, border 1px solid #e5e5e5, border-radius 8px–12px, padding 8px 16px, Google 'G' logo at full color (red/yellow/green/blue), text Inter 400 at 14px color #1b1917. A rare instance of multicolor on the site — only acceptable for the official Google mark."

    navigation_bar:
      role: "Top-of-page global navigation"

      info: "Transparent background that lets the Parchment Cream canvas show through. Logo (oval 'PAM' badge in #1b1917) at far left, nav links (Pricing, Solutions, Products, Inspiration) in Inter 400 at 16px color #1b1917, spaced with 32px gaps. Sign-in button pinned right. Padding 16px vertical, 32px horizontal."

    feature_image_card_browser_frame:
      role: "Product showcase card showing the app inside a browser chrome"

      info: "A 3D-tilted browser window mockup (rounded 12px corners, white surface, macOS-style traffic-light dots) containing a map screenshot. Background card has no border, uses the cream canvas. Tilt angle around -5° to -8° creates a 'pinned to a notebook' feel rather than a flat grid."

  do_s_and_don_ts:

    do:
      - "Use Nineties 400 at 80px for hero headlines and 48px for section headlines — the serif is the brand voice and should never be replaced by Inter at large sizes"
      - "Use #faf2ec (Parchment Cream) as the page canvas and let white cards float above it, not the reverse"
      - "Reserve #4b72f3 (Periwinkle) for exactly one primary action per screen; every other action should be Carbon, Ghost, or text-only"
      - "Use 12px radius for cards and 16px radius for buttons — the two-step scale keeps surfaces consistent without rounding into pure pills"
      - "Render Inter with OpenType features cv02, cv03, cv04, cv06, cv11 active to preserve the brand-tuned character set"
      - "Let the Slate Lavender (#9894a8) carry all link and border chromatic work — it is the only chromatic neutral and should appear on every interactive hairline"
      - "Keep shadows to the 1px-border + 4px-soft-drop pattern; never stack multiple drop shadows or add colored glows"

    don_t:
      - "Do not use Nineties below 28px — it becomes unreadable; switch to Inter for any small text"
      - "Do not introduce additional saturated brand colors; the system is monochromatic plus one blue, and adding more will dilute the Periwinkle's impact"
      - "Do not place dark cards on dark backgrounds or white cards on white — the cream/white/carbon triad depends on each surface having contrast against its parent"
      - "Do not use pure #000000 for body text on cream — use #1b1917 (Warm Ink) so the text harmonizes with the parchment instead of punching through it"
      - "Do not apply Periwinkle to large decorative fills, backgrounds, or illustration accents; it is a 40–200px button color, not a section color"
      - "Do not add letter-spacing to Nineties — the tight 1.08 line-height and default tracking are part of the magazine feel"
      - "Do not use heavy elevation (large blur, offset, or colored shadows) — the paper metaphor breaks the moment a card looks like it is floating in space"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment Canvas | `#faf2ec` | Page background — the warm cream that defines the entire site mood |"
    info: "| 1 | Paper White Card | `#ffffff` | Cards, modals, input fields — elements that need to lift off the cream |"
    info: "| 2 | Mist Band | `#e5e5e5` | Subtle section backgrounds and dividers |"
    info: "| 3 | Carbon Block | `#000000` | Dark inverted surfaces — dark CTA buttons, featured blocks |"

  elevation:

    - "**Cards and elevated panels:** `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px`"
    - "**Focus rings and inset accents:** `rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgb(99, 135, 244) 0px 2px 0px 0px inset`"

  imagery:

    info: "Imagery is photographic and atmospheric rather than product-shot: full-bleed soft-focus backgrounds of clouds, skies, and natural landscapes (visible in the hero as a dreamy green-cloud wash) set an emotional travel mood before any product UI appears. Product imagery is contained inside tilted browser-frame mockups that sit on the cream canvas like pages pinned to a board. Icons are flat, geometric, and monochromatic — the colored app-source tiles (Periwinkle, Neutral Notion 'N', Green Sheets) are the only spots of multicolor in the functional UI. Photography is never lifestyle or human-focused; the map IS the hero, and supporting imagery only sets weather and light. Overall density is text-dominant with one large atmospheric image per major section."

  layout:

    info: "Full-bleed atmospheric hero (no max-width constraint on the background image) with a centered text stack: display headline, supporting paragraph, dark inline CTA, and a row of three white 'Start from' cards. Below the hero, a centered max-width 1200px content column takes over. Sections alternate between a press-logo strip on cream, then a two-column product showcase (tilted browser mockup left, heading + body + Periwinkle CTA right). Vertical rhythm is generous: 64px between major sections, 12–16px between elements, 56px gaps inside multi-column bands. Navigation is a minimal top bar floating on the cream canvas with a sign-in affordance pinned to the right. No sidebar, no mega-menu, no sticky elements beyond the nav."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas (page background): #faf2ec"
    - "card surface: #ffffff"
    - "primary text: #1b1917"
    - "border / hairline: #9894a8 (Slate Lavender) or #e5e5e5 (Mist)"
    - "accent: #2b3ea7 (Deep Violet, rare)"
    - "primary action: no distinct CTA color"

    3_example_component_prompts:

    - "**Hero section**: Parchment Cream (#faf2ec) canvas with a full-bleed soft-focus landscape photo behind. Headline 'Put your world on the map.' set in Nineties 400 at 80px, line-height 1.08, color #1b1917, centered. Supporting paragraph in Inter 400 at 18px, line-height 1.56, color #1b1917. A dark Carbon (#000000) button '+ Make map' at 12px 24px padding, 16px radius, white Inter 550 16px label. Below, a row of three white cards (12px radius, 1px Mist border, 16px padding) each containing a colored icon above an Inter 550 16px label."

    - "**Feature showcase band**: Two-column layout at max-width 1200px, 56px column gap. Left: a browser-frame mockup (12px radius, white surface, macOS traffic-light dots) tilted -5°, containing a map screenshot. Right: Inter 550 16px uppercase label 'For business' in #8f8f8f, then Nineties 400 48px heading 'Make your own custom maps.' in #1b1917, then Inter 400 18px body in #1b1917, then a Periwinkle (#4b72f3) filled button 'Explore our map maker' at 12px 24px padding, 16px radius, white Inter 550 16px label."

    - "**Press logo strip**: Centered row on Parchment Cream canvas, 56px gap between logos. Each logo rendered in #000000 at 28px height, uniformly scaled. No background, no border, no text labels — logos only, set in a single horizontal line with generous breathing room above and below (64px padding each side)."

  similar_brands:

    - "**Notion** — Same warm-neutral canvas with dark Inter body and a single accent color reserved for primary actions; similar whisper-light card elevation."
    - "**Linear** — Same monochromatic interface with one vivid accent for the primary CTA, tight typographic rhythm, and minimal decorative chrome."
    - "**Arc browser** — Same editorial sensibility — custom display typography against a cream-toned canvas, with restrained color and a paper-like surface treatment."
    - "**Substack** — Same serif-headline-over-cream-canvas identity with Inter body, treating the product page like a long-form magazine spread."
    - "**Felt** — Same map-making category, same soft warm palette, and same approach of letting one colored tile per integration provide the only chromatic accent."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-cream: #faf2ec;
          --color-warm-ink: #1b1917;
          --color-carbon: #000000;
          --color-paper-white: #ffffff;
          --color-mist-gray: #e5e5e5;
          --color-ash: #8f8f8f;
          --color-slate-lavender: #9894a8;
          --color-iron: #222222;
          --color-periwinkle: #4b72f3;
          --color-deep-violet: #2b3ea7;
        
          /* Typography — Font Families */
          --font-nineties: 'Nineties', 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;
          --font-apple-system-system-ui: '-apple-system / system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 19px;
          --leading-subheading: 1.56;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.08;
          --text-heading: 48px;
          --leading-heading: 1.08;
          --text-display: 80px;
          --leading-display: 1.08;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-w550: 550;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
        
          /* Named Radii */
          --radius-tags: 12px;
          --radius-cards: 12px;
          --radius-inputs: 12px;
          --radius-buttons: 16px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgb(99, 135, 244) 0px 2px 0px 0px inset;
          --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #faf2ec;
          --surface-paper-white-card: #ffffff;
          --surface-mist-band: #e5e5e5;
          --surface-carbon-block: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-cream: #faf2ec;
          --color-warm-ink: #1b1917;
          --color-carbon: #000000;
          --color-paper-white: #ffffff;
          --color-mist-gray: #e5e5e5;
          --color-ash: #8f8f8f;
          --color-slate-lavender: #9894a8;
          --color-iron: #222222;
          --color-periwinkle: #4b72f3;
          --color-deep-violet: #2b3ea7;
        
          /* Typography */
          --font-nineties: 'Nineties', 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;
          --font-apple-system-system-ui: '-apple-system / system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 19px;
          --leading-subheading: 1.56;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.08;
          --text-heading: 48px;
          --leading-heading: 1.08;
          --text-display: 80px;
          --leading-display: 1.08;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgb(99, 135, 244) 0px 2px 0px 0px inset;
          --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
        }