Additional CSS not working

Styles > Additional CSS show up mangled in the style drop down.

:root {
/* Animations */
--speed: 0.3s;
--ease: cubic-bezier(0.4, 0, 0.2, 1);

/* Typography */
--font-header: var(--wp--preset--font-family--playfair-display);
--font-text: var(--wp--preset--font-family--myriad-pro);

/* Layout */
--h-bg-padding: 1em 1.25em;
--p-bg-padding: 1em 1.25em;

/* Font weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Sizes */
--content-size-m: 1036px;
}