international_magic___style_reference:
  info: "> bảo tàng gallery về đêm — một luồng sáng duy nhất, một tác phẩm, và một bức tường nhung đen"

  theme: "dark"

  info: "International Magic hiện ra trong một khoảng không gần như đen tuyệt đối, nơi chỉ có tác phẩm được phép lên tiếng. Toàn bộ giao diện là achromatic — chữ off-white trên nền than, với xám là biến số duy nhất — để sự chú ý đổ dồn vào thứ mà agency đang trình diễn. Layout thưa thớt, canh giữa và dọc, với khoảng thở rộng lớn giữa các section; navigation nằm gọn như ba từ lặng lẽ trên một dòng duy nhất ở đầu trang. Các component mềm mại và bo tròn: 24px trên device và work containers, 9999px trên button và badge, cùng một bóng đổ khuếch tán lớn nhẹ nhàng nâng nội dung lên khỏi bóng tối thay vì khóa chặt bằng các góc sắc. Typeface Wand UI Pro tùy chỉnh gánh gần như toàn bộ giọng thương hiệu — negative tracking ở kích thước display và tracking hơi rộng hơn trên micro-label tạo ra cùng một độ tương phản như trang: lặng lẽ ở tỷ lệ lớn, có chủ đích ở tỷ lệ nhỏ."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Void | `#0a0a0a` | `--color-void` | Nền trang, canvas chính — trường tối chứa mọi tác phẩm |"
    info: "| Chalk | `#f7f7f7` | `--color-chalk` | Viền mảnh, divider, đường viền input và cạnh card trên bề mặt sáng. Không dùng làm màu CTA chính |"
    info: "| Ivory | `#ebebeb` | `--color-ivory` | Nhãn button và viền button — ấm hơn Chalk một chút, dùng trên pill button trung tính để tạo cảm giác được nhấn nhưng không lạnh lẽo |"
    info: "| Ash | `#7c7c7c` | `--color-ash` | Link phụ và body text, divider nhẹ — xám trung bình cho type bị giảm nhấn mạnh nhưng vẫn cần đọc được |"
    info: "| Graphite | `#4d4d4d` | `--color-graphite` | Viền heading và heading text có độ nhấn thấp — xám trung bình đậm hơn, lùi lại phía sau type Chalk chính |"
    info: "| Smoke | `#707070` | `--color-smoke` | Badge text — nằm giữa Ash và Charcoal, êm dịu và khó đọc như một vật trang trí |"
    info: "| Steel | `#616161` | `--color-steel` | Viền badge — kết hợp với Smoke text để tạo affordance tag dạng outline |"
    info: "| Charcoal | `#585858` | `--color-charcoal` | Bề mặt nâng cao cho button filled trung tính duy nhất — sáng hơn Void vừa đủ để button thì thầm thay vì hét lên |"

  tokens___typography:

    wand_ui_pro___typeface_duy_nhất___dùng_cho_mọi_thứ_từ_display_headline_96px_đến_badge_label_10px__các_weight_475_và_550_là_chủ_lực__650_dành_cho_nhấn_mạnh__font_là_tùy_chỉnh_nhưng_mang_tính_cách_của_một_geometric_grotesk_đương_đại_với_hơi_ấm_humanist_tinh_tế__apertures_hẹp_và_x_height_cao_____font_wand_ui_pro:
      - "**Thay thế:** General Sans, Switzer, hoặc Inter (bật stylistic alternates)"
      - "**Weights:** 400, 475, 500, 550, 650"
      - "**Kích thước:** 10, 11, 15, 16, 32, 96"
      - "**Line height:** 1.00–1.60"
      - "**Letter spacing:** -1.632px ở 96px, -0.384px ở 32px, -0.16px ở 16px, +0.25px ở 10px"
      - "**OpenType features:** `\"ordn\" on, \"ss01\" on`"
      - "**Vai trò:** Typeface duy nhất — dùng cho mọi thứ từ display headline 96px đến badge label 10px. Các weight 475 và 550 là chủ lực; 650 dành cho nhấn mạnh. Font là tùy chỉnh nhưng mang tính cách của một geometric grotesk đương đại với hơi ấm humanist tinh tế, apertures hẹp và x-height cao."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.4 | 0.25px | `--text-caption` |"
      info: "| body-lg | 16px | 1.6 | -0.16px | `--text-body-lg` |"
      info: "| heading | 32px | 1.25 | -0.384px | `--text-heading` |"
      info: "| display | 96px | 1 | -1.632px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| badges | 9999px |"
      info: "| buttons | 9999px |"
      info: "| smallContainers | 16px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.25) 0px 64px 72px 0px` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 640px"
      - "**Section gap:** 120px"
      - "**Card padding:** 16px"
      - "**Element gap:** 12px"

  components:

    top_bar_navigation:
      vai_trò: "Header toàn site"

      info: "Ba text link trong một hàng ngang duy nhất canh giữa ở đầu trang. Wand UI Pro 11px weight 550 màu Chalk (#f7f7f7), với mục ở giữa (wordmark thương hiệu) đặt lớn hơn một chút hoặc trên dòng riêng. Không có nền, không viền, không logo mark — header là một câu, không phải một thanh."

    display_headline_canh_giữa:
      vai_trò: "Hero / tiêu đề dự án"

      info: "Wand UI Pro 96px weight 400, Chalk (#f7f7f7), line-height 1.0, letter-spacing -1.632px. Canh giữa trong cột 640px. Dùng cho tên dự án duy nhất trên mỗi trang. Weight thì thầm ở kích thước display là signature — nó để headline nằm trên canvas tối mà không cạnh tranh với tác phẩm."

    subtitle_canh_giữa__muted:
      vai_trò: "Nhãn hỗ trợ bên dưới display"

      info: "Wand UI Pro 15–16px weight 400, Ash (#7c7c7c) hoặc Graphite (#4d4d4d), letter-spacing -0.16px. Nằm cách display headline 8–12px, cũng canh giữa."

    ad_badge:
      vai_trò: "Thẻ phân loại dự án"

      info: "Wand UI Pro 10px weight 475, letter-spacing +0.25px, Smoke text (#707070) trên Void với viền 1px Steel (#616161). Radius 9999px. Padding 4px 8px gọn. Pill dạng outline, không bao giờ filled."

    subscribe_button_outlined_ghost:
      vai_trò: "Hành động chính trên trang nội dung"

      info: "Wand UI Pro 15px weight 475, Ivory (#ebebeb) text và viền 1px Ivory trên nền trong suốt / Void. Radius 9999px. Padding 8px 20px. Nằm canh giữa bên dưới nội dung hero. Xử lý ghost giữ cho nó hiện diện mà không phá vỡ đơn sắc tối."

    subscribe_button_filled_neutral:
      vai_trò: "Hành động chính thay thế trên khung sáng hơn"

      info: "Wand UI Pro 15px weight 475, Ivory (#ebebeb) text trên nền Charcoal (#585858). Radius 9999px. Padding 8px 24px. Dùng khi trang cần button tạo cảm giác được nhấn trên một section gần trắng."

    phone___device_mockup_frame:
      vai_trò: "Container hero visual cho video hoặc tác phẩm app"

      info: "Khung dọc với outer radius 24px, đặt bên trong ambient shadow 64px×72px với 25% black. Khung chứa nội dung video và nằm canh giữa trong cột 640px với ít nhất 80px khoảng thở phía trên."

    portrait_thumbnail_card:
      vai_trò: "Tile nhỏ cho creator / contributor"

      info: "Hình vuông radius 20–24px chứa ảnh chân dung cắt tròn. Không viền, không shadow, không caption overlay — chỉ riêng hình ảnh nằm trên Void. Đặt ở góc dưới bên trái của content stack với gap 12px đến element tiếp theo."

    section_divider_vô_hình:
      vai_trò: "Bộ phân cách nhịp dọc"

      info: "Không phải một đường kẻ — chỉ là 120px Void trống giữa các section. Trang dùng không gian âm làm divider duy nhất."

  do_s_and_don_ts:

    do:
      - "Giữ mọi màn hình hoàn toàn achromatic — bảng màu là Void, Chalk và ba xám trung bình; không có điểm nhấn màu."
      - "Canh giữa mọi nội dung trong cột 640px và để 120px Void ngăn cách mỗi section."
      - "Dùng radius 24px trên bất kỳ container nào chứa tác phẩm (device, video, image), và radius 9999px trên bất kỳ tag, badge hoặc button nào."
      - "Nâng tác phẩm nổi bật bằng ambient shadow duy nhất `0px 64px 72px 0px rgba(0,0,0,0.25)` — không bao giờ xếp thêm tầng thứ hai."
      - "Đặt display headline ở 96px / weight 400 / letter-spacing -1.632px; weight thì thầm là thương hiệu."
      - "Dùng `ordn` và `ss01` font features ở bất cứ đâu có Wand UI Pro — chúng là một phần của giọng nói."
      - "Xem top bar như một câu, không phải một thanh: ba từ, 11px / 550, không nền, không viền."

    don_t:
      - "Đừng đưa vào bất kỳ sắc thái màu nào — không xanh, không đỏ, không xám ấm có chroma. Trang có 0% màu sắc theo thiết kế."
      - "Đừng thêm CTA màu chính dạng filled. Hành động luôn là ghost (outlined Ivory) hoặc neutral-charcoal."
      - "Đừng dùng góc sắc 0–4px trên bề mặt device hoặc card — radius 24px là thứ làm cho canvas tối trở nên mềm mại."
      - "Đừng làm đặc các section. Nếu khoảng cách dọc giữa các khối xuống dưới 80px, void ngừng hoạt động."
      - "Đừng dùng weight trên 650 trong Wand UI Pro; hệ thống type giới hạn ở đó và nặng hơn sẽ phá vỡ giọng lặng lẽ."
      - "Đừng thêm secondary shadow, colored shadow hoặc hiệu ứng border-glow để nâng tác phẩm — ambient shadow 64/72/25% là độ cao duy nhất."
      - "Đừng canh trái nội dung hero. Mọi headline, subtitle, badge và CTA trong cột chính đều canh giữa."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Void | `#0a0a0a` | Canvas trang cơ bản |"
    info: "| 2 | Charcoal | `#585858` | Bề mặt button trung tính nâng cao |"

  elevation:

    - "**Work / device mockup containers:** `0px 64px 72px 0px rgba(0, 0, 0, 0.25)`"

  imagery:

    info: "Imagery thưa thớt và tương phản cao: agency trình diễn tác phẩm qua video capture màn hình điện thoại dọc và portrait crop chặt, không bao giờ qua ảnh lifestyle full-bleed. Mọi visual đều nằm trên Void thuần khiết không có bối cảnh nền — khung là một cửa sổ, không phải một cảnh. Portrait được cắt tròn và không chỉnh sửa, video still là raw phone capture, và không có decorative illustration hoặc abstract graphic nào xuất hiện ở bất cứ đâu. Mật độ visual thấp: một device mockup duy nhất, một thumbnail duy nhất, và phần còn lại của trang là type và không gian trống. Iconography vắng mặt trong cột chính; thứ gần giống iconography duy nhất là các player controls tối giản (play, fullscreen) được render dưới dạng pill outlines mảnh."

  layout:

    info: "Mọi trang là một cột đơn canh giữa giới hạn ở khoảng 640px, nổi bên trong canvas Void full-bleed. Không có grid system, không có hàng nhiều cột, và không có sidebar — mỗi màn hình là một stack dọc: top nav ba từ → không gian trống → display headline canh giữa + subtitle + badge → gap thở lớn → một device hoặc image mockup → portrait thumbnail tùy chọn lệch về phía dưới bên trái → ghost CTA ở cuối. Nhịp section được định nghĩa hoàn toàn bằng whitespace dọc (120px giữa các khối) thay vì background bands hoặc divider. Navigation là chrome duy nhất: không sticky header, không mega-menu, không footer. Hero luôn giống nhau — type nổi trong bóng tối không có background image, animation hoặc video autoplay ở đầu trang."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh"
    - "canvas: #0a0a0a"
    - "text: #f7f7f7"
    - "secondary text: #7c7c7c"
    - "border: #f7f7f7 (hairline) hoặc #4d4d4d (low-emphasis)"
    - "badge text: #707070 / badge border: #616161"
    - "primary action: không có màu CTA riêng biệt"

    info: "3 Ví dụ Component Prompts"
    - "Display headline canh giữa: Wand UI Pro 96px (dùng Inter làm thay thế) weight 400, màu #f7f7f7, line-height 1.0, letter-spacing -1.632px, canh giữa trong cột 640px trên canvas #0a0a0a. Tùy chọn AD badge 11px / 550 weight ở phía trên với letter-spacing +0.25px, viền 1px #616161 và radius 9999px."
    - "Ghost subscribe button: Wand UI Pro 15px weight 475, màu #ebebeb, viền 1px solid #ebebeb, radius 9999px, padding 8px dọc / 20px ngang, nền trong suốt, canh giữa, nằm cách khối nội dung cuối cùng 24px."
    - "Phone mockup hero frame: Container outer radius 24px, tỷ lệ khung hình dọc (~9:16), chứa video still, được bọc trong ambient shadow duy nhất `0px 64px 72px 0px rgba(0,0,0,0.25)`. Frame canh giữa trong cột 640px với ít nhất 80px Void trống phía trên và phía dưới."

  similar_brands:

    - "**Locomotive Mtl** — Cùng canvas tối + type thì thầm + khoảng thở dọc rộng rãi, với tác phẩm được trình bày như một artifact đơn canh giữa"
    - "**Resn** — Layout gallery đen achromatic nơi mỗi màn hình là một tác phẩm nổi bật được nâng lên bằng ambient shadow mềm"
    - "**Manual** — Site agency thưa thớt không có accent color, không có background section, và type canh giữa trên nền tối thuần"
    - "**Work & Co** — Nav ba từ tối giản, hero một cột, và cùng sự kiềm chế để tác phẩm tự dẫn dắt trang"
    - "**Ueno** — Homepage agency tối coi void như một khung và dùng một soft shadow để làm nổi tác phẩm"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void: #0a0a0a;
          --color-chalk: #f7f7f7;
          --color-ivory: #ebebeb;
          --color-ash: #7c7c7c;
          --color-graphite: #4d4d4d;
          --color-smoke: #707070;
          --color-steel: #616161;
          --color-charcoal: #585858;
        
          /* Typography — Font Families */
          --font-wand-ui-pro: 'Wand UI Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.25px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --tracking-body-lg: -0.16px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --tracking-heading: -0.384px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: -1.632px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w475: 475;
          --font-weight-medium: 500;
          --font-weight-w550: 550;
          --font-weight-w650: 650;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
        
          /* Layout */
          --page-max-width: 640px;
          --section-gap: 120px;
          --card-padding: 16px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-badges: 9999px;
          --radius-buttons: 9999px;
          --radius-smallcontainers: 16px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 64px 72px 0px;
        
          /* Surfaces */
          --surface-void: #0a0a0a;
          --surface-charcoal: #585858;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void: #0a0a0a;
          --color-chalk: #f7f7f7;
          --color-ivory: #ebebeb;
          --color-ash: #7c7c7c;
          --color-graphite: #4d4d4d;
          --color-smoke: #707070;
          --color-steel: #616161;
          --color-charcoal: #585858;
        
          /* Typography */
          --font-wand-ui-pro: 'Wand UI Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.25px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --tracking-body-lg: -0.16px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --tracking-heading: -0.384px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: -1.632px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 64px 72px 0px;
        }