@import url('/vendor/fonts/google-fonts.css');

@source inline("{bg,border,text}-{gray,zinc,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}{,/{0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100}}");

@theme {
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-noto-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-serif: var(--font-noto-serif);
}

html {
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-gray-950: #0a0a0a;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-red-50: #fef2f2;
  --color-red-300: #fca5a5;
  --color-red-600: #dc2626;
  --color-green-50: #f0fdf4;
  --color-green-300: #86efac;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-amber-50: #fffbeb;
  --color-amber-200: #fde68a;
  --color-amber-800: #92400e;
  --color-rose-300: #fda4af;
  --color-rose-500: #f43f5e;
  --color-rose-700: #be123c;
  --color-blue-50: #eff6ff;
  --color-blue-300: #93c5fd;
  --color-blue-500: #3b82f6;
  --color-blue-700: #1d4ed8;
  --color-violet-300: #c4b5fd;
  --color-violet-500: #8b5cf6;
  --color-violet-700: #6d28d9;
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --theme-canvas-page: var(--color-gray-100);
  --theme-canvas-shell: var(--color-gray-100);
  --theme-canvas-hero: var(--color-gray-100);
  --theme-canvas-sidebar: transparent;
  --theme-canvas-mobile-nav: var(--color-gray-100);
  --theme-canvas-nav-glass: color-mix(in srgb, var(--color-gray-100) 70%, transparent);
  --theme-sidebar-collapsed-width: 64px;
  --theme-sidebar-expanded-width: 208px;
  --theme-sidebar-padding-x: 8px;
  --theme-sidebar-icon-box: 36px;
  --theme-sidebar-scrollbar-thumb: color-mix(in srgb, var(--theme-text-muted) 18%, transparent);
  --theme-sidebar-scrollbar-thumb-hover: color-mix(in srgb, var(--theme-text-muted) 32%, transparent);
  --theme-scrollbar-thumb: transparent;
  --theme-scrollbar-thumb-hover: color-mix(in srgb, var(--color-gray-500) 45%, transparent);

  --theme-surface-card: #fff;
  --theme-surface-section: #fff;
  --theme-surface-agent-card: #fff;
  --theme-surface-gray-card: #fff;
  --theme-surface-gray-muted-card: var(--color-gray-100);
  --theme-surface-row: var(--color-gray-50);
  --theme-surface-row-hover: #fff;
  --theme-surface-row-muted: var(--color-gray-50);
  --theme-surface-tile: var(--color-gray-50);
  --theme-surface-preview: #fff;
  --theme-surface-preview-muted: var(--color-gray-50);
  --theme-surface-preview-gray: #fff;
  --theme-surface-chip: var(--color-gray-100);
  --theme-surface-gray-chip: var(--color-gray-100);
  --theme-surface-icon-chip: var(--color-gray-100);
  --theme-surface-track: var(--color-gray-100);
  --theme-surface-track-strong: var(--color-gray-300);
  --theme-surface-active: var(--color-gray-300);
  --theme-surface-active-strong: var(--color-gray-950);
  --theme-surface-code: var(--color-gray-900);
  --theme-surface-code-header: var(--color-gray-800);
  --theme-surface-code-inline: color-mix(in srgb, var(--color-cyan-500) 12%, #fff);
  --theme-surface-table: #fff;
  --theme-surface-table-head: var(--color-gray-50);
  --theme-surface-table-row: #fff;
  --theme-surface-panel: #fff;
  --theme-surface-panel-muted: var(--color-gray-50);
  --theme-surface-shareout: #fff;
  --theme-surface-shareout-accent: #ecfeff;

  --theme-feature-card-bg: var(--color-gray-950);
  --theme-feature-card-text: #fff;
  --theme-feature-card-label: var(--color-gray-400);
  --theme-feature-card-body: var(--color-gray-300);
  --theme-feature-card-muted: var(--color-gray-400);
  --theme-feature-card-faint: var(--color-gray-500);
  --theme-feature-panel-bg: rgb(255 255 255 / 0.05);
  --theme-feature-panel-border: rgb(255 255 255 / 0.10);
  --theme-feature-chip-bg: rgb(255 255 255 / 0.10);
  --theme-feature-chip-text: var(--color-gray-300);
  --theme-feature-chip-muted: var(--color-gray-400);
  --theme-feature-chip-strong: #fff;

  --theme-text-heading: var(--color-gray-900);
  --theme-text-heading-gray: var(--color-gray-950);
  --theme-text-heading-soft: var(--color-gray-800);
  --theme-text-body: var(--color-gray-700);
  --theme-text-body-strong: var(--color-gray-800);
  --theme-text-body-muted: var(--color-gray-500);
  --theme-text-body-faint: var(--color-gray-400);
  --theme-text-label: var(--color-gray-500);
  --theme-text-meta: var(--color-gray-400);
  --theme-text-nav: var(--color-gray-700);
  --theme-text-nav-active: var(--color-gray-900);
  --theme-text-icon: var(--color-gray-500);
  --theme-text-inverse: #fff;
  --theme-text-inverse-strong: var(--color-gray-950);
  --theme-text-accent: var(--color-pink-600);
  --theme-text-accent-hover: var(--color-pink-600);
  --theme-text-code: var(--color-gray-100);
  --theme-text-code-header: var(--color-gray-300);
  --theme-text-code-inline: var(--color-cyan-600);
  --theme-text-table: var(--color-gray-800);
  --theme-text-table-head: var(--color-gray-500);
  --theme-text-panel: var(--color-gray-950);
  --theme-text-panel-muted: var(--color-gray-500);

  --theme-border-card: var(--color-gray-200);
  --theme-border-card-hover: var(--color-gray-300);
  --theme-border-section: var(--color-gray-200);
  --theme-border-row: var(--color-gray-200);
  --theme-border-row-hover: var(--color-gray-300);
  --theme-border-preview: var(--color-gray-200);
  --theme-border-preview-strong: var(--color-gray-300);
  --theme-border-gray: var(--color-gray-200);
  --theme-border-pill: color-mix(in srgb, var(--color-gray-200) 70%, transparent);
  --theme-border-pill-hover: var(--color-gray-300);
  --theme-border-divider: var(--color-gray-200);
  --theme-border-feature: rgb(255 255 255 / 0.10);
  --theme-border-nav: color-mix(in srgb, var(--color-gray-300) 55%, transparent);
  --theme-border-input: var(--color-gray-200);
  --theme-border-code: var(--color-gray-200);
  --theme-border-code-header: rgb(255 255 255 / 0.10);
  --theme-border-table: var(--color-gray-200);
  --theme-border-table-row: var(--color-gray-100);
  --theme-border-panel: var(--color-gray-200);
  --theme-border-shareout: var(--color-gray-200);
  --theme-border-shareout-accent: #67e8f9;

  --theme-button-primary-bg: var(--color-gray-800);
  --theme-button-primary-hover-bg: var(--color-gray-700);
  --theme-button-primary-text: #fff;
  --theme-button-secondary-bg: #fff;
  --theme-button-secondary-hover-bg: #fff;
  --theme-button-secondary-text: var(--color-gray-700);
  --theme-button-secondary-hover-text: var(--color-gray-900);
  --theme-button-ghost-bg: var(--color-gray-100);
  --theme-button-ghost-hover-bg: #fff;
  --theme-button-inverse-bg: #fff;
  --theme-button-inverse-hover-bg: var(--color-gray-200);
  --theme-button-inverse-text: var(--color-gray-900);
  --theme-button-accent-bg: var(--color-pink-500);
  --theme-button-accent-hover-bg: var(--color-pink-600);
  --theme-button-accent-text: #fff;
  --theme-alert-error-bg: var(--color-red-50);
  --theme-alert-error-text: var(--color-red-600);
  --theme-alert-success-bg: var(--color-green-50);
  --theme-alert-success-text: var(--color-green-600);
  --theme-alert-warning-bg: var(--color-amber-50);
  --theme-alert-warning-border: var(--color-amber-200);
  --theme-alert-warning-text: var(--color-amber-800);
  --theme-tone-sky-bg: #f0f9ff;
  --theme-tone-sky-border: #bae6fd;
  --theme-tone-sky-text: #0c4a6e;
  --theme-tone-sky-label: #0369a1;
  --theme-tone-emerald-bg: #ecfdf5;
  --theme-tone-emerald-border: #a7f3d0;
  --theme-tone-emerald-text: #064e3b;
  --theme-tone-emerald-label: #047857;
  --theme-tone-orange-bg: var(--color-orange-50);
  --theme-tone-orange-border: var(--color-orange-200);
  --theme-tone-orange-text: var(--color-orange-800);
  --theme-tone-orange-label: var(--color-orange-700);
  --theme-tone-amber-bg: var(--color-amber-50);
  --theme-tone-amber-border: var(--color-amber-200);
  --theme-tone-amber-text: var(--color-amber-800);
  --theme-tone-amber-label: var(--color-amber-800);
  --theme-tone-violet-bg: #f5f3ff;
  --theme-tone-violet-border: #ddd6fe;
  --theme-tone-violet-text: #4c1d95;
  --theme-tone-violet-label: #6d28d9;
  --theme-tone-rose-bg: #fff1f2;
  --theme-tone-rose-border: #fecdd3;
  --theme-tone-rose-text: #881337;
  --theme-tone-rose-label: #be123c;
  --theme-status-private-bg: var(--color-orange-500);
  --theme-status-locked-bg: var(--color-rose-500);
  --theme-status-text: #fff;
  --theme-article-tag-bg: var(--color-cyan-600);
  --theme-article-tag-border: var(--color-cyan-700);
  --theme-article-tag-text: #fff;
  --theme-beta-banner-bg: var(--color-gray-100);
  --theme-beta-banner-border: var(--color-gray-300);
  --theme-beta-banner-text: var(--color-gray-700);
  --theme-beta-banner-link: var(--color-gray-950);
  --theme-pill-bg: var(--color-gray-200);
  --theme-pill-active-bg: var(--color-gray-200);
  --theme-pill-text: var(--color-gray-600);
  --theme-pill-active-text: var(--color-gray-700);
  --theme-pill-hover-bg: var(--color-gray-200);

  --theme-accent-bar-dark: var(--color-gray-800);
  --theme-accent-bar-mid: var(--color-gray-700);
  --theme-accent-bar-soft: var(--color-gray-600);

  --theme-bg-page: var(--theme-canvas-page);
  --theme-bg-shell: var(--theme-canvas-shell);
  --theme-bg-nav: var(--theme-canvas-nav-glass);
  --theme-bg-surface: var(--theme-surface-card);
  --theme-bg-surface-raised: var(--theme-surface-card);
  --theme-bg-subtle: var(--theme-surface-row);
  --theme-bg-muted: var(--theme-surface-chip);
  --theme-bg-hover: var(--theme-surface-row-hover);
  --theme-bg-active: var(--theme-surface-active);
  --theme-text-primary: var(--theme-text-heading);
  --theme-text-strong: var(--theme-text-body-strong);
  --theme-text-secondary: var(--theme-text-body);
  --theme-text-muted: var(--theme-text-body-muted);
  --theme-text-faint: var(--theme-text-body-faint);
  --theme-border-subtle: var(--theme-border-card);
  --theme-border-muted: var(--theme-border-divider);
  --theme-border-strong: var(--theme-border-card-hover);
  --theme-border-warm: var(--theme-border-card);
  --theme-raised-border: var(--theme-border-card);
  --theme-raised-border-hover: var(--theme-border-card-hover);
  --theme-sidebar-separator: color-mix(in srgb, var(--color-gray-300) 55%, transparent);
  --theme-input-bg: var(--color-gray-50);
  --theme-input-text: var(--color-gray-950);
  --theme-input-placeholder: var(--color-gray-400);
  --theme-shadow-card: none;
  --theme-shadow-section: none;
  --theme-shadow-row-hover: 0 1px 3px rgb(0 0 0 / 0.06);
  --theme-shadow-agent-hover: 0 4px 10px rgb(0 0 0 / 0.08);
  --theme-shadow-soft: 0 1px 3px rgb(0 0 0 / 0.05);
  --theme-overlay: rgb(9 9 11 / 0.35);
  --theme-accent: var(--color-pink-500);
  --theme-accent-hover: var(--color-pink-600);
  --theme-accent-soft: var(--color-pink-50);
  --theme-focus: var(--color-cyan-500);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-canvas-page: var(--color-gray-950);
  --theme-canvas-shell: #080808;
  --theme-canvas-hero: var(--color-gray-950);
  --theme-canvas-sidebar: transparent;
  --theme-canvas-mobile-nav: var(--color-gray-900);
  --theme-canvas-nav-glass: rgb(23 23 23 / 0.72);
  --theme-sidebar-collapsed-width: 64px;
  --theme-sidebar-expanded-width: 208px;
  --theme-sidebar-padding-x: 8px;
  --theme-sidebar-icon-box: 36px;
  --theme-sidebar-scrollbar-thumb: color-mix(in srgb, var(--theme-text-muted) 18%, transparent);
  --theme-sidebar-scrollbar-thumb-hover: color-mix(in srgb, var(--theme-text-muted) 32%, transparent);
  --theme-scrollbar-thumb: transparent;
  --theme-scrollbar-thumb-hover: color-mix(in srgb, var(--color-gray-700) 70%, transparent);

  --theme-surface-card: var(--color-gray-900);
  --theme-surface-section: var(--color-gray-900);
  --theme-surface-agent-card: var(--color-gray-900);
  --theme-surface-gray-card: var(--color-gray-900);
  --theme-surface-gray-muted-card: var(--color-gray-900);
  --theme-surface-row: #121212;
  --theme-surface-row-hover: var(--color-gray-800);
  --theme-surface-row-muted: #121212;
  --theme-surface-tile: #121212;
  --theme-surface-preview: var(--color-gray-900);
  --theme-surface-preview-muted: #121212;
  --theme-surface-preview-gray: var(--color-gray-900);
  --theme-surface-chip: var(--color-gray-800);
  --theme-surface-gray-chip: var(--color-gray-800);
  --theme-surface-icon-chip: var(--color-gray-800);
  --theme-surface-track: var(--color-gray-800);
  --theme-surface-track-strong: var(--color-gray-700);
  --theme-surface-active: var(--color-gray-700);
  --theme-surface-active-strong: var(--color-gray-50);
  --theme-surface-code: #050505;
  --theme-surface-code-header: var(--color-gray-900);
  --theme-surface-code-inline: rgb(34 211 238 / 0.14);
  --theme-surface-table: var(--color-gray-900);
  --theme-surface-table-head: #101010;
  --theme-surface-table-row: var(--color-gray-900);
  --theme-surface-panel: var(--color-gray-900);
  --theme-surface-panel-muted: #121212;
  --theme-surface-shareout: var(--color-gray-900);
  --theme-surface-shareout-accent: rgb(8 145 178 / 0.12);

  --theme-feature-card-bg: #030303;
  --theme-feature-card-text: #fff;
  --theme-feature-card-label: var(--color-gray-400);
  --theme-feature-card-body: var(--color-gray-300);
  --theme-feature-card-muted: var(--color-gray-400);
  --theme-feature-card-faint: var(--color-gray-500);
  --theme-feature-panel-bg: rgb(255 255 255 / 0.05);
  --theme-feature-panel-border: rgb(255 255 255 / 0.10);
  --theme-feature-chip-bg: rgb(255 255 255 / 0.10);
  --theme-feature-chip-text: var(--color-gray-300);
  --theme-feature-chip-muted: var(--color-gray-400);
  --theme-feature-chip-strong: #fff;

  --theme-text-heading: var(--color-gray-50);
  --theme-text-heading-gray: var(--color-gray-50);
  --theme-text-heading-soft: var(--color-gray-100);
  --theme-text-body: var(--color-gray-300);
  --theme-text-body-strong: var(--color-gray-100);
  --theme-text-body-muted: var(--color-gray-400);
  --theme-text-body-faint: var(--color-gray-500);
  --theme-text-label: var(--color-gray-400);
  --theme-text-meta: var(--color-gray-500);
  --theme-text-nav: var(--color-gray-300);
  --theme-text-nav-active: var(--color-gray-50);
  --theme-text-icon: var(--color-gray-400);
  --theme-text-inverse: var(--color-gray-950);
  --theme-text-inverse-strong: var(--color-gray-950);
  --theme-text-accent: var(--color-pink-400);
  --theme-text-accent-hover: var(--color-pink-400);
  --theme-text-code: var(--color-gray-100);
  --theme-text-code-header: var(--color-gray-300);
  --theme-text-code-inline: var(--color-cyan-400);
  --theme-text-table: var(--color-gray-200);
  --theme-text-table-head: var(--color-gray-400);
  --theme-text-panel: var(--color-gray-50);
  --theme-text-panel-muted: var(--color-gray-400);

  --theme-border-card: rgb(255 255 255 / 0.08);
  --theme-border-card-hover: rgb(255 255 255 / 0.14);
  --theme-border-section: rgb(255 255 255 / 0.08);
  --theme-border-row: rgb(255 255 255 / 0.08);
  --theme-border-row-hover: rgb(255 255 255 / 0.14);
  --theme-border-preview: rgb(255 255 255 / 0.08);
  --theme-border-preview-strong: rgb(255 255 255 / 0.14);
  --theme-border-gray: rgb(255 255 255 / 0.08);
  --theme-border-pill: rgb(255 255 255 / 0.14);
  --theme-border-pill-hover: rgb(255 255 255 / 0.18);
  --theme-border-divider: rgb(255 255 255 / 0.08);
  --theme-border-feature: rgb(255 255 255 / 0.10);
  --theme-border-nav: rgb(255 255 255 / 0.06);
  --theme-border-input: rgb(255 255 255 / 0.08);
  --theme-border-code: rgb(255 255 255 / 0.08);
  --theme-border-code-header: rgb(255 255 255 / 0.08);
  --theme-border-table: rgb(255 255 255 / 0.08);
  --theme-border-table-row: rgb(255 255 255 / 0.06);
  --theme-border-panel: rgb(255 255 255 / 0.08);
  --theme-border-shareout: rgb(255 255 255 / 0.08);
  --theme-border-shareout-accent: rgb(34 211 238 / 0.38);

  --theme-button-primary-bg: var(--color-gray-800);
  --theme-button-primary-hover-bg: var(--color-gray-700);
  --theme-button-primary-text: #fff;
  --theme-button-secondary-bg: var(--color-gray-900);
  --theme-button-secondary-hover-bg: var(--color-gray-800);
  --theme-button-secondary-text: var(--color-gray-300);
  --theme-button-secondary-hover-text: var(--color-gray-50);
  --theme-button-ghost-bg: var(--color-gray-800);
  --theme-button-ghost-hover-bg: var(--color-gray-700);
  --theme-button-inverse-bg: #fff;
  --theme-button-inverse-hover-bg: var(--color-gray-200);
  --theme-button-inverse-text: var(--color-gray-950);
  --theme-button-accent-bg: var(--color-pink-500);
  --theme-button-accent-hover-bg: var(--color-pink-400);
  --theme-button-accent-text: #fff;
  --theme-alert-error-bg: rgb(127 29 29 / 0.22);
  --theme-alert-error-text: var(--color-red-300);
  --theme-alert-success-bg: rgb(20 83 45 / 0.22);
  --theme-alert-success-text: var(--color-green-300);
  --theme-alert-warning-bg: rgb(146 64 14 / 0.22);
  --theme-alert-warning-border: rgb(251 191 36 / 0.24);
  --theme-alert-warning-text: var(--color-amber-200);
  --theme-tone-sky-bg: rgb(3 105 161 / 0.40);
  --theme-tone-sky-border: rgb(2 132 199 / 0.95);
  --theme-tone-sky-text: #fff;
  --theme-tone-sky-label: #fff;
  --theme-tone-emerald-bg: rgb(4 120 87 / 0.40);
  --theme-tone-emerald-border: rgb(5 150 105 / 0.95);
  --theme-tone-emerald-text: #fff;
  --theme-tone-emerald-label: #fff;
  --theme-tone-orange-bg: rgb(194 65 12 / 0.40);
  --theme-tone-orange-border: rgb(234 88 12 / 0.95);
  --theme-tone-orange-text: #fff;
  --theme-tone-orange-label: #fff;
  --theme-tone-amber-bg: rgb(180 83 9 / 0.40);
  --theme-tone-amber-border: rgb(217 119 6 / 0.95);
  --theme-tone-amber-text: #fff;
  --theme-tone-amber-label: #fff;
  --theme-tone-violet-bg: rgb(109 40 217 / 0.40);
  --theme-tone-violet-border: rgb(124 58 237 / 0.95);
  --theme-tone-violet-text: #fff;
  --theme-tone-violet-label: #fff;
  --theme-tone-rose-bg: rgb(190 18 60 / 0.40);
  --theme-tone-rose-border: rgb(225 29 72 / 0.95);
  --theme-tone-rose-text: #fff;
  --theme-tone-rose-label: #fff;
  --theme-status-private-bg: var(--color-orange-500);
  --theme-status-locked-bg: var(--color-rose-500);
  --theme-status-text: #fff;
  --theme-article-tag-bg: var(--color-cyan-500);
  --theme-article-tag-border: var(--color-cyan-600);
  --theme-article-tag-text: #fff;
  --theme-beta-banner-bg: var(--color-zinc-900);
  --theme-beta-banner-border: var(--color-zinc-800);
  --theme-beta-banner-text: #fff;
  --theme-beta-banner-link: #fff;
  --theme-pill-bg: var(--color-gray-800);
  --theme-pill-active-bg: var(--color-gray-700);
  --theme-pill-text: var(--color-gray-300);
  --theme-pill-active-text: var(--color-gray-50);
  --theme-pill-hover-bg: var(--color-gray-700);

  --theme-accent-bar-dark: var(--color-gray-700);
  --theme-accent-bar-mid: var(--color-gray-600);
  --theme-accent-bar-soft: var(--color-gray-700);

  --theme-bg-page: var(--theme-canvas-page);
  --theme-bg-shell: var(--theme-canvas-shell);
  --theme-bg-nav: var(--theme-canvas-nav-glass);
  --theme-bg-surface: var(--theme-surface-card);
  --theme-bg-surface-raised: var(--theme-surface-card);
  --theme-bg-subtle: var(--theme-surface-row);
  --theme-bg-muted: var(--theme-surface-chip);
  --theme-bg-hover: var(--theme-surface-row-hover);
  --theme-bg-active: var(--theme-surface-active);
  --theme-text-primary: var(--theme-text-heading);
  --theme-text-strong: var(--theme-text-body-strong);
  --theme-text-secondary: var(--theme-text-body);
  --theme-text-muted: var(--theme-text-body-muted);
  --theme-text-faint: var(--theme-text-body-faint);
  --theme-border-subtle: var(--theme-border-card);
  --theme-border-muted: rgb(255 255 255 / 0.05);
  --theme-border-strong: var(--theme-border-card-hover);
  --theme-border-warm: var(--theme-border-card);
  --theme-raised-border: var(--theme-border-card);
  --theme-raised-border-hover: var(--theme-border-card-hover);
  --theme-sidebar-separator: rgb(255 255 255 / 0.06);
  --theme-input-bg: #151515;
  --theme-input-text: var(--color-gray-50);
  --theme-input-placeholder: var(--color-gray-500);
  --theme-shadow-card: none;
  --theme-shadow-section: none;
  --theme-shadow-row-hover: 0 1px 3px rgb(0 0 0 / 0.45);
  --theme-shadow-agent-hover: 0 4px 10px rgb(0 0 0 / 0.28);
  --theme-shadow-soft: 0 1px 3px rgb(0 0 0 / 0.45);
  --theme-overlay: rgb(0 0 0 / 0.65);
  --theme-accent: var(--color-pink-500);
  --theme-accent-hover: var(--color-pink-400);
  --theme-accent-soft: rgb(244 114 182 / 0.14);
  --theme-focus: var(--color-cyan-400);
}

.theme-page {
  background: var(--theme-canvas-page) !important;
  color: var(--theme-text-heading);
}

.theme-shell { background: var(--theme-canvas-shell) !important; }
.theme-hero { background: var(--theme-canvas-hero) !important; color: var(--theme-text-heading); }
.theme-nav { background: var(--theme-canvas-nav-glass) !important; color: var(--theme-text-nav); }
.theme-surface { background: var(--theme-surface-card) !important; color: var(--theme-text-heading); }
.theme-card {
  background: var(--theme-surface-card) !important;
  border-color: var(--theme-border-card) !important;
  color: var(--theme-text-heading);
  box-shadow: var(--theme-shadow-card);
}

.theme-section-card {
  background: var(--theme-surface-section) !important;
  border-color: var(--theme-border-section) !important;
  color: var(--theme-text-heading);
  box-shadow: var(--theme-shadow-section);
}
.theme-agent-card {
  background: var(--theme-surface-agent-card) !important;
  border-color: var(--theme-border-card) !important;
  color: var(--theme-text-heading);
}
.theme-agent-card:hover {
  border-color: var(--theme-border-card-hover) !important;
  box-shadow: var(--theme-shadow-agent-hover);
}
.theme-gray-card { background: var(--theme-surface-gray-card) !important; color: var(--theme-text-heading-gray); }
.theme-gray-muted-card { background: var(--theme-surface-gray-muted-card) !important; color: var(--theme-text-heading-gray); }
.theme-row-card {
  background: var(--theme-surface-row) !important;
  border-color: var(--theme-border-row) !important;
  color: var(--theme-text-heading-gray);
}
.theme-row-card:hover {
  background: var(--theme-surface-row-hover) !important;
  border-color: var(--theme-border-row-hover) !important;
  box-shadow: var(--theme-shadow-row-hover);
}
.theme-preview-card {
  background: var(--theme-surface-preview) !important;
  border-color: var(--theme-border-preview) !important;
  color: var(--theme-text-heading);
}
.theme-preview-muted {
  background: var(--theme-surface-preview-muted) !important;
  border-color: var(--theme-border-preview) !important;
  color: var(--theme-text-heading);
}
.theme-preview-gray {
  background: var(--theme-surface-preview-gray) !important;
  border-color: var(--theme-border-gray) !important;
  color: var(--theme-text-heading-gray);
}
.theme-preview-strong { border-color: var(--theme-border-preview-strong) !important; }
.theme-panel {
  background: var(--theme-surface-panel) !important;
  border-color: var(--theme-border-panel) !important;
  color: var(--theme-text-panel);
}
.theme-panel-muted {
  background: var(--theme-surface-panel-muted) !important;
  border-color: var(--theme-border-panel) !important;
  color: var(--theme-text-panel);
}
.theme-tile { background: var(--theme-surface-tile) !important; color: var(--theme-text-heading); }
.theme-chip { background: var(--theme-surface-chip) !important; color: var(--theme-text-body-muted); }
.theme-gray-chip { background: var(--theme-surface-gray-chip) !important; color: var(--theme-text-body-muted); }
.theme-icon-chip { background: var(--theme-surface-icon-chip) !important; color: var(--theme-text-icon); }
.theme-track { background: var(--theme-surface-track) !important; }
.theme-track-strong { background: var(--theme-surface-track-strong) !important; }
.theme-score-demand { background: var(--color-pink-600, #db2777) !important; }
.theme-score-backlog { background: var(--color-orange-600) !important; }
.theme-score-access { background: var(--color-emerald-600, #059669) !important; }
.theme-score-hospital { background: var(--color-cyan-600) !important; }
.theme-subtle { background: var(--theme-bg-subtle) !important; }
.theme-muted { background: var(--theme-bg-muted) !important; }
.theme-active { background: var(--theme-bg-active) !important; color: var(--theme-text-heading); }
.theme-active-strong { background: var(--theme-surface-active-strong) !important; color: var(--theme-text-inverse); }
.theme-hover:hover { background: var(--theme-bg-hover) !important; }
.theme-sidebar-hover:hover { background: var(--color-gray-200) !important; }
html[data-theme="dark"] .theme-sidebar-hover:hover { background: var(--theme-bg-hover) !important; }
.theme-hover-border:hover { border-color: var(--theme-border-strong) !important; }
.theme-hover-text:hover { color: var(--theme-text-heading); }
.theme-text { color: var(--theme-text-heading); }
.theme-text-heading-gray { color: var(--theme-text-heading-gray); }
.theme-text-strong { color: var(--theme-text-body-strong); }
.theme-text-secondary { color: var(--theme-text-body); }
.theme-text-muted { color: var(--theme-text-body-muted); }
.theme-text-faint { color: var(--theme-text-body-faint); }
.theme-text-label { color: var(--theme-text-label); }
.theme-text-meta { color: var(--theme-text-meta); }
.theme-text-inverse { color: var(--theme-text-inverse); }
.theme-text-accent { color: var(--theme-text-accent); }
.theme-text-code { color: var(--theme-text-code); }
.theme-text-code-header { color: var(--theme-text-code-header); }
.theme-text-code-inline { color: var(--theme-text-code-inline); }
.theme-text-panel { color: var(--theme-text-panel); }
.theme-text-panel-muted { color: var(--theme-text-panel-muted); }
.theme-icon-muted { color: var(--theme-text-icon); }
.theme-border { border-color: var(--theme-border-card) !important; }
.theme-border-subtle { border-color: var(--theme-border-card) !important; }
.theme-border-muted { border-color: var(--theme-border-muted) !important; }
.theme-border-strong { border-color: var(--theme-border-card-hover) !important; }
.theme-border-warm { border-color: var(--theme-border-card) !important; }
.theme-border-divider { border-color: var(--theme-border-divider) !important; }
.theme-border-panel { border-color: var(--theme-border-panel) !important; }
.theme-border-table { border-color: var(--theme-border-table) !important; }
.theme-border-table-row { border-color: var(--theme-border-table-row) !important; }
.theme-accent-bar-dark { background: var(--theme-accent-bar-dark) !important; }
.theme-accent-bar-mid { background: var(--theme-accent-bar-mid) !important; }
.theme-accent-bar-soft { background: var(--theme-accent-bar-soft) !important; }
.theme-feature-card { background: var(--theme-feature-card-bg) !important; color: var(--theme-feature-card-text); }
.theme-feature-text { color: var(--theme-feature-card-text); }
.theme-feature-label { color: var(--theme-feature-card-label); }
.theme-feature-body { color: var(--theme-feature-card-body); }
.theme-feature-muted { color: var(--theme-feature-card-muted); }
.theme-feature-faint { color: var(--theme-feature-card-faint); }
.theme-feature-panel {
  background: var(--theme-feature-panel-bg) !important;
  border-color: var(--theme-feature-panel-border) !important;
  color: var(--theme-feature-card-body);
}
.theme-feature-chip { background: var(--theme-feature-chip-bg) !important; color: var(--theme-feature-chip-text); }
.theme-feature-chip-muted { background: var(--theme-feature-chip-bg) !important; color: var(--theme-feature-chip-muted); }
.theme-feature-chip-strong { background: var(--theme-feature-chip-bg) !important; color: var(--theme-feature-chip-strong); }
.theme-tone-sky-card { background: var(--theme-tone-sky-bg) !important; border-color: var(--theme-tone-sky-border) !important; color: var(--theme-tone-sky-text); }
.theme-tone-sky-label { color: var(--theme-tone-sky-label); }
.theme-tone-emerald-card { background: var(--theme-tone-emerald-bg) !important; border-color: var(--theme-tone-emerald-border) !important; color: var(--theme-tone-emerald-text); }
.theme-tone-emerald-label { color: var(--theme-tone-emerald-label); }
.theme-tone-orange-card { background: var(--theme-tone-orange-bg) !important; border-color: var(--theme-tone-orange-border) !important; color: var(--theme-tone-orange-text); }
.theme-tone-orange-label { color: var(--theme-tone-orange-label); }
.theme-tone-amber-card { background: var(--theme-tone-amber-bg) !important; border-color: var(--theme-tone-amber-border) !important; color: var(--theme-tone-amber-text); }
.theme-tone-amber-label { color: var(--theme-tone-amber-label); }
.theme-tone-violet-card { background: var(--theme-tone-violet-bg) !important; border-color: var(--theme-tone-violet-border) !important; color: var(--theme-tone-violet-text); }
.theme-tone-violet-label { color: var(--theme-tone-violet-label); }
.theme-tone-rose-card { background: var(--theme-tone-rose-bg) !important; border-color: var(--theme-tone-rose-border) !important; color: var(--theme-tone-rose-text); }
.theme-tone-rose-label { color: var(--theme-tone-rose-label); }
.theme-input {
  background: var(--theme-input-bg) !important;
  border-color: var(--theme-border-input) !important;
  color: var(--theme-input-text);
}
.theme-input::placeholder { color: var(--theme-input-placeholder); }
.theme-focus:focus-visible {
  outline: 2px solid var(--theme-focus);
  outline-offset: 2px;
}

.theme-code-block {
  background: var(--theme-surface-code) !important;
  border-color: var(--theme-border-code) !important;
  color: var(--theme-text-code);
}

.theme-code-header {
  background: var(--theme-surface-code-header) !important;
  border-color: var(--theme-border-code-header) !important;
  color: var(--theme-text-code-header);
}

.theme-code-inline {
  background: var(--theme-surface-code-inline) !important;
  color: var(--theme-text-code-inline);
}

.theme-doc-page {
  color: var(--theme-text-heading);
}

.theme-doc-page h1,
.theme-doc-page h2,
.theme-doc-page h3 {
  color: var(--theme-text-heading);
}

.theme-doc-page p code,
.theme-doc-page li code {
  background: var(--theme-surface-code-inline) !important;
  color: var(--theme-text-code-inline) !important;
}

.theme-table {
  background: var(--theme-surface-table) !important;
  color: var(--theme-text-table);
}

.theme-table-head {
  background: var(--theme-surface-table-head) !important;
  border-color: var(--theme-border-table) !important;
  color: var(--theme-text-table-head);
}

.theme-table-row {
  background: var(--theme-surface-table-row) !important;
  border-color: var(--theme-border-table-row) !important;
  color: var(--theme-text-table);
}

.theme-shareout {
  background: var(--theme-surface-shareout) !important;
  border-color: var(--theme-border-shareout) !important;
  color: var(--theme-text-panel);
}

.theme-shareout-accent {
  background: var(--theme-surface-shareout-accent) !important;
  border-color: var(--theme-border-shareout-accent) !important;
}

.theme-raised-card,
.theme-raised-muted {
  border-right: 1px solid var(--theme-raised-border) !important;
  border-bottom: 1px solid var(--theme-raised-border) !important;
}

.theme-raised-card {
  background: var(--theme-bg-surface) !important;
  color: var(--theme-text-primary);
}

.theme-raised-muted {
  background: var(--theme-bg-muted) !important;
  color: var(--theme-text-primary);
}

.theme-raised-card:hover,
.theme-raised-muted:hover {
  border-right-color: var(--theme-raised-border-hover) !important;
  border-bottom-color: var(--theme-raised-border-hover) !important;
}

.theme-sidebar-separator {
  border-color: var(--theme-sidebar-separator) !important;
}

.theme-sidebar-scroll {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

.theme-sidebar-scroll::-webkit-scrollbar {
  width: 5px;
}

.theme-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.theme-sidebar-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.group\/sidebar:hover .theme-sidebar-scroll,
.group\/sidebar:focus-within .theme-sidebar-scroll {
  scrollbar-color: var(--theme-sidebar-scrollbar-thumb) transparent;
}

.group\/sidebar:hover .theme-sidebar-scroll::-webkit-scrollbar-thumb,
.group\/sidebar:focus-within .theme-sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--theme-sidebar-scrollbar-thumb-hover);
}

.theme-link-surface {
  background: var(--theme-surface-card);
  border-color: var(--theme-border-card);
  color: var(--theme-text-heading);
}

.theme-link-surface:hover {
  background: var(--theme-surface-row-hover);
  border-color: var(--theme-border-card-hover);
}

.theme-button-secondary {
  background: var(--theme-button-secondary-bg);
  border-color: var(--theme-border-card);
  color: var(--theme-button-secondary-text);
}

.theme-button-secondary:hover {
  background: var(--theme-button-secondary-hover-bg);
  border-color: var(--theme-border-card-hover);
  color: var(--theme-button-secondary-hover-text);
}

.theme-button-ghost {
  background: var(--theme-button-ghost-bg);
  border-color: transparent;
  color: var(--theme-text-body);
}

.theme-button-ghost:hover {
  background: var(--theme-button-ghost-hover-bg);
  border-color: var(--theme-border-card-hover);
  color: var(--theme-text-heading);
}

.theme-button-primary {
  background: var(--theme-button-primary-bg) !important;
  color: var(--theme-button-primary-text) !important;
}

.theme-button-primary:hover { background: var(--theme-button-primary-hover-bg) !important; }

.theme-button-inverse {
  background: var(--theme-button-inverse-bg) !important;
  color: var(--theme-button-inverse-text) !important;
}

.theme-button-inverse:hover { background: var(--theme-button-inverse-hover-bg) !important; }

.theme-button-accent {
  background: var(--theme-button-accent-bg) !important;
  color: var(--theme-button-accent-text) !important;
}

.theme-button-accent:hover { background: var(--theme-button-accent-hover-bg) !important; }

.theme-pill,
.theme-pill-active {
  border-color: var(--theme-border-pill) !important;
}

.theme-pill {
  background: var(--theme-pill-bg) !important;
  color: var(--theme-pill-text);
}

.theme-pill-active {
  background: var(--theme-pill-active-bg) !important;
  color: var(--theme-pill-active-text);
}

.theme-pill:hover,
.theme-pill-active:hover {
  background: var(--theme-pill-hover-bg) !important;
  border-color: var(--theme-border-pill-hover) !important;
}

.theme-alert-error { background: var(--theme-alert-error-bg) !important; color: var(--theme-alert-error-text); }
.theme-alert-success { background: var(--theme-alert-success-bg) !important; color: var(--theme-alert-success-text); }
.theme-alert-warning {
  background: var(--theme-alert-warning-bg) !important;
  border-color: var(--theme-alert-warning-border) !important;
  color: var(--theme-alert-warning-text);
}
.theme-status-private { background: var(--theme-status-private-bg) !important; color: var(--theme-status-text); }
.theme-status-locked { background: var(--theme-status-locked-bg) !important; color: var(--theme-status-text); }
.theme-article-tag {
  background: var(--theme-article-tag-bg) !important;
  border-color: var(--theme-article-tag-border) !important;
  color: var(--theme-article-tag-text);
}
.theme-beta-banner {
  background: var(--theme-beta-banner-bg) !important;
  border-color: var(--theme-beta-banner-border) !important;
  color: var(--theme-beta-banner-text);
}
.theme-beta-banner a { color: var(--theme-beta-banner-link); }

/* Compatibility layer for older Tailwind-colored markup.
   Keep this color-only: do not change border sides, widths, radius, spacing, or layout. */
.theme-page .bg-gray-50 { background-color: var(--theme-surface-panel-muted) !important; }
.theme-page .bg-gray-100 { background-color: var(--theme-bg-muted) !important; }
.theme-page .text-gray-950,
.theme-page .text-gray-900,
.theme-page .text-black { color: var(--theme-text-heading) !important; }
.theme-page .text-gray-800,
.theme-page .text-gray-700 { color: var(--theme-text-body-strong) !important; }
.theme-page .text-gray-600,
.theme-page .text-gray-500 { color: var(--theme-text-body-muted) !important; }
.theme-page .text-gray-400 { color: var(--theme-text-body-faint) !important; }
.theme-page .border-gray-50,
.theme-page .border-gray-100 { border-color: var(--theme-border-table-row) !important; }
.theme-page .border-gray-200 { border-color: var(--theme-border-card) !important; }
.theme-page .border-gray-300 { border-color: var(--theme-border-card-hover) !important; }
.theme-page .hover\:border-gray-300:hover { border-color: var(--theme-border-card-hover) !important; }
.theme-page .hover\:bg-gray-50:hover { background-color: var(--theme-bg-hover) !important; }
.theme-page .hover\:text-gray-950:hover,
.theme-page .hover\:text-gray-900:hover { color: var(--theme-text-heading) !important; }

.theme-accent-soft {
  background: var(--theme-accent-soft);
}

.theme-accent-text {
  color: var(--theme-accent-hover);
}

.theme-surface-glass {
  background: color-mix(in srgb, var(--theme-bg-surface) 90%, transparent);
  border-color: color-mix(in srgb, var(--theme-border-subtle) 70%, transparent);
  color: var(--theme-text-primary);
  box-shadow: var(--theme-shadow-soft);
}

.surface-composer {
  --theme-bg-surface: var(--surface-composer-bg, var(--theme-bg-surface));
  --theme-border-subtle: var(--surface-composer-border, var(--theme-border-subtle));
}

html[data-theme="light"] .surface-composer {
  --surface-composer-bg: rgb(255 255 255 / 0.9);
  --surface-composer-border: rgb(0 0 0 / 0.05);
}

html[data-theme="dark"] .surface-composer {
  --surface-composer-bg: rgb(23 23 23 / 0.88);
  --surface-composer-border: rgb(255 255 255 / 0.08);
}

.article-surface {
  --theme-bg-surface: var(--article-surface-bg, var(--theme-bg-surface));
  --theme-border-subtle: var(--article-surface-border, var(--theme-border-subtle));
}

html[data-theme="dark"] .article-surface {
  --article-surface-bg: #141210;
  --article-surface-border: #2a2723;
}

.admin-table {
  --theme-bg-subtle: var(--admin-table-head-bg, var(--theme-bg-subtle));
}

html[data-theme="dark"] .admin-table {
  --admin-table-head-bg: #101010;
}

/* Component theme overrides:
   Put a semantic class on the component root, then override --theme-* values
   in html[data-theme="light"] .component-name and html[data-theme="dark"] .component-name.
   Omit overrides when the global defaults are correct. */

.kraftland-bbb-workboard {
  background: var(--workboard-board-bg);
  color: var(--workboard-text);
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.kraftland-bbb-workboard .bbb-terminal {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

html[data-theme="light"] .kraftland-bbb-workboard {
  --workboard-board-bg: var(--color-gray-100);
  --workboard-board-dot: rgb(156 163 175 / 0.62);
  --workboard-panel-bg: var(--color-gray-50);
  --workboard-panel-title-bg: var(--color-gray-200);
  --workboard-table-head-bg: var(--color-gray-100);
  --workboard-table-row-bg: var(--color-gray-50);
  --workboard-table-row-alt: white;
  --workboard-border: var(--color-gray-200);
  --workboard-border-soft: var(--color-gray-300);
  --workboard-text: var(--color-gray-900);
  --workboard-muted: var(--color-gray-600);
  --workboard-faint: var(--color-gray-500);
  --workboard-subtle-bg: var(--color-gray-50);
  --workboard-status-running: var(--color-cyan-700);
  --workboard-status-complete: var(--color-green-600);
  --workboard-status-error: var(--color-rose-500);
  --workboard-status-pending: var(--color-amber-800);
  --workboard-status-not-run: var(--color-orange-600);
  --workboard-status-skipped: var(--color-gray-600);
  --workboard-status-neutral: var(--color-gray-700);
  --workboard-scrollbar-track: var(--color-gray-50);
  --workboard-scrollbar-thumb: var(--color-gray-300);
  --dag-explorer-board-bg: var(--workboard-board-bg);
  --dag-explorer-board-dot: var(--workboard-board-dot);
  --dag-explorer-panel-bg: var(--workboard-panel-bg);
  --dag-explorer-panel-title-bg: var(--workboard-panel-title-bg);
  --dag-explorer-border: var(--workboard-border);
  --dag-explorer-border-soft: var(--workboard-border-soft);
  --dag-explorer-text: var(--workboard-text);
  --dag-explorer-muted: var(--workboard-muted);
  --dag-explorer-faint: var(--workboard-faint);
  --dag-explorer-subtle-bg: var(--workboard-subtle-bg);
  --dag-explorer-status-running: var(--workboard-status-running);
  --dag-explorer-status-complete: var(--workboard-status-complete);
  --dag-explorer-status-error: var(--workboard-status-error);
  --dag-explorer-status-pending: var(--workboard-status-pending);
  --dag-explorer-status-not-run: var(--workboard-status-not-run);
  --dag-explorer-status-skipped: var(--workboard-status-skipped);
  --dag-explorer-status-neutral: var(--workboard-status-neutral);
  --dag-explorer-scrollbar-track: var(--workboard-scrollbar-track);
  --dag-explorer-scrollbar-thumb: var(--workboard-scrollbar-thumb);
}

html[data-theme="dark"] .kraftland-bbb-workboard {
  --workboard-board-bg: var(--theme-canvas-page);
  --workboard-board-dot: color-mix(in srgb, var(--color-gray-500) 62%, transparent);
  --workboard-panel-bg: var(--theme-surface-card);
  --workboard-panel-title-bg: var(--theme-surface-row);
  --workboard-table-head-bg: var(--theme-surface-table-head);
  --workboard-table-row-bg: var(--theme-surface-table-row);
  --workboard-table-row-alt: var(--theme-surface-row-muted);
  --workboard-border: var(--theme-border-card);
  --workboard-border-soft: var(--theme-border-card-hover);
  --workboard-text: var(--theme-text-heading);
  --workboard-muted: var(--theme-text-body-muted);
  --workboard-faint: var(--theme-text-body-faint);
  --workboard-subtle-bg: var(--theme-surface-row);
  --workboard-status-running: var(--color-cyan-400);
  --workboard-status-complete: var(--color-green-300);
  --workboard-status-error: var(--color-red-300);
  --workboard-status-pending: var(--color-amber-200);
  --workboard-status-not-run: var(--color-orange-400);
  --workboard-status-skipped: var(--color-gray-400);
  --workboard-status-neutral: var(--color-gray-300);
  --workboard-scrollbar-track: var(--theme-surface-row);
  --workboard-scrollbar-thumb: var(--theme-border-card-hover);
  --dag-explorer-board-bg: var(--workboard-board-bg);
  --dag-explorer-board-dot: var(--workboard-board-dot);
  --dag-explorer-panel-bg: var(--workboard-panel-bg);
  --dag-explorer-panel-title-bg: var(--workboard-panel-title-bg);
  --dag-explorer-border: var(--workboard-border);
  --dag-explorer-border-soft: var(--workboard-border-soft);
  --dag-explorer-text: var(--workboard-text);
  --dag-explorer-muted: var(--workboard-muted);
  --dag-explorer-faint: var(--workboard-faint);
  --dag-explorer-subtle-bg: var(--workboard-subtle-bg);
  --dag-explorer-status-running: var(--workboard-status-running);
  --dag-explorer-status-complete: var(--workboard-status-complete);
  --dag-explorer-status-error: var(--workboard-status-error);
  --dag-explorer-status-pending: var(--workboard-status-pending);
  --dag-explorer-status-not-run: var(--workboard-status-not-run);
  --dag-explorer-status-skipped: var(--workboard-status-skipped);
  --dag-explorer-status-neutral: var(--workboard-status-neutral);
  --dag-explorer-scrollbar-track: var(--workboard-scrollbar-track);
  --dag-explorer-scrollbar-thumb: var(--workboard-scrollbar-thumb);
}

.kraftland-bbb-workboard .bbb-header {
  background: var(--theme-surface-card);
  border-color: var(--theme-border-card);
  color: var(--theme-text-heading);
}

.kraftland-bbb-workboard .bbb-panel-header {
  background: var(--workboard-panel-title-bg);
  border-color: var(--workboard-border);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-header .bbb-control {
  background: var(--theme-input-bg);
  border-color: var(--theme-border-input);
  color: var(--theme-input-text);
}

.kraftland-bbb-workboard .bbb-header .bbb-control:focus-within,
.kraftland-bbb-workboard .bbb-view-dropdown-button:focus-visible {
  border-color: var(--color-gray-300);
  outline: 2px solid color-mix(in srgb, var(--color-gray-400) 35%, transparent);
  outline-offset: 1px;
}

.kraftland-bbb-workboard .bbb-control,
.kraftland-bbb-workboard .bbb-panel,
.kraftland-bbb-workboard .bbb-board-help,
.kraftland-bbb-workboard .bbb-canvas-controls,
.kraftland-bbb-workboard .bbb-minimap,
.kraftland-bbb-workboard .bbb-workflow-tree,
.kraftland-bbb-workboard .bbb-workflow-inspector,
.kraftland-bbb-workboard .bbb-inspector-shape,
.kraftland-bbb-workboard .bbb-workflow-canvas-footer,
.kraftland-bbb-workboard .bbb-workflow-shape-panel {
  background: var(--workboard-panel-bg);
  border-color: var(--workboard-border);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-control,
.kraftland-bbb-workboard .bbb-board-help,
.kraftland-bbb-workboard .bbb-canvas-controls,
.kraftland-bbb-workboard .bbb-minimap,
.kraftland-bbb-workboard .bbb-workflow-tree-item,
.kraftland-bbb-workboard .bbb-inspector-shape {
  border-radius: 0.5rem;
}

.kraftland-bbb-workboard .bbb-canvas-controls button {
  border-color: var(--workboard-border);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-action-button {
  background: var(--color-gray-700);
  border-color: var(--color-gray-800);
  border-bottom-color: var(--color-gray-800);
  border-radius: 0.375rem;
  color: var(--color-gray-50);
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.kraftland-bbb-workboard .bbb-action-button:hover:not(:disabled) {
  background: var(--color-gray-900);
  border-color: var(--color-gray-950);
  border-bottom-color: var(--color-gray-950);
}

.kraftland-bbb-workboard .bbb-action-button:disabled {
  opacity: 0.55;
}

.kraftland-bbb-workboard .bbb-action-button-active {
  background: var(--color-gray-900);
  border-color: var(--color-gray-950);
  border-bottom-color: var(--color-gray-950);
}

.kraftland-bbb-workboard .bbb-react-flow {
  background: var(--workboard-board-bg);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-workflow-canvas-footer,
.kraftland-bbb-workboard .bbb-workflow-shape-panel {
  background: var(--workboard-board-bg);
  border-color: transparent;
}

.kraftland-bbb-workboard .bbb-workflow-tree {
  background: var(--workboard-panel-bg);
}

.kraftland-bbb-workboard .bbb-workflow-tree-item {
  background: var(--workboard-subtle-bg);
  border-color: var(--workboard-border);
  color: var(--workboard-text);
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.kraftland-bbb-workboard .bbb-workflow-tree-item:hover,
.kraftland-bbb-workboard .bbb-workflow-tree-item-active {
  background: var(--workboard-panel-title-bg);
  border-color: var(--workboard-border-soft);
}

.kraftland-bbb-workboard .bbb-workflow-inspector {
  background: var(--workboard-panel-bg);
  border-color: var(--workboard-border);
}

.kraftland-bbb-workboard .bbb-inspector-shape {
  background: var(--workboard-subtle-bg);
}

.kraftland-bbb-workboard .bbb-inspector-shape > div {
  border-color: var(--workboard-border);
}

.kraftland-bbb-workboard .bbb-inspector-code {
  background: var(--workboard-panel-bg);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-code-line {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  min-height: 1rem;
}

.kraftland-bbb-workboard .bbb-code-line-number {
  user-select: none;
  border-right: 1px solid var(--workboard-border);
  padding: 0.15rem 0.4rem 0.15rem 0;
  text-align: right;
  color: var(--workboard-faint);
}

.kraftland-bbb-workboard .bbb-code-line-content {
  min-width: 0;
  padding: 0.15rem 0.5rem;
  white-space: pre;
}

.kraftland-bbb-workboard .hljs-keyword,
.kraftland-bbb-workboard .hljs-literal {
  color: var(--color-orange-700);
}

.kraftland-bbb-workboard .hljs-title,
.kraftland-bbb-workboard .hljs-title.class_,
.kraftland-bbb-workboard .hljs-title.function_ {
  color: var(--color-cyan-700);
}

.kraftland-bbb-workboard .hljs-attr,
.kraftland-bbb-workboard .hljs-property,
.kraftland-bbb-workboard .hljs-variable {
  color: var(--color-green-600);
}

.kraftland-bbb-workboard .hljs-string {
  color: var(--color-orange-700);
}

.kraftland-bbb-workboard .hljs-number,
.kraftland-bbb-workboard .hljs-built_in,
.kraftland-bbb-workboard .hljs-type {
  color: var(--color-rose-500);
}

html[data-theme="dark"] .kraftland-bbb-workboard .hljs-keyword,
html[data-theme="dark"] .kraftland-bbb-workboard .hljs-literal {
  color: var(--color-orange-300);
}

html[data-theme="dark"] .kraftland-bbb-workboard .hljs-title,
html[data-theme="dark"] .kraftland-bbb-workboard .hljs-title.class_,
html[data-theme="dark"] .kraftland-bbb-workboard .hljs-title.function_ {
  color: var(--color-cyan-400);
}

html[data-theme="dark"] .kraftland-bbb-workboard .hljs-attr,
html[data-theme="dark"] .kraftland-bbb-workboard .hljs-property,
html[data-theme="dark"] .kraftland-bbb-workboard .hljs-variable {
  color: var(--color-green-300);
}

html[data-theme="dark"] .kraftland-bbb-workboard .hljs-string {
  color: var(--color-amber-200);
}

html[data-theme="dark"] .kraftland-bbb-workboard .hljs-number,
html[data-theme="dark"] .kraftland-bbb-workboard .hljs-built_in,
html[data-theme="dark"] .kraftland-bbb-workboard .hljs-type {
  color: var(--color-red-300);
}

.kraftland-bbb-workboard .bbb-node-type-chip {
  display: inline-flex;
  min-width: 1.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding: 0.12rem 0.35rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: white;
}

.kraftland-bbb-workboard .bbb-node-type-parent_dag,
.kraftland-bbb-workboard .bbb-node-type-subdag {
  background: var(--color-cyan-600);
}

.kraftland-bbb-workboard .bbb-node-type-tool {
  background: var(--color-cyan-700);
}

.kraftland-bbb-workboard .bbb-node-type-function {
  background: var(--color-orange-600);
}

.kraftland-bbb-workboard .bbb-node-type-artifact {
  background: var(--color-rose-500);
}

.kraftland-bbb-workboard .react-flow__node {
  font-family: inherit;
}

.kraftland-bbb-workboard .react-flow__attribution {
  display: none;
}

.kraftland-bbb-workboard .bbb-react-flow-controls {
  border: 1px solid var(--workboard-border);
  box-shadow: none;
}

.kraftland-bbb-workboard .bbb-react-flow-controls button {
  background: var(--workboard-panel-bg);
  border-bottom-color: var(--workboard-border);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-react-flow-controls button:hover {
  background: var(--workboard-panel-title-bg);
}

.kraftland-bbb-workboard .react-flow__minimap {
  right: 56px;
  bottom: 12px;
  background: var(--workboard-panel-bg);
  border: 1px solid var(--workboard-border);
  border-radius: 0.5rem;
}

.kraftland-bbb-workboard .bbb-tab-active {
  background: var(--workboard-text);
  border-color: var(--workboard-border);
  color: var(--workboard-panel-bg);
}

.kraftland-bbb-workboard .bbb-panel {
  box-shadow: none;
  border-radius: 0.5rem;
  border-right-color: var(--workboard-border);
  border-bottom-color: var(--workboard-border);
}

.kraftland-bbb-workboard .bbb-panel-body {
  background: var(--workboard-panel-bg);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard * {
  scrollbar-color: var(--workboard-scrollbar-thumb) var(--workboard-scrollbar-track);
  scrollbar-width: thin;
}

.kraftland-bbb-workboard *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.kraftland-bbb-workboard *::-webkit-scrollbar-track {
  background: var(--workboard-scrollbar-track);
}

.kraftland-bbb-workboard *::-webkit-scrollbar-thumb {
  background: var(--workboard-scrollbar-thumb);
  border: 2px solid var(--workboard-scrollbar-track);
  border-radius: 999px;
}

.kraftland-bbb-workboard .bbb-muted { color: var(--workboard-muted); }
.kraftland-bbb-workboard .bbb-faint { color: var(--workboard-faint); }

.kraftland-bbb-workboard .bbb-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--workboard-table-row-bg);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-table-shell {
  background: var(--workboard-table-row-bg);
}

.kraftland-bbb-workboard .bbb-table th {
  background: var(--workboard-table-head-bg);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-table th,
.kraftland-bbb-workboard .bbb-table td {
  border: 0 !important;
}

.kraftland-bbb-workboard .bbb-table tbody tr:nth-child(odd) {
  background: var(--workboard-table-row-bg);
}

.kraftland-bbb-workboard .bbb-table tbody tr:nth-child(even) {
  background: var(--workboard-table-row-alt);
}

.kraftland-bbb-workboard .bbb-kv {
  border-color: var(--workboard-border-soft);
}

.kraftland-bbb-workboard .bbb-safety-chart {
  background: var(--workboard-subtle-bg);
  border-color: var(--workboard-border);
}

.kraftland-bbb-workboard .bbb-safety-description {
  border-color: var(--workboard-border);
  color: var(--workboard-muted);
}

.kraftland-bbb-workboard .bbb-safety-pill {
  border: 1px solid rgb(255 255 255 / 0.22);
}

.kraftland-bbb-workboard .bbb-metric,
.kraftland-bbb-workboard .bbb-empty,
.kraftland-bbb-workboard .bbb-gap,
.kraftland-bbb-workboard .bbb-dag-row,
.kraftland-bbb-workboard .bbb-edge-label,
.kraftland-bbb-workboard .bbb-flow-node {
  background: var(--workboard-subtle-bg);
  border-color: var(--workboard-border);
  color: var(--workboard-text);
}

.kraftland-bbb-workboard .bbb-metric,
.kraftland-bbb-workboard .bbb-empty,
.kraftland-bbb-workboard .bbb-gap,
.kraftland-bbb-workboard .bbb-dag-row,
.kraftland-bbb-workboard .bbb-edge-label,
.kraftland-bbb-workboard .bbb-flow-node {
  border-radius: 0.5rem;
}

.kraftland-bbb-workboard .bbb-flow-artifact-node {
  border-style: dashed;
  background: color-mix(in srgb, var(--workboard-subtle-bg) 88%, var(--workboard-status-complete));
}

.kraftland-bbb-workboard .bbb-status-pill {
  background: var(--workboard-panel-bg);
  border-color: currentColor;
  color: var(--workboard-status-neutral);
}

.kraftland-bbb-workboard .bbb-status-running { color: var(--workboard-status-running); }
.kraftland-bbb-workboard .bbb-status-complete { color: var(--workboard-status-complete); }
.kraftland-bbb-workboard .bbb-status-error { color: var(--workboard-status-error); }
.kraftland-bbb-workboard .bbb-status-pending { color: var(--workboard-status-pending); }
.kraftland-bbb-workboard .bbb-status-not-run { color: var(--workboard-status-not-run); }
.kraftland-bbb-workboard .bbb-status-skipped { color: var(--workboard-status-skipped); }
.kraftland-bbb-workboard .bbb-status-neutral { color: var(--workboard-status-neutral); }

.dag-explorer {
  --dag-explorer-board-bg: var(--workboard-board-bg, var(--theme-bg, var(--color-gray-100)));
  --dag-explorer-board-dot: var(--workboard-board-dot, color-mix(in srgb, var(--color-gray-400) 62%, transparent));
  --dag-explorer-panel-bg: var(--workboard-panel-bg, var(--theme-card, var(--color-gray-50)));
  --dag-explorer-panel-title-bg: var(--workboard-panel-title-bg, var(--color-gray-200));
  --dag-explorer-border: var(--workboard-border, var(--color-gray-200));
  --dag-explorer-border-soft: var(--workboard-border-soft, var(--color-gray-300));
  --dag-explorer-text: var(--workboard-text, var(--theme-text, var(--color-gray-900)));
  --dag-explorer-muted: var(--workboard-muted, var(--color-gray-600));
  --dag-explorer-faint: var(--workboard-faint, var(--color-gray-500));
  --dag-explorer-subtle-bg: var(--workboard-subtle-bg, var(--color-gray-50));
  --dag-explorer-status-running: var(--workboard-status-running, var(--color-cyan-700));
  --dag-explorer-status-complete: var(--workboard-status-complete, var(--color-green-600));
  --dag-explorer-status-error: var(--workboard-status-error, var(--color-rose-500));
  --dag-explorer-status-pending: var(--workboard-status-pending, var(--color-amber-800));
  --dag-explorer-status-not-run: var(--workboard-status-not-run, var(--color-orange-600));
  --dag-explorer-status-skipped: var(--workboard-status-skipped, var(--color-gray-600));
  --dag-explorer-status-neutral: var(--workboard-status-neutral, var(--color-gray-700));
  background: var(--dag-explorer-board-bg);
  color: var(--dag-explorer-text);
}

html[data-theme="dark"] .dag-explorer {
  --dag-explorer-board-bg: var(--workboard-board-bg, var(--theme-bg, var(--color-gray-950)));
  --dag-explorer-board-dot: var(--workboard-board-dot, color-mix(in srgb, var(--color-gray-500) 62%, transparent));
  --dag-explorer-panel-bg: var(--workboard-panel-bg, var(--theme-card, var(--color-gray-950)));
  --dag-explorer-panel-title-bg: var(--workboard-panel-title-bg, var(--color-gray-800));
  --dag-explorer-border: var(--workboard-border, var(--color-gray-700));
  --dag-explorer-border-soft: var(--workboard-border-soft, var(--color-gray-800));
  --dag-explorer-text: var(--workboard-text, var(--theme-text, var(--color-gray-100)));
  --dag-explorer-muted: var(--workboard-muted, var(--color-gray-300));
  --dag-explorer-faint: var(--workboard-faint, var(--color-gray-400));
  --dag-explorer-subtle-bg: var(--workboard-subtle-bg, var(--color-gray-950));
  --dag-explorer-status-running: var(--workboard-status-running, var(--color-cyan-400));
  --dag-explorer-status-complete: var(--workboard-status-complete, var(--color-green-300));
  --dag-explorer-status-error: var(--workboard-status-error, var(--color-red-300));
  --dag-explorer-status-pending: var(--workboard-status-pending, var(--color-amber-200));
  --dag-explorer-status-not-run: var(--workboard-status-not-run, var(--color-orange-400));
  --dag-explorer-status-skipped: var(--workboard-status-skipped, var(--color-gray-400));
  --dag-explorer-status-neutral: var(--workboard-status-neutral, var(--color-gray-300));
}

.dag-explorer-terminal {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

.dag-explorer-flow {
  background: var(--dag-explorer-board-bg);
  color: var(--dag-explorer-text);
}

.dag-explorer-directory,
.dag-explorer-inspector,
.dag-explorer-shape,
.dag-explorer-node {
  background: var(--dag-explorer-panel-bg);
  border-color: var(--dag-explorer-border);
  color: var(--dag-explorer-text);
  border-radius: 0.5rem;
}

.dag-explorer-directory {
  border-radius: 0;
}

.dag-explorer-process-row {
  background: var(--dag-explorer-subtle-bg);
  border-color: color-mix(in srgb, var(--dag-explorer-border) 75%, transparent);
  border-radius: 0.375rem;
}

.dag-explorer-process-technical {
  color: var(--dag-explorer-faint);
}

.dag-explorer-process-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border-radius: 999px;
  border: 1px solid currentColor;
  padding: 0.08rem 0.36rem;
  font-size: 0.56rem;
  font-weight: 500;
  line-height: 1rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.dag-explorer-process-fabric {
  background: color-mix(in srgb, var(--color-cyan-500) 12%, transparent);
  color: var(--color-cyan-700);
}

.dag-explorer-process-input {
  background: color-mix(in srgb, var(--color-blue-500) 12%, transparent);
  color: var(--color-blue-700);
}

.dag-explorer-process-workflow {
  background: color-mix(in srgb, var(--color-violet-500) 12%, transparent);
  color: var(--color-violet-700);
}

.dag-explorer-process-judge {
  background: color-mix(in srgb, var(--color-pink-500) 12%, transparent);
  color: var(--color-pink-700);
}

.dag-explorer-process-transform {
  background: color-mix(in srgb, var(--color-green-500) 12%, transparent);
  color: var(--color-green-700);
}

.dag-explorer-process-compute,
.dag-explorer-process-wasm,
.dag-explorer-process-math {
  background: color-mix(in srgb, var(--color-orange-500) 12%, transparent);
  color: var(--color-orange-700);
}

.dag-explorer-process-external {
  background: color-mix(in srgb, var(--color-blue-500) 12%, transparent);
  color: var(--color-blue-700);
}

.dag-explorer-process-render {
  background: color-mix(in srgb, var(--color-rose-500) 12%, transparent);
  color: var(--color-rose-700);
}

.dag-explorer-process-state {
  background: color-mix(in srgb, var(--color-gray-500) 14%, transparent);
  color: var(--color-gray-700);
}

html[data-theme="dark"] .dag-explorer-process-fabric {
  color: var(--color-cyan-300);
}

html[data-theme="dark"] .dag-explorer-process-input {
  color: var(--color-blue-300);
}

html[data-theme="dark"] .dag-explorer-process-workflow {
  color: var(--color-violet-300);
}

html[data-theme="dark"] .dag-explorer-process-judge {
  color: var(--color-pink-300);
}

html[data-theme="dark"] .dag-explorer-process-transform {
  color: var(--color-green-300);
}

html[data-theme="dark"] .dag-explorer-process-compute,
html[data-theme="dark"] .dag-explorer-process-wasm,
html[data-theme="dark"] .dag-explorer-process-math {
  color: var(--color-orange-300);
}

html[data-theme="dark"] .dag-explorer-process-external {
  color: var(--color-blue-300);
}

html[data-theme="dark"] .dag-explorer-process-render {
  color: var(--color-rose-300);
}

html[data-theme="dark"] .dag-explorer-process-state {
  color: var(--color-gray-300);
}

.dag-explorer-directory-group {
  border-left: 1px solid color-mix(in srgb, var(--dag-explorer-border) 65%, transparent);
}

.dag-explorer-directory-item {
  position: relative;
  background: var(--dag-explorer-subtle-bg);
  border-radius: 0.5rem;
  color: var(--dag-explorer-text);
  min-height: 1.65rem;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.dag-explorer-directory-label {
  font-weight: 400;
}

.dag-explorer-directory-item-active .dag-explorer-directory-label {
  font-weight: 500;
}

.dag-explorer-directory-icon {
  color: var(--color-gray-500);
}

.dag-explorer-directory-type-parent_dag .dag-explorer-directory-icon,
.dag-explorer-directory-type-subdag .dag-explorer-directory-icon {
  color: var(--color-cyan-600);
}

.dag-explorer-directory-type-loop_dag .dag-explorer-directory-icon {
  color: var(--color-violet-600);
}

.dag-explorer-directory-type-loop_boundary .dag-explorer-directory-icon {
  color: var(--color-amber-600);
}

.dag-explorer-directory-type-tool .dag-explorer-directory-icon {
  color: var(--color-cyan-700);
}

.dag-explorer-directory-type-function .dag-explorer-directory-icon {
  color: var(--color-gray-800);
}

.dag-explorer-directory-type-artifact .dag-explorer-directory-icon {
  color: var(--color-rose-500);
}

html[data-theme="dark"] .dag-explorer-directory-type-function .dag-explorer-directory-icon {
  color: var(--color-gray-300);
}

.dag-explorer-directory-item:hover,
.dag-explorer-directory-item-active {
  background: var(--dag-explorer-panel-title-bg);
}

.dag-explorer-directory-item:hover::after,
.dag-explorer-directory-item:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 0.5rem);
  top: 50%;
  z-index: 30;
  max-width: 18rem;
  transform: translateY(-50%);
  white-space: nowrap;
  border: 1px solid var(--dag-explorer-border);
  border-radius: 0.375rem;
  background: var(--dag-explorer-panel-bg);
  color: var(--dag-explorer-text);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
  padding: 0.25rem 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1rem;
  pointer-events: none;
}

.dag-explorer-shape-panel {
  background: var(--dag-explorer-board-bg);
  border-color: transparent;
  transition: margin-right 200ms ease;
}

.dag-explorer-shape-title {
  background: white;
  border-color: var(--color-gray-200);
  color: var(--color-gray-900);
}

.dag-explorer-code {
  background: var(--dag-explorer-panel-bg);
  color: var(--dag-explorer-text);
}

.dag-explorer-code-line {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  min-height: 1rem;
}

.dag-explorer-code-line-number {
  user-select: none;
  border-right: 1px solid var(--dag-explorer-border);
  padding: 0.15rem 0.4rem 0.15rem 0;
  text-align: right;
  color: var(--dag-explorer-faint);
}

.dag-explorer-code-line-content {
  min-width: 0;
  padding: 0.15rem 0.5rem;
  white-space: pre;
}

.dag-explorer-node {
  --dag-explorer-node-accent: var(--color-gray-500);
  transition: background-color 150ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}

.dag-explorer-node:hover {
  border-color: var(--dag-explorer-node-accent);
}

.dag-explorer-node-selected {
  border-color: var(--dag-explorer-node-accent);
  box-shadow: 0 0 0 1px var(--dag-explorer-node-accent), 0 0 22px color-mix(in srgb, var(--dag-explorer-node-accent) 34%, transparent);
}

.dag-explorer-node-accent-parent_dag,
.dag-explorer-node-accent-subdag {
  --dag-explorer-node-accent: var(--color-cyan-600);
}

.dag-explorer-node-accent-loop_dag {
  --dag-explorer-node-accent: var(--color-violet-600);
}

.dag-explorer-node-accent-loop_boundary {
  --dag-explorer-node-accent: var(--color-amber-600);
}

.dag-explorer-node-accent-tool {
  --dag-explorer-node-accent: var(--color-cyan-700);
}

.dag-explorer-node-accent-function {
  --dag-explorer-node-accent: var(--color-gray-800);
}

.dag-explorer-node-accent-artifact {
  --dag-explorer-node-accent: var(--color-rose-500);
}

html[data-theme="dark"] .dag-explorer-node-accent-function {
  --dag-explorer-node-accent: var(--color-gray-300);
}

.dag-explorer-node-title {
  color: var(--color-gray-800);
}

html[data-theme="dark"] .dag-explorer-node-title {
  color: var(--color-gray-100);
}

.dag-explorer-artifact-node {
  border-style: dashed;
  background: color-mix(in srgb, var(--dag-explorer-subtle-bg) 88%, var(--dag-explorer-status-complete));
}

.dag-explorer-node-type-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid currentColor;
  padding: 0.12rem 0.35rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  background: var(--dag-explorer-subtle-bg);
  color: var(--dag-explorer-node-accent);
}

.dag-explorer-node-type-parent_dag,
.dag-explorer-node-type-subdag {
  color: var(--color-cyan-600);
}

.dag-explorer-node-type-loop_dag {
  color: var(--color-violet-600);
}

.dag-explorer-node-type-loop_boundary {
  color: var(--color-amber-600);
}

.dag-explorer-node-type-tool {
  color: var(--color-cyan-700);
}

.dag-explorer-node-type-function {
  color: var(--color-gray-800);
}

.dag-explorer-node-type-artifact {
  color: var(--color-rose-500);
}

.dag-explorer-status-pill {
  background: var(--dag-explorer-panel-bg);
  border-color: currentColor;
  color: var(--dag-explorer-status-neutral);
}

.dag-explorer-status-running { color: var(--dag-explorer-status-running); }
.dag-explorer-status-complete { color: var(--dag-explorer-status-complete); }
.dag-explorer-status-error { color: var(--dag-explorer-status-error); }
.dag-explorer-status-pending { color: var(--dag-explorer-status-pending); }
.dag-explorer-status-not-run { color: var(--dag-explorer-status-not-run); }
.dag-explorer-status-skipped { color: var(--dag-explorer-status-skipped); }
.dag-explorer-status-neutral { color: var(--dag-explorer-status-neutral); }
.dag-explorer-muted { color: var(--dag-explorer-muted); }
.dag-explorer-faint { color: var(--dag-explorer-faint); }

.dag-explorer-flow-controls {
  border: 1px solid var(--dag-explorer-border);
  box-shadow: none;
}

.dag-explorer-flow-controls button {
  background: var(--dag-explorer-panel-bg);
  border-bottom-color: var(--dag-explorer-border);
  color: var(--dag-explorer-text);
}

.dag-explorer-flow-controls button:hover {
  background: var(--dag-explorer-panel-title-bg);
}

.dag-explorer .react-flow__attribution {
  display: none;
}

.dag-explorer .react-flow__minimap {
  right: 56px;
  bottom: 12px;
  background: var(--dag-explorer-panel-bg);
  border: 1px solid var(--dag-explorer-border);
  border-radius: 0.5rem;
}

.dag-explorer .hljs-keyword,
.dag-explorer .hljs-literal {
  color: var(--color-orange-700);
}

.dag-explorer .hljs-title,
.dag-explorer .hljs-title.class_,
.dag-explorer .hljs-title.function_ {
  color: var(--color-cyan-700);
}

.dag-explorer .hljs-attr,
.dag-explorer .hljs-property,
.dag-explorer .hljs-variable {
  color: var(--color-green-600);
}

.dag-explorer .hljs-string {
  color: var(--color-orange-700);
}

.dag-explorer .hljs-number,
.dag-explorer .hljs-built_in,
.dag-explorer .hljs-type {
  color: var(--color-rose-500);
}

html[data-theme="dark"] .dag-explorer .hljs-keyword,
html[data-theme="dark"] .dag-explorer .hljs-literal {
  color: var(--color-orange-300);
}

html[data-theme="dark"] .dag-explorer .hljs-title,
html[data-theme="dark"] .dag-explorer .hljs-title.class_,
html[data-theme="dark"] .dag-explorer .hljs-title.function_ {
  color: var(--color-cyan-400);
}

html[data-theme="dark"] .dag-explorer .hljs-attr,
html[data-theme="dark"] .dag-explorer .hljs-property,
html[data-theme="dark"] .dag-explorer .hljs-variable {
  color: var(--color-green-300);
}

html[data-theme="dark"] .dag-explorer .hljs-string {
  color: var(--color-amber-200);
}

html[data-theme="dark"] .dag-explorer .hljs-number,
html[data-theme="dark"] .dag-explorer .hljs-built_in,
html[data-theme="dark"] .dag-explorer .hljs-type {
  color: var(--color-red-300);
}

html,
body,
.font-montserrat,
.font-sans,
input,
button,
textarea,
select,
th,
td {
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.floating-brand-mark {
  pointer-events: auto;
}

.floating-brand-mark-text {
  color: color-mix(in srgb, var(--color-gray-500), transparent 80%);
}

.floating-brand-mark-rule {
  background: color-mix(in srgb, #e5e5e5, transparent 80%);
}

/* iOS Safari: 100vh includes area behind dynamic toolbars, causing overflow.
   Use dvh (dynamic viewport) with -webkit-fill-available fallback. */
@supports (height: 100dvh) {
  .h-screen { height: 100dvh; }
}
@supports (-webkit-touch-callout: none) and (not (height: 100dvh)) {
  .h-screen { height: -webkit-fill-available; }
}

@utility scrollbar-dark {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  scrollbar-width: thin;
}

.scrollbar-dark::-webkit-scrollbar {
  width: 5px;
}
.scrollbar-dark::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.scrollbar-subtle,
.scrollbar-hover {
  scrollbar-color: var(--theme-scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

.scrollbar-subtle::-webkit-scrollbar,
.scrollbar-hover::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.scrollbar-subtle::-webkit-scrollbar-track,
.scrollbar-hover::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-subtle::-webkit-scrollbar-thumb,
.scrollbar-hover::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 999px;
}

.scrollbar-subtle:hover,
.scrollbar-subtle:focus-within,
.scrollbar-hover:hover,
.scrollbar-hover:focus-within {
  scrollbar-color: var(--theme-scrollbar-thumb-hover) transparent;
}

.scrollbar-subtle:hover::-webkit-scrollbar-thumb,
.scrollbar-subtle:focus-within::-webkit-scrollbar-thumb,
.scrollbar-hover:hover::-webkit-scrollbar-thumb,
.scrollbar-hover:focus-within::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb-hover);
}

/* Splash / marketplace typography */
.text-display-xl   { font-size: 2.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.font-display-xl   { font-weight: 700; }
.text-body-lg      { font-size: 1.05rem; line-height: 1.6; }
.font-body-lg      { font-weight: 400; }
.text-headline-md  { font-size: 0.8rem; line-height: 1.4; letter-spacing: 0.02em; }
.font-headline-md  { font-weight: 600; }

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Chat prose: enhanced markdown rendering ── */
.chat-prose {
  --cta: color-mix(in srgb, var(--color-orange-600) 85%, #000);
}

.chat-prose h2 {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--theme-text-primary);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding-top: 0.75em;
  border-top: 2px solid var(--theme-border-subtle);
}
.chat-prose h2:first-child { border-top: none; padding-top: 0; }

.chat-prose h3 {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--theme-text-secondary);
  margin-top: 1.25em;
  margin-bottom: 0.35em;
}

.chat-prose h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--theme-text-secondary);
  margin-top: 1em;
  margin-bottom: 0.25em;
}

.chat-prose hr {
  margin: 1.25em 0;
  border: none;
  height: 3px;
  background: linear-gradient(to right, var(--theme-border-strong), var(--theme-border-muted), transparent);
  border-radius: 2px;
}

.chat-prose p {
  margin: 0.6em 0;
  color: var(--theme-text-secondary);
}

.chat-prose strong {
  color: var(--theme-text-primary);
  font-weight: 650;
}

.chat-prose a {
  color: var(--cta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-prose a:hover { color: var(--color-orange-700); }

/* Lists */
.chat-prose ul,
.chat-prose ol {
  padding-left: 1.25em;
  margin: 0.5em 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.chat-prose ul { list-style-type: none; }
.chat-prose ul li { position: relative; padding-left: 0.25em; }
.chat-prose ul li::before {
  content: '';
  position: absolute;
  left: -0.9em;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--theme-text-faint);
}

.chat-prose ol {
  list-style-type: none;
  counter-reset: chat-counter;
}
.chat-prose ol li {
  counter-increment: chat-counter;
  position: relative;
  padding-left: 0.25em;
}
.chat-prose ol li::before {
  content: counter(chat-counter);
  position: absolute;
  left: -1.4em;
  top: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--theme-text-faint);
  min-width: 1.1em;
  text-align: right;
}

/* Blockquotes */
.chat-prose blockquote {
  margin: 0.75em 0;
  padding: 0.5em 0.75em;
  border-left: 3px solid var(--color-orange-500);
  background: var(--theme-accent-soft);
  border-radius: 0 4px 4px 0;
}
.chat-prose blockquote p { margin: 0.2em 0; color: var(--theme-text-secondary); }

/* Inline code */
.chat-prose code {
  font-family: 'Fira Code', monospace;
  font-size: 0.78em;
  background: var(--theme-bg-muted);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: var(--theme-text-secondary);
}

.chat-prose pre {
  margin: 0.75em 0;
  padding: 0.75em 1em;
  background: var(--color-gray-950);
  border-radius: 6px;
  overflow-x: auto;
}
.chat-prose pre code {
  background: none;
  color: var(--color-gray-100);
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.6;
}

/* Tables inside chat prose */
.chat-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.78rem;
  border: 1px solid var(--theme-border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.chat-prose thead {
  background: var(--theme-bg-subtle);
  border-bottom: 2px solid var(--theme-border-subtle);
}
.chat-prose th {
  padding: 0.4em 0.75em;
  text-align: left;
  font-weight: 650;
  color: var(--theme-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chat-prose td {
  padding: 0.4em 0.75em;
  border-top: 1px solid var(--theme-border-muted);
  color: var(--theme-text-secondary);
}

/* ── Article prose: long-form article typography ── */
.article-prose {
  --link: color-mix(in srgb, var(--color-orange-600) 85%, #000);
}

.article-prose h2 {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--theme-text-secondary);
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

.article-prose h2:first-child { margin-top: 0; }

.article-section {
  margin-bottom: 2.5rem;
}

.article-section-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--theme-text-secondary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--theme-border-warm);
}

.article-section-body {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--theme-text-secondary);
}

.article-heading {
  font-weight: 600;
  color: var(--theme-text-primary);
  margin: 1.5rem 0 0.75rem;
  line-height: 1.3;
}

.article-heading-1 { font-size: 2rem; }
.article-heading-2 { font-size: 1.35rem; }
.article-heading-3 { font-size: 1.05rem; }
.article-heading-4 { font-size: 0.95rem; }

.kpi-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.callout {
  border-left: 4px solid var(--color-orange-500);
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.callout-caution { background: var(--color-amber-50); }
.callout-insight { background: var(--color-orange-50); }
.callout-default { background: var(--color-blue-50); }

.reference {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--theme-bg-subtle);
  border-radius: 6px;
  border: 1px solid var(--theme-border-warm);
  font-size: 0.8rem;
  color: var(--theme-text-muted);
}

.article-prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--theme-text-secondary);
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

.article-prose p {
  margin: 0.8em 0;
  color: var(--theme-text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}

.article-prose strong {
  color: var(--theme-text-primary);
  font-weight: 600;
}

.article-prose a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-prose a:hover { color: var(--color-orange-700); }

.article-prose ul,
.article-prose ol {
  padding-left: 1.5em;
  margin: 0.6em 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  color: var(--theme-text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}

.article-prose ul { list-style-type: disc; }
.article-prose ol { list-style-type: decimal; }

.article-prose li { margin: 0.15em 0; }

.article-prose hr {
  margin: 1.5em 0;
  border: none;
  height: 1px;
  background: var(--theme-border-warm);
}

.article-prose blockquote {
  margin: 1em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--color-orange-500);
  background: var(--theme-accent-soft);
  border-radius: 0 6px 6px 0;
}
.article-prose blockquote p { margin: 0.2em 0; color: var(--theme-text-secondary); }

.article-prose code {
  font-family: 'Fira Code', monospace;
  font-size: 0.82em;
  background: var(--theme-bg-muted);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: var(--theme-text-secondary);
}

.article-prose pre {
  margin: 0.8em 0;
  padding: 0.8em 1em;
  background: var(--color-gray-900);
  border-radius: 6px;
  overflow-x: auto;
}
.article-prose pre code {
  background: none;
  color: var(--color-gray-100);
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.article-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  border: 1px solid var(--theme-border-warm);
  border-radius: 8px;
  overflow: hidden;
}
.article-prose thead {
  background: var(--theme-bg-subtle);
  border-bottom: 2px solid var(--theme-border-warm);
}
.article-prose th {
  padding: 0.5em 0.75em;
  text-align: left;
  font-weight: 600;
  color: var(--theme-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.article-prose td {
  padding: 0.5em 0.75em;
  border-top: 1px solid var(--theme-border-muted);
  color: var(--theme-text-secondary);
}

@keyframes blob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

.animate-blob {
  animation: blob 10s infinite alternate;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}