/* GENERATED by build_css.py from tokens/*.json. Do not edit by hand. */
:root {
  --border-width-accent: 3px;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --bp-lg: 1280px;
  --bp-md: 1024px;
  --bp-sm: 640px;
  --bp-xl: 1600px;
  --color-action-on-bg: var(--color-primary-700);
  --color-action-on-border: var(--color-primary-500);
  --color-action-primary-active: var(--color-primary-700);
  --color-action-primary-contrast: var(--color-white);
  --color-action-primary-default: var(--color-primary-600);
  --color-action-primary-hover: var(--color-primary-400);
  --color-action-primary-subtle: var(--color-primary-950);
  --color-action-primary-text: var(--color-primary-400);
  --color-alpha-bg-stage-73: color-mix(in srgb, var(--color-bg-stage) 73%, transparent);
  --color-alpha-black-47: color-mix(in srgb, var(--color-black) 47%, transparent);
  --color-alpha-black-53: rgba(0, 0, 0, 0.533);
  --color-alpha-black-62: rgba(0, 0, 0, 0.62);
  --color-alpha-black-67: rgba(0, 0, 0, 0.667);
  --color-alpha-black-73: rgba(0, 0, 0, 0.733);
  --color-alpha-black-80: color-mix(in srgb, var(--color-black) 80%, transparent);
  --color-alpha-black-87: rgba(0, 0, 0, 0.867);
  --color-alpha-blue-200-45: color-mix(in srgb, var(--color-blue-200) 45%, transparent);
  --color-alpha-blue-400-13: color-mix(in srgb, var(--color-blue-400) 13%, transparent);
  --color-alpha-blue-400-23: color-mix(in srgb, var(--color-blue-400) 23%, transparent);
  --color-alpha-blue-400-53: color-mix(in srgb, var(--color-blue-400) 53%, transparent);
  --color-alpha-ease-500-67: color-mix(in srgb, var(--color-ease-500) 67%, transparent);
  --color-alpha-error-300-53: color-mix(in srgb, var(--color-error-300) 53%, transparent);
  --color-alpha-error-500-40: color-mix(in srgb, var(--color-error-500) 40%, transparent);
  --color-alpha-key-200-10: color-mix(in srgb, var(--color-key-200) 10%, transparent);
  --color-alpha-key-200-28: color-mix(in srgb, var(--color-key-200) 28%, transparent);
  --color-alpha-key-200-35: color-mix(in srgb, var(--color-key-200) 35%, transparent);
  --color-alpha-key-200-60: color-mix(in srgb, var(--color-key-200) 60%, transparent);
  --color-alpha-neutral-800-94: color-mix(in srgb, var(--color-neutral-800) 94%, transparent);
  --color-alpha-neutral-950-85: color-mix(in srgb, var(--color-neutral-950) 85%, transparent);
  --color-alpha-primary-400-12: color-mix(in srgb, var(--color-primary-400) 12%, transparent);
  --color-alpha-primary-400-14: color-mix(in srgb, var(--color-primary-400) 14%, transparent);
  --color-alpha-primary-400-18: color-mix(in srgb, var(--color-primary-400) 18%, transparent);
  --color-alpha-primary-400-22: color-mix(in srgb, var(--color-primary-400) 22%, transparent);
  --color-alpha-primary-400-25: color-mix(in srgb, var(--color-primary-400) 25%, transparent);
  --color-alpha-primary-400-33: color-mix(in srgb, var(--color-primary-400) 33%, transparent);
  --color-alpha-primary-400-40: color-mix(in srgb, var(--color-primary-400) 40%, transparent);
  --color-alpha-primary-400-5: color-mix(in srgb, var(--color-primary-400) 5%, transparent);
  --color-alpha-sky-300-10: color-mix(in srgb, var(--color-sky-300) 10%, transparent);
  --color-alpha-sky-300-28: color-mix(in srgb, var(--color-sky-300) 28%, transparent);
  --color-alpha-white-10: color-mix(in srgb, var(--color-white) 10%, transparent);
  --color-alpha-white-12: rgba(255, 255, 255, 0.12);
  --color-alpha-white-19: color-mix(in srgb, var(--color-white) 19%, transparent);
  --color-alpha-white-20: color-mix(in srgb, var(--color-white) 20%, transparent);
  --color-alpha-white-40: color-mix(in srgb, var(--color-white) 40%, transparent);
  --color-alpha-white-8: rgba(255, 255, 255, 0.08);
  --color-alpha-white-85: color-mix(in srgb, var(--color-white) 85%, transparent);
  --color-bg-default: var(--color-neutral-900);
  --color-bg-stage: var(--color-neutral-950);
  --color-bg-subtle: var(--color-neutral-950);
  --color-black: #000000;
  --color-blue-100: #E3F0FF;
  --color-blue-200: #C7E1FF;
  --color-blue-300: #9ECCFF;
  --color-blue-400: #6DB3FF;
  --color-blue-50: #F1F8FF;
  --color-blue-500: #4D93DC;
  --color-blue-600: #3177BE;
  --color-blue-700: #1C5C9C;
  --color-blue-800: #0A4378;
  --color-blue-900: #032E57;
  --color-blue-950: #001B38;
  --color-border-default: var(--color-neutral-500);
  --color-border-selected: var(--color-primary-800);
  --color-border-strong: var(--color-neutral-200);
  --color-border-subtle: var(--color-neutral-600);
  --color-border-tick: var(--color-neutral-600);
  --color-border-track: var(--color-neutral-700);
  --color-canvas: var(--color-black);
  --color-component-default: var(--color-ease-400);
  --color-component-subtle: var(--color-ease-950);
  --color-component-text: var(--color-ease-300);
  --color-control-bg-active: var(--color-field-bg);
  --color-control-bg-hover: color-mix(in srgb, var(--color-primary-900) 25%, var(--color-neutral-700));
  --color-control-fg: var(--color-text-tool);
  --color-control-fg-active: var(--color-text-inverse);
  --color-control-fg-hover: color-mix(in srgb, var(--color-primary-400) 60%, var(--color-text-tool));
  --color-control-timeline-bg: var(--color-primary-950);
  --color-control-timeline-fg: var(--color-primary-400);
  --color-ease-100: #CDBFFF;
  --color-ease-200: #BEA6FF;
  --color-ease-300: #B08CFF;
  --color-ease-400: #9F84FF;
  --color-ease-50: #F6F5FF;
  --color-ease-500: #8873E4;
  --color-ease-600: #7363CA;
  --color-ease-700: #5E53B0;
  --color-ease-800: #462D85;
  --color-ease-900: #311D61;
  --color-ease-950: #1D0E3F;
  --color-error-100: #FFE8E7;
  --color-error-200: #FF9A9A;
  --color-error-300: #FF8A8A;
  --color-error-400: #FF7B7B;
  --color-error-50: #FFF4F3;
  --color-error-500: #FF6B6B;
  --color-error-600: #E15955;
  --color-error-700: #C4473F;
  --color-error-800: #B3412F;
  --color-error-900: #6B2827;
  --color-error-950: #2A1214;
  --color-feedback-error-default: var(--color-error-500);
  --color-feedback-error-strong: var(--color-error-800);
  --color-feedback-error-subtle: var(--color-error-950);
  --color-feedback-error-text: var(--color-error-300);
  --color-feedback-info-default: var(--color-sky-300);
  --color-feedback-info-text: var(--color-sky-300);
  --color-feedback-success-default: var(--color-blue-400);
  --color-feedback-success-subtle: var(--color-blue-950);
  --color-feedback-success-text: var(--color-blue-400);
  --color-field-bg: var(--color-neutral-600);
  --color-field-bg-hover: var(--color-neutral-500);
  --color-field-border: transparent;
  --color-focus-ring: var(--color-primary-400);
  --color-key-100: #F9EDD6;
  --color-key-200: #FFD166;
  --color-key-300: #DEB658;
  --color-key-400: #BE9C4B;
  --color-key-50: #FCF6EB;
  --color-key-500: #A0833D;
  --color-key-600: #826B31;
  --color-key-700: #665325;
  --color-key-800: #4B3D19;
  --color-key-900: #31280E;
  --color-key-950: #1A1405;
  --color-label-blue: var(--color-blue-400);
  --color-label-gray: var(--color-neutral-200);
  --color-label-green: var(--color-primary-400);
  --color-label-orange: var(--color-orange-300);
  --color-label-purple: var(--color-ease-300);
  --color-label-red: var(--color-error-400);
  --color-neutral-100: #A0A0A0;
  --color-neutral-200: #858585;
  --color-neutral-300: #707070;
  --color-neutral-400: #505050;
  --color-neutral-50: #EAEAEA;
  --color-neutral-500: #3C3C3C;
  --color-neutral-600: #333333;
  --color-neutral-700: #2A2A2A;
  --color-neutral-75: #BDBDBD;
  --color-neutral-800: #222222;
  --color-neutral-900: #1A1A1A;
  --color-neutral-950: #121212;
  --color-orange-100: #FDEBD9;
  --color-orange-200: #F8D8B7;
  --color-orange-300: #FFB86B;
  --color-orange-400: #DA9C59;
  --color-orange-50: #FEF5EC;
  --color-orange-500: #C17E2D;
  --color-orange-600: #A46300;
  --color-orange-700: #814D00;
  --color-orange-800: #603800;
  --color-orange-900: #442600;
  --color-orange-950: #291500;
  --color-overlay-scrim: var(--color-alpha-black-62);
  --color-overlay-scrim-strong: var(--color-alpha-black-87);
  --color-overlay-toast: var(--color-alpha-black-87);
  --color-primary-100: #DCF6E7;
  --color-primary-200: #BCEBD1;
  --color-primary-300: #8FDBB3;
  --color-primary-400: #5AD19A;
  --color-primary-50: #EEFAF3;
  --color-primary-500: #26A873;
  --color-primary-600: #008A5B;
  --color-primary-700: #006C47;
  --color-primary-800: #005033;
  --color-primary-900: #003822;
  --color-primary-950: #002113;
  --color-sky-100: #DEF2FD;
  --color-sky-200: #C0E4F7;
  --color-sky-300: #7DD3FC;
  --color-sky-400: #6AB6DA;
  --color-sky-50: #EFF9FE;
  --color-sky-500: #439AC1;
  --color-sky-600: #217FA4;
  --color-sky-700: #036485;
  --color-sky-800: #004963;
  --color-sky-900: #003346;
  --color-sky-950: #001E2B;
  --color-surface-default: var(--color-neutral-800);
  --color-surface-hover: var(--color-neutral-500);
  --color-surface-raised: var(--color-neutral-700);
  --color-surface-selected: color-mix(in srgb, var(--color-primary-900) 22%, var(--color-neutral-600));
  --color-surface-selected-child: color-mix(in srgb, var(--color-surface-selected) 55%, transparent);
  --color-surface-tool-hover: var(--color-neutral-700);
  --color-text-accent: var(--color-primary-100);
  --color-text-default: var(--color-neutral-50);
  --color-text-inverse: var(--color-white);
  --color-text-muted: var(--color-neutral-200);
  --color-text-secondary: var(--color-neutral-100);
  --color-text-tool: var(--color-neutral-100);
  --color-text-value: var(--color-neutral-50);
  --color-timeline-ease: var(--color-ease-400);
  --color-timeline-ease-text: var(--color-ease-100);
  --color-timeline-key: var(--color-key-200);
  --color-timeline-key-subtle: var(--color-key-950);
  --color-track-base: var(--color-neutral-800);
  --color-track-none: var(--color-neutral-300);
  --color-white: #FFFFFF;
  --container-gutter: var(--space-3);
  --container-max: 100%;
  --focus-ring-offset: 0px;
  --focus-ring-width: 1px;
  --gradient-accent: linear-gradient(135deg, var(--color-primary-500), var(--color-ease-500));
  --gradient-format-audio: linear-gradient(135deg, var(--color-orange-900), var(--color-error-300));
  --gradient-format-gif: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-400));
  --gradient-format-mp4: linear-gradient(135deg, var(--color-primary-950), var(--color-primary-400));
  --gradient-format-project: linear-gradient(135deg, var(--color-primary-950), var(--color-primary-500));
  --gradient-format-prores: linear-gradient(135deg, var(--color-blue-900), var(--color-sky-500));
  --gradient-pattern-checker: repeating-conic-gradient(var(--color-neutral-900) 0% 25%, var(--color-neutral-950) 0% 50%);
  --gradient-pattern-dots: radial-gradient(var(--color-neutral-600) 1px, transparent 1.2px);
  --gradient-pattern-dots-faint: radial-gradient(var(--color-neutral-700) 1px, transparent 1px);
  --gradient-scrim-top: linear-gradient(color-mix(in srgb, var(--color-black) 40%, transparent), transparent);
  --gradient-stripe-comp: repeating-linear-gradient(135deg, var(--color-ease-800) 0 6px, var(--color-primary-900) 6px 12px);
  --gradient-stripe-hidden: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--color-white) 8%, transparent) 5px 10px);
  --gradient-stripe-offline: repeating-linear-gradient(45deg, var(--color-error-950) 0 10px, var(--color-neutral-950) 10px 20px);
  --gradient-stripe-pin: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--color-black) 40%, transparent) 3px 4px);
  --gradient-wire: linear-gradient(90deg, var(--color-primary-400), var(--color-ease-800));
  --icon-stroke-width: 1.5;
  --measure-lg: 64ch;
  --measure-md: 48ch;
  --measure-sm: 32ch;
  --motion-duration-fast: 120ms;
  --motion-duration-instant: 100ms;
  --motion-duration-slow: 500ms;
  --motion-easing-standard: ease;
  --radius-full: 9999px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;
  --radius-xl: 12px;
  --radius-xs: 2px;
  --shadow-lg: 0 14px 40px var(--color-alpha-black-73);
  --shadow-md: 0 10px 30px var(--color-alpha-black-67);
  --shadow-menu: 0 12px 32px var(--color-alpha-black-73);
  --shadow-sm: 0 2px 10px var(--color-alpha-black-67);
  --shadow-xl: 0 20px 60px var(--color-alpha-black-73);
  --size-avatar-lg: 32px;
  --size-avatar-md: 24px;
  --size-avatar-sm: 20px;
  --size-bar-timeline: 41px;
  --size-bar-top: 42px;
  --size-check-md: 14px;
  --size-control-lg: 28px;
  --size-control-md: 24px;
  --size-control-sm: 20px;
  --size-dialog-lg: 460px;
  --size-dialog-md: 420px;
  --size-dialog-sm: 340px;
  --size-dialog-xl: 640px;
  --size-effect-height: 96px;
  --size-field-key: 50px;
  --size-field-label: 64px;
  --size-field-min: 8ch;
  --size-field-textarea: 54px;
  --size-icon-lg: 20px;
  --size-icon-md: 16px;
  --size-icon-sm: 14px;
  --size-intro: 600px;
  --size-logo-md: 20px;
  --size-logo-sm: 16px;
  --size-menu-max: 280px;
  --size-menu-min: 210px;
  --size-panel-bottom: 300px;
  --size-panel-bottom-tall: 400px;
  --size-panel-foot: 80px;
  --size-panel-head: 45px;
  --size-panel-left: 272px;
  --size-panel-library: 340px;
  --size-panel-right: 290px;
  --size-panel-tile: 32px;
  --size-popover: 320px;
  --size-progress-height: 4px;
  --size-rail-md: 48px;
  --size-ratio-1-1: 1 / 1;
  --size-ratio-16-9: 16 / 9;
  --size-ratio-4-3: 4 / 3;
  --size-ratio-9-16: 9 / 16;
  --size-separator-height: 20px;
  --size-swatch-md: 22px;
  --size-tab-height: 30px;
  --size-tab-width: 39px;
  --size-thumb-md: 44px;
  --size-thumb-sm: 30px;
  --size-tile: 62px;
  --size-toggle-height: 16px;
  --size-toggle-thumb: 12px;
  --size-toggle-width: 28px;
  --size-tool-height: 26px;
  --size-tool-width: 28px;
  --size-track-key: 10px;
  --size-track-key-mini: 6px;
  --size-track-label: 200px;
  --size-track-row: 24px;
  --size-track-ruler: 22px;
  --size-track-swatch: 12px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-24: 96px;
  --space-3: 12px;
  --space-32: 128px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --type-family-body: InstrumentSans, 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --type-family-heading: InstrumentSans, 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --type-family-mono: ui-monospace, Menlo, monospace;
  --type-figure-family: var(--type-family-mono);
  --type-figure-leading: var(--type-leading-none);
  --type-figure-size: var(--type-size-h1);
  --type-figure-tracking: var(--type-tracking-normal);
  --type-figure-weight: var(--type-weight-medium);
  --type-leading-none: 1;
  --type-leading-normal: 1.35;
  --type-leading-relaxed: 1.5;
  --type-leading-snug: 1.25;
  --type-leading-tight: 1.2;
  --type-size-2xs: 9px;
  --type-size-body: 12px;
  --type-size-h1: 22px;
  --type-size-h2: 15px;
  --type-size-h3: 13px;
  --type-size-h4: 12px;
  --type-size-small: 11px;
  --type-size-timecode: 17px;
  --type-size-ui: 12px;
  --type-size-xs: 10px;
  --type-tracking-label: 0.06em;
  --type-tracking-normal: 0em;
  --type-tracking-tight: -0.01em;
  --type-tracking-wide: 0.08em;
  --type-weight-bold: 700;
  --type-weight-medium: 500;
  --type-weight-regular: 400;
  --type-weight-semibold: 600;
  --z-base: 0;
  --z-dialog: 400;
  --z-menu: 350;
  --z-modal: 99;
  --z-overlay: 40;
  --z-raised: 5;
  --z-skip: 400;
  --z-sticky: 20;
  --z-toast: 99;
}