*, *::before, *::after { box-sizing: border-box; }


@font-face { font-family: "Blender"; font-weight: 400; font-style: normal; font-display: swap; src: url("/os-demo/vendor/fonts/Blender-Book.woff2") format("woff2"); }
@font-face { font-family: "Blender"; font-weight: 500; font-style: normal; font-display: swap; src: url("/os-demo/vendor/fonts/Blender-Medium.woff2") format("woff2"); }


html { color-scheme: dark; background: var(--ingos-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.theme-light { color-scheme: light; }

body { font-family: "Blender", -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; background: var(--ingos-bg); }

button, input, select, textarea { font-family: inherit; }

:root {
  
  --ingos-indigo-600: #4f46e5;
  --ingos-violet-600: #9333ea;
  --ingos-purple-500: #a855f7;
  --ingos-violet-light: #7808d1;        
  --ingos-ink-900: #ece9f5;
  --ingos-ink-600: #a39fb5;
  --ingos-ink-500: #9aa0b4;
  --ingos-green-400: #34d399;
  --ingos-amber-400: #fbbf24;
  --ingos-night-950: #090a10;
  --ingos-radius-pill: 9999px;
  --ingos-radius-card: 15px;
  --ingos-space-1: 4px;
  --ingos-space-2: 8px;
  --ingos-space-3: 12px;
  --ingos-space-4: 16px;

  
  --ingos-bg: var(--ingos-night-950);
  --ingos-surface: rgba(20, 18, 32, .55);
  --ingos-surface-2: rgba(255, 255, 255, .06);   
  --ingos-line: rgba(255, 255, 255, .10);
  --ingos-line-2: rgba(255, 255, 255, .16);
  --ingos-text: var(--ingos-ink-900);
  --ingos-text-muted: var(--ingos-ink-600);
  --ingos-accent: var(--ingos-purple-500);
  --ingos-accent-rgb: 168 85 247;        

  
  --ingos-paper-bg: #ffffff;
  --ingos-paper-2: #f4f2f7;              
  --ingos-paper-text: #1f1628;
  --ingos-paper-muted: #6b6478;
  --ingos-paper-line: rgba(31, 22, 40, .14);
  --ingos-paper-accent: #4c2a86;         
  --ingos-ok: var(--ingos-green-400);
  --ingos-warn: var(--ingos-amber-400);
  --ingos-running: var(--ingos-purple-500);
  --ingos-muted: var(--ingos-ink-500);
  --ingos-grad-from: var(--ingos-indigo-600);
  --ingos-grad-to: var(--ingos-violet-600);
  --ingos-brand-gradient: linear-gradient(90deg, var(--ingos-indigo-600), var(--ingos-violet-600));

  
  --ingos-accent-bright: #b983ff;
  --ingos-accent-bright-rgb: 185 131 255;
  --ingos-accent-deep: #6a1cc0;
  
  --ingos-accent-gradient: linear-gradient(to bottom right, var(--ingos-accent-bright), var(--ingos-accent), var(--ingos-accent-deep));
  --ingos-key-bg: #272433;                       
  --ingos-key-edge: rgba(255, 255, 255, .22);    
  --ingos-chat-card: #1b1922;
  --ingos-chat-hairline: rgba(255, 255, 255, .06);
  --ingos-chat-text: #ffffff;
  --ingos-chat-text-secondary: #9a97a8;
  --ingos-chat-text-tertiary: #6c6979;
  --ingos-chat-danger: #f5566b;
  --ingos-chat-shadow: rgba(0, 0, 0, .45);      
  
  --ingos-tm-bg: #0a0f1d;
  --ingos-tm-glow: radial-gradient(700px 420px at 50% -12%, rgba(79, 70, 229, .18), transparent 60%);

  
  --ingos-card-bg: var(--ingos-surface);
  --ingos-card-radius: var(--ingos-radius-card);
  --ingos-btn-radius: var(--ingos-radius-pill);
  --ingos-nav-active-bg: rgb(var(--ingos-accent-rgb) / .16);
  
  --ingos-kpi-size: 26px;

  
  --bg: var(--ingos-bg);
  --glass: var(--ingos-surface);
  --glass-2: var(--ingos-surface-2);
  --line: var(--ingos-line);
  --line-2: var(--ingos-line-2);
  --ink: var(--ingos-text);
  --ink-dim: var(--ingos-text-muted);
  --ok: var(--ingos-ok);
  --warn: var(--ingos-warn);
  --run: var(--ingos-running);
  --none: var(--ingos-muted);
  --grad-from: var(--ingos-grad-from);
  --grad-to: var(--ingos-grad-to);
  --brand: var(--ingos-accent);
  --ingos-primary: var(--ingos-accent);
  --ingos-primary-gradient: var(--ingos-brand-gradient);   

  
  --ingos-elev-1: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .30), 0 10px 28px -16px rgba(0, 0, 0, .55);
  --ingos-elev-2: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 36px -14px rgba(0, 0, 0, .60);
  --ingos-elev-3: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 80px -20px rgba(0, 0, 0, .75), 0 12px 28px -12px rgba(0, 0, 0, .55);
  --ingos-glow-accent: 0 0 0 1px rgb(var(--ingos-accent-rgb) / .35), 0 18px 60px -24px rgb(var(--ingos-accent-rgb) / .55);
  --ingos-glass-bg: rgba(30, 27, 46, .86);   
  --ingos-glass-blur: blur(24px) saturate(150%);   
  --ingos-ease: cubic-bezier(.2, .8, .2, 1);
  --ingos-dur-1: 120ms;
  --ingos-dur-2: 200ms;
  --ingos-dur-3: 320ms;
}


html.theme-light {
  --ingos-bg: #f8f8f8;                          
  --ingos-accent: var(--ingos-violet-light);   
  --ingos-accent-rgb: 120 8 209;               
  --ingos-grad-from: #7808d1;
  --ingos-grad-to: #b06bff;
  
  --ingos-surface: #f4f4f7;
  --ingos-surface-2: rgba(31, 22, 40, .045);
  --ingos-elev-1: 0 1px 2px rgba(20, 16, 30, .05), 0 10px 28px -18px rgba(20, 16, 30, .14);
  --ingos-elev-2: 0 2px 6px rgba(20, 16, 30, .06), 0 14px 32px -16px rgba(20, 16, 30, .18);
  
  --ingos-elev-3: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(20, 16, 30, .06), 0 24px 56px -18px rgba(20, 16, 30, .22), 0 6px 16px -8px rgba(20, 16, 30, .10);
  --ingos-glow-accent: 0 0 0 1px rgb(var(--ingos-accent-rgb) / .16);
  --ingos-glass-bg: rgba(255, 255, 255, .66);   
  --ingos-line: rgba(31, 22, 40, .10);
  --ingos-line-2: rgba(31, 22, 40, .18);
  --ingos-text: #2a213d;
  --ingos-text-muted: #5f5f5f;
  
  --ingos-ok: #0a9d6e;
  --ingos-warn: #c2740a;
  --ingos-running: #7808d1;
  --ingos-muted: #9b94a8;
  
  --ingos-accent-bright: #9333ea;
  --ingos-accent-bright-rgb: 147 51 234;
  --ingos-accent-deep: #5406a0;
  --ingos-key-bg: #f2eefa;
  --ingos-key-edge: rgba(42, 18, 70, .06);
  --ingos-chat-card: #ffffff;
  --ingos-chat-hairline: rgba(0, 0, 0, .06);
  --ingos-chat-text: #17131f;
  --ingos-chat-text-secondary: #5c5769;
  --ingos-chat-text-tertiary: #928da0;
  --ingos-chat-danger: #e23b54;
  --ingos-chat-shadow: rgba(58, 27, 99, .16);
  
  --ingos-tm-bg: #f1edf7;
  --ingos-tm-glow: radial-gradient(700px 420px at 50% -12%, rgba(120, 8, 209, .09), transparent 60%);
}