diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..f92dc46
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,589 @@
+---
+version: alpha
+name: Claude-design-analysis
+description: A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display ("Copernicus" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark.
+
+colors:
+  primary: "#cc785c"
+  primary-active: "#a9583e"
+  primary-disabled: "#e6dfd8"
+  ink: "#141413"
+  body: "#3d3d3a"
+  body-strong: "#252523"
+  muted: "#6c6a64"
+  muted-soft: "#8e8b82"
+  hairline: "#e6dfd8"
+  hairline-soft: "#ebe6df"
+  canvas: "#faf9f5"
+  surface-soft: "#f5f0e8"
+  surface-card: "#efe9de"
+  surface-cream-strong: "#e8e0d2"
+  surface-dark: "#181715"
+  surface-dark-elevated: "#252320"
+  surface-dark-soft: "#1f1e1b"
+  on-primary: "#ffffff"
+  on-dark: "#faf9f5"
+  on-dark-soft: "#a09d96"
+  accent-teal: "#5db8a6"
+  accent-amber: "#e8a55a"
+  success: "#5db872"
+  warning: "#d4a017"
+  error: "#c64545"
+
+typography:
+  display-xl:
+    fontFamily: "Copernicus, Tiempos Headline, serif"
+    fontSize: 64px
+    fontWeight: 400
+    lineHeight: 1.05
+    letterSpacing: -1.5px
+  display-lg:
+    fontFamily: "Copernicus, Tiempos Headline, serif"
+    fontSize: 48px
+    fontWeight: 400
+    lineHeight: 1.1
+    letterSpacing: -1px
+  display-md:
+    fontFamily: "Copernicus, Tiempos Headline, serif"
+    fontSize: 36px
+    fontWeight: 400
+    lineHeight: 1.15
+    letterSpacing: -0.5px
+  display-sm:
+    fontFamily: "Copernicus, Tiempos Headline, serif"
+    fontSize: 28px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: -0.3px
+  title-lg:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 22px
+    fontWeight: 500
+    lineHeight: 1.3
+    letterSpacing: 0
+  title-md:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 18px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  title-sm:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-md:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.55
+    letterSpacing: 0
+  body-sm:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.55
+    letterSpacing: 0
+  caption:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 13px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  caption-uppercase:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 12px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 1.5px
+  code:
+    fontFamily: "JetBrains Mono, ui-monospace, monospace"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.6
+    letterSpacing: 0
+  button:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1
+    letterSpacing: 0
+  nav-link:
+    fontFamily: "StyreneB, Inter, sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+  section: 96px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+    height: 40px
+  button-primary-active:
+    backgroundColor: "{colors.primary-active}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.md}"
+  button-primary-disabled:
+    backgroundColor: "{colors.primary-disabled}"
+    textColor: "{colors.muted}"
+    rounded: "{rounded.md}"
+  button-secondary:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+    height: 40px
+  button-secondary-on-dark:
+    backgroundColor: "{colors.surface-dark-elevated}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  button-text-link:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+  button-icon-circular:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.full}"
+    size: 36px
+  text-link:
+    backgroundColor: transparent
+    textColor: "{colors.primary}"
+    typography: "{typography.body-md}"
+  top-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.nav-link}"
+    height: 64px
+  hero-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-xl}"
+    padding: 96px
+  hero-illustration-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+  feature-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  product-mockup-card-dark:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  code-window-card:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.code}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  model-comparison-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  pricing-tier-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-lg}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  pricing-tier-card-featured:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-lg}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  callout-card-coral:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  connector-tile:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-sm}"
+    rounded: "{rounded.lg}"
+    padding: 20px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 10px 14px
+    height: 40px
+  text-input-focused:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+  cookie-consent-card:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  category-tab:
+    backgroundColor: transparent
+    textColor: "{colors.muted}"
+    typography: "{typography.nav-link}"
+    padding: 8px 14px
+    rounded: "{rounded.md}"
+  category-tab-active:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.nav-link}"
+    rounded: "{rounded.md}"
+  badge-pill:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.pill}"
+    padding: 4px 12px
+  badge-coral:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption-uppercase}"
+    rounded: "{rounded.pill}"
+    padding: 4px 12px
+  cta-band-coral:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.display-sm}"
+    rounded: "{rounded.lg}"
+    padding: 64px
+  cta-band-dark:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-sm}"
+    rounded: "{rounded.lg}"
+    padding: 64px
+  footer:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark-soft}"
+    typography: "{typography.body-sm}"
+    padding: 64px
+---
+
+## Overview
+
+Claude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a **tinted cream canvas** (`{colors.canvas}` — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a **slab-serif display** ("Copernicus" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with **StyreneB / Inter** body sans. The combination feels like a literary publication, not a SaaS marketing page.
+
+Brand voltage comes from the **cream + coral pairing** — coral (`{colors.primary}` — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.
+
+The system has three surface modes that alternate page-by-page:
+1. **Cream canvas** (`{colors.canvas}`) — default body floor
+2. **Light cream cards** (`{colors.surface-card}`) — feature card backgrounds
+3. **Dark navy product surfaces** (`{colors.surface-dark}`) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself
+
+The dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.
+
+**Key Characteristics:**
+- Warm cream canvas (`{colors.canvas}` — #faf9f5) with dark warm-ink text (`{colors.ink}` — #141413). The brand's defining color choice.
+- Coral primary CTA (`{colors.primary}` — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.
+- Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.
+- Dark navy product mockup cards (`{colors.surface-dark}` — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.
+- Light cream feature cards (`{colors.surface-card}` — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.
+- Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.
+- Border radius is hierarchical: `{rounded.md}` (8px) for buttons + inputs, `{rounded.lg}` (12px) for content + product cards, `{rounded.xl}` (16px) for the hero illustration container, `{rounded.pill}` for badges.
+- Section rhythm `{spacing.section}` (96px) — modern-SaaS standard. Internal card padding stays generous at `{spacing.xl}` (32px).
+
+## Colors
+
+### Brand & Accent
+- **Coral / Primary** (`{colors.primary}` — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.
+- **Coral Active** (`{colors.primary-active}` — #a9583e): The press / hover-darker variant.
+- **Coral Disabled** (`{colors.primary-disabled}` — #e6dfd8): A desaturated cream-tinted disabled state.
+- **Accent Teal** (`{colors.accent-teal}` — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, "active connection" dots in connectors page).
+- **Accent Amber** (`{colors.accent-amber}` — #e8a55a): A small companion warm-tone used on category badges and inline highlights.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.
+- **Surface Soft** (`{colors.surface-soft}` — #f5f0e8): Section dividers, very-soft band backgrounds.
+- **Surface Card** (`{colors.surface-card}` — #efe9de): Feature cards, content cards. One step darker than canvas.
+- **Surface Cream Strong** (`{colors.surface-cream-strong}` — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.
+- **Surface Dark** (`{colors.surface-dark}` — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.
+- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #252320): Elevated cards inside dark bands (settings panels in mockups).
+- **Surface Dark Soft** (`{colors.surface-dark-soft}` — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.
+- **Hairline** (`{colors.hairline}` — #e6dfd8): The 1px border tone on cream surfaces. Same hex as `{colors.primary-disabled}` — borders feel like one elevation step rather than ink lines.
+- **Hairline Soft** (`{colors.hairline-soft}` — #ebe6df): Barely-visible divider used inside the same band.
+
+### Text
+- **Ink** (`{colors.ink}` — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.
+- **Body Strong** (`{colors.body-strong}` — #252523): Emphasized paragraphs, lead text.
+- **Body** (`{colors.body}` — #3d3d3a): Default running-text color.
+- **Muted** (`{colors.muted}` — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.
+- **Muted Soft** (`{colors.muted-soft}` — #8e8b82): Captions, fine-print, copyright lines.
+- **On Primary** (`{colors.on-primary}` — #ffffff): Text on coral buttons.
+- **On Dark** (`{colors.on-dark}` — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).
+- **On Dark Soft** (`{colors.on-dark-soft}` — #a09d96): Footer body text, secondary labels in dark mockups.
+
+### Semantic
+- **Success** (`{colors.success}` — #5db872): Green status dots, "available" indicators.
+- **Warning** (`{colors.warning}` — #d4a017): Warning callouts (rare on marketing surfaces).
+- **Error** (`{colors.error}` — #c64545): Validation errors.
+
+## Typography
+
+### Font Family
+The system runs **Copernicus** (or **Tiempos Headline** as substitute) as the slab-serif display face for headlines, and **StyreneB** (or **Inter** as substitute) as the humanist sans for body, navigation, and UI labels. **JetBrains Mono** handles code blocks. The fallback stack walks `Tiempos Headline, Garamond, "Times New Roman", serif` for display and `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for body.
+
+The display/body split is editorial:
+- Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display
+- StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels
+- JetBrains Mono → all code blocks and terminal text
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xl}` | 64px | 400 | 1.05 | -1.5px | Homepage h1 ("Meet your thinking partner") — Copernicus serif |
+| `{typography.display-lg}` | 48px | 400 | 1.1 | -1px | Section heads — Copernicus |
+| `{typography.display-md}` | 36px | 400 | 1.15 | -0.5px | Sub-section heads, model names — Copernicus |
+| `{typography.display-sm}` | 28px | 400 | 1.2 | -0.3px | Pricing tier names, callout headlines — Copernicus |
+| `{typography.title-lg}` | 22px | 500 | 1.3 | 0 | Pricing plan size labels — StyreneB |
+| `{typography.title-md}` | 18px | 500 | 1.4 | 0 | Feature card titles, intro paragraphs |
+| `{typography.title-sm}` | 16px | 500 | 1.4 | 0 | Connector tile titles, list labels |
+| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text — StyreneB |
+| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |
+| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |
+| `{typography.caption-uppercase}` | 12px | 500 | 1.4 | 1.5px | Category tags, "NEW" badges |
+| `{typography.code}` | 14px | 400 | 1.6 | 0 | Code blocks — JetBrains Mono |
+| `{typography.button}` | 14px | 500 | 1.0 | 0 | Standard button labels |
+| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
+
+### Principles
+Display sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.
+
+Body type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.
+
+### Note on Font Substitutes
+If Copernicus / Tiempos Headline is unavailable, **Cormorant Garamond** at weight 500 with -0.02em letter-spacing is the closest open-source approximation. **EB Garamond** is a fallback. For StyreneB, **Inter** is the closest match — both are humanist sans designed for screen reading. **Söhne** is another close alternative if licensed.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
+- **Section padding:** `{spacing.section}` (96px) — modern-SaaS rhythm.
+- **Card internal padding:** `{spacing.xl}` (32px) for feature cards, pricing tier cards, model comparison cards; `{spacing.lg}` (24px) for code-window cards and connector tiles.
+- **Callout / CTA bands:** `{spacing.xxl}` (48px) inside coral callout cards; 64px inside the larger dark CTA band.
+
+### Grid & Container
+- **Max content width:** ~1200px centered.
+- **Editorial body:** Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).
+- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
+- **Connector tile grids:** 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.
+- **Pricing grid:** 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.
+
+### Whitespace Philosophy
+The cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat | No shadow, no border | Body sections, top nav, hero bands |
+| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav, occasionally on cards |
+| Cream card | `{colors.surface-card}` background — no shadow | Feature cards, content cards |
+| Dark surface card | `{colors.surface-dark}` background — no shadow | Code editor mockups, model showcase cards |
+| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (the system uses `0 1px 3px rgba(20,20,19,0.08)` rarely) |
+
+The elevation philosophy is **color-block first, shadow rare**. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.
+
+### Decorative Depth
+- The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.
+- Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in `{colors.muted-soft}`, status bars at the bottom in `{colors.surface-dark-elevated}`.
+- Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 4px | Reserved for badge accents and tiny dropdowns |
+| `{rounded.sm}` | 6px | Small inline buttons, dropdown items |
+| `{rounded.md}` | 8px | Standard CTA buttons, text inputs, category tabs |
+| `{rounded.lg}` | 12px | Content cards (feature, pricing, code-window, model-comparison) |
+| `{rounded.xl}` | 16px | Hero illustration container, the larger marquee components |
+| `{rounded.pill}` | 9999px | Badge pills, "NEW" tags |
+| `{rounded.full}` | 9999px / 50% | Avatar substitutes, icon buttons |
+
+### Photography & Illustrations
+Claude's hero rarely uses photography. Instead it uses:
+- Simple line-art illustrations with coral + dark-navy strokes on the cream canvas
+- Code editor mockups (the dominant "hero" treatment on developer-focused pages)
+- Terminal output mockups with monospace text on dark
+- Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails
+
+When photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.
+
+## Components
+
+### Top Navigation
+
+**`top-nav`** — Cream nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the Anthropic spike-mark + "Claude" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with "Sign in" text-link, "Try Claude" `{component.button-primary}` (coral). Menu items in `{typography.nav-link}` (StyreneB 14px / 500).
+
+### Buttons
+
+**`button-primary`** — The signature coral CTA. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), type `{typography.button}` (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). Active state `button-primary-active` darkens to `{colors.primary-active}` (#a9583e).
+
+**`button-secondary`** — Cream button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border, same padding + height + radius as primary.
+
+**`button-secondary-on-dark`** — Used over `{colors.surface-dark}` cards. Background `{colors.surface-dark-elevated}` (#252320), text `{colors.on-dark}`. Stays dark — the system never inverts to a light secondary on dark surfaces.
+
+**`button-text-link`** — Inline text button, no background. Used for "Sign in" in the top nav and inline CTA links.
+
+**`button-icon-circular`** — 36px circular icon button. Background `{colors.canvas}`, hairline border, ink-color icon. Used for carousel arrows, share, "view more".
+
+**`text-link`** — Inline body links in `{colors.primary}` (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.
+
+### Cards & Containers
+
+**`hero-band`** — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding `{spacing.section}` (96px).
+
+**`hero-illustration-card`** — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background `{colors.canvas}` or `{colors.surface-dark}` depending on context, rounded `{rounded.xl}` (16px).
+
+**`feature-card`** — Used in 3-up feature grids. Background `{colors.surface-card}` (#efe9de — slightly darker cream), rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Carries a small icon at top, an `{typography.title-md}` headline, and a body description in `{typography.body-md}`.
+
+**`product-mockup-card-dark`** — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background `{colors.surface-dark}`, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries text labels in `{colors.on-dark}` and product UI fragments below.
+
+**`code-window-card`** — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in `{typography.code}` (JetBrains Mono), and sometimes a "Run" button or terminal output panel below. Background `{colors.surface-dark}` with `{colors.surface-dark-soft}` for the inner code block, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). The signature visual element of Claude Code product pages.
+
+**`model-comparison-card`** — Used on the homepage's "Which problem are you up against?" section comparing Opus / Sonnet / Haiku. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries the model name, a short capability blurb, and a `{component.text-link}` to learn more.
+
+**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Carries the plan name in `{typography.title-lg}` (StyreneB), price in `{typography.display-sm}` (Copernicus serif!), feature checklist in `{typography.body-md}`, and a `{component.button-primary}` at the bottom.
+
+**`pricing-tier-card-featured`** — The featured tier (typically "Pro" or "Team"). Background flips to `{colors.surface-dark}`, text inverts to `{colors.on-dark}`. The dark surface IS the featured-tier signal.
+
+**`callout-card-coral`** — A full-bleed coral card carrying a major call-to-action. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), rounded `{rounded.lg}`, padding `{spacing.xxl}` (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).
+
+**`connector-tile`** — Used on the connectors page's integration grid. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding 20px. Each tile carries a logo at top, a `{typography.title-sm}` connector name, and a short description.
+
+### Inputs & Forms
+
+**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px. 1px hairline border in `{colors.hairline}`.
+
+**`text-input-focused`** — Focus state. Border thickens or shifts to `{colors.primary}` (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.
+
+**`cookie-consent-card`** — Bottom-right floating dark cookie banner. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). One of the few places dark surface appears at small scale on cream pages.
+
+### Tags / Badges
+
+**`badge-pill`** — Small pill label used for category tags. Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.caption}` (13px / 500), rounded `{rounded.pill}`, padding 4px × 12px.
+
+**`badge-coral`** — Coral-fill badge for "NEW", "BETA", featured highlights. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption-uppercase}` (12px / 500 / 1.5px tracking), rounded `{rounded.pill}`, padding 4px × 12px.
+
+### Tab / Filter
+
+**`category-tab`** + **`category-tab-active`** — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, `{colors.muted}` text. Active: `{colors.surface-card}` background, `{colors.ink}` text. Padding 8px × 14px, rounded `{rounded.md}`.
+
+### CTA / Footer
+
+**`cta-band-coral`** — A pre-footer "Try Claude" CTA card. Full-width coral fill, white type, rounded `{rounded.lg}`, padding 64px. Carries an h2 in `{typography.display-sm}` (still serif!), a sub-line, and a cream-button CTA.
+
+**`cta-band-dark`** — Alternative pre-footer band on developer-focused pages. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding 64px. Often pairs with a code-window card.
+
+**`footer`** — Dark navy footer that closes every page. Background `{colors.surface-dark}` (#181715), text `{colors.on-dark-soft}`. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + "Anthropic" wordmark sits at the top in `{colors.on-dark}`. The footer never inverts.
+
+## Do's and Don'ts
+
+### Do
+- Anchor every page on the cream canvas. Pure white reads as "any other AI tool"; the warm tint is the brand differentiator.
+- Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.
+- Reserve `{colors.primary}` (coral) for primary CTAs and full-bleed `{component.callout-card-coral}` moments. Don't paint accent moments coral elsewhere.
+- Use `{component.product-mockup-card-dark}` and `{component.code-window-card}` to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.
+- Pair `{component.feature-card}` (cream) with `{component.product-mockup-card-dark}` (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.
+- Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.
+- Apply `{spacing.section}` (96px) between major bands.
+
+### Don't
+- Don't use cool grays or pure white for canvas. Cream is the brand.
+- Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.
+- Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.
+- Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.
+- Don't use Inter for display headlines. The serif character is the brand voice.
+- Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.
+- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-illustration-card stacks below content; feature grids 1-up; connector tiles 2-up; pricing 1-up; footer 4 cols → 1 |
+| Tablet | 768–1024px | Top nav stays horizontal but tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up |
+| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up or 6-up connector tiles; 3-up pricing tiers |
+| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |
+
+### Touch Targets
+- `{component.button-primary}` at minimum 40 × 40px.
+- `{component.button-icon-circular}` at exactly 36 × 36 — slightly under WCAG 44 but visually centered.
+- `{component.text-input}` height is 40px.
+- Connector tile entire card area is tappable; effective tap area >> 44px.
+
+### Collapsing Strategy
+- Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.
+- Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.
+- Feature grids reduce columns rather than scaling cards down.
+- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
+- Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.
+
+### Image Behavior
+- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
+- Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.
+- Avatar photos in testimonials crop to circles at every breakpoint.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time. Reference its YAML key (`{component.feature-card}`, `{component.code-window-card}`).
+2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries in `components:`.
+3. Use `{token.refs}` everywhere — never inline hex.
+4. Never document hover. Default and Active/Pressed states only.
+5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable.
+6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).
+7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.
+
+## Known Gaps
+
+- Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.
+- The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.
+- Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.
+- Form validation states beyond `{component.text-input-focused}` are not extracted — error / success states would need a sign-up or feedback flow to confirm.
+- The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.
+- The "agent" / "computer use" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.
diff --git a/assets/Admin-BC2FD85r.js b/assets/Admin-BC2FD85r.js
index daa3314..75326d7 100644
--- a/assets/Admin-BC2FD85r.js
+++ b/assets/Admin-BC2FD85r.js
@@ -1,8 +1,8 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/SendMail-gI-QSIA2.js","assets/index.esm-YCBPJhFu.js","assets/index-rOHOLR3M.js","assets/index-CeVFrBXC.css","assets/index-BHtaHxM4.css","assets/SendMail-aMwcx0sS.css"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/SendMail-gI-QSIA2.js","assets/index.esm-YCBPJhFu.js","assets/index-209f628e.js","assets/index-CeVFrBXC.css","assets/index-BHtaHxM4.css","assets/SendMail-aMwcx0sS.css"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { d as ie, h as U, c as Ot, i as Nt, b as qt, a as Vt, e as Ft, f as Oe, _ as pe, r as Ne, u as St, g as Xe, j as jt, k as Wt, l as f, m as Ht, n as Te, w as Ze, o as Ut, p as xe, q as dt, N as ct, X as pt, A as Kt, s as ze, t as Gt, v as mt, x as Jt, y as Qt, z as Qe, B as Xt, C as Zt, D as E, E as Q, F as M, G as ee, H as ue, I as ae, J as te, K as O, L as Ye, M as P, O as le, P as e, Q as t, R as o, S as a, T as Lt, U as Ke, V as m, W as Ee, Y as Ge, Z as Ce, $ as st, a0 as qe, a1 as Yt, a2 as ea, a3 as It, a4 as _t, a5 as de, a6 as ot, a7 as ta, a8 as He, a9 as Mt, aa as Tt, ab as X, ac as rt, ad as Ve, ae as Z, af as aa, ag as Pt, ah as Et, ai as ge, aj as Fe, ak as la, al as re, am as Dt, an as ft, ao as Ue, ap as De, aq as Le, ar as it, as as et, at as vt, au as na, av as ut, aw as Rt, ax as sa, ay as $t, az as Bt, aA as zt, aB as oa, aC as ra, aD as ia, aE as ua, aF as da, aG as ca, aH as pa, aI as ma, __tla as __tla_0 } from "./index-rOHOLR3M.js";
+import { d as ie, h as U, c as Ot, i as Nt, b as qt, a as Vt, e as Ft, f as Oe, _ as pe, r as Ne, u as St, g as Xe, j as jt, k as Wt, l as f, m as Ht, n as Te, w as Ze, o as Ut, p as xe, q as dt, N as ct, X as pt, A as Kt, s as ze, t as Gt, v as mt, x as Jt, y as Qt, z as Qe, B as Xt, C as Zt, D as E, E as Q, F as M, G as ee, H as ue, I as ae, J as te, K as O, L as Ye, M as P, O as le, P as e, Q as t, R as o, S as a, T as Lt, U as Ke, V as m, W as Ee, Y as Ge, Z as Ce, $ as st, a0 as qe, a1 as Yt, a2 as ea, a3 as It, a4 as _t, a5 as de, a6 as ot, a7 as ta, a8 as He, a9 as Mt, aa as Tt, ab as X, ac as rt, ad as Ve, ae as Z, af as aa, ag as Pt, ah as Et, ai as ge, aj as Fe, ak as la, al as re, am as Dt, an as ft, ao as Ue, ap as De, aq as Le, ar as it, as as et, at as vt, au as na, av as ut, aw as Rt, ax as sa, ay as $t, az as Bt, aA as zt, aB as oa, aC as ra, aD as ia, aE as ua, aF as da, aG as ca, aH as pa, aI as ma, __tla as __tla_0 } from "./index-209f628e.js";
 let Ql;
 let __tla = Promise.all([
   (() => {
diff --git a/assets/Mail-QoAjapmb.js b/assets/Mail-QoAjapmb.js
index 3f17e24..bf214c1 100644
--- a/assets/Mail-QoAjapmb.js
+++ b/assets/Mail-QoAjapmb.js
@@ -1,4 +1,4 @@
-import { G as h, H as g, w, O as D, E as v, S as a, ab as d, Q as s, ae as p, l as M, M as b, aJ as x, a5 as T, aK as k, D as i, P as l, ac as N, V as n, R as c, aL as O, F as S } from "./index-rOHOLR3M.js";
+import { G as h, H as g, w, O as D, E as v, S as a, ab as d, Q as s, ae as p, l as M, M as b, aJ as x, a5 as T, aK as k, D as i, P as l, ac as N, V as n, R as c, aL as O, F as S } from "./index-209f628e.js";
 const V = { class: "center" }, B = ["srcdoc"], I = { __name: "Mail", setup(C) {
   const { telegramApp: r, loading: _, useUTCDate: f } = g(), m = k(), e = M({});
   w(r, async () => {
diff --git a/assets/SendMail-BZn2VeiJ.js b/assets/SendMail-BZn2VeiJ.js
index 308e2b0..1456c7f 100644
--- a/assets/SendMail-BZn2VeiJ.js
+++ b/assets/SendMail-BZn2VeiJ.js
@@ -1,5 +1,5 @@
-import { T as z, E } from "./index.esm-YCBPJhFu.js";
-import { G as P, I as H, H as I, J as F, aM as J, O as $, M as p, S as e, D as d, E as f, P as a, Q as s, ao as D, V as b, R as i, K as G, aN as K, ap as Y, F as S, as as Q, T as Z, Z as W, _ as X, am as ee, ar as te, aw as ae, au as ne, ab as x, ae as M, a5 as le, aO as se, l as oe } from "./index-rOHOLR3M.js";
+import { T as z, E } from "./index.esm-YCBPJhFu.js";
+import { G as P, I as H, H as I, J as F, aM as J, O as $, M as p, S as e, D as d, E as f, P as a, Q as s, ao as D, V as b, R as i, K as G, aN as K, ap as Y, F as S, as as Q, T as Z, Z as W, _ as X, am as ee, ar as te, aw as ae, au as ne, ab as x, ae as M, a5 as le, aO as se, l as oe } from "./index-209f628e.js";
 const ue = { key: 0, class: "center" }, de = { key: 0 }, ce = { key: 1 }, re = { class: "left" }, ie = ["innerHTML"], _e = { key: 1, style: { border: "1px solid #ccc" } }, me = { __name: "SendMail", setup(pe) {
   const c = H(), v = oe(false), y = se(), { settings: _, sendMailModel: t, indexTab: k, userSettings: w } = I(), { t: l } = F({ locale: "zh", messages: { en: { successSend: "Please check your sendbox. If failed, please check your balance or try again later.", fromName: "Your Name and Address, leave Name blank to use email address", toName: "Recipient Name and Address, leave Name blank to use email address", subject: "Subject", options: "Options", edit: "Edit", preview: "Preview", content: "Content", send: "Send", requestAccess: "Request Access", requestAccessTip: "You need to request access to send mail, if have request, please contact admin.", send_balance: "Send Mail Balance Left", text: "Text", html: "HTML", "rich text": "Rich Text", tooLarge: "Too large file, please upload file less than 1MB." }, zh: { successSend: "\u8BF7\u67E5\u770B\u60A8\u7684\u53D1\u4EF6\u7BB1, \u5982\u679C\u5931\u8D25, \u8BF7\u68C0\u67E5\u60A8\u7684\u4F59\u989D\u6216\u7A0D\u540E\u91CD\u8BD5\u3002", fromName: "\u4F60\u7684\u540D\u79F0\u548C\u5730\u5740\uFF0C\u540D\u79F0\u4E0D\u586B\u5199\u5219\u4F7F\u7528\u90AE\u7BB1\u5730\u5740", toName: "\u6536\u4EF6\u4EBA\u540D\u79F0\u548C\u5730\u5740\uFF0C\u540D\u79F0\u4E0D\u586B\u5199\u5219\u4F7F\u7528\u90AE\u7BB1\u5730\u5740", subject: "\u4E3B\u9898", options: "\u9009\u9879", edit: "\u7F16\u8F91", preview: "\u9884\u89C8", content: "\u5185\u5BB9", send: "\u53D1\u9001", requestAccess: "\u7533\u8BF7\u6743\u9650", requestAccessTip: "\u60A8\u9700\u8981\u7533\u8BF7\u6743\u9650\u624D\u80FD\u53D1\u9001\u90AE\u4EF6, \u5982\u679C\u5DF2\u7ECF\u7533\u8BF7\u8FC7, \u8BF7\u8054\u7CFB\u7BA1\u7406\u5458\u63D0\u5347\u989D\u5EA6\u3002", send_balance: "\u5269\u4F59\u53D1\u9001\u90AE\u4EF6\u989D\u5EA6", text: "\u6587\u672C", html: "HTML", "rich text": "\u5BCC\u6587\u672C", tooLarge: "\u6587\u4EF6\u8FC7\u5927, \u8BF7\u4E0A\u4F20\u5C0F\u4E8E1MB\u7684\u6587\u4EF6\u3002" } } }), C = [{ label: l("text"), value: "text" }, { label: l("html"), value: "html" }, { label: l("rich text"), value: "rich" }], q = async () => {
     try {
diff --git a/assets/SendMail-gI-QSIA2.js b/assets/SendMail-gI-QSIA2.js
index 3b4c691..574f1d3 100644
--- a/assets/SendMail-gI-QSIA2.js
+++ b/assets/SendMail-gI-QSIA2.js
@@ -1,5 +1,5 @@
-import { T as B, E as L } from "./index.esm-YCBPJhFu.js";
-import { G as V, I as R, aR as E, J as O, aM as z, D as r, E as p, P as l, Q as n, ap as I, K as P, V as g, R as x, S as e, F as N, as as F, T as H, Z as A, _ as D, am as J, ar as K, aw as G, au as Q, ab as f, ae as Y, a5 as Z, aO as $, M as q, l as W } from "./index-rOHOLR3M.js";
+import { T as B, E as L } from "./index.esm-YCBPJhFu.js";
+import { G as V, I as R, aR as E, J as O, aM as z, D as r, E as p, P as l, Q as n, ap as I, K as P, V as g, R as x, S as e, F as N, as as F, T as H, Z as A, _ as D, am as J, ar as K, aw as G, au as Q, ab as f, ae as Y, a5 as Z, aO as $, M as q, l as W } from "./index-209f628e.js";
 const X = { class: "center" }, ee = { class: "left" }, te = ["innerHTML"], ae = { key: 1, style: { border: "1px solid #ccc" } }, le = { __name: "SendMail", setup(oe) {
   const c = R(), m = W(false), _ = $(), t = E("sendMailByAdminModel", { fromName: "", fromMail: "", toName: "", toMail: "", subject: "", contentType: "text", content: "" }), { t: s } = O({ locale: "zh", messages: { en: { successSend: "Please check your sendbox. If failed, please try again later.", fromName: "Your Name and Address, leave Name blank to use email address", toName: "Recipient Name and Address, leave Name blank to use email address", subject: "Subject", options: "Options", edit: "Edit", preview: "Preview", content: "Content", send: "Send", text: "Text", html: "HTML", "rich text": "Rich Text", tooLarge: "Too large file, please upload file less than 1MB." }, zh: { successSend: "\u8BF7\u67E5\u770B\u60A8\u7684\u53D1\u4EF6\u7BB1, \u5982\u679C\u5931\u8D25, \u8BF7\u68C0\u67E5\u7A0D\u540E\u91CD\u8BD5\u3002", fromName: "\u4F60\u7684\u540D\u79F0\u548C\u5730\u5740\uFF0C\u540D\u79F0\u4E0D\u586B\u5199\u5219\u4F7F\u7528\u90AE\u7BB1\u5730\u5740", toName: "\u6536\u4EF6\u4EBA\u540D\u79F0\u548C\u5730\u5740\uFF0C\u540D\u79F0\u4E0D\u586B\u5199\u5219\u4F7F\u7528\u90AE\u7BB1\u5730\u5740", subject: "\u4E3B\u9898", options: "\u9009\u9879", edit: "\u7F16\u8F91", preview: "\u9884\u89C8", content: "\u5185\u5BB9", send: "\u53D1\u9001", text: "\u6587\u672C", html: "HTML", "rich text": "\u5BCC\u6587\u672C", tooLarge: "\u6587\u4EF6\u8FC7\u5927, \u8BF7\u4E0A\u4F20\u5C0F\u4E8E1MB\u7684\u6587\u4EF6\u3002" } } }), M = [{ label: s("text"), value: "text" }, { label: s("html"), value: "html" }, { label: s("rich text"), value: "rich" }], T = async () => {
     try {
diff --git a/assets/claude-design.css b/assets/claude-design.css
new file mode 100644
index 0000000..6bc452f
--- /dev/null
+++ b/assets/claude-design.css
@@ -0,0 +1,1063 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&family=Noto+Serif+SC:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap");
+
+:root {
+  --cd-primary: #cc785c;
+  --cd-primary-active: #a9583e;
+  --cd-ink: #141413;
+  --cd-body: #3d3d3a;
+  --cd-body-strong: #252523;
+  --cd-muted: #6c6a64;
+  --cd-muted-soft: #8e8b82;
+  --cd-hairline: #e6dfd8;
+  --cd-hairline-soft: #ebe6df;
+  --cd-canvas: #faf9f5;
+  --cd-surface-soft: #f5f0e8;
+  --cd-surface-card: #efe9de;
+  --cd-surface-cream-strong: #e8e0d2;
+  --cd-surface-dark: #181715;
+  --cd-surface-dark-elevated: #252320;
+  --cd-surface-dark-soft: #1f1e1b;
+  --cd-on-primary: #ffffff;
+  --cd-on-dark: #faf9f5;
+  --cd-on-dark-soft: #a09d96;
+  --cd-success: #5db872;
+  --cd-warning: #d4a017;
+  --cd-error: #c64545;
+  --cd-shadow-soft: 0 1px 3px rgba(20, 20, 19, 0.08);
+  --cd-shadow-panel: 0 16px 40px rgba(20, 20, 19, 0.06);
+  --cd-display-font: "Source Serif 4", "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
+  --cd-body-font: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
+  --cd-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+  background: var(--cd-canvas);
+  color: var(--cd-body);
+}
+
+body {
+  font-family: var(--cd-body-font);
+  font-size: 16px;
+  letter-spacing: 0;
+}
+
+::selection {
+  background: rgba(204, 120, 92, 0.22);
+}
+
+.n-config-provider {
+  min-height: 100vh;
+  background: var(--cd-canvas);
+  color: var(--cd-body);
+}
+
+.n-grid[data-v-2ffec98f] {
+  max-width: 1200px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.main[data-v-2ffec98f] {
+  height: auto !important;
+  min-height: 100vh;
+  text-align: left !important;
+}
+
+.main[data-v-2ffec98f] > .n-space > div[role="none"] {
+  width: 100%;
+}
+
+.n-layout,
+.n-layout .n-layout-scroll-container {
+  background: transparent !important;
+  color: var(--cd-body) !important;
+}
+
+.n-layout[data-v-2ffec98f] {
+  min-height: calc(100vh - 172px) !important;
+}
+
+.n-space {
+  font-family: var(--cd-body-font);
+}
+
+.n-page-header-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: rgba(250, 249, 245, 0.94);
+  border-bottom: 1px solid var(--cd-hairline);
+  backdrop-filter: blur(14px);
+}
+
+.n-page-header {
+  min-height: 64px;
+  padding: 0 8px;
+}
+
+.n-page-header .n-page-header__avatar {
+  margin-right: 8px;
+}
+
+.n-page-header .n-avatar {
+  width: 40px !important;
+  height: 40px !important;
+  border-radius: 10px !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+.n-page-header .n-avatar img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain !important;
+}
+
+.n-page-header .n-page-header__title h3 {
+  margin: 0;
+  color: var(--cd-ink);
+  font-family: var(--cd-display-font);
+  font-size: 26px;
+  font-weight: 400;
+  line-height: 1.16;
+  letter-spacing: 0;
+}
+
+.n-page-header .n-page-header__extra {
+  color: var(--cd-muted);
+}
+
+.n-menu {
+  --n-item-text-color: var(--cd-muted) !important;
+  --n-item-text-color-hover: var(--cd-ink) !important;
+  --n-item-text-color-active: var(--cd-ink) !important;
+  --n-item-icon-color: var(--cd-muted) !important;
+  --n-item-icon-color-hover: var(--cd-primary) !important;
+  --n-item-icon-color-active: var(--cd-primary) !important;
+  --n-item-color-hover: var(--cd-surface-soft) !important;
+  --n-item-color-active: var(--cd-surface-card) !important;
+  --n-border-radius: 8px !important;
+  font-family: var(--cd-body-font);
+}
+
+.n-menu .n-button {
+  min-height: 36px;
+  border-radius: 8px !important;
+  font-weight: 500 !important;
+}
+
+.n-menu .n-button.n-button--primary-type {
+  --n-color: var(--cd-surface-card) !important;
+  --n-color-hover: var(--cd-surface-card) !important;
+  --n-color-pressed: var(--cd-surface-cream-strong) !important;
+  --n-color-focus: var(--cd-surface-card) !important;
+  --n-text-color: var(--cd-ink) !important;
+  --n-text-color-hover: var(--cd-ink) !important;
+  --n-text-color-pressed: var(--cd-ink) !important;
+  --n-text-color-focus: var(--cd-ink) !important;
+}
+
+.n-card {
+  --n-border-radius: 12px !important;
+  --n-color: var(--cd-canvas) !important;
+  --n-color-embedded: var(--cd-surface-card) !important;
+  --n-color-modal: var(--cd-canvas) !important;
+  --n-color-popover: var(--cd-canvas) !important;
+  --n-text-color: var(--cd-body) !important;
+  --n-title-text-color: var(--cd-ink) !important;
+  --n-border-color: var(--cd-hairline) !important;
+  --n-box-shadow: none !important;
+  border: 1px solid var(--cd-hairline) !important;
+  box-shadow: none !important;
+}
+
+.n-card > .n-card-header .n-card-header__main,
+.n-card .n-card-header__main {
+  font-family: var(--cd-display-font);
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.n-card > .n-card__content {
+  padding: 32px !important;
+}
+
+.center .n-card,
+.center[data-v-33992ef1] .n-card,
+.center[data-v-09845092] .n-card {
+  max-width: 640px !important;
+}
+
+.center[data-v-33992ef1] {
+  margin: 72px 20px 20px !important;
+}
+
+.n-tabs {
+  --n-bar-color: var(--cd-primary) !important;
+  --n-tab-text-color: var(--cd-muted) !important;
+  --n-tab-text-color-active: var(--cd-ink) !important;
+  --n-tab-text-color-hover: var(--cd-ink) !important;
+  --n-tab-border-color: var(--cd-hairline) !important;
+  --n-tab-border-radius: 8px !important;
+  --n-color-segment: var(--cd-surface-soft) !important;
+  --n-pane-text-color: var(--cd-body) !important;
+}
+
+.n-tabs-nav {
+  border-radius: 12px;
+}
+
+.n-tabs-tab {
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+.n-tabs-tab.n-tabs-tab--active {
+  background: var(--cd-surface-card);
+}
+
+.n-tabs .n-tabs-bar {
+  height: 2px;
+  border-radius: 9999px;
+}
+
+.n-form-item {
+  --n-label-text-color: var(--cd-body-strong) !important;
+  --n-feedback-text-color: var(--cd-muted) !important;
+  --n-asterisk-color: var(--cd-primary) !important;
+}
+
+.n-input {
+  --n-border-radius: 8px !important;
+  --n-height: 40px !important;
+  --n-color: var(--cd-canvas) !important;
+  --n-color-focus: var(--cd-canvas) !important;
+  --n-text-color: var(--cd-ink) !important;
+  --n-caret-color: var(--cd-primary) !important;
+  --n-border: 1px solid var(--cd-hairline) !important;
+  --n-border-hover: 1px solid var(--cd-primary) !important;
+  --n-border-focus: 1px solid var(--cd-primary) !important;
+  --n-box-shadow-focus: 0 0 0 3px rgba(204, 120, 92, 0.15) !important;
+  --n-placeholder-color: var(--cd-muted-soft) !important;
+  --n-loading-color: var(--cd-primary) !important;
+}
+
+.n-button {
+  min-height: 40px;
+  border-radius: 8px !important;
+  font-family: var(--cd-body-font);
+  font-weight: 500 !important;
+  letter-spacing: 0;
+}
+
+.n-button.n-button--primary-type {
+  --n-color: var(--cd-primary) !important;
+  --n-color-hover: var(--cd-primary-active) !important;
+  --n-color-pressed: var(--cd-primary-active) !important;
+  --n-color-focus: var(--cd-primary-active) !important;
+  --n-text-color: var(--cd-on-primary) !important;
+  --n-text-color-hover: var(--cd-on-primary) !important;
+  --n-text-color-pressed: var(--cd-on-primary) !important;
+  --n-text-color-focus: var(--cd-on-primary) !important;
+  --n-border: 1px solid var(--cd-primary) !important;
+  --n-border-hover: 1px solid var(--cd-primary-active) !important;
+  --n-border-pressed: 1px solid var(--cd-primary-active) !important;
+  --n-border-focus: 1px solid var(--cd-primary-active) !important;
+  --n-ripple-color: var(--cd-primary-active) !important;
+}
+
+.n-button.n-button--default-type {
+  --n-color: var(--cd-canvas) !important;
+  --n-color-hover: var(--cd-surface-soft) !important;
+  --n-color-pressed: var(--cd-surface-card) !important;
+  --n-color-focus: var(--cd-surface-soft) !important;
+  --n-text-color: var(--cd-ink) !important;
+  --n-text-color-hover: var(--cd-ink) !important;
+  --n-text-color-pressed: var(--cd-ink) !important;
+  --n-text-color-focus: var(--cd-ink) !important;
+  --n-border: 1px solid var(--cd-hairline) !important;
+  --n-border-hover: 1px solid var(--cd-primary) !important;
+  --n-border-pressed: 1px solid var(--cd-primary-active) !important;
+  --n-border-focus: 1px solid var(--cd-primary) !important;
+}
+
+.n-button.n-button--info-type {
+  --n-color: transparent !important;
+  --n-color-hover: var(--cd-surface-soft) !important;
+  --n-color-pressed: var(--cd-surface-card) !important;
+  --n-color-focus: var(--cd-surface-soft) !important;
+  --n-text-color: var(--cd-primary) !important;
+  --n-text-color-hover: var(--cd-primary-active) !important;
+  --n-text-color-pressed: var(--cd-primary-active) !important;
+  --n-text-color-focus: var(--cd-primary-active) !important;
+  --n-border: 1px solid transparent !important;
+  --n-border-hover: 1px solid transparent !important;
+  --n-border-pressed: 1px solid transparent !important;
+  --n-border-focus: 1px solid transparent !important;
+}
+
+.n-divider {
+  --n-color: var(--cd-hairline) !important;
+}
+
+.n-alert {
+  --n-border-radius: 12px !important;
+  --n-color: var(--cd-surface-card) !important;
+  --n-color-info: var(--cd-surface-card) !important;
+  --n-title-text-color: var(--cd-ink) !important;
+  --n-content-text-color: var(--cd-body) !important;
+  background: var(--cd-surface-card) !important;
+  border: 1px solid var(--cd-hairline) !important;
+}
+
+.n-alert .n-alert-body__title,
+.n-alert .n-alert-body__content {
+  color: var(--cd-body) !important;
+}
+
+.n-empty {
+  --n-text-color: var(--cd-muted) !important;
+  --n-icon-color: var(--cd-muted-soft) !important;
+}
+
+.n-empty .n-empty__description {
+  color: var(--cd-ink) !important;
+  font-family: var(--cd-display-font);
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.n-base-selection {
+  --n-color: var(--cd-canvas) !important;
+  --n-color-active: var(--cd-canvas) !important;
+  --n-text-color: var(--cd-ink) !important;
+  --n-border: 1px solid var(--cd-hairline) !important;
+  --n-border-hover: 1px solid var(--cd-primary) !important;
+  --n-border-active: 1px solid var(--cd-primary) !important;
+  --n-border-focus: 1px solid var(--cd-primary) !important;
+  --n-box-shadow-active: 0 0 0 3px rgba(204, 120, 92, 0.15) !important;
+  --n-box-shadow-focus: 0 0 0 3px rgba(204, 120, 92, 0.15) !important;
+}
+
+.n-pagination .n-pagination-item.n-pagination-item--active {
+  background: var(--cd-canvas) !important;
+  border-color: var(--cd-primary) !important;
+  color: var(--cd-primary) !important;
+}
+
+.n-spin-container {
+  --n-color: var(--cd-primary) !important;
+  --n-text-color: var(--cd-primary) !important;
+}
+
+.n-spin-content.n-spin-content--spinning {
+  opacity: 1 !important;
+}
+
+.n-spin-container .n-spin-body {
+  padding: 14px 18px;
+  background: rgba(250, 249, 245, 0.9);
+  border: 1px solid var(--cd-hairline);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.08);
+}
+
+.n-data-table {
+  --n-td-color: var(--cd-canvas) !important;
+  --n-th-color: var(--cd-surface-card) !important;
+  --n-border-color: var(--cd-hairline) !important;
+  --n-td-text-color: var(--cd-body) !important;
+  --n-th-text-color: var(--cd-ink) !important;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.w-e-toolbar,
+.w-e-text-container {
+  --w-e-toolbar-bg-color: var(--cd-canvas);
+  --w-e-toolbar-color: var(--cd-body);
+  --w-e-toolbar-active-color: var(--cd-ink);
+  --w-e-toolbar-active-bg-color: var(--cd-surface-card);
+  --w-e-toolbar-border-color: var(--cd-hairline);
+  --w-e-textarea-bg-color: var(--cd-canvas);
+  --w-e-textarea-color: var(--cd-ink);
+  --w-e-textarea-border-color: var(--cd-hairline);
+  --w-e-textarea-selected-border-color: var(--cd-primary);
+}
+
+pre,
+code,
+.mail-text {
+  font-family: var(--cd-code-font);
+}
+
+.mail-iframe,
+.mail-html {
+  border-radius: 12px;
+}
+
+.footer-divider {
+  display: none !important;
+}
+
+.footer-divider + div {
+  margin-top: 64px;
+  padding: 40px 32px !important;
+  background: var(--cd-surface-card);
+  color: var(--cd-muted);
+  border: 1px solid var(--cd-hairline);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+}
+
+.footer-divider + div .n-text {
+  --n-text-color: var(--cd-muted) !important;
+  color: var(--cd-muted) !important;
+}
+
+.footer-divider + div::before {
+  display: block;
+  margin-bottom: 16px;
+  color: var(--cd-ink);
+  content: "Cloudflare Temp Email";
+  font-family: var(--cd-display-font);
+  font-size: 26px;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+/* Editorial refinement pass: app shell, mailbox workspace, and dense controls. */
+.n-page-header-wrapper {
+  margin-bottom: 10px;
+}
+
+.n-page-header .n-page-header__main {
+  min-width: 0;
+}
+
+.n-page-header .n-avatar img {
+  transform: scale(0.92);
+}
+
+.n-page-header .n-page-header__extra .n-space {
+  gap: 6px 8px !important;
+}
+
+.n-menu .v-overflow {
+  gap: 2px;
+}
+
+.n-menu .n-menu-item-content {
+  padding: 0 !important;
+}
+
+.n-menu .n-button {
+  padding: 0 10px !important;
+}
+
+.n-menu .n-button__content {
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.n-menu .n-button__icon {
+  color: inherit;
+  opacity: 0.82;
+}
+
+.center[data-v-33992ef1] .n-card,
+.center[data-v-09845092] .n-card {
+  position: relative;
+  overflow: hidden;
+  background: var(--cd-surface-card) !important;
+  border-color: rgba(20, 20, 19, 0.08) !important;
+}
+
+.center[data-v-33992ef1] .n-card::before,
+.center[data-v-09845092] .n-card::before {
+  display: block;
+  width: 44px;
+  height: 4px;
+  margin: 0 auto 22px;
+  background: var(--cd-primary);
+  border-radius: 9999px;
+  content: "";
+}
+
+.center[data-v-33992ef1] .n-card > .n-card__content,
+.center[data-v-09845092] .n-card > .n-card__content {
+  padding: 42px 32px 32px !important;
+}
+
+.center[data-v-33992ef1] .n-divider,
+.center[data-v-09845092] .n-divider {
+  margin: 18px 0 24px !important;
+}
+
+.n-alert {
+  padding: 8px !important;
+}
+
+.n-alert .n-alert-body {
+  padding: 0 !important;
+}
+
+.address-row[data-v-335af9ba] {
+  gap: 12px !important;
+  min-height: 52px;
+}
+
+.address-select[data-v-335af9ba] {
+  max-width: 520px !important;
+}
+
+.address-select .n-base-selection {
+  min-height: 34px;
+}
+
+.address-select .n-base-selection-overlay__wrapper {
+  color: var(--cd-ink);
+  font-family: var(--cd-code-font);
+  font-size: 13px;
+}
+
+.n-tabs {
+  gap: 12px;
+}
+
+.n-tabs-nav {
+  min-height: 42px;
+  border-bottom: 1px solid var(--cd-hairline);
+}
+
+.n-tabs.n-tabs--bar-type .n-tabs-nav {
+  border-bottom: 0;
+}
+
+.n-tabs.n-tabs--bar-type .n-tabs-nav-scroll-content {
+  padding: 3px;
+  background: var(--cd-surface-soft);
+  border: 1px solid var(--cd-hairline);
+  border-radius: 12px;
+}
+
+.n-tabs.n-tabs--bar-type .n-tabs-tab {
+  min-height: 36px;
+  padding: 0 16px !important;
+}
+
+.n-tabs.n-tabs--card-type .n-tabs-tab {
+  min-height: 42px;
+  margin-right: 4px !important;
+  padding: 0 18px !important;
+  background: var(--cd-canvas) !important;
+  border: 1px solid var(--cd-hairline) !important;
+  border-radius: 8px !important;
+}
+
+.n-tabs.n-tabs--card-type .n-tabs-tab.n-tabs-tab--active {
+  background: var(--cd-surface-card) !important;
+  border-color: rgba(20, 20, 19, 0.1) !important;
+}
+
+.n-tabs-tab__label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.n-tab-pane {
+  padding-top: 12px !important;
+}
+
+.n-space:has(.n-pagination),
+.n-space:has(.n-pagination) > div {
+  align-items: center;
+}
+
+.n-pagination {
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.n-pagination > *:not(:first-child) {
+  margin: 0 !important;
+}
+
+.n-pagination .n-pagination-item {
+  min-width: 34px !important;
+  height: 34px !important;
+  border-radius: 8px !important;
+}
+
+.n-pagination .n-pagination-item--button {
+  background: var(--cd-surface-soft) !important;
+  border: 1px solid var(--cd-hairline) !important;
+}
+
+.n-checkbox .n-checkbox-box {
+  border-radius: 5px !important;
+}
+
+.n-input,
+.n-base-selection {
+  font-size: 14px !important;
+}
+
+.n-input__placeholder,
+.n-base-selection-placeholder {
+  color: var(--cd-muted-soft) !important;
+}
+
+.n-split {
+  min-height: 432px;
+}
+
+.n-split-pane-1 > div {
+  background: var(--cd-canvas);
+  border: 1px solid var(--cd-hairline);
+  border-right: 0;
+  border-radius: 12px 0 0 12px;
+}
+
+.n-list {
+  --n-color: var(--cd-canvas) !important;
+  --n-color-hover: var(--cd-surface-soft) !important;
+  --n-border-color: var(--cd-hairline) !important;
+  border-radius: 12px 0 0 12px !important;
+}
+
+.n-split__resize-trigger-wrapper {
+  width: 4px !important;
+}
+
+.n-split__resize-trigger {
+  background: var(--cd-hairline) !important;
+  border-radius: 9999px;
+}
+
+.mail-item[data-v-d1585b00],
+.mail-item[data-v-56d1af9f] {
+  min-height: 432px;
+  background: var(--cd-surface-card) !important;
+  border-radius: 0 12px 12px 0 !important;
+}
+
+.mail-item .n-card__content {
+  display: flex;
+  min-height: 430px;
+  align-items: center;
+  justify-content: center;
+}
+
+.n-result {
+  --n-icon-color: var(--cd-body-strong) !important;
+  --n-title-text-color: var(--cd-ink) !important;
+}
+
+.n-result .n-result-icon {
+  margin-bottom: 20px;
+  color: var(--cd-body-strong) !important;
+}
+
+.n-result .n-result-header__title {
+  color: var(--cd-ink) !important;
+  font-family: var(--cd-display-font);
+  font-size: 36px;
+  font-weight: 400;
+  line-height: 1.18;
+  letter-spacing: 0;
+}
+
+.footer-divider + div {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.footer-divider + div::after {
+  display: block;
+  width: 36px;
+  height: 4px;
+  margin: 22px auto 0;
+  background: var(--cd-primary);
+  border-radius: 9999px;
+  content: "";
+}
+
+.center[data-v-bae9495d] {
+  max-width: 1040px !important;
+  margin: 0 auto !important;
+}
+
+.center[data-v-bae9495d] .n-card {
+  max-width: none !important;
+}
+
+html.dark,
+html.dark body,
+html.dark #app,
+html.dark .n-config-provider {
+  background: var(--cd-surface-dark);
+  color: var(--cd-on-dark);
+}
+
+html.dark .n-config-provider {
+  background: var(--cd-surface-dark);
+}
+
+html.dark .n-page-header-wrapper {
+  background: rgba(24, 23, 21, 0.94);
+  border-color: rgba(250, 249, 245, 0.08);
+}
+
+html.dark .n-page-header .n-avatar {
+  background: var(--cd-surface-dark-elevated) !important;
+  border-color: rgba(250, 249, 245, 0.1) !important;
+}
+
+html.dark .n-page-header .n-page-header__title h3 {
+  color: var(--cd-on-dark);
+}
+
+html.dark .n-layout,
+html.dark .n-layout .n-layout-scroll-container {
+  color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-menu {
+  --n-item-text-color: var(--cd-on-dark-soft) !important;
+  --n-item-text-color-hover: var(--cd-on-dark) !important;
+  --n-item-text-color-active: var(--cd-on-dark) !important;
+  --n-item-icon-color: var(--cd-on-dark-soft) !important;
+  --n-item-icon-color-hover: var(--cd-primary) !important;
+  --n-item-icon-color-active: var(--cd-primary) !important;
+  --n-item-color-hover: var(--cd-surface-dark-soft) !important;
+  --n-item-color-active: var(--cd-surface-dark-elevated) !important;
+}
+
+html.dark .n-menu .n-button.n-button--primary-type,
+html.dark .n-menu .n-button.n-button--default-type {
+  --n-color: transparent !important;
+  --n-color-hover: var(--cd-surface-dark-soft) !important;
+  --n-color-pressed: var(--cd-surface-dark-elevated) !important;
+  --n-color-focus: var(--cd-surface-dark-soft) !important;
+  --n-text-color: var(--cd-on-dark-soft) !important;
+  --n-text-color-hover: var(--cd-on-dark) !important;
+  --n-text-color-pressed: var(--cd-on-dark) !important;
+  --n-text-color-focus: var(--cd-on-dark) !important;
+  --n-border: none !important;
+}
+
+html.dark .n-menu .n-button.n-button--primary-type {
+  --n-color: var(--cd-surface-dark-elevated) !important;
+  --n-text-color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-card {
+  --n-color: var(--cd-surface-dark-elevated) !important;
+  --n-color-embedded: var(--cd-surface-dark-soft) !important;
+  --n-color-modal: var(--cd-surface-dark-elevated) !important;
+  --n-color-popover: var(--cd-surface-dark-elevated) !important;
+  --n-text-color: var(--cd-on-dark-soft) !important;
+  --n-title-text-color: var(--cd-on-dark) !important;
+  --n-border-color: rgba(250, 249, 245, 0.08) !important;
+  border-color: rgba(250, 249, 245, 0.08) !important;
+}
+
+html.dark .n-card,
+html.dark .n-card__content,
+html.dark .n-tab-pane,
+html.dark .n-form,
+html.dark .n-form-item-label,
+html.dark .n-form-item-label__text,
+html.dark .n-tabs-tab,
+html.dark .n-tabs-tab__label {
+  color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .n-tabs-tab.n-tabs-tab--active,
+html.dark .n-tabs-tab.n-tabs-tab--active .n-tabs-tab__label {
+  color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-tabs {
+  --n-bar-color: var(--cd-primary) !important;
+  --n-tab-text-color: var(--cd-on-dark-soft) !important;
+  --n-tab-text-color-active: var(--cd-on-dark) !important;
+  --n-tab-text-color-hover: var(--cd-on-dark) !important;
+  --n-tab-border-color: rgba(250, 249, 245, 0.1) !important;
+  --n-color-segment: var(--cd-surface-dark-soft) !important;
+  --n-pane-text-color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .n-tabs-tab.n-tabs-tab--active {
+  background: var(--cd-surface-dark-soft);
+}
+
+html.dark .n-input {
+  --n-color: var(--cd-surface-dark-soft) !important;
+  --n-color-focus: var(--cd-surface-dark-soft) !important;
+  --n-text-color: var(--cd-on-dark) !important;
+  --n-placeholder-color: var(--cd-on-dark-soft) !important;
+  --n-border: 1px solid rgba(250, 249, 245, 0.1) !important;
+  --n-border-hover: 1px solid var(--cd-primary) !important;
+  --n-border-focus: 1px solid var(--cd-primary) !important;
+  --n-box-shadow-focus: 0 0 0 3px rgba(204, 120, 92, 0.18) !important;
+}
+
+html.dark .n-button.n-button--default-type {
+  --n-color: var(--cd-surface-dark-soft) !important;
+  --n-color-hover: var(--cd-surface-dark-elevated) !important;
+  --n-color-pressed: #302d29 !important;
+  --n-color-focus: var(--cd-surface-dark-elevated) !important;
+  --n-text-color: var(--cd-on-dark) !important;
+  --n-text-color-hover: var(--cd-on-dark) !important;
+  --n-text-color-pressed: var(--cd-on-dark) !important;
+  --n-text-color-focus: var(--cd-on-dark) !important;
+  --n-border: 1px solid rgba(250, 249, 245, 0.1) !important;
+  --n-border-hover: 1px solid rgba(250, 249, 245, 0.18) !important;
+  --n-border-pressed: 1px solid rgba(250, 249, 245, 0.22) !important;
+  --n-border-focus: 1px solid rgba(250, 249, 245, 0.18) !important;
+}
+
+html.dark .n-button.n-button--primary-type {
+  --n-color: var(--cd-primary) !important;
+  --n-color-hover: var(--cd-primary-active) !important;
+  --n-color-pressed: var(--cd-primary-active) !important;
+  --n-color-focus: var(--cd-primary-active) !important;
+  --n-text-color: var(--cd-on-primary) !important;
+  --n-text-color-hover: var(--cd-on-primary) !important;
+  --n-text-color-pressed: var(--cd-on-primary) !important;
+  --n-text-color-focus: var(--cd-on-primary) !important;
+  --n-border: 1px solid var(--cd-primary) !important;
+  --n-border-hover: 1px solid var(--cd-primary-active) !important;
+  --n-border-pressed: 1px solid var(--cd-primary-active) !important;
+  --n-border-focus: 1px solid var(--cd-primary-active) !important;
+}
+
+html.dark .n-button.n-button--info-type {
+  --n-color: transparent !important;
+  --n-color-hover: var(--cd-surface-dark-soft) !important;
+  --n-color-pressed: var(--cd-surface-dark-elevated) !important;
+  --n-color-focus: var(--cd-surface-dark-soft) !important;
+  --n-text-color: var(--cd-primary) !important;
+  --n-text-color-hover: var(--cd-on-dark) !important;
+  --n-text-color-pressed: var(--cd-on-dark) !important;
+  --n-text-color-focus: var(--cd-on-dark) !important;
+  --n-border: 1px solid transparent !important;
+  --n-border-hover: 1px solid transparent !important;
+  --n-border-pressed: 1px solid transparent !important;
+  --n-border-focus: 1px solid transparent !important;
+}
+
+html.dark .n-divider {
+  --n-color: rgba(250, 249, 245, 0.1) !important;
+}
+
+html.dark .n-button.n-button--default-type .n-button__content,
+html.dark .n-button.n-button--default-type .n-button__icon {
+  color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-button.n-button--primary-type .n-button__content,
+html.dark .n-button.n-button--primary-type .n-button__icon {
+  color: var(--cd-on-primary) !important;
+}
+
+html.dark .n-menu .n-button.n-button--default-type .n-button__content,
+html.dark .n-menu .n-button.n-button--default-type .n-button__icon {
+  color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .n-menu .n-button.n-button--primary-type .n-button__content,
+html.dark .n-menu .n-button.n-button--primary-type .n-button__icon {
+  color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-alert,
+html.dark .n-data-table {
+  border-color: rgba(250, 249, 245, 0.08) !important;
+}
+
+html.dark .n-alert {
+  --n-color: var(--cd-surface-dark-elevated) !important;
+  --n-color-info: var(--cd-surface-dark-elevated) !important;
+  --n-title-text-color: var(--cd-on-dark) !important;
+  --n-content-text-color: var(--cd-on-dark-soft) !important;
+  background: var(--cd-surface-dark-elevated) !important;
+}
+
+html.dark .n-alert .n-alert-body__title,
+html.dark .n-alert .n-alert-body__content {
+  color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .n-empty {
+  --n-text-color: var(--cd-on-dark-soft) !important;
+  --n-icon-color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .n-empty .n-empty__description {
+  color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-base-selection {
+  --n-color: var(--cd-surface-dark-soft) !important;
+  --n-color-active: var(--cd-surface-dark-soft) !important;
+  --n-text-color: var(--cd-on-dark) !important;
+  --n-border: 1px solid rgba(250, 249, 245, 0.1) !important;
+  --n-border-hover: 1px solid var(--cd-primary) !important;
+  --n-border-active: 1px solid var(--cd-primary) !important;
+  --n-border-focus: 1px solid var(--cd-primary) !important;
+  --n-box-shadow-active: 0 0 0 3px rgba(204, 120, 92, 0.18) !important;
+  --n-box-shadow-focus: 0 0 0 3px rgba(204, 120, 92, 0.18) !important;
+}
+
+html.dark .n-pagination .n-pagination-item {
+  color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .n-pagination .n-pagination-item.n-pagination-item--active {
+  background: var(--cd-surface-dark-soft) !important;
+  border-color: var(--cd-primary) !important;
+  color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-spin-container .n-spin-body {
+  background: rgba(37, 35, 32, 0.92);
+  border-color: rgba(250, 249, 245, 0.1);
+}
+
+html.dark .footer-divider + div {
+  background: var(--cd-surface-dark-elevated);
+  color: var(--cd-on-dark-soft);
+  border-color: rgba(250, 249, 245, 0.08);
+}
+
+html.dark .footer-divider + div .n-text {
+  --n-text-color: var(--cd-on-dark-soft) !important;
+  color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .footer-divider + div::before {
+  color: var(--cd-on-dark);
+}
+
+html.dark .center[data-v-33992ef1] .n-card,
+html.dark .center[data-v-09845092] .n-card {
+  background: var(--cd-surface-dark-elevated) !important;
+  border-color: rgba(250, 249, 245, 0.1) !important;
+}
+
+html.dark .address-select .n-base-selection-overlay__wrapper {
+  color: var(--cd-on-dark);
+}
+
+html.dark .n-tabs-nav {
+  border-bottom-color: rgba(250, 249, 245, 0.1);
+}
+
+html.dark .n-tabs.n-tabs--bar-type .n-tabs-nav-scroll-content {
+  background: var(--cd-surface-dark-soft);
+  border-color: rgba(250, 249, 245, 0.1);
+}
+
+html.dark .n-tabs.n-tabs--card-type .n-tabs-tab {
+  background: var(--cd-surface-dark) !important;
+  border-color: rgba(250, 249, 245, 0.1) !important;
+}
+
+html.dark .n-tabs.n-tabs--card-type .n-tabs-tab.n-tabs-tab--active {
+  background: var(--cd-surface-dark-elevated) !important;
+  border-color: rgba(250, 249, 245, 0.16) !important;
+}
+
+html.dark .n-pagination .n-pagination-item--button {
+  background: var(--cd-surface-dark-soft) !important;
+  border-color: rgba(250, 249, 245, 0.1) !important;
+}
+
+html.dark .n-split-pane-1 > div {
+  background: var(--cd-surface-dark);
+  border-color: rgba(250, 249, 245, 0.08);
+}
+
+html.dark .n-list {
+  --n-color: var(--cd-surface-dark) !important;
+  --n-color-hover: var(--cd-surface-dark-soft) !important;
+  --n-border-color: rgba(250, 249, 245, 0.08) !important;
+}
+
+html.dark .n-split__resize-trigger {
+  background: rgba(250, 249, 245, 0.16) !important;
+}
+
+html.dark .mail-item[data-v-d1585b00],
+html.dark .mail-item[data-v-56d1af9f] {
+  background: var(--cd-surface-dark-elevated) !important;
+}
+
+html.dark .n-result {
+  --n-icon-color: var(--cd-on-dark-soft) !important;
+  --n-title-text-color: var(--cd-on-dark) !important;
+}
+
+html.dark .n-result .n-result-icon {
+  color: var(--cd-on-dark-soft) !important;
+}
+
+html.dark .n-result .n-result-header__title {
+  color: var(--cd-on-dark) !important;
+}
+
+@media (max-width: 768px) {
+  .n-grid[data-v-2ffec98f] {
+    padding: 0 14px;
+  }
+
+  .n-page-header {
+    min-height: 60px;
+    padding: 0;
+  }
+
+  .n-page-header .n-page-header__title h3 {
+    max-width: 62vw;
+    overflow: hidden;
+    font-size: 22px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .center[data-v-33992ef1] {
+    margin: 40px 0 16px !important;
+  }
+
+  .n-card > .n-card__content {
+    padding: 24px !important;
+  }
+
+  .n-tabs-tab {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+
+  .footer-divider + div {
+    margin-top: 40px;
+    padding: 32px 20px !important;
+  }
+}
diff --git a/assets/index-rOHOLR3M.js b/assets/index-209f628e.js
similarity index 99%
rename from assets/index-rOHOLR3M.js
rename to assets/index-209f628e.js
index cdfeea6..33a3e64 100644
--- a/assets/index-rOHOLR3M.js
+++ b/assets/index-209f628e.js
@@ -49996,7 +49996,7 @@ components: ${q_(i)}
                   style: {
                     "margin-left": "10px"
                   },
-                  src: "/logo.png"
+                  src: "/logo.svg"
                 })
               ])
             ]),
diff --git a/assets/index.esm-YCBPJhFu.js b/assets/index.esm-YCBPJhFu.js
index 4c08f12..91f3d94 100644
--- a/assets/index.esm-YCBPJhFu.js
+++ b/assets/index.esm-YCBPJhFu.js
@@ -1,4 +1,4 @@
-import { D as N_, E as I_, d as L_, O as Iz, w as Lz, l as Ww, aS as Rz, aT as Mz, aO as zz } from "./index-rOHOLR3M.js";
+import { D as N_, E as I_, d as L_, O as Iz, w as Lz, l as Ww, aS as Rz, aT as Mz, aO as zz } from "./index-209f628e.js";
 var ae = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function $z(t10) {
   return t10 && t10.__esModule && Object.prototype.hasOwnProperty.call(t10, "default") ? t10.default : t10;
@@ -7878,7 +7878,7 @@ function yN(t10, e) {
     if (o == null) throw new Error("Current node is not slate Text " + JSON.stringify(r));
     var i = o;
     i = (function(s) {
-      return s.replace(/ {2}/g, " &nbsp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/®/g, "&reg;").replace(/©/g, "&copy;").replace(/™/g, "&trade;");
+      return s.replace(/ {2}/g, " &nbsp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/庐/g, "&reg;").replace(/漏/g, "&copy;").replace(/鈩?g, "&trade;");
     })(i);
     var a = A.getParentsNodes(n, r).some((function(s) {
       return A.getNodeType(s) === "pre";
@@ -20041,7 +20041,7 @@ var x_ = EC((function(t10) {
     return { interpolation: { pattern: r(/((?:^|[^{])(?:\{\{)*)<<0>>/.source, [S]), lookbehind: true, inside: { "format-string": { pattern: r(/(^\{(?:(?![}:])<<0>>)*)<<1>>(?=\}$)/.source, [P, q]), lookbehind: true, inside: { punctuation: /^:/ } }, punctuation: /^\{|\}$/, expression: { pattern: /[\s\S]+/, alias: "language-csharp", inside: t10.languages.csharp } } }, string: /[\s\S]+/ };
   }
   t10.languages.insertBefore("csharp", "string", { "interpolation-string": [{ pattern: r(/(^|[^\\])(?:\$@|@\$)"(?:""|\\[\s\S]|\{\{|<<0>>|[^\\{"])*"/.source, [st]), lookbehind: true, greedy: true, inside: k(st, et) }, { pattern: r(/(^|[^@\\])\$"(?:\\.|\{\{|<<0>>|[^\\"{])*"/.source, [at]), lookbehind: true, greedy: true, inside: k(at, ut) }] });
-})(Prism), Prism.languages.dotnet = Prism.languages.cs = Prism.languages.csharp, Prism.languages["visual-basic"] = { comment: { pattern: /(?:['‘’]|REM\b)(?:[^\r\n_]|_(?:\r\n?|\n)?)*/i, inside: { keyword: /^REM/i } }, directive: { pattern: /#(?:Const|Else|ElseIf|End|ExternalChecksum|ExternalSource|If|Region)(?:[^\S\r\n]_[^\S\r\n]*(?:\r\n?|\n)|.)+/i, alias: "comment", greedy: true }, string: { pattern: /\$?["“”](?:["“”]{2}|[^"“”])*["“”]C?/i, greedy: true }, date: { pattern: /#[^\S\r\n]*(?:\d+([/-])\d+\1\d+(?:[^\S\r\n]+(?:\d+[^\S\r\n]*(?:AM|PM)|\d+:\d+(?::\d+)?(?:[^\S\r\n]*(?:AM|PM))?))?|\d+[^\S\r\n]*(?:AM|PM)|\d+:\d+(?::\d+)?(?:[^\S\r\n]*(?:AM|PM))?)[^\S\r\n]*#/i, alias: "builtin" }, number: /(?:(?:\b\d+(?:\.\d+)?|\.\d+)(?:E[+-]?\d+)?|&[HO][\dA-F]+)(?:U?[ILS]|[FRD])?/i, boolean: /\b(?:True|False|Nothing)\b/i, keyword: /\b(?:AddHandler|AddressOf|Alias|And(?:Also)?|As|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|C(?:Bool|Byte|Char|Date|Dbl|Dec|Int|Lng|Obj|SByte|Short|Sng|Str|Type|UInt|ULng|UShort)|Char|Class|Const|Continue|Currency|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else(?:If)?|End(?:If)?|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get(?:Type|XMLNamespace)?|Global|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|IsNot|Let|Lib|Like|Long|Loop|Me|Mod|Module|Must(?:Inherit|Override)|My(?:Base|Class)|Namespace|Narrowing|New|Next|Not(?:Inheritable|Overridable)?|Object|Of|On|Operator|Option(?:al)?|Or(?:Else)?|Out|Overloads|Overridable|Overrides|ParamArray|Partial|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|SByte|Select|Set|Shadows|Shared|short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TryCast|Type|TypeOf|U(?:Integer|Long|Short)|Using|Variant|Wend|When|While|Widening|With(?:Events)?|WriteOnly|Until|Xor)\b/i, operator: [/[+\-*/\\^<=>&#@$%!]/, { pattern: /([^\S\r\n])_(?=[^\S\r\n]*[\r\n])/, lookbehind: true }], punctuation: /[{}().,:?]/ }, Prism.languages.vb = Prism.languages["visual-basic"], Prism.languages.vba = Prism.languages["visual-basic"], Prism.languages.sql = { comment: { pattern: /(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/, lookbehind: true }, variable: [{ pattern: /@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/, greedy: true }, /@[\w.$]+/], string: { pattern: /(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/, greedy: true, lookbehind: true }, function: /\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i, keyword: /\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:_INSERT|COL)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:S|ING)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i, boolean: /\b(?:TRUE|FALSE|NULL)\b/i, number: /\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i, operator: /[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|IN|ILIKE|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i, punctuation: /[;[\]()`,.]/ }, (function(t10) {
+})(Prism), Prism.languages.dotnet = Prism.languages.cs = Prism.languages.csharp, Prism.languages["visual-basic"] = { comment: { pattern: /(?:['鈥樷€橾|REM\b)(?:[^\r\n_]|_(?:\r\n?|\n)?)*/i, inside: { keyword: /^REM/i } }, directive: { pattern: /#(?:Const|Else|ElseIf|End|ExternalChecksum|ExternalSource|If|Region)(?:[^\S\r\n]_[^\S\r\n]*(?:\r\n?|\n)|.)+/i, alias: "comment", greedy: true }, string: { pattern: /\$?["鈥溾€漖(?:["鈥溾€漖{2}|[^"鈥溾€漖)*["鈥溾€漖C?/i, greedy: true }, date: { pattern: /#[^\S\r\n]*(?:\d+([/-])\d+\1\d+(?:[^\S\r\n]+(?:\d+[^\S\r\n]*(?:AM|PM)|\d+:\d+(?::\d+)?(?:[^\S\r\n]*(?:AM|PM))?))?|\d+[^\S\r\n]*(?:AM|PM)|\d+:\d+(?::\d+)?(?:[^\S\r\n]*(?:AM|PM))?)[^\S\r\n]*#/i, alias: "builtin" }, number: /(?:(?:\b\d+(?:\.\d+)?|\.\d+)(?:E[+-]?\d+)?|&[HO][\dA-F]+)(?:U?[ILS]|[FRD])?/i, boolean: /\b(?:True|False|Nothing)\b/i, keyword: /\b(?:AddHandler|AddressOf|Alias|And(?:Also)?|As|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|C(?:Bool|Byte|Char|Date|Dbl|Dec|Int|Lng|Obj|SByte|Short|Sng|Str|Type|UInt|ULng|UShort)|Char|Class|Const|Continue|Currency|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else(?:If)?|End(?:If)?|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get(?:Type|XMLNamespace)?|Global|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|IsNot|Let|Lib|Like|Long|Loop|Me|Mod|Module|Must(?:Inherit|Override)|My(?:Base|Class)|Namespace|Narrowing|New|Next|Not(?:Inheritable|Overridable)?|Object|Of|On|Operator|Option(?:al)?|Or(?:Else)?|Out|Overloads|Overridable|Overrides|ParamArray|Partial|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|SByte|Select|Set|Shadows|Shared|short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TryCast|Type|TypeOf|U(?:Integer|Long|Short)|Using|Variant|Wend|When|While|Widening|With(?:Events)?|WriteOnly|Until|Xor)\b/i, operator: [/[+\-*/\\^<=>&#@$%!]/, { pattern: /([^\S\r\n])_(?=[^\S\r\n]*[\r\n])/, lookbehind: true }], punctuation: /[{}().,:?]/ }, Prism.languages.vb = Prism.languages["visual-basic"], Prism.languages.vba = Prism.languages["visual-basic"], Prism.languages.sql = { comment: { pattern: /(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/, lookbehind: true }, variable: [{ pattern: /@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/, greedy: true }, /@[\w.$]+/], string: { pattern: /(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/, greedy: true, lookbehind: true }, function: /\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i, keyword: /\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:_INSERT|COL)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:S|ING)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i, boolean: /\b(?:TRUE|FALSE|NULL)\b/i, number: /\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i, operator: /[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|IN|ILIKE|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i, punctuation: /[;[\]()`,.]/ }, (function(t10) {
   t10.languages.ruby = t10.languages.extend("clike", { comment: [/#.*/, { pattern: /^=begin\s[\s\S]*?^=end/m, greedy: true }], "class-name": { pattern: /(\b(?:class)\s+|\bcatch\s+\()[\w.\\]+/i, lookbehind: true, inside: { punctuation: /[.\\]/ } }, keyword: /\b(?:alias|and|BEGIN|begin|break|case|class|def|define_method|defined|do|each|else|elsif|END|end|ensure|extend|for|if|in|include|module|new|next|nil|not|or|prepend|protected|private|public|raise|redo|require|rescue|retry|return|self|super|then|throw|undef|unless|until|when|while|yield)\b/ });
   var e = { pattern: /#\{[^}]+\}/, inside: { delimiter: { pattern: /^#\{|\}$/, alias: "tag" }, rest: t10.languages.ruby } };
   delete t10.languages.ruby.function, t10.languages.insertBefore("ruby", "keyword", { regex: [{ pattern: RegExp(/%r/.source + "(?:" + [/([^a-zA-Z0-9\s{(\[<])(?:(?!\1)[^\\]|\\[\s\S])*\1/.source, /\((?:[^()\\]|\\[\s\S])*\)/.source, /\{(?:[^#{}\\]|#(?:\{[^}]+\})?|\\[\s\S])*\}/.source, /\[(?:[^\[\]\\]|\\[\s\S])*\]/.source, /<(?:[^<>\\]|\\[\s\S])*>/.source].join("|") + ")" + /[egimnosux]{0,6}/.source), greedy: true, inside: { interpolation: e } }, { pattern: /(^|[^/])\/(?!\/)(?:\[[^\r\n\]]+\]|\\.|[^[/\\\r\n])+\/[egimnosux]{0,6}(?=\s*(?:$|[\r\n,.;})#]))/, lookbehind: true, greedy: true, inside: { interpolation: e } }], variable: /[@$]+[a-zA-Z_]\w*(?:[?!]|\b)/, symbol: { pattern: /(^|[^:]):[a-zA-Z_]\w*(?:[?!]|\b)/, lookbehind: true }, "method-definition": { pattern: /(\bdef\s+)[\w.]+/, lookbehind: true, inside: { function: /\w+$/, rest: t10.languages.ruby } } }), t10.languages.insertBefore("ruby", "number", { builtin: /\b(?:Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Stat|Fixnum|Float|Hash|Integer|IO|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|String|Struct|TMS|Symbol|ThreadGroup|Thread|Time|TrueClass)\b/, constant: /\b[A-Z]\w*(?:[?!]|\b)/ }), t10.languages.ruby.string = [{ pattern: RegExp(/%[qQiIwWxs]?/.source + "(?:" + [/([^a-zA-Z0-9\s{(\[<])(?:(?!\1)[^\\]|\\[\s\S])*\1/.source, /\((?:[^()\\]|\\[\s\S])*\)/.source, /\{(?:[^#{}\\]|#(?:\{[^}]+\})?|\\[\s\S])*\}/.source, /\[(?:[^\[\]\\]|\\[\s\S])*\]/.source, /<(?:[^<>\\]|\\[\s\S])*>/.source].join("|") + ")"), greedy: true, inside: { interpolation: e } }, { pattern: /("|')(?:#\{[^}]+\}|#(?!\{)|\\(?:\r\n|[\s\S])|(?!\1)[^\\#\r\n])*\1/, greedy: true, inside: { interpolation: e } }, { pattern: /<<[-~]?([a-z_]\w*)[\r\n](?:.*[\r\n])*?[\t ]*\1/i, alias: "heredoc-string", greedy: true, inside: { delimiter: { pattern: /^<<[-~]?[a-z_]\w*|[a-z_]\w*$/i, alias: "symbol", inside: { punctuation: /^<<[-~]?/ } }, interpolation: e } }, { pattern: /<<[-~]?'([a-z_]\w*)'[\r\n](?:.*[\r\n])*?[\t ]*\1/i, alias: "heredoc-string", greedy: true, inside: { delimiter: { pattern: /^<<[-~]?'[a-z_]\w*'|[a-z_]\w*$/i, alias: "symbol", inside: { punctuation: /^<<[-~]?'|'$/ } } } }], t10.languages.rb = t10.languages.ruby;
diff --git a/assets/jszip.min-CeOOLoxS.js b/assets/jszip.min-CeOOLoxS.js
index 6f965ec..2e0aff3 100644
--- a/assets/jszip.min-CeOOLoxS.js
+++ b/assets/jszip.min-CeOOLoxS.js
@@ -1,4 +1,4 @@
-import { aP as vt, aQ as Bt } from "./index-rOHOLR3M.js";
+import { aP as vt, aQ as Bt } from "./index-209f628e.js";
 function Rt(ct, wt) {
   for (var _ = 0; _ < wt.length; _++) {
     const N = wt[_];
diff --git a/favicon.ico b/favicon.ico
index df36fcf..18918ca 100644
Binary files a/favicon.ico and b/favicon.ico differ
diff --git a/index.html b/index.html
index b173929..b837b55 100644
--- a/index.html
+++ b/index.html
@@ -3,20 +3,24 @@
 
 <head>
   <meta charset="UTF-8">
-  <link rel="icon" href="/logo.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" type="image/svg+xml" href="/logo.svg">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Temp Email</title>
   <meta name="description" content="Temp Email">
-  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#000">
-  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#ffffff">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#faf9f5">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#181715">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-title" content="Temp Email">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <link rel="icon" href="/logo.png" sizes="any">
+  <link rel="icon" type="image/png" href="/logo.png" sizes="1200x1200">
   <link rel="apple-touch-icon" href="/logo.png">
   <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
-  <script type="module" crossorigin src="/assets/index-rOHOLR3M.js"></script>
+  <script type="module" crossorigin src="/assets/index-209f628e.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-CeVFrBXC.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="/assets/claude-design.css">
 <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
 
 <body>
diff --git a/logo.png b/logo.png
index 97829b1..58c0b37 100644
Binary files a/logo.png and b/logo.png differ
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..9c61d30
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200" role="img" aria-label="Cloudflare Temp Email icon">
+  <rect width="1200" height="1200" rx="260" fill="#faf9f5"/>
+  <rect x="54" y="54" width="1092" height="1092" rx="226" fill="none" stroke="#cc785c" stroke-width="42"/>
+  <rect x="118" y="118" width="964" height="964" rx="176" fill="#f5f0e8" opacity=".72"/>
+
+  <rect x="284" y="430" width="632" height="390" rx="78" fill="#faf9f5" stroke="#141413" stroke-width="50" stroke-linejoin="round"/>
+  <path d="M326 472 560 648c25 19 55 19 80 0l234-176" fill="none" stroke="#cc785c" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M331 780 506 620" fill="none" stroke="#e6dfd8" stroke-width="24" stroke-linecap="round"/>
+  <path d="M869 780 694 620" fill="none" stroke="#e6dfd8" stroke-width="24" stroke-linecap="round"/>
+
+  <circle cx="856" cy="378" r="104" fill="#faf9f5" stroke="#cc785c" stroke-width="38"/>
+  <circle cx="856" cy="378" r="45" fill="#efe9de"/>
+  <path d="M856 336v48l34 28" fill="none" stroke="#141413" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/manifest.webmanifest b/manifest.webmanifest
index acca0b5..892c477 100644
--- a/manifest.webmanifest
+++ b/manifest.webmanifest
@@ -1 +1 @@
-{"name":"Temp Email","short_name":"Temp Email","description":"Temp Email - Temporary Email","start_url":"/","display":"standalone","background_color":"#ffffff","theme_color":"#ffffff","lang":"en","scope":"/","icons":[{"src":"/logo.png","sizes":"192x192","type":"image/png"}]}
+{"name":"Temp Email","short_name":"Temp Email","description":"Temp Email - Temporary Email","start_url":"/","display":"standalone","background_color":"#faf9f5","theme_color":"#faf9f5","lang":"en","scope":"/","icons":[{"src":"/logo.png","sizes":"1200x1200","type":"image/png"}]}
diff --git a/sw.js b/sw.js
index 3181efc..48d059f 100644
--- a/sw.js
+++ b/sw.js
@@ -1 +1,52 @@
-if(!self.define){let e,s={};const t=(t,o)=>(t=new URL(t+".js",o).href,s[t]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=t,e.onload=s,document.head.appendChild(e)}else e=t,importScripts(t),s()}).then(()=>{let e=s[t];if(!e)throw new Error(`Module ${t} didn’t register its module`);return e}));self.define=(o,i)=>{const n=e||("document"in self?document.currentScript.src:"")||location.href;if(s[n])return;let r={};const f=e=>t(e,n),l={module:{uri:n},exports:r,require:f};s[n]=Promise.all(o.map(e=>l[e]||f(e))).then(e=>(i(...e),r))}}define(["./workbox-0f8a451b"],function(e){"use strict";self.addEventListener("message",e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()}),e.precacheAndRoute([{url:"logo.png",revision:"f13f7a9b0f4adf6b653f5320465b8f09"},{url:"manifest.webmanifest",revision:"d7f3d7a23d0b9f65aa265512e402e409"}],{}),e.cleanupOutdatedCaches(),self.__WB_DISABLE_DEV_LOGS=!0});
+if (!self.define) {
+  let currentScriptUrl;
+  const registry = {};
+  const loadModule = (moduleName, baseUrl) => (
+    moduleName = new URL(`${moduleName}.js`, baseUrl).href,
+    registry[moduleName] || new Promise((resolve) => {
+      if ("document" in self) {
+        const script = document.createElement("script");
+        script.src = moduleName;
+        script.onload = resolve;
+        document.head.appendChild(script);
+      } else {
+        currentScriptUrl = moduleName;
+        importScripts(moduleName);
+        currentScriptUrl = undefined;
+        resolve();
+      }
+    }).then(() => {
+      const module = registry[moduleName];
+      if (!module) throw new Error(`Module ${moduleName} didn't register its module`);
+      return module;
+    })
+  );
+
+  self.define = (dependencies, factory) => {
+    const moduleUrl = currentScriptUrl || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[moduleUrl]) return;
+    const exports = {};
+    const require = (moduleName) => loadModule(moduleName, moduleUrl);
+    const module = { module: { uri: moduleUrl }, exports, require };
+    registry[moduleUrl] = Promise.all(dependencies.map((dependency) => module[dependency] || require(dependency)))
+      .then((resolvedDependencies) => {
+        factory(...resolvedDependencies);
+        return exports;
+      });
+  };
+}
+
+define(["./workbox-0f8a451b"], function (workbox) {
+  "use strict";
+  self.addEventListener("message", (event) => {
+    if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
+  });
+  workbox.precacheAndRoute([
+    { url: "favicon.ico", revision: "006d965d6cd776fde2178cf134e64b52" },
+    { url: "logo.png", revision: "6acd34212a0a29dd613205a15c6d1d58" },
+    { url: "logo.svg", revision: "7790e9db89655f18d978f9cfec947e78" },
+    { url: "manifest.webmanifest", revision: "25ff3fcbdc53ecf9f19ab969b6d5f2b4" }
+  ], {});
+  workbox.cleanupOutdatedCaches();
+  self.__WB_DISABLE_DEV_LOGS = true;
+});