:root { --black-howl: #1C1B29; --fantasy-console-sky: #12629D; --daphne: #28AEF9; --precious-dewdrop: #F7F7E9; --safflower-scarlet: #EA3B26; --white: #FFFFFF; --black-howl-80: color-mix(in oklab,var(--black-howl) 80%,var(--white)); --black-howl-60: color-mix(in oklab,var(--black-howl) 62%,var(--white)); --black-howl-40: color-mix(in oklab,var(--black-howl) 40%,var(--white)); --black-howl-20: color-mix(in oklab,var(--black-howl) 18%,var(--white)); --black-howl-10: color-mix(in oklab,var(--black-howl) 9%,var(--white)); --black-howl-900: #14131F; --black-howl-700: #2A2940; --sky-700: color-mix(in oklab,var(--fantasy-console-sky) 82%,var(--black-howl)); --sky-10: color-mix(in oklab,var(--fantasy-console-sky) 10%,var(--white)); --daphne-20: color-mix(in oklab,var(--daphne) 20%,var(--white)); --dewdrop-dark: color-mix(in oklab,var(--precious-dewdrop) 90%,var(--black-howl)); --scarlet-700: color-mix(in oklab,var(--safflower-scarlet) 85%,var(--black-howl)); --scarlet-10: color-mix(in oklab,var(--safflower-scarlet) 10%,var(--white)); --surface-page: var(--white); --surface-warm: var(--precious-dewdrop); --surface-card: var(--white); --surface-inverse: var(--black-howl); --surface-brand: var(--fantasy-console-sky); --surface-accent: var(--daphne); --text-body: var(--black-howl); --text-muted: var(--black-howl-60); --text-subtle: var(--black-howl-40); --text-on-dark: var(--white); --text-on-dark-muted: color-mix(in oklab,var(--white) 70%,var(--black-howl)); --text-on-brand: var(--white); --text-link: var(--fantasy-console-sky); --text-link-hover: var(--black-howl); --text-accent-on-dark: var(--daphne); --border-default: var(--black-howl-20); --border-strong: var(--black-howl); --border-subtle: var(--black-howl-10); --border-on-dark: color-mix(in oklab,var(--white) 18%,var(--black-howl)); --action-primary: var(--black-howl); --action-primary-hover: var(--fantasy-console-sky); --action-secondary: var(--fantasy-console-sky); --action-secondary-hover: var(--sky-700); --action-cta: var(--safflower-scarlet); --action-cta-hover: var(--scarlet-700); --focus-ring: var(--daphne); --status-critical: var(--safflower-scarlet); --status-critical-bg: var(--scarlet-10); --status-info: var(--fantasy-console-sky); --status-info-bg: var(--sky-10); --status-ok: var(--daphne); --status-ok-bg: var(--daphne-20); --gradient-vlak: linear-gradient(180deg,rgb(40 174 249 / 0) 20%,rgb(40 174 249 / 1) 100%); --gradient-vlak-sky: linear-gradient(180deg,rgb(18 98 157 / 0) 20%,rgb(18 98 157 / 1) 100%); }

:root { --font-heading: "Stack Sans Notch",Arial,sans-serif; --font-body: "Stack Sans Text",Arial,sans-serif; --font-fallback: Arial,Helvetica,sans-serif; --font-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --lh-display: 0.9; --lh-intro: 1.1; --lh-body: 1.5; --fs-display-xl: 120px; --fs-display: 88px; --fs-h1: 64px; --fs-h2: 44px; --fs-h3: 30px; --fs-h4: 22px; --fs-intro: 24px; --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-caps: 0.08em; --measure: 80ch; --type-display: var(--weight-regular) var(--fs-display)/var(--lh-display) var(--font-heading); --type-h1: var(--weight-regular) var(--fs-h1)/var(--lh-display) var(--font-heading); --type-h2: var(--weight-regular) var(--fs-h2)/var(--lh-intro) var(--font-heading); --type-h3: var(--weight-regular) var(--fs-h3)/var(--lh-intro) var(--font-heading); --type-intro: var(--weight-regular) var(--fs-intro)/var(--lh-intro) var(--font-heading); --type-body: var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-body); --type-small: var(--weight-regular) var(--fs-small)/var(--lh-body) var(--font-body); }

:root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-max: 1280px; --gutter: 24px; --control-h-sm: 36px; --control-h: 44px; --control-h-lg: 56px; }

:root { --radius-0: 0; --radius-sm: 2px; --radius-round: 999px; --border-w: 1px; --border-w-strong: 2px; --shadow-none: none; --shadow-float: 0 12px 32px -8px rgb(28 27 41 / .28); --shadow-overlay: 0 24px 64px -12px rgb(28 27 41 / .40); --scrim: rgb(28 27 41 / .72); --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.6,0,.2,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 400ms; --vlak-skew: -45deg; }

:root { --black-howl: #1C1B29; --fantasy-console-sky: #12629D; --daphne: #28AEF9; --precious-dewdrop: #F7F7E9; --safflower-scarlet: #EA3B26; --white: #FFFFFF; --black-howl-80: color-mix(in oklab,var(--black-howl) 80%,var(--white)); --black-howl-60: color-mix(in oklab,var(--black-howl) 62%,var(--white)); --black-howl-40: color-mix(in oklab,var(--black-howl) 40%,var(--white)); --black-howl-20: color-mix(in oklab,var(--black-howl) 18%,var(--white)); --black-howl-10: color-mix(in oklab,var(--black-howl) 9%,var(--white)); --black-howl-900: #14131F; --black-howl-700: #2A2940; --sky-700: color-mix(in oklab,var(--fantasy-console-sky) 82%,var(--black-howl)); --sky-10: color-mix(in oklab,var(--fantasy-console-sky) 10%,var(--white)); --daphne-20: color-mix(in oklab,var(--daphne) 20%,var(--white)); --dewdrop-dark: color-mix(in oklab,var(--precious-dewdrop) 90%,var(--black-howl)); --scarlet-700: color-mix(in oklab,var(--safflower-scarlet) 85%,var(--black-howl)); --scarlet-10: color-mix(in oklab,var(--safflower-scarlet) 10%,var(--white)); --surface-page: var(--white); --surface-warm: var(--precious-dewdrop); --surface-card: var(--white); --surface-inverse: var(--black-howl); --surface-brand: var(--fantasy-console-sky); --surface-accent: var(--daphne); --text-body: var(--black-howl); --text-muted: var(--black-howl-60); --text-subtle: var(--black-howl-40); --text-on-dark: var(--white); --text-on-dark-muted: color-mix(in oklab,var(--white) 70%,var(--black-howl)); --text-on-brand: var(--white); --text-link: var(--fantasy-console-sky); --text-link-hover: var(--black-howl); --text-accent-on-dark: var(--daphne); --border-default: var(--black-howl-20); --border-strong: var(--black-howl); --border-subtle: var(--black-howl-10); --border-on-dark: color-mix(in oklab,var(--white) 18%,var(--black-howl)); --action-primary: var(--black-howl); --action-primary-hover: var(--fantasy-console-sky); --action-secondary: var(--fantasy-console-sky); --action-secondary-hover: var(--sky-700); --action-cta: var(--safflower-scarlet); --action-cta-hover: var(--scarlet-700); --focus-ring: var(--daphne); --status-critical: var(--safflower-scarlet); --status-critical-bg: var(--scarlet-10); --status-info: var(--fantasy-console-sky); --status-info-bg: var(--sky-10); --status-ok: var(--daphne); --status-ok-bg: var(--daphne-20); --gradient-vlak: linear-gradient(180deg,rgb(40 174 249 / 0) 20%,rgb(40 174 249 / 1) 100%); --gradient-vlak-sky: linear-gradient(180deg,rgb(18 98 157 / 0) 20%,rgb(18 98 157 / 1) 100%); }

:root { --font-heading: "Stack Sans Notch",Arial,sans-serif; --font-body: "Stack Sans Text",Arial,sans-serif; --font-fallback: Arial,Helvetica,sans-serif; --font-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --lh-display: 0.9; --lh-intro: 1.1; --lh-body: 1.5; --fs-display-xl: 120px; --fs-display: 88px; --fs-h1: 64px; --fs-h2: 44px; --fs-h3: 30px; --fs-h4: 22px; --fs-intro: 24px; --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-caps: 0.08em; --measure: 80ch; --type-display: var(--weight-regular) var(--fs-display)/var(--lh-display) var(--font-heading); --type-h1: var(--weight-regular) var(--fs-h1)/var(--lh-display) var(--font-heading); --type-h2: var(--weight-regular) var(--fs-h2)/var(--lh-intro) var(--font-heading); --type-h3: var(--weight-regular) var(--fs-h3)/var(--lh-intro) var(--font-heading); --type-intro: var(--weight-regular) var(--fs-intro)/var(--lh-intro) var(--font-heading); --type-body: var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-body); --type-small: var(--weight-regular) var(--fs-small)/var(--lh-body) var(--font-body); }

:root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-max: 1280px; --gutter: 24px; --control-h-sm: 36px; --control-h: 44px; --control-h-lg: 56px; }

:root { --radius-0: 0; --radius-sm: 2px; --radius-round: 999px; --border-w: 1px; --border-w-strong: 2px; --shadow-none: none; --shadow-float: 0 12px 32px -8px rgb(28 27 41 / .28); --shadow-overlay: 0 24px 64px -12px rgb(28 27 41 / .40); --scrim: rgb(28 27 41 / .72); --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.6,0,.2,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 400ms; --vlak-skew: -45deg; }

:root { --micros-blue: var(--fantasy-console-sky); --micros-blue-light: var(--daphne); --micros-blue-soft: var(--sky-10); --micros-dark: var(--black-howl); --ink-900: var(--black-howl); --ink-700: var(--black-howl-80); --ink-500: var(--black-howl-60); --ink-400: var(--black-howl-40); --ink-300: var(--black-howl-20); --ink-200: var(--black-howl-20); --ink-100: var(--black-howl-10); --ink-50: color-mix(in oklab,var(--black-howl) 4%,var(--white)); --paper: var(--precious-dewdrop); --line: var(--border-default); --bar-bg: var(--black-howl-10); --bar-bg-2: var(--black-howl-20); --radius: 0; --ease: cubic-bezier(.2,.7,.2,1); }