@layer reset, base, layout, components, utilities;
@layer base {
  :root {
    color-scheme: dark;
    --fv-primary: #6d4af5;
    --fv-secondary: #7c8aa5;
    --fv-success: #34d399;
    --fv-danger: #fb5b78;
    --fv-warning: #fbbf24;
    --fv-info: #22d3ee;
    --fv-accent: #e879f9;
    --fv-light: #e7ecf5;
    --fv-dark: #0b0f1d;
    --fv-gray-100: #f1f5f9;
    --fv-gray-200: #e2e8f0;
    --fv-gray-300: #cbd5e1;
    --fv-gray-400: #94a3b8;
    --fv-gray-500: #64748b;
    --fv-gray-600: #475569;
    --fv-gray-700: #334155;
    --fv-gray-800: #1e293b;
    --fv-gray-900: #0f172a;
    --fv-white: #ffffff;
    --fv-black: #000000;
    --fv-body-bg: #060912;
    --fv-bg-gradient: radial-gradient(48rem 48rem at 82% -12%, color-mix(in srgb, var(--fv-primary) 28%, transparent), transparent 60%), radial-gradient(36rem 36rem at -8% 18%, color-mix(in srgb, var(--fv-info) 20%, transparent), transparent 58%), radial-gradient(40rem 40rem at 50% 118%, color-mix(in srgb, var(--fv-accent) 18%, transparent), transparent 58%);
    --fv-body-color: #e6ebf5;
    --fv-muted: #95a3c4;
    --fv-primary-text: rgb(149.88, 124.68, 247.8);
    --fv-border-color: rgba(255, 255, 255, 0.1);
    --fv-code-bg: rgba(255, 255, 255, 0.07);
    --fv-bg-pattern: rgba(255, 255, 255, 0.10);
    --fv-glass-bg: rgba(255, 255, 255, 0.06);
    --fv-glass-bg-strong: rgba(255, 255, 255, 0.1);
    --fv-glass-border: rgba(255, 255, 255, 0.14);
    --fv-glass-blur: 16px;
    --fv-glass-saturate: 140%;
    --fv-surface-solid: #121a2e;
    --fv-font-base: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    --fv-font-mono: ui-monospace, SFMono-Regular, SF Mono, JetBrains Mono, Menlo, Consolas, Liberation Mono, monospace;
    --fv-line-height: 1.6;
    --fv-border-radius: 0.75rem;
    --fv-border-width: 1px;
    --fv-transition: 0.2s ease;
    --fv-focus-ring: 0 0 0 3px color-mix(in srgb, var(--fv-primary) 45%, transparent);
    --fv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --fv-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);
    --fv-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.45);
    --fv-shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.55);
    --fv-glow-primary: 0 0 26px color-mix(in srgb, var(--fv-primary) 55%, transparent);
    --fv-glow-accent: 0 0 26px color-mix(in srgb, var(--fv-accent) 55%, transparent);
    --fv-glow-info: 0 0 26px color-mix(in srgb, var(--fv-info) 55%, transparent);
    --fv-glow-success: 0 0 26px color-mix(in srgb, var(--fv-success) 50%, transparent);
    --fv-glow-danger: 0 0 26px color-mix(in srgb, var(--fv-danger) 50%, transparent);
    --fv-glow-warning: 0 0 26px color-mix(in srgb, var(--fv-warning) 50%, transparent);
    --fv-gradient-primary: linear-gradient(135deg, var(--fv-primary) 0%, var(--fv-info) 100%);
    --fv-gradient-accent: linear-gradient(135deg, var(--fv-accent) 0%, var(--fv-primary) 100%);
    --fv-gradient-sunset: linear-gradient(135deg, var(--fv-danger) 0%, var(--fv-warning) 100%);
    --fv-gradient-aurora: linear-gradient(135deg, var(--fv-success) 0%, var(--fv-info) 100%);
  }
  :root[data-theme=light],
  [data-theme=light] {
    color-scheme: light;
    --fv-body-bg: #eef1f8;
    --fv-bg-gradient: radial-gradient(48rem 48rem at 82% -12%, color-mix(in srgb, var(--fv-primary) 18%, transparent), transparent 60%), radial-gradient(36rem 36rem at -8% 18%, color-mix(in srgb, var(--fv-info) 16%, transparent), transparent 58%), radial-gradient(40rem 40rem at 50% 118%, color-mix(in srgb, var(--fv-accent) 14%, transparent), transparent 58%);
    --fv-body-color: #0f172a;
    --fv-muted: #586b8f;
    --fv-primary-text: var(--fv-primary);
    --fv-border-color: rgba(15, 23, 42, 0.12);
    --fv-code-bg: rgba(15, 23, 42, 0.06);
    --fv-bg-pattern: rgba(15, 23, 42, 0.10);
    --fv-glass-bg: rgba(255, 255, 255, 0.55);
    --fv-glass-bg-strong: rgba(255, 255, 255, 0.7);
    --fv-glass-border: rgba(255, 255, 255, 0.8);
    --fv-surface-solid: #ffffff;
  }
}
@layer base {
  :root[data-theme=synthwave],
  [data-theme=synthwave] {
    color-scheme: dark;
    --fv-primary: #ec4899;
    --fv-accent: #8b5cf6;
    --fv-info: #22d3ee;
    --fv-primary-text: #f9a8d4;
    --fv-primary-contrast: #2b0517;
    --fv-body-bg: #12041f;
    --fv-surface-solid: #1d0b30;
  }
  :root[data-theme=cyber],
  [data-theme=cyber] {
    color-scheme: dark;
    --fv-primary: #22c55e;
    --fv-accent: #a3e635;
    --fv-info: #2dd4bf;
    --fv-primary-text: #86efac;
    --fv-primary-contrast: #03180b;
    --fv-body-bg: #02120a;
    --fv-surface-solid: #08201a;
  }
  :root[data-theme=noir],
  [data-theme=noir] {
    color-scheme: dark;
    --fv-primary: #e5e7eb;
    --fv-accent: #9ca3af;
    --fv-info: #d1d5db;
    --fv-primary-text: #e5e7eb;
    --fv-primary-contrast: #111114;
    --fv-body-bg: #0a0a0b;
    --fv-muted: #9ca3af;
    --fv-surface-solid: #16161a;
  }
  :root[data-theme=forest],
  [data-theme=forest] {
    color-scheme: dark;
    --fv-primary: #10b981;
    --fv-accent: #a3e635;
    --fv-info: #2dd4bf;
    --fv-primary-text: #6ee7b7;
    --fv-primary-contrast: #052e22;
    --fv-body-bg: #041410;
    --fv-surface-solid: #0a241c;
  }
  :root[data-theme=dawn],
  [data-theme=dawn] {
    color-scheme: light;
    --fv-primary: #ea580c;
    --fv-accent: #f43f5e;
    --fv-info: #0284c7;
    --fv-primary-text: #c2410c;
    --fv-primary-contrast: #2a0c03;
    --fv-body-bg: #faf6f1;
    --fv-bg-gradient: radial-gradient(48rem 48rem at 82% -12%, color-mix(in srgb, var(--fv-primary) 18%, transparent), transparent 60%), radial-gradient(36rem 36rem at -8% 18%, color-mix(in srgb, var(--fv-info) 16%, transparent), transparent 58%), radial-gradient(40rem 40rem at 50% 118%, color-mix(in srgb, var(--fv-accent) 14%, transparent), transparent 58%);
    --fv-body-color: #292524;
    --fv-muted: #6d635b;
    --fv-border-color: rgba(41, 37, 36, 0.12);
    --fv-code-bg: rgba(41, 37, 36, 0.06);
    --fv-bg-pattern: rgba(41, 37, 36, 0.1);
    --fv-glass-bg: rgba(255, 255, 255, 0.55);
    --fv-glass-bg-strong: rgba(255, 255, 255, 0.7);
    --fv-glass-border: rgba(255, 255, 255, 0.8);
    --fv-surface-solid: #fffaf5;
  }
}
@layer components {
  .btn {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-body-color);
    --fv-btn-border: var(--fv-glass-border);
    --fv-btn-hover-bg: var(--fv-glass-bg-strong);
    --fv-btn-hover-border: var(--fv-glass-border);
    --fv-btn-active-bg: var(--fv-glass-bg);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-primary) 45%, transparent);
    --fv-btn-glow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    color: var(--fv-btn-color);
    background-color: var(--fv-btn-bg);
    border: 1px solid var(--fv-btn-border);
    border-radius: var(--fv-border-radius);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .btn:hover {
    color: var(--fv-btn-color);
    background-color: var(--fv-btn-hover-bg);
    border-color: var(--fv-btn-hover-border);
    box-shadow: var(--fv-btn-glow);
    text-decoration: none;
    transform: translateY(-1px);
  }
  .btn:active {
    background-color: var(--fv-btn-active-bg);
    transform: translateY(0);
  }
  .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--fv-btn-focus-ring);
  }
  .btn:disabled, .btn.disabled {
    opacity: 0.5;
    box-shadow: none;
    transform: none;
    pointer-events: none;
  }
  .btn-primary {
    --fv-btn-bg: var(--fv-primary);
    --fv-btn-color: var(--fv-primary-contrast, #ffffff);
    --fv-btn-border: var(--fv-primary);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-primary) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-primary) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-primary) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-primary) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-primary) 55%, transparent);
  }
  .btn-secondary {
    --fv-btn-bg: var(--fv-secondary);
    --fv-btn-color: var(--fv-secondary-contrast, #0b0f1d);
    --fv-btn-border: var(--fv-secondary);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-secondary) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-secondary) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-secondary) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-secondary) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-secondary) 55%, transparent);
  }
  .btn-success {
    --fv-btn-bg: var(--fv-success);
    --fv-btn-color: var(--fv-success-contrast, #0b0f1d);
    --fv-btn-border: var(--fv-success);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-success) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-success) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-success) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-success) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-success) 55%, transparent);
  }
  .btn-danger {
    --fv-btn-bg: var(--fv-danger);
    --fv-btn-color: var(--fv-danger-contrast, #0b0f1d);
    --fv-btn-border: var(--fv-danger);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-danger) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-danger) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-danger) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-danger) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-danger) 55%, transparent);
  }
  .btn-warning {
    --fv-btn-bg: var(--fv-warning);
    --fv-btn-color: var(--fv-warning-contrast, #0b0f1d);
    --fv-btn-border: var(--fv-warning);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-warning) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-warning) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-warning) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-warning) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-warning) 55%, transparent);
  }
  .btn-info {
    --fv-btn-bg: var(--fv-info);
    --fv-btn-color: var(--fv-info-contrast, #0b0f1d);
    --fv-btn-border: var(--fv-info);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-info) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-info) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-info) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-info) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-info) 55%, transparent);
  }
  .btn-accent {
    --fv-btn-bg: var(--fv-accent);
    --fv-btn-color: var(--fv-accent-contrast, #0b0f1d);
    --fv-btn-border: var(--fv-accent);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-accent) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-accent) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-accent) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-accent) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-accent) 55%, transparent);
  }
  .btn-light {
    --fv-btn-bg: var(--fv-light);
    --fv-btn-color: var(--fv-light-contrast, #0b0f1d);
    --fv-btn-border: var(--fv-light);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-light) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-light) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-light) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-light) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-light) 55%, transparent);
  }
  .btn-dark {
    --fv-btn-bg: var(--fv-dark);
    --fv-btn-color: var(--fv-dark-contrast, #ffffff);
    --fv-btn-border: var(--fv-dark);
    --fv-btn-hover-bg: color-mix(in srgb, var(--fv-dark) 92%, white);
    --fv-btn-hover-border: color-mix(in srgb, var(--fv-dark) 88%, white);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-dark) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-dark) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-dark) 55%, transparent);
  }
  .btn-outline-primary {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-primary-text, var(--fv-primary));
    --fv-btn-border: var(--fv-primary);
    --fv-btn-hover-bg: var(--fv-primary);
    --fv-btn-hover-border: var(--fv-primary);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-primary) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-primary) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-primary) 50%, transparent);
  }
  .btn-outline-primary:hover {
    --fv-btn-color: var(--fv-primary-contrast, #ffffff);
  }
  .btn-outline-secondary {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-secondary-text, var(--fv-secondary));
    --fv-btn-border: var(--fv-secondary);
    --fv-btn-hover-bg: var(--fv-secondary);
    --fv-btn-hover-border: var(--fv-secondary);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-secondary) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-secondary) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-secondary) 50%, transparent);
  }
  .btn-outline-secondary:hover {
    --fv-btn-color: var(--fv-secondary-contrast, #0b0f1d);
  }
  .btn-outline-success {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-success-text, var(--fv-success));
    --fv-btn-border: var(--fv-success);
    --fv-btn-hover-bg: var(--fv-success);
    --fv-btn-hover-border: var(--fv-success);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-success) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-success) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-success) 50%, transparent);
  }
  .btn-outline-success:hover {
    --fv-btn-color: var(--fv-success-contrast, #0b0f1d);
  }
  .btn-outline-danger {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-danger-text, var(--fv-danger));
    --fv-btn-border: var(--fv-danger);
    --fv-btn-hover-bg: var(--fv-danger);
    --fv-btn-hover-border: var(--fv-danger);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-danger) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-danger) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-danger) 50%, transparent);
  }
  .btn-outline-danger:hover {
    --fv-btn-color: var(--fv-danger-contrast, #0b0f1d);
  }
  .btn-outline-warning {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-warning-text, var(--fv-warning));
    --fv-btn-border: var(--fv-warning);
    --fv-btn-hover-bg: var(--fv-warning);
    --fv-btn-hover-border: var(--fv-warning);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-warning) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-warning) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-warning) 50%, transparent);
  }
  .btn-outline-warning:hover {
    --fv-btn-color: var(--fv-warning-contrast, #0b0f1d);
  }
  .btn-outline-info {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-info-text, var(--fv-info));
    --fv-btn-border: var(--fv-info);
    --fv-btn-hover-bg: var(--fv-info);
    --fv-btn-hover-border: var(--fv-info);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-info) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-info) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-info) 50%, transparent);
  }
  .btn-outline-info:hover {
    --fv-btn-color: var(--fv-info-contrast, #0b0f1d);
  }
  .btn-outline-accent {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-accent-text, var(--fv-accent));
    --fv-btn-border: var(--fv-accent);
    --fv-btn-hover-bg: var(--fv-accent);
    --fv-btn-hover-border: var(--fv-accent);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-accent) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-accent) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-accent) 50%, transparent);
  }
  .btn-outline-accent:hover {
    --fv-btn-color: var(--fv-accent-contrast, #0b0f1d);
  }
  .btn-outline-light {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-light-text, var(--fv-light));
    --fv-btn-border: var(--fv-light);
    --fv-btn-hover-bg: var(--fv-light);
    --fv-btn-hover-border: var(--fv-light);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-light) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-light) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-light) 50%, transparent);
  }
  .btn-outline-light:hover {
    --fv-btn-color: var(--fv-light-contrast, #0b0f1d);
  }
  .btn-outline-dark {
    --fv-btn-bg: transparent;
    --fv-btn-color: var(--fv-dark-text, var(--fv-dark));
    --fv-btn-border: var(--fv-dark);
    --fv-btn-hover-bg: var(--fv-dark);
    --fv-btn-hover-border: var(--fv-dark);
    --fv-btn-active-bg: color-mix(in srgb, var(--fv-dark) 90%, black);
    --fv-btn-focus-ring: color-mix(in srgb, var(--fv-dark) 45%, transparent);
    --fv-btn-glow: 0 0 24px color-mix(in srgb, var(--fv-dark) 50%, transparent);
  }
  .btn-outline-dark:hover {
    --fv-btn-color: var(--fv-dark-contrast, #ffffff);
  }
  .btn-gradient-primary {
    --fv-btn-color: #ffffff;
    --fv-btn-border: transparent;
    --fv-btn-hover-bg: transparent;
    --fv-btn-active-bg: transparent;
    --fv-btn-glow: var(--fv-glow-primary);
    color: var(--fv-btn-color);
    background-image: var(--fv-gradient-primary);
    border-color: transparent;
  }
  .btn-gradient-primary:hover {
    filter: brightness(1.08);
  }
  .btn-gradient-accent {
    --fv-btn-color: #ffffff;
    --fv-btn-border: transparent;
    --fv-btn-hover-bg: transparent;
    --fv-btn-active-bg: transparent;
    --fv-btn-glow: var(--fv-glow-primary);
    color: var(--fv-btn-color);
    background-image: var(--fv-gradient-accent);
    border-color: transparent;
  }
  .btn-gradient-accent:hover {
    filter: brightness(1.08);
  }
  .btn-gradient-sunset {
    --fv-btn-color: #ffffff;
    --fv-btn-border: transparent;
    --fv-btn-hover-bg: transparent;
    --fv-btn-active-bg: transparent;
    --fv-btn-glow: var(--fv-glow-primary);
    color: var(--fv-btn-color);
    background-image: var(--fv-gradient-sunset);
    border-color: transparent;
  }
  .btn-gradient-sunset:hover {
    filter: brightness(1.08);
  }
  .btn-gradient-aurora {
    --fv-btn-color: #ffffff;
    --fv-btn-border: transparent;
    --fv-btn-hover-bg: transparent;
    --fv-btn-active-bg: transparent;
    --fv-btn-glow: var(--fv-glow-primary);
    color: var(--fv-btn-color);
    background-image: var(--fv-gradient-aurora);
    border-color: transparent;
  }
  .btn-gradient-aurora:hover {
    filter: brightness(1.08);
  }
  .btn-glass {
    background-color: var(--fv-glass-bg);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --fv-btn-color: var(--fv-body-color);
    box-shadow: none;
  }
  .btn-glass:hover {
    background-color: var(--fv-glass-bg-strong);
    border-color: var(--fv-glass-border);
  }
  .btn-link {
    --fv-btn-bg: transparent;
    --fv-btn-border: transparent;
    --fv-btn-color: var(--fv-primary-text);
    --fv-btn-hover-bg: transparent;
    --fv-btn-hover-border: transparent;
    --fv-btn-active-bg: transparent;
    --fv-btn-glow: none;
  }
  .btn-link:hover {
    text-decoration: underline;
  }
  .btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
  }
  @media (pointer: coarse) {
    .btn-sm {
      min-height: 44px;
      padding-block: 0.5rem;
    }
  }
  .btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
  }
  .btn-block {
    display: flex;
    width: 100%;
  }
}
@layer components {
  .avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-weight: 600;
    color: var(--fv-body-color);
    background-color: var(--fv-glass-bg-strong);
    border: 1px solid var(--fv-glass-border);
    border-radius: 50%;
    overflow: hidden;
    -webkit-user-select: none;
            user-select: none;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
  }
  .avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
  }
  .avatar-xl {
    width: 5rem;
    height: 5rem;
    font-size: 1.5rem;
  }
  .avatar-primary {
    color: var(--fv-primary-contrast, #ffffff);
    background-color: var(--fv-primary);
    border-color: transparent;
  }
  .avatar-secondary {
    color: var(--fv-secondary-contrast, #0b0f1d);
    background-color: var(--fv-secondary);
    border-color: transparent;
  }
  .avatar-success {
    color: var(--fv-success-contrast, #0b0f1d);
    background-color: var(--fv-success);
    border-color: transparent;
  }
  .avatar-danger {
    color: var(--fv-danger-contrast, #0b0f1d);
    background-color: var(--fv-danger);
    border-color: transparent;
  }
  .avatar-warning {
    color: var(--fv-warning-contrast, #0b0f1d);
    background-color: var(--fv-warning);
    border-color: transparent;
  }
  .avatar-info {
    color: var(--fv-info-contrast, #0b0f1d);
    background-color: var(--fv-info);
    border-color: transparent;
  }
  .avatar-accent {
    color: var(--fv-accent-contrast, #0b0f1d);
    background-color: var(--fv-accent);
    border-color: transparent;
  }
  .avatar-light {
    color: var(--fv-light-contrast, #0b0f1d);
    background-color: var(--fv-light);
    border-color: transparent;
  }
  .avatar-dark {
    color: var(--fv-dark-contrast, #ffffff);
    background-color: var(--fv-dark);
    border-color: transparent;
  }
  .avatar-status {
    overflow: visible;
  }
  .avatar-status::after {
    content: "";
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 28%;
    height: 28%;
    background-color: var(--fv-success);
    border: 2px solid var(--fv-body-bg);
    border-radius: 50%;
  }
  .avatar-status-busy::after {
    background-color: var(--fv-danger);
  }
  .avatar-status-away::after {
    background-color: var(--fv-warning);
  }
  .avatar-group {
    display: inline-flex;
  }
  .avatar-group .avatar {
    border: 2px solid var(--fv-body-bg);
  }
  .avatar-group .avatar:not(:first-child) {
    margin-left: -0.75rem;
  }
}
@layer components {
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon-sm {
    width: 0.85em;
    height: 0.85em;
  }
  .icon-lg {
    width: 1.5em;
    height: 1.5em;
  }
  .icon-xl {
    width: 2em;
    height: 2em;
  }
}
@layer components {
  .toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(22rem, 100vw - 2rem);
  }
  .toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    background-color: var(--fv-glass-bg);
    background-color: var(--fv-glass-bg-strong);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--fv-primary);
    box-shadow: var(--fv-shadow-xl);
    animation: fv-toast-in 0.3s ease;
  }
  .toast-body {
    flex: 1 1 auto;
    min-width: 0;
  }
  .toast-title {
    font-weight: 600;
  }
  .toast-message {
    font-size: 0.875rem;
    color: var(--fv-muted);
  }
  .toast-close {
    flex-shrink: 0;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--fv-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .toast-close:hover {
    color: var(--fv-body-color);
  }
  .toast-primary {
    border-left-color: var(--fv-primary);
  }
  .toast-secondary {
    border-left-color: var(--fv-secondary);
  }
  .toast-success {
    border-left-color: var(--fv-success);
  }
  .toast-danger {
    border-left-color: var(--fv-danger);
  }
  .toast-warning {
    border-left-color: var(--fv-warning);
  }
  .toast-info {
    border-left-color: var(--fv-info);
  }
  .toast-accent {
    border-left-color: var(--fv-accent);
  }
  .toast-light {
    border-left-color: var(--fv-light);
  }
  .toast-dark {
    border-left-color: var(--fv-dark);
  }
  .toast.is-leaving {
    animation: fv-toast-out 0.25s ease forwards;
  }
  @keyframes fv-toast-in {
    from {
      opacity: 0;
      transform: translateX(1rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fv-toast-out {
    to {
      opacity: 0;
      transform: translateX(1rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .toast {
      animation: none;
    }
  }
}
@layer components {
  .chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .message {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .message-body {
    min-width: 0;
    max-width: min(42rem, 80%);
  }
  .message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    color: var(--fv-body-color);
    background-color: var(--fv-glass-bg);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }
  .message-bubble > :last-child {
    margin-bottom: 0;
  }
  .message-meta {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--fv-muted);
  }
  .message-out {
    flex-direction: row-reverse;
  }
  .message-out .message-bubble {
    color: #ffffff;
    background-image: var(--fv-gradient-primary);
    border-color: transparent;
  }
  .message-out .message-meta {
    text-align: right;
  }
  .typing {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0;
  }
  .typing span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: var(--fv-muted);
    animation: fv-typing 1.2s infinite ease-in-out;
  }
  .typing span:nth-child(2) {
    animation-delay: 0.15s;
  }
  .typing span:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes fv-typing {
    0%, 60%, 100% {
      opacity: 0.3;
      transform: translateY(0);
    }
    30% {
      opacity: 1;
      transform: translateY(-0.2rem);
    }
  }
  .streaming::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: 0.15em;
    vertical-align: text-bottom;
    background-color: var(--fv-primary-text);
    border-radius: 1px;
    animation: fv-caret 1s linear infinite;
  }
  @keyframes fv-caret {
    0%, 49.9% {
      opacity: 1;
    }
    50%, 100% {
      opacity: 0;
    }
  }
  .message-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .message:hover .message-actions,
  .message:focus-within .message-actions {
    opacity: 1;
  }
  @media (hover: none) {
    .message-actions {
      opacity: 1;
    }
  }
  .cite {
    display: inline-block;
    padding: 0 0.4em;
    margin-left: 0.15em;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--fv-primary-text);
    text-decoration: none;
    vertical-align: super;
    background-color: var(--fv-code-bg);
    border: 1px solid var(--fv-border-color);
    border-radius: 50rem;
  }
  .cite:hover {
    border-color: var(--fv-primary-text);
  }
  .cite:focus-visible {
    outline: 0;
    box-shadow: var(--fv-focus-ring);
  }
  .sources {
    padding-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--fv-muted);
  }
  .sources li {
    margin-top: 0.25rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .typing span {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      opacity: 0.7;
    }
    .streaming::after {
      animation: none;
    }
  }
}
@layer components {
  .prompt {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    background-color: var(--fv-glass-bg);
    background-color: var(--fv-glass-bg-strong);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .prompt:focus-within {
    border-color: var(--fv-primary);
    box-shadow: var(--fv-focus-ring);
  }
  .prompt-field {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    max-height: 12rem;
    padding: 0.5rem 0.75rem;
    color: var(--fv-body-color);
    font: inherit;
    line-height: 1.6;
    background: transparent;
    border: 0;
    resize: none;
    field-sizing: content;
    overflow-y: auto;
  }
  .prompt-field::placeholder {
    color: var(--fv-muted);
    opacity: 0.8;
  }
  .prompt-field:focus {
    outline: 0;
  }
  .prompt-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
  .prompt-meta {
    font-size: 0.875rem;
    color: var(--fv-muted);
    white-space: nowrap;
  }
}
@layer components {
  .status {
    --fv-status: var(--fv-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fv-body-color);
  }
  .status::before {
    content: "";
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--fv-status);
  }
  .status-online {
    --fv-status: var(--fv-success);
  }
  .status-busy {
    --fv-status: var(--fv-warning);
  }
  .status-idle {
    --fv-status: var(--fv-muted);
  }
  .status-error {
    --fv-status: var(--fv-danger);
  }
  .status-online::before,
  .status-busy::before {
    animation: fv-pulse 1.8s infinite ease-out;
  }
  @keyframes fv-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--fv-status) 55%, transparent);
    }
    70% {
      box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--fv-status) 0%, transparent);
    }
    100% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--fv-status) 0%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .status::before {
      animation: none;
    }
  }
}
@layer components {
  .snippet-wrap {
    position: relative;
  }
  .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--fv-muted);
    background-color: var(--fv-glass-bg-strong);
    border: 1px solid var(--fv-glass-border);
    border-radius: 0.625rem;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .copy-btn:hover {
    color: var(--fv-body-color);
  }
  .copy-btn:focus-visible {
    outline: 0;
    opacity: 1;
    box-shadow: var(--fv-focus-ring);
  }
  .copy-btn.is-copied {
    color: var(--fv-success);
    border-color: var(--fv-success);
  }
  .snippet-wrap:hover .copy-btn,
  .snippet-wrap:focus-within .copy-btn {
    opacity: 1;
  }
  .btn.is-copied {
    color: var(--fv-success);
    border-color: var(--fv-success);
  }
  .snippet-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    padding-right: 6.5rem;
    font-family: var(--fv-font-mono);
    font-size: 0.75rem;
    color: var(--fv-muted);
    background-color: var(--fv-code-bg);
    border: 1px solid var(--fv-border-color);
    border-bottom: 0;
    border-radius: 0.625rem 0.625rem 0 0;
  }
  .snippet-title {
    color: var(--fv-body-color);
  }
  .snippet-lang {
    margin-left: auto;
    text-transform: lowercase;
  }
  .snippet-header + pre.snippet {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@layer components {
  .prose {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .prose > :first-child {
    margin-top: 0;
  }
  .prose > :last-child {
    margin-bottom: 0;
  }
  .prose h1 {
    font-size: 1.25rem;
  }
  .prose h2 {
    font-size: 1.125rem;
  }
  .prose h3, .prose h4, .prose h5, .prose h6 {
    font-size: 1rem;
  }
  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  .prose p, .prose ul, .prose ol, .prose pre, .prose blockquote, .prose table {
    margin-bottom: 0.75rem;
  }
  .prose li + li {
    margin-top: 0.25rem;
  }
  .prose img {
    max-width: 100%;
    border-radius: 0.625rem;
  }
  .prose table {
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .prose th, .prose td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--fv-border-color);
  }
  .prose th {
    font-weight: 600;
  }
  .prose-sm {
    font-size: 0.875rem;
  }
  .prose-sm p, .prose-sm ul, .prose-sm ol, .prose-sm pre, .prose-sm blockquote, .prose-sm table {
    margin-bottom: 0.5rem;
  }
  .prose-sm h1, .prose-sm h2, .prose-sm h3, .prose-sm h4, .prose-sm h5, .prose-sm h6 {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
  }
}
@layer components {
  .tool-call {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.625rem;
    background-color: var(--fv-glass-bg);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--fv-border-color);
  }
  .tool-call-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }
  summary.tool-call-header {
    cursor: pointer;
    list-style: none;
  }
  summary.tool-call-header::-webkit-details-marker {
    display: none;
  }
  summary.tool-call-header:focus-visible {
    outline: 0;
    box-shadow: var(--fv-focus-ring);
    border-radius: 0.625rem;
  }
  .tool-call-name {
    font-family: var(--fv-font-mono);
    font-weight: 500;
  }
  .tool-call-status {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--fv-muted);
  }
  .tool-call-args,
  .tool-call-result {
    padding: 0.5rem 0.75rem;
    font-family: var(--fv-font-mono);
    font-size: 0.75rem;
    color: var(--fv-muted);
    border-top: 1px solid var(--fv-border-color);
    overflow-x: auto;
  }
  .tool-call-result {
    color: var(--fv-body-color);
  }
  .tool-call-result pre {
    margin-bottom: 0;
  }
  .tool-call-running {
    border-left-color: var(--fv-info);
  }
  .tool-call-done {
    border-left-color: var(--fv-success);
  }
  .tool-call-error {
    border-left-color: var(--fv-danger);
  }
}
@layer components {
  .reasoning {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
  }
  .reasoning-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    color: var(--fv-muted);
    cursor: pointer;
    list-style: none;
    border-radius: 0.625rem;
    transition: color 0.2s ease;
  }
  .reasoning-summary::-webkit-details-marker {
    display: none;
  }
  .reasoning-summary::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex: none;
  }
  .reasoning-summary:hover {
    color: var(--fv-body-color);
  }
  .reasoning-summary:focus-visible {
    outline: 0;
    box-shadow: var(--fv-focus-ring);
  }
  .reasoning[open] > .reasoning-summary::before {
    transform: rotate(45deg);
  }
  .reasoning-body {
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    color: var(--fv-muted);
    border-left: 2px solid var(--fv-border-color);
  }
}
@layer components {
  .command {
    width: calc(100% - 1.5rem);
    max-width: 40rem;
    position: fixed;
    top: 12vh;
    left: 50%;
    margin: 0;
    translate: -50% 0;
    padding: 0;
    overflow: hidden;
    color: var(--fv-body-color);
    border-radius: 1.125rem;
    background-color: var(--fv-glass-bg);
    background-color: var(--fv-glass-bg-strong);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: var(--fv-shadow-xl);
  }
  .command::backdrop {
    background-color: rgba(6, 9, 18, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .command[open] {
    animation: fv-command-in 0.16s ease;
  }
  .command-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--fv-glass-border);
  }
  .command-search .icon {
    color: var(--fv-muted);
    flex: none;
  }
  .command-input {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0;
    font-size: 1.125rem;
    color: var(--fv-body-color);
    background: transparent;
    border: 0;
    outline: 0;
  }
  .command-input::placeholder {
    color: var(--fv-muted);
  }
  .command-list {
    max-height: min(24rem, 50vh);
    margin: 0;
    padding: 0.5rem;
    overflow-y: auto;
    list-style: none;
  }
  .command-group {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fv-muted);
  }
  .command-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    cursor: pointer;
    scroll-margin: 0.5rem;
  }
  .command-item .icon {
    color: var(--fv-muted);
    flex: none;
  }
  .command-item .command-label {
    flex: 1;
    min-width: 0;
  }
  .command-item.is-active, .command-item:hover {
    background-color: var(--fv-glass-bg-strong);
  }
  .command-item.is-active .icon, .command-item:hover .icon {
    color: var(--fv-primary-text);
  }
  .command-item[hidden],
  .command-group[hidden] {
    display: none;
  }
  .command-kbd {
    margin-left: auto;
    flex: none;
    color: var(--fv-muted);
  }
  .command-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--fv-muted);
  }
  .command-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--fv-muted);
    border-top: 1px solid var(--fv-glass-border);
  }
  .command-hint kbd {
    font-size: 0.7rem;
    padding: 0.1em 0.4em;
  }
  @keyframes fv-command-in {
    from {
      opacity: 0;
      transform: translateY(-0.5rem) scale(0.99);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .command[open] {
      animation: none;
    }
  }
}
@layer components {
  .diff {
    margin-bottom: 0.75rem;
    overflow: hidden;
    font-size: 0.875rem;
    border-radius: 0.625rem;
    background-color: var(--fv-glass-bg);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .diff-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    overflow-wrap: anywhere;
    font-family: var(--fv-font-mono);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--fv-border-color);
  }
  .diff-stat {
    flex: none;
    margin-left: auto;
    color: var(--fv-muted);
  }
  .diff-stat-add {
    color: var(--fv-success);
  }
  .diff-stat-del {
    color: var(--fv-danger);
  }
  [data-theme=light] .diff-stat-add {
    color: color-mix(in srgb, #0f172a 55%, var(--fv-success));
  }
  [data-theme=light] .diff-stat-del {
    color: color-mix(in srgb, #0f172a 55%, var(--fv-danger));
  }
  .diff .diff-body {
    padding: 0.5rem 0;
    margin: 0;
    overflow-x: auto;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .diff .diff-body code {
    display: block;
    min-width: max-content;
  }
  .diff-line {
    display: block;
    padding: 0 0.75rem;
    white-space: pre;
  }
  .diff-add {
    color: var(--fv-body-color);
    background-color: color-mix(in srgb, var(--fv-success) 14%, transparent);
  }
  .diff-del {
    color: var(--fv-muted);
    background-color: color-mix(in srgb, var(--fv-danger) 12%, transparent);
  }
  .diff-hunk {
    padding-block: 0.25rem;
    color: var(--fv-info);
  }
  [data-theme=light] .diff-hunk {
    color: color-mix(in srgb, #0f172a 55%, var(--fv-info));
  }
}
@layer components {
  .suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  .suggestion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
    color: var(--fv-body-color);
    text-decoration: none;
    cursor: pointer;
    border-radius: 50rem;
    background-color: var(--fv-glass-bg);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .suggestion .icon {
    color: var(--fv-muted);
  }
  .suggestion:hover {
    background-color: var(--fv-glass-bg-strong);
    border-color: color-mix(in srgb, var(--fv-primary) 45%, transparent);
    transform: translateY(-1px);
  }
  .suggestion:focus-visible {
    outline: 0;
    box-shadow: var(--fv-focus-ring);
  }
}
@layer components {
  .attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(100%, 16rem);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.625rem;
    background-color: var(--fv-glass-bg);
    backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
    border: 1px solid var(--fv-glass-border);
    box-shadow: var(--fv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .attachment > .icon {
    color: var(--fv-muted);
    flex: none;
  }
  .attachment-name {
    overflow: hidden;
    font-family: var(--fv-font-mono);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .attachment-meta {
    flex: none;
    font-size: 0.75rem;
    color: var(--fv-muted);
  }
  .attachment-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: -0.25rem;
    flex: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--fv-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .attachment-remove:hover {
    color: var(--fv-danger);
    background-color: color-mix(in srgb, var(--fv-danger) 15%, transparent);
  }
  .attachment-remove:focus-visible {
    outline: 0;
    box-shadow: var(--fv-focus-ring);
  }
}
@layer base {
  :root {
    color-scheme: normal;
  }
  .btn,
  .suggestion,
  .copy-btn,
  .toast-close,
  .attachment-remove,
  .command-input {
    font: inherit;
  }
}
@layer components {
  pre.snippet,
  .prose pre,
  .tool-call-result pre {
    padding: 1rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    background-color: var(--fv-code-bg);
    border: 1px solid var(--fv-border-color);
    border-radius: 0.625rem;
  }
  pre.snippet code,
  .prose pre code,
  .tool-call-result pre code {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
  }
  .prose code,
  .prose kbd,
  .command kbd {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }
  .prose code {
    padding: 0.2em 0.45em;
    font-size: 0.875em;
    color: var(--fv-info);
    background-color: var(--fv-code-bg);
    border: 1px solid var(--fv-border-color);
    border-radius: 0.375rem;
  }
  .prose kbd,
  .command kbd {
    padding: 0.15em 0.45em;
    font-size: 0.85em;
    color: var(--fv-body-color);
    background-color: var(--fv-code-bg);
    border: 1px solid var(--fv-border-color);
    border-radius: 0.375rem;
  }
  .prose ul,
  .prose ol {
    padding-left: 1.5rem;
  }
  .prose ul {
    list-style: disc;
  }
  .prose ol {
    list-style: decimal;
  }
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    font-weight: 700;
  }
  .prose blockquote {
    padding-left: 1rem;
    color: var(--fv-muted);
    border-left: 3px solid var(--fv-primary);
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
  }
}