/* Auto-generated from content/styles/tokens/tokens.json + content/styles/tokens/tokens-dark.json. Do not edit directly. */

:root {
  --clr-black: #030303;
  --clr-white: #ffffff;
  --clr-gray-100: #f5f5f5;
  --clr-gray-200: #e0e0e0;
  --clr-gray-400: #a3a3a3;
  --clr-red-500: #ff6b6b;
  --clr-red-600: #cc0000;
  --clr-red-400: #f87171;
  --clr-yellow-400: #ffd93d;
  --clr-blue-400: #42a5f5;
  --clr-blue-500: #3b82f6;
  --clr-blue-600: #2563eb;
  --clr-emerald-400: #34d399;
  --clr-cyan-500: #06b6d4;
  --clr-emerald-500: #10b981;
  --clr-indigo-500: #6366f1;
  --clr-slate-100: #f8fafc;
  --clr-slate-200: #e2e8f0;
  --clr-slate-300: #cbd5e1;
  --clr-slate-400: #94a3b8;
  --clr-slate-500: #64748b;
  --clr-pink-400: #f472b6;
  --clr-fuchsia-400: #e879f9;
  --clr-purple-400: #a78bfa;
  --primary-color: #098bff;
  --primary-dark: #0066cc;
  --primary-light: #34aadc;
  --accent: #00f3ff;
  --accent-secondary: #7000ff;
  --accent-primary: #00f3ff;
  --hero-glitch-magenta: #ff00c1;
  --hero-glitch-cyan: #00fff9;
  --youtube-red: var(--clr-red-500);
  --share-blue: #1877f2;
  --bg-primary: var(--clr-black);
  --bg-secondary: var(--clr-black);
  --bg-tertiary: var(--clr-black);
  --bg-interactive: rgb(255 255 255 / 10%);
  --bg-dark: var(--bg-primary);
  --text-primary: var(--clr-gray-100);
  --text-secondary: rgb(255 255 255 / 75%);
  --text-muted: var(--clr-gray-400);
  --text-main: var(--text-primary);
  --gradient-text: linear-gradient(135deg, #ffffff 0%, #60a5fa 55%, #a78bfa 100%);
  --greet-gradient: linear-gradient(90deg, #2563eb, #06b6d4, #10b981, #6366f1);
  --font-system: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, sans-serif;
  --font-mono: 'SF Mono', monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  --font-inter: var(--font-system);
  --font-primary: var(--font-system);
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --size-0-5: 0.5px;
  --size-1: 1px;
  --size-2: 2px;
  --size-3: 3px;
  --size-4: 4px;
  --size-5: 5px;
  --size-6: 6px;
  --size-7: 7px;
  --size-8: 8px;
  --size-9: 9px;
  --size-10: 10px;
  --size-11: 11px;
  --size-12: 12px;
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-22: 22px;
  --size-24: 24px;
  --size-28: 28px;
  --size-30: 30px;
  --size-32: 32px;
  --size-36: 36px;
  --size-38: 38px;
  --size-40: 40px;
  --size-44: 44px;
  --size-46: 46px;
  --size-48: 48px;
  --size-52: 52px;
  --size-60: 60px;
  --size-80: 80px;
  --size-100: 100px;
  --size-140: 140px;
  --size-150: 150px;
  --size-200: 200px;
  --size-300: 300px;
  --size-320: 320px;
  --size-390: 390px;
  --size-400: 400px;
  --size-420: 420px;
  --size-450: 450px;
  --size-460: 460px;
  --size-520: 520px;
  --size-540: 540px;
  --size-580: 580px;
  --size-600: 600px;
  --size-620: 620px;
  --size-720: 720px;
  --size-740: 740px;
  --size-760: 760px;
  --size-780: 780px;
  --size-800: 800px;
  --size-999: 999px;
  --size-1120: 1120px;
  --size-1200: 1200px;
  --size-1440: 1440px;
  --gap-xs: var(--space-2);
  --gap-sm: var(--space-4);
  --gap-md: var(--space-8);
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-4);
  --spacing-md: var(--space-6);
  --spacing-lg: var(--space-8);
  --spacing-xl: var(--space-12);
  --menu-height: 76px;
  --menu-height-mobile: 64px;
  --footer-height: 76px;
  --footer-height-mobile: 64px;
  --container-width: 1600px;
  --container-width-wide: 1800px;
  --container-width-narrow: 860px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --border-color: rgb(255 255 255 / 10%);
  --card-border: rgb(255 255 255 / 8%);
  --card-bg: rgb(255 255 255 / 3%);
  --glass-bg: rgb(0 0 0 / 95%);
  --shadow-md: 0 4px 8px rgb(0 0 0 / 15%);
  --shadow-lg: 0 8px 16px rgb(0 0 0 / 20%);
  --blur-md: blur(12px);
  --blur-lg: blur(20px);
  --z-none: 0;
  --z-behind: -1;
  --z-base: 1;
  --z-elevated: 2;
  --z-loader-content: 10;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-project-hud: 20;
  --z-project-overlay: 25;
  --z-project-launch: 35;
  --z-overlay: 9999;
  --z-tooltip: 10000;
  --z-top-elements: 10050;
  --z-robot: 10002;
  --z-site-top: 100000;
  --z-top-overlay: 200000;
  --z-typewriter: 1010;
  --z-typewriter-fixed: 1012;
  --component-header-bg: rgb(28 28 30 / 40%);
  --component-blur-radius: 16px;
  --component-pill-radius: 26px;
  --component-separator: rgb(255 255 255 / 12%);
  --component-accent-blue: #007aff;
  --component-accent-blue-hover: #0056cc;
  --component-label-primary: rgb(255 255 255 / 95%);
  --component-label-secondary: rgb(255 255 255 / 70%);
  --component-fill-primary: rgb(255 255 255 / 10%);
  --component-fill-secondary: rgb(255 255 255 / 15%);
  --component-shadow-depth-2: 0 8px 32px rgb(0 0 0 / 20%);
  --component-spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --component-spring-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --component-spring-quick: cubic-bezier(0.4, 0, 0.2, 1);
  --footer-surface-bg: rgb(10 10 10 / 95%);
  --footer-quiet-text: rgb(255 255 255 / 60%);
  --footer-soft-fill: rgb(255 255 255 / 5%);
  --footer-soft-fill-2: rgb(255 255 255 / 8%);
  --footer-soft-fill-3: rgb(255 255 255 / 12%);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-interactive-standard: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
  --transition-icon-standard: opacity var(--transition-base), transform var(--transition-base), fill var(--transition-base), color var(--transition-base);
  --duration-320ms: 320ms;
  --motion-reduce-duration: 0.01ms;
  --motion-reduce-iterations: 1;
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-standard: var(--component-spring-quick);
  --ease-bounce: var(--component-spring-bounce);
  --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --scroll-fade-range: entry 0% entry 35%;
  --vt-loader-duration: 0.5s;
  --vt-chat-out-duration: 0.25s;
  --vt-chat-in-duration: 0.35s;
  --vt-loader-ease: cubic-bezier(0.4, 0, 0, 1);
  --vt-chat-out-ease: cubic-bezier(0.4, 0, 1, 1);
  --vt-chat-in-ease: cubic-bezier(0, 0, 0.2, 1);
  --transform-lift-sm: translateY(-2px);
  --card-pad: var(--space-8);
  --card-transition-smooth: var(--transition-smooth);
  --card-shadow-base: 0 12px 32px rgb(0 0 0 / 30%);
  --card-shadow-hover: 0 18px 46px rgb(0 0 0 / 38%);
  --card-blur-base: 10px;
  --card-blur-hover: 16px;
  --card-min-width: 320px;
  --transform-hover-card-subtle: translateY(-4px);
  --project-title-fs: 1.35rem;
  --project-desc-fs: 1rem;
  --muted-fs: 0.95rem;
  --body-lh: 1.6;
  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1.5rem;
  --btn-min-width: 160px;
  --btn-min-width-mobile: 120px;
  --btn-font-size: 1rem;
  --btn-focus-outline: 2px solid #fff;
  --btn-focus-offset: 3px;
  --btn-focus-radius: 6px;
  --btn-shadow-primary: 0 0 12px rgb(9 139 255 / 30%);
  --btn-shadow-primary-hover: 0 0 18px rgb(9 139 255 / 55%);
  --btn-shine-bg: rgb(255 255 255 / 20%);
  --btn-focus-bg: rgb(0 119 255 / 12%);
  --menu-header-side-gap: 32px;
  --menu-header-height: 52px;
  --menu-header-padding-inline: 16px;
  --menu-header-max-width: 1440px;
  --menu-header-min-width-desktop: 920px;
  --menu-header-backdrop-blur: 24px;
  --menu-item-padding-y: 8px;
  --menu-item-padding-x: 12px;
  --menu-item-min-height: 44px;
  --menu-item-radius: 18px;
  --menu-item-hover-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  --menu-search-gap: 10px;
  --menu-search-min-height: 44px;
  --menu-search-padding: 6px 8px 6px 12px;
  --menu-search-radius: 16px;
  --menu-search-results-top-offset: 12px;
  --menu-search-results-max-height: min(62vh, 460px);
  --menu-search-results-padding: 10px;
  --menu-search-results-radius: 20px;
  --modal-overlay-bg: rgb(0 0 0 / 80%);
  --modal-overlay-blur: 12px;
  --modal-panel-bg: rgb(2 6 23 / 90%);
  --modal-panel-border: 1px solid rgb(255 255 255 / 10%);
  --modal-panel-radius: 1rem;
  --modal-panel-shadow: 0 28px 72px rgb(0 0 0 / 62%);
  --modal-control-bg: rgb(255 255 255 / 10%);
  --modal-control-bg-hover: rgb(255 255 255 / 20%);
  --modal-control-text: #fff;
  --videos-hero-overlay-height: 300px;
  --videos-play-button-size: 90px;
  --videos-play-icon-size: 40px;
  --videos-card-shadow-base: 0 20px 40px rgb(0 0 0 / 45%);
  --videos-card-shadow-hover: 0 30px 60px rgb(0 0 0 / 60%);
  --videos-button-inset-shadow: inset 0 -2px 8px rgb(0 0 0 / 30%);
  --videos-icon-drop-shadow: drop-shadow(0 2px 4px rgb(0 0 0 / 30%));
  --about-profile-size: 120px;
  --projects-bg-gradient-start: #0b0b15;
  --projects-bg-gradient-end: #000000;
  --projects-hud-border: rgb(255 255 255 / 15%);
  --projects-hud-bg: rgb(10 10 16 / 85%);
  --projects-hud-shadow: 0 10px 40px rgb(0 0 0 / 60%);
  --projects-launch-shadow: 0 24px 56px rgb(0 0 0 / 52%);
  --projects-launch-shadow-error: 0 24px 56px rgb(0 0 0 / 56%);
  --footer-toggle-knob-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  --loader-bg: var(--clr-black);
  --loader-text: var(--clr-gray-200);
  --loader-accent: var(--accent);
  --loader-accent-secondary: var(--accent-secondary);
  --surface-toast-bg: #1a1a1a;
  --surface-toast-text: #fff;
  --surface-toast-muted: #999;
  --surface-toast-shadow: 0 4px 12px rgb(0 0 0 / 30%);
  --surface-toast-radius: 8px;
  --state-error-text: #ef4444;
  --state-error-bg: rgb(0 0 0 / 80%);
  --state-error-cta: #4444ff;
  --light-bg-primary: #1e3a8a;
  --light-bg-secondary: #1e40af;
  --light-bg-tertiary: #2563eb;
  --light-bg-interactive: #3b82f6;
  --light-text-primary: #f8fafc;
  --light-text-secondary: #e2e8f0;
  --light-text-muted: #cbd5e1;
  --light-primary: #60a5fa;
  --light-border: #3b82f6;
  --size-r-0-1: 0.1rem;
  --size-r-0-18: 0.18rem;
  --size-r-0-25: 0.25rem;
  --size-r-0-3: 0.3rem;
  --size-r-0-35: 0.35rem;
  --size-r-0-4: 0.4rem;
  --size-r-0-45: 0.45rem;
  --size-r-0-5: 0.5rem;
  --size-r-0-52: 0.52rem;
  --size-r-0-55: 0.55rem;
  --size-r-0-6: 0.6rem;
  --size-r-0-62: 0.62rem;
  --size-r-0-65: 0.65rem;
  --size-r-0-68: 0.68rem;
  --size-r-0-7: 0.7rem;
  --size-r-0-72: 0.72rem;
  --size-r-0-75: 0.75rem;
  --size-r-0-78: 0.78rem;
  --size-r-0-8: 0.8rem;
  --size-r-0-83: 0.83rem;
  --size-r-0-84: 0.84rem;
  --size-r-0-85: 0.85rem;
  --size-r-0-86: 0.86rem;
  --size-r-0-9: 0.9rem;
  --size-r-0-92: 0.92rem;
  --size-r-0-9375: 0.9375rem;
  --size-r-0-94: 0.94rem;
  --size-r-0-95: 0.95rem;
  --size-r-0-98: 0.98rem;
  --size-r-1: 1rem;
  --size-r-1-04: 1.04rem;
  --size-r-1-05: 1.05rem;
  --size-r-1-08: 1.08rem;
  --size-r-1-1: 1.1rem;
  --size-r-1-125: 1.125rem;
  --size-r-1-15: 1.15rem;
  --size-r-1-2: 1.2rem;
  --size-r-1-25: 1.25rem;
  --size-r-1-35: 1.35rem;
  --size-r-1-4: 1.4rem;
  --size-r-1-5: 1.5rem;
  --size-r-1-6: 1.6rem;
  --size-r-2: 2rem;
  --size-r-2-2: 2.2rem;
  --size-r-2-5: 2.5rem;
  --size-r-3: 3rem;
  --size-r-4: 4rem;
  --size-r-6: 6rem;
  --size-r-13: 13rem;
  --size-0: 0px;
  --size-50: 50px;
  --size-280: 280px;
  --size-480: 480px;
  --size-960: 960px;
  --size-r-0-875: 0.875rem;
  --size-r-1-75: 1.75rem;
  --z-behind-deep: -5;
  --legal-link-color: #0a84ff;
  --legal-link-hover: #64d2ff;
  --legal-link-soft: rgb(10 132 255 / 10%);
  --legal-link-soft-border: rgb(10 132 255 / 30%);
  --legal-link-outline: rgb(10 132 255 / 80%);
  --legal-back-link-start: #0058d8;
  --legal-back-link-end: #004c99;
  --legal-back-link-hover-start: #0066cc;
  --legal-print-border: #ccc;
  --three-earth-error-bg: #3c1414;
  --three-earth-error-width: var(--size-300);
  --size-17: 17px;
  --size-26: 26px;
  --size-72: 72px;
  --size-76: 76px;
  --size-120: 120px;
  --size-236: 236px;
  --size-260: 260px;
  --size-360: 360px;
  --size-380: 380px;
  --size-900: 900px;
  --size-r-0-8125: 0.8125rem;
  --menu-rgb-10-16-28: rgb(10 16 28);
  --menu-rgb-12-18-30: rgb(12 18 30);
  --menu-rgb-15-25-42: rgb(15 25 42);
  --menu-rgb-17-27-44: rgb(17 27 44);
  --menu-rgb-22-35-56: rgb(22 35 56);
  --menu-rgb-71-145-255: rgb(71 145 255);
  --menu-rgb-110-171-255: rgb(110 171 255);
  --menu-rgb-121-174-255: rgb(121 174 255);
  --menu-rgb-125-177-255: rgb(125 177 255);
  --menu-rgb-125-180-255: rgb(125 180 255);
  --menu-rgb-126-178-255: rgb(126 178 255);
  --menu-rgb-151-193-250: rgb(151 193 250);
  --menu-rgb-151-197-255: rgb(151 197 255);
  --menu-rgb-162-214-255: rgb(162 214 255);
  --menu-rgb-174-210-255: rgb(174 210 255);
  --menu-rgb-182-201-226: rgb(182 201 226);
  --menu-rgb-186-213-250: rgb(186 213 250);
  --menu-rgb-190-220-255: rgb(190 220 255);
  --menu-rgb-192-210-234: rgb(192 210 234);
  --menu-rgb-206-227-255: rgb(206 227 255);
  --menu-rgb-215-225-241: rgb(215 225 241);
  --menu-rgb-215-241-255: rgb(215 241 255);
  --menu-rgb-216-233-255: rgb(216 233 255);
  --menu-rgb-228-239-255: rgb(228 239 255);
  --menu-rgb-240-247-255: rgb(240 247 255);
  --menu-rgb-255-194-70: rgb(255 194 70);
  --menu-accent-alt: #3b9aff;
  --menu-frost-text: #d7f1ff;
  --z-menu-foreground: 2;
  --size-25: 25px;
  --size-90: 90px;
  --size-62: 62px;
  --size-70: 70px;
  --size-180: 180px;
  --size-340: 340px;
  --size-240: 240px;
  --z-robot-local: 50;
  --robot-cyan: #40e0d0;
  --robot-sky: #38bdf8;
  --robot-slate-800: #1e293b;
  --robot-slate-600: #475569;
  --robot-slate-100: #f1f5f9;
  --robot-green: #4ade80;
  --robot-red: #ff4444;
  --robot-red-strong: #ff0000;
  --robot-yellow: #ffff00;
  --robot-green-strong: #00ff00;
  --robot-rgb-13-20-36: rgb(13 20 36);
  --robot-rgb-15-23-42: rgb(15 23 42);
  --size-1000: 1000px;
  --size-35: 35px;
  --size-1400: 1400px;
  --size-1500: 1500px;
  --size-820: 820px;
  --size-r-3-5: 3.5rem;
  --z-floating: 100;
  --z-hero-buttons: 80;
  --clr-violet-500: #8b5cf6;
  --clr-pink-500: #ec4899;
  --clr-blue-300: #60a5fa;
  --clr-gray-250: #e5e5e5;
  --blog-rgb-10-10-20: rgb(10 10 20);
  --blog-rgb-10-10-30: rgb(10 10 30);
  --blog-rgb-15-15-40: rgb(15 15 40);
  --blog-rgb-30-30-60: rgb(30 30 60);
}

:root[data-theme='light'] {
  --bg-primary: var(--light-bg-primary);
  --bg-secondary: var(--light-bg-secondary);
  --bg-tertiary: var(--light-bg-tertiary);
  --bg-interactive: var(--light-bg-interactive);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-muted: var(--light-text-muted);
  --primary-color: var(--light-primary);
  --border-color: var(--light-border);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 25%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 30%);
}

:root[data-theme='dark'] {
  --primary-color: #098bff;
  --primary-dark: #0066cc;
  --primary-light: #34aadc;
  --accent: #00f3ff;
  --accent-secondary: #7000ff;
  --bg-primary: #030303;
  --bg-secondary: #030303;
  --bg-tertiary: #030303;
  --bg-interactive: rgb(255 255 255 / 10%);
  --text-primary: #f5f5f5;
  --text-secondary: rgb(255 255 255 / 75%);
  --text-muted: #a3a3a3;
  --border-color: rgb(255 255 255 / 10%);
  --component-header-bg: rgb(28 28 30 / 40%);
  --component-separator: rgb(255 255 255 / 12%);
  --component-fill-primary: rgb(255 255 255 / 10%);
  --component-fill-secondary: rgb(255 255 255 / 15%);
  --particle-color: rgb(9 139 255 / 80%);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 10%);
  --shadow-md: 0 4px 8px rgb(0 0 0 / 15%);
  --shadow-lg: 0 8px 16px rgb(0 0 0 / 20%);
}