@property --z {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --depth {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --r {
    syntax: "<length>";
    inherits: false;
    initial-value: 10px;
}

@property --extrude {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --letterSmoothness {
    syntax: "<length>";
    inherits: true;
    initial-value: 1px;
}

@property --border-radius-type {
    syntax: "circle | parabola | cosine | cubic";
    inherits: false;
    initial-value: circle;
}

@property --rotation-offset {
    syntax: "x | y | z";
    inherits: false;
    initial-value: z;
}

@property --axis {
    syntax: "x | y | z";
    inherits: false;
    initial-value: x;
}

@property --point-a {
    syntax: "<length>+";
    inherits: false;
    initial-value: -100px 0px;
}

@property --point-b {
    syntax: "<length>+";
    inherits: false;
    initial-value: 100px 0px;
}

@property --point-c {
    syntax: "<length>+";
    inherits: false;
    initial-value: 0px 100px;
}

@property --scale {
    syntax: "<length>";
    inherits: false;
    initial-value: 100px;
}

@property --diffuse-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgb(0, 0, 0);
}

@property --specular-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgb(0, 0, 0);
}

@property --ambient-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgb(0, 0, 0);
}

@property --kd {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --ks {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --ka {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --p {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --light-type {
    syntax: "point | directional";
    inherits: false;
    initial-value: point;
}

@property --light-direction {
    syntax: "<number>+";
    inherits: false;
    initial-value: 0 0 0;
}

@property --light-intensity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --light-radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --twist-axis {
    syntax: "<number>+";
    inherits: false;
    initial-value: 0 1 0;
}

@property --twist-rate {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.1;
}

@property --twist-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --twist-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 100px;
}



.sdf-ui-base-class {
    display: block;
    background-color: rgba(0, 0, 0, 0) !important;
}

@font-face {
    font-family: metaballs;
    src: url(./fonts/metaball.ttf);
}

.sdf-ui-text-base-class {
    font-family: metaballs;
    color: rgba(0, 0, 0, 0) !important;
}