@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap'); @font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Lato-Thin.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Lato-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Lato-Light.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Lato-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Lato-Regular.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Lato-Italic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Lato-Bold.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Lato-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Lato-Black.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Lato-BlackItalic.ttf') format('truetype'); } :root { --brand-cyan: #D4651C; --brand-cyan-2: #E8782F; --brand-cyan-3: #B5530F; --brand-cyan-glow: rgba(212, 101, 28, 0.22); --brand-amber: #D4651C; --brand-amber-2: #E8782F; --brand-amber-3: #B5530F; --brand-navy: #0F1116; --brand-navy-deep: #050608; --vfr: #3FBF6E; --mvfr: #4D9CFF; --ifr: #FF5A5A; --lifr: #C97AFF; --surface-0: #FFFFFF; --surface-1: #FAFAF7; --surface-2: #F3F3EE; --surface-3: #EDEDE6; --surface-inset: #F5F5F0; --fg-1: #0F1116; --fg-2: #525560; --fg-3: #6A6E7A; --fg-4: #8B8F9A; --fg-on-cyan: #FFFFFF; --fg-on-amber: #FFFFFF; --border-subtle: rgba(15, 17, 22, 0.06); --border-default: rgba(15, 17, 22, 0.10); --border-strong: rgba(15, 17, 22, 0.18); --border-cyan: rgba(212, 101, 28, 0.30); --success: #3FBF6E; --success-bg: rgba(63, 191, 110, 0.12); --warning: #FFB547; --warning-bg: rgba(255, 181, 71, 0.12); --danger: #FF5A5A; --danger-bg: rgba(255, 90, 90, 0.12); --info: #4D9CFF; --info-bg: rgba(77, 156, 255, 0.12); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-20: 80px; --space-30: 120px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --e1: 0 1px 2px rgba(15,17,22,0.06), 0 2px 6px rgba(15,17,22,0.04); --e2: 0 4px 12px rgba(15,17,22,0.08), 0 8px 24px rgba(15,17,22,0.06); --e3: 0 12px 40px rgba(15,17,22,0.12), 0 24px 64px rgba(15,17,22,0.10); --glow-cyan: 0 0 0 1px rgba(212,101,28,0.35), 0 0 24px rgba(212,101,28,0.20); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1.0, 1); --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1); --dur-micro: 120ms; --dur-state: 200ms; --dur-page: 320ms; --dur-needle: 600ms; --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display-1: 64px; --fs-display-2: 48px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-readout: 13px; --fs-eyebrow: 11px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.12em; } :root[data-theme="light"], .theme-light { --surface-0: #F7F9FC; --surface-1: #FFFFFF; --surface-2: #F1F4F9; --surface-3: #E7ECF3; --surface-inset: #EEF2F7; --fg-1: #0A1628; --fg-2: #354A66; --fg-3: #6B7C92; --fg-4: #A4B0C0; --border-subtle: rgba(10, 22, 40, 0.06); --border-default: rgba(10, 22, 40, 0.10); --border-strong: rgba(10, 22, 40, 0.18); --e1: 0 1px 2px rgba(10,22,40,0.06), 0 2px 6px rgba(10,22,40,0.04); --e2: 0 4px 12px rgba(10,22,40,0.08), 0 8px 24px rgba(10,22,40,0.06); --e3: 0 12px 40px rgba(10,22,40,0.12), 0 24px 64px rgba(10,22,40,0.10); } html, body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--surface-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display-1 { font-family: var(--font-sans); font-size: var(--fs-display-1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .display-2 { font-family: var(--font-sans); font-size: var(--fs-display-2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } h1, .h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; } h2, .h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; } h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); margin: 0; } h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); margin: 0; } p, .p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; } .small, small { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-3); } .caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-3); } .readout, code, kbd, .mono { font-family: var(--font-mono); font-size: var(--fs-readout); font-feature-settings: 'tnum' 1, 'zero' 1; letter-spacing: 0; } code { background: var(--surface-inset); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); } a { color: var(--brand-cyan); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); } a:hover { color: var(--brand-cyan-2); } ::selection { background: var(--brand-cyan-glow); color: var(--fg-1); }