material-theme-creator/docs/styles.css

Converting Angular Material themes to CSS Custom Properties (Variables)

.test{--primary-h: 0;--primary-s: 100;--primary-l: 50;--primary-contrast-threshold: 45%;--primary: hsla(var(--primary-h), calc(var(--primary-s) * 1%), calc(var(--primary-l) * 1%), 1);--primary-50-h: var(--primary-h);--primary-50-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-50) + var(--mtc-light-s)) * 1%);--primary-50-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-50) + var(--mtc-light-l)) * 1%);--primary-50: hsl(var(--primary-50-h), var(--primary-50-s), var(--primary-50-l));--primary-50-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-50)) * 100 + var(--mtc-l-50) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-100-h: var(--primary-h);--primary-100-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-100) + var(--mtc-light-s)) * 1%);--primary-100-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-100) + var(--mtc-light-l)) * 1%);--primary-100: hsl(var(--primary-100-h), var(--primary-100-s), var(--primary-100-l));--primary-100-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-100)) * 100 + var(--mtc-l-100) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-200-h: var(--primary-h);--primary-200-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-200) + var(--mtc-light-s)) * 1%);--primary-200-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-200) + var(--mtc-light-l)) * 1%);--primary-200: hsl(var(--primary-200-h), var(--primary-200-s), var(--primary-200-l));--primary-200-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-200)) * 100 + var(--mtc-l-200) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-300-h: var(--primary-h);--primary-300-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-300) + var(--mtc-light-s)) * 1%);--primary-300-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-300) + var(--mtc-light-l)) * 1%);--primary-300: hsl(var(--primary-300-h), var(--primary-300-s), var(--primary-300-l));--primary-300-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-300)) * 100 + var(--mtc-l-300) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-400-h: var(--primary-h);--primary-400-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-400) + var(--mtc-light-s)) * 1%);--primary-400-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-400) + var(--mtc-light-l)) * 1%);--primary-400: hsl(var(--primary-400-h), var(--primary-400-s), var(--primary-400-l));--primary-400-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-400)) * 100 + var(--mtc-l-400) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-500-h: var(--primary-h);--primary-500-s: calc(var(--primary-s) * 1%);--primary-500-l: calc(var(--primary-l) * 1%);--primary-500: var(--primary);--primary-500-contrast: hsl(0, 0%, calc(((var(--primary-l) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-600-h: var(--primary-h);--primary-600-s: calc(((1 - var(--mtc-s-600)) * 100 + var(--mtc-s-600) * var(--primary-s)) * 1%);--primary-600-l: calc(((1 - var(--mtc-l-600)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-600) * var(--primary-l)) * 1%);--primary-600: hsl(var(--primary-600-h), var(--primary-600-s), var(--primary-600-l));--primary-600-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-600)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-600) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-700-h: var(--primary-h);--primary-700-s: calc(((1 - var(--mtc-s-700)) * 100 + var(--mtc-s-700) * var(--primary-s)) * 1%);--primary-700-l: calc(((1 - var(--mtc-l-700)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-700) * var(--primary-l)) * 1%);--primary-700: hsl(var(--primary-700-h), var(--primary-700-s), var(--primary-700-l));--primary-700-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-700)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-700) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-800-h: var(--primary-h);--primary-800-s: calc(((1 - var(--mtc-s-800)) * 100 + var(--mtc-s-800) * var(--primary-s)) * 1%);--primary-800-l: calc(((1 - var(--mtc-l-800)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-800) * var(--primary-l)) * 1%);--primary-800: hsl(var(--primary-800-h), var(--primary-800-s), var(--primary-800-l));--primary-800-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-800)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-800) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-900-h: var(--primary-h);--primary-900-s: calc(((1 - var(--mtc-s-900)) * 100 + var(--mtc-s-900) * var(--primary-s)) * 1%);--primary-900-l: calc(((1 - var(--mtc-l-900)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-900) * var(--primary-l)) * 1%);--primary-900: hsl(var(--primary-900-h), var(--primary-900-s), var(--primary-900-l));--primary-900-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-900)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-900) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A100-h: calc(var(--primary-h) * var(--mtc-h-A100));--primary-A100-s: calc(var(--mtc-s-A100) * 100%);--primary-A100-l: calc(var(--mtc-l-A100) * 100%);--primary-A100: hsl(var(--primary-A100-h), var(--primary-A100-s), var(--primary-A100-l));--primary-A100-contrast: hsl(0, 0%, calc((var(--mtc-l-A100) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A200-h: calc(var(--primary-h) * var(--mtc-h-A200));--primary-A200-s: calc(var(--mtc-s-A200) * 100%);--primary-A200-l: calc(var(--mtc-l-A200) * 100%);--primary-A200: hsl(var(--primary-A200-h), var(--primary-A200-s), var(--primary-A200-l));--primary-A200-contrast: hsl(0, 0%, calc((var(--mtc-l-A200) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A400-h: calc(var(--primary-h) * var(--mtc-h-A400));--primary-A400-s: calc(var(--mtc-s-A400) * 100%);--primary-A400-l: calc(var(--mtc-l-A400) * 100%);--primary-A400: hsl(var(--primary-A400-h), var(--primary-A400-s), var(--primary-A400-l));--primary-A400-contrast: hsl(0, 0%, calc((var(--mtc-l-A400) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A700-h: calc(var(--primary-h) * var(--mtc-h-A700));--primary-A700-s: calc(var(--mtc-s-A700) * 100%);--primary-A700-l: calc(var(--mtc-l-A700) * 100%);--primary-A700: hsl(var(--primary-A700-h), var(--primary-A700-s), var(--primary-A700-l));--primary-A700-contrast: hsl(0, 0%, calc((var(--mtc-l-A700) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-h: 120;--primary-s: 100;--primary-l: 50;--primary-contrast-threshold: 55%;--is-dark-theme: 1;background:hsla(var(--primary-400-h), var(--primary-400-s), var(--primary-400-l), 70%);color:var(--primary-400-contrast);border-top-color:hsl(123deg, 85%, calc((var(--is-dark-theme) * (72 - 34) + 34) * 1%));border-right-color:hsla(calc((var(--is-dark-theme) * (120 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (100 - 100) + 100) * 1%), calc((var(--is-dark-theme) * (50 - 50) + 50) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--primary-h: 0;--primary-s: 100;--primary-l: 50;--primary-contrast-threshold: 45%;--primary: hsla(var(--primary-h), calc(var(--primary-s) * 1%), calc(var(--primary-l) * 1%), 1);--primary-50-h: var(--primary-h);--primary-50-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-50) + var(--mtc-light-s)) * 1%);--primary-50-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-50) + var(--mtc-light-l)) * 1%);--primary-50: hsl(var(--primary-50-h), var(--primary-50-s), var(--primary-50-l));--primary-50-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-50)) * 100 + var(--mtc-l-50) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-100-h: var(--primary-h);--primary-100-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-100) + var(--mtc-light-s)) * 1%);--primary-100-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-100) + var(--mtc-light-l)) * 1%);--primary-100: hsl(var(--primary-100-h), var(--primary-100-s), var(--primary-100-l));--primary-100-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-100)) * 100 + var(--mtc-l-100) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-200-h: var(--primary-h);--primary-200-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-200) + var(--mtc-light-s)) * 1%);--primary-200-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-200) + var(--mtc-light-l)) * 1%);--primary-200: hsl(var(--primary-200-h), var(--primary-200-s), var(--primary-200-l));--primary-200-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-200)) * 100 + var(--mtc-l-200) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-300-h: var(--primary-h);--primary-300-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-300) + var(--mtc-light-s)) * 1%);--primary-300-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-300) + var(--mtc-light-l)) * 1%);--primary-300: hsl(var(--primary-300-h), var(--primary-300-s), var(--primary-300-l));--primary-300-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-300)) * 100 + var(--mtc-l-300) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-400-h: var(--primary-h);--primary-400-s: calc(((var(--primary-s) - var(--mtc-light-s)) * var(--mtc-s-400) + var(--mtc-light-s)) * 1%);--primary-400-l: calc(((var(--primary-l) - var(--mtc-light-l)) * var(--mtc-l-400) + var(--mtc-light-l)) * 1%);--primary-400: hsl(var(--primary-400-h), var(--primary-400-s), var(--primary-400-l));--primary-400-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-400)) * 100 + var(--mtc-l-400) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-500-h: var(--primary-h);--primary-500-s: calc(var(--primary-s) * 1%);--primary-500-l: calc(var(--primary-l) * 1%);--primary-500: var(--primary);--primary-500-contrast: hsl(0, 0%, calc(((var(--primary-l) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-600-h: var(--primary-h);--primary-600-s: calc(((1 - var(--mtc-s-600)) * 100 + var(--mtc-s-600) * var(--primary-s)) * 1%);--primary-600-l: calc(((1 - var(--mtc-l-600)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-600) * var(--primary-l)) * 1%);--primary-600: hsl(var(--primary-600-h), var(--primary-600-s), var(--primary-600-l));--primary-600-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-600)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-600) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-700-h: var(--primary-h);--primary-700-s: calc(((1 - var(--mtc-s-700)) * 100 + var(--mtc-s-700) * var(--primary-s)) * 1%);--primary-700-l: calc(((1 - var(--mtc-l-700)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-700) * var(--primary-l)) * 1%);--primary-700: hsl(var(--primary-700-h), var(--primary-700-s), var(--primary-700-l));--primary-700-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-700)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-700) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-800-h: var(--primary-h);--primary-800-s: calc(((1 - var(--mtc-s-800)) * 100 + var(--mtc-s-800) * var(--primary-s)) * 1%);--primary-800-l: calc(((1 - var(--mtc-l-800)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-800) * var(--primary-l)) * 1%);--primary-800: hsl(var(--primary-800-h), var(--primary-800-s), var(--primary-800-l));--primary-800-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-800)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-800) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-900-h: var(--primary-h);--primary-900-s: calc(((1 - var(--mtc-s-900)) * 100 + var(--mtc-s-900) * var(--primary-s)) * 1%);--primary-900-l: calc(((1 - var(--mtc-l-900)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-900) * var(--primary-l)) * 1%);--primary-900: hsl(var(--primary-900-h), var(--primary-900-s), var(--primary-900-l));--primary-900-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-900)) * var(--primary-l) * var(--primary-l) / 100 + var(--mtc-l-900) * var(--primary-l)) * 1%) - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A100-h: calc(var(--primary-h) * var(--mtc-h-A100));--primary-A100-s: calc(var(--mtc-s-A100) * 100%);--primary-A100-l: calc(var(--mtc-l-A100) * 100%);--primary-A100: hsl(var(--primary-A100-h), var(--primary-A100-s), var(--primary-A100-l));--primary-A100-contrast: hsl(0, 0%, calc((var(--mtc-l-A100) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A200-h: calc(var(--primary-h) * var(--mtc-h-A200));--primary-A200-s: calc(var(--mtc-s-A200) * 100%);--primary-A200-l: calc(var(--mtc-l-A200) * 100%);--primary-A200: hsl(var(--primary-A200-h), var(--primary-A200-s), var(--primary-A200-l));--primary-A200-contrast: hsl(0, 0%, calc((var(--mtc-l-A200) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A400-h: calc(var(--primary-h) * var(--mtc-h-A400));--primary-A400-s: calc(var(--mtc-s-A400) * 100%);--primary-A400-l: calc(var(--mtc-l-A400) * 100%);--primary-A400: hsl(var(--primary-A400-h), var(--primary-A400-s), var(--primary-A400-l));--primary-A400-contrast: hsl(0, 0%, calc((var(--mtc-l-A400) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary-A700-h: calc(var(--primary-h) * var(--mtc-h-A700));--primary-A700-s: calc(var(--mtc-s-A700) * 100%);--primary-A700-l: calc(var(--mtc-l-A700) * 100%);--primary-A700: hsl(var(--primary-A700-h), var(--primary-A700-s), var(--primary-A700-l));--primary-A700-contrast: hsl(0, 0%, calc((var(--mtc-l-A700) * 100% - var(--primary-contrast-threshold, 50%)) * (-100)));--primary: #f44336;--primary-50: #ffebee;--primary-50-contrast: rgba(0, 0, 0, 0.87);--primary-100: #ffcdd2;--primary-100-contrast: rgba(0, 0, 0, 0.87);--primary-200: #ef9a9a;--primary-200-contrast: rgba(0, 0, 0, 0.87);--primary-300: #e57373;--primary-300-contrast: rgba(0, 0, 0, 0.87);--primary-400: #ef5350;--primary-400-contrast: rgba(0, 0, 0, 0.87);--primary-500: #f44336;--primary-500-contrast: white;--primary-600: #e53935;--primary-600-contrast: white;--primary-700: #d32f2f;--primary-700-contrast: white;--primary-800: #c62828;--primary-800-contrast: white;--primary-900: #b71c1c;--primary-900-contrast: white;--primary-A100: #ff8a80;--primary-A100-contrast: rgba(0, 0, 0, 0.87);--primary-A200: #ff5252;--primary-A200-contrast: white;--primary-A400: #ff1744;--primary-A400-contrast: white;--primary-A700: #d50000;--primary-A700-contrast: white;--mtc-background-status-bar: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (87.8431372549 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-app-bar: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (96.0784313725 - 12.9411764706) + 12.9411764706) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-background: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (98.0392156863 - 18.8235294118) + 18.8235294118) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-hover: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.04 - 0.04) + 0.04) * 100%));--mtc-background-card: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (100 - 25.8823529412) + 25.8823529412) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-dialog: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (100 - 25.8823529412) + 25.8823529412) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-disabled-button: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.12 - 0.12) + 0.12) * 100%));--mtc-background-raised-button: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (100 - 25.8823529412) + 25.8823529412) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-focused-button: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.12 - 0.12) + 0.12) * 100%));--mtc-background-selected-button: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (87.8431372549 - 12.9411764706) + 12.9411764706) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-selected-disabled-button: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (74.1176470588 - 25.8823529412) + 25.8823529412) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-disabled-button-toggle: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (93.3333333333 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-unselected-chip: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (87.8431372549 - 38.0392156863) + 38.0392156863) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-disabled-list-option: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (93.3333333333 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-background-tooltip: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (38.0392156863 - 38.0392156863) + 38.0392156863) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%));--mtc-foreground-base: hsla(0, 0%, calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), 10%);--mtc-foreground-divider: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.12 - 0.12) + 0.12) * 100%));--mtc-foreground-dividers: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.12 - 0.12) + 0.12) * 100%));--mtc-foreground-disabled: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.5 - 0.38) + 0.38) * 100%));--mtc-foreground-disabled-button: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.3 - 0.26) + 0.26) * 100%));--mtc-foreground-disabled-text: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.5 - 0.38) + 0.38) * 100%));--mtc-foreground-elevation: hsla(0, 0%, 0%, 26%);--mtc-foreground-hint-text: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.5 - 0.38) + 0.38) * 100%));--mtc-foreground-secondary-text: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.7 - 0.54) + 0.54) * 100%));--mtc-foreground-icon: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (1 - 0.54) + 0.54) * 100%));--mtc-foreground-icons: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (1 - 0.54) + 0.54) * 100%));--mtc-foreground-text: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (1 - 0.87) + 0.87) * 100%));--mtc-foreground-slider-min: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (1 - 0.87) + 0.87) * 100%));--mtc-foreground-slider-off: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (0.3 - 0.26) + 0.26) * 100%));--mtc-foreground-slider-off-active: hsla(calc((var(--is-dark-theme) * (0 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (0 - 0) + 0) * 1%), calc((var(--is-dark-theme) * (100 - 0) + 0) * 1%), calc((calc(1 - var(--is-dark-theme)) * (0.38 - 0.3) + 0.3) * 100%));--primary-h: 120;--primary-s: 100;--primary-l: 50;--primary-contrast-threshold: 55%;border-bottom-color:hsla(var(--primary-400-h), var(--primary-400-s), var(--primary-400-l), 70%);border-left-color:var(--primary-400-contrast);outline-color:hsla(calc((var(--is-dark-theme) * (120 - 0) + 0) * 1deg), calc((var(--is-dark-theme) * (100 - 100) + 100) * 1%), calc((var(--is-dark-theme) * (50 - 50) + 50) * 1%), calc((var(--is-dark-theme) * (1 - 1) + 1) * 100%))}.test :root{--mtc-h-A100: 1;--mtc-h-A200: 1;--mtc-h-A400: 1;--mtc-h-A700: 1.01;--mtc-s-50: 0.91;--mtc-s-100: 0.98;--mtc-s-200: 0.96;--mtc-s-300: 0.95;--mtc-s-400: 0.96;--mtc-s-600: 1;--mtc-s-700: 0.99;--mtc-s-800: 0.89;--mtc-s-900: 0.86;--mtc-s-A100: 0.89;--mtc-s-A200: 0.98;--mtc-s-A400: 0.97;--mtc-s-A700: 0.95;--mtc-l-50: 0.12;--mtc-l-100: 0.3;--mtc-l-200: 0.5;--mtc-l-300: 0.7;--mtc-l-400: 0.86;--mtc-l-600: 0.87;--mtc-l-700: 0.66;--mtc-l-800: 0.45;--mtc-l-900: 0.16;--mtc-l-A100: 0.76;--mtc-l-A200: 0.64;--mtc-l-A400: 0.49;--mtc-l-A700: 0.44;--mtc-light-h: 0;--mtc-light-s: 0;--mtc-light-l: 100}.test :root{--mtc-h-A100: 1;--mtc-h-A200: 1;--mtc-h-A400: 1;--mtc-h-A700: 1.01;--mtc-s-50: 0.91;--mtc-s-100: 0.98;--mtc-s-200: 0.96;--mtc-s-300: 0.95;--mtc-s-400: 0.96;--mtc-s-600: 1;--mtc-s-700: 0.99;--mtc-s-800: 0.89;--mtc-s-900: 0.86;--mtc-s-A100: 0.89;--mtc-s-A200: 0.98;--mtc-s-A400: 0.97;--mtc-s-A700: 0.95;--mtc-l-50: 0.12;--mtc-l-100: 0.3;--mtc-l-200: 0.5;--mtc-l-300: 0.7;--mtc-l-400: 0.86;--mtc-l-600: 0.87;--mtc-l-700: 0.66;--mtc-l-800: 0.45;--mtc-l-900: 0.16;--mtc-l-A100: 0.76;--mtc-l-A200: 0.64;--mtc-l-A400: 0.49;--mtc-l-A700: 0.44;--mtc-light-h: 0;--mtc-light-s: 0;--mtc-light-l: 100}.page{--is-dark-theme: 0;--background: hsl(0, 0%, calc((1 - var(--is-dark-theme)) * 85% + 15%));--text-color: hsl(0, 0%, calc(var(--is-dark-theme) * 100%));color:var(--text-color);transition:color .2s ease-in-out .4s}@media(prefers-color-scheme: dark){.page{--is-dark-theme: 1}}@media(prefers-color-scheme: light){.page{--is-dark-theme: 0}}#switch-theme{position:absolute}#switch-theme:focus-visible+.page .switch-theme{outline:auto}@media(prefers-color-scheme: dark){#switch-theme:checked+.page{--is-dark-theme: 0}}@media(prefers-color-scheme: light){#switch-theme:checked+.page{--is-dark-theme: 1}}@media(prefers-color-scheme: dark){#switch-theme:checked+.page .switch-theme .icon .moon{transform:translateY(var(--size));transition:all .5s cubic-bezier(0.9, -0.65, 0.45, 0.55)}#switch-theme:checked+.page .switch-theme .icon .sun{transform:translateY(0%);transition:all .5s cubic-bezier(0.4, 0.45, 0.45, 1.4) .4s}}@media(prefers-color-scheme: light){#switch-theme:checked+.page .switch-theme .icon .moon{transform:translateY(0%);transition:all .5s cubic-bezier(0.4, 0.45, 0.45, 1.4) .4s;opacity:1}#switch-theme:checked+.page .switch-theme .icon .sun{transform:translateY(var(--size));transition:all .5s cubic-bezier(0.9, -0.65, 0.45, 0.55);opacity:0}}.theme-background{background-color:var(--background);width:calc(var(--is-dark-theme)*200vmax);height:calc(var(--is-dark-theme)*200vmax);top:calc(var(--is-dark-theme)*-50vmax);left:calc(var(--is-dark-theme)*-50vmax);position:fixed;border-radius:50%;transition:all .2s linear .4s;z-index:-1}.switch-theme{position:relative;display:block;cursor:pointer;--size: 72px;--icon-size: 48px;width:var(--size);height:var(--size)}.switch-theme .icon{width:100%;height:100%;overflow:hidden;animation:rocking infinite 5s linear;position:absolute;top:0;left:0}.switch-theme .icon svg{opacity:0;animation:show .2s forwards .4s;position:absolute;top:calc((var(--size) - var(--icon-size))/2);left:calc((var(--size) - var(--icon-size))/2)}@media(prefers-color-scheme: light){.switch-theme .icon .moon{transform:translateY(var(--size));transition:all .5s cubic-bezier(0.9, -0.65, 0.45, 0.55);opacity:0}.switch-theme .icon .sun{transform:translateY(0%);transition:all .5s cubic-bezier(0.4, 0.45, 0.45, 1.4) .4s;opacity:1}}@media(prefers-color-scheme: dark){.switch-theme .icon .moon{transform:translateY(0%);transition:all .5s cubic-bezier(0.4, 0.45, 0.45, 1.4) .4s;opacity:1}.switch-theme .icon .sun{transform:translateY(var(--size));transition:all .5s cubic-bezier(0.9, -0.65, 0.45, 0.55);opacity:0}}.switch-theme .prompt{position:absolute;top:-64px;left:76px;margin-left:21px;font-family:cursive;font-size:1.4em;line-height:1;text-shadow:0 0 2px var(--background);transform:rotate(-25deg);animation:show-prompt forwards 5s;z-index:-1}.switch-theme .prompt svg{position:absolute;top:0;right:100%}@keyframes show{to{opacity:1}}@keyframes rocking{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}}@keyframes show-prompt{0%{display:none;opacity:0}10%{display:block;opacity:0}20%{opacity:1}90%{opacity:1}99%{opacity:0}100%{display:none;opacity:0}}:root{--mtc-h-A100: 1;--mtc-h-A200: 1;--mtc-h-A400: 1;--mtc-h-A700: 1.01;--mtc-s-50: 0.91;--mtc-s-100: 0.98;--mtc-s-200: 0.96;--mtc-s-300: 0.95;--mtc-s-400: 0.96;--mtc-s-600: 1;--mtc-s-700: 0.99;--mtc-s-800: 0.89;--mtc-s-900: 0.86;--mtc-s-A100: 0.89;--mtc-s-A200: 0.98;--mtc-s-A400: 0.97;--mtc-s-A700: 0.95;--mtc-l-50: 0.12;--mtc-l-100: 0.3;--mtc-l-200: 0.5;--mtc-l-300: 0.7;--mtc-l-400: 0.86;--mtc-l-600: 0.87;--mtc-l-700: 0.66;--mtc-l-800: 0.45;--mtc-l-900: 0.16;--mtc-l-A100: 0.76;--mtc-l-A200: 0.64;--mtc-l-A400: 0.49;--mtc-l-A700: 0.44;--mtc-light-h: 0;--mtc-light-s: 0;--mtc-light-l: 100}:root{--my-theme-h: 220;--my-theme-s: 80;--my-theme-l: 60;--my-theme-contrast-threshold: 65%;--my-theme: hsla(var(--my-theme-h), calc(var(--my-theme-s) * 1%), calc(var(--my-theme-l) * 1%), 1);--my-theme-50-h: var(--my-theme-h);--my-theme-50-s: calc(((var(--my-theme-s) - var(--mtc-light-s)) * var(--mtc-s-50) + var(--mtc-light-s)) * 1%);--my-theme-50-l: calc(((var(--my-theme-l) - var(--mtc-light-l)) * var(--mtc-l-50) + var(--mtc-light-l)) * 1%);--my-theme-50: hsl(var(--my-theme-50-h), var(--my-theme-50-s), var(--my-theme-50-l));--my-theme-50-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-50)) * 100 + var(--mtc-l-50) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-100-h: var(--my-theme-h);--my-theme-100-s: calc(((var(--my-theme-s) - var(--mtc-light-s)) * var(--mtc-s-100) + var(--mtc-light-s)) * 1%);--my-theme-100-l: calc(((var(--my-theme-l) - var(--mtc-light-l)) * var(--mtc-l-100) + var(--mtc-light-l)) * 1%);--my-theme-100: hsl(var(--my-theme-100-h), var(--my-theme-100-s), var(--my-theme-100-l));--my-theme-100-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-100)) * 100 + var(--mtc-l-100) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-200-h: var(--my-theme-h);--my-theme-200-s: calc(((var(--my-theme-s) - var(--mtc-light-s)) * var(--mtc-s-200) + var(--mtc-light-s)) * 1%);--my-theme-200-l: calc(((var(--my-theme-l) - var(--mtc-light-l)) * var(--mtc-l-200) + var(--mtc-light-l)) * 1%);--my-theme-200: hsl(var(--my-theme-200-h), var(--my-theme-200-s), var(--my-theme-200-l));--my-theme-200-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-200)) * 100 + var(--mtc-l-200) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-300-h: var(--my-theme-h);--my-theme-300-s: calc(((var(--my-theme-s) - var(--mtc-light-s)) * var(--mtc-s-300) + var(--mtc-light-s)) * 1%);--my-theme-300-l: calc(((var(--my-theme-l) - var(--mtc-light-l)) * var(--mtc-l-300) + var(--mtc-light-l)) * 1%);--my-theme-300: hsl(var(--my-theme-300-h), var(--my-theme-300-s), var(--my-theme-300-l));--my-theme-300-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-300)) * 100 + var(--mtc-l-300) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-400-h: var(--my-theme-h);--my-theme-400-s: calc(((var(--my-theme-s) - var(--mtc-light-s)) * var(--mtc-s-400) + var(--mtc-light-s)) * 1%);--my-theme-400-l: calc(((var(--my-theme-l) - var(--mtc-light-l)) * var(--mtc-l-400) + var(--mtc-light-l)) * 1%);--my-theme-400: hsl(var(--my-theme-400-h), var(--my-theme-400-s), var(--my-theme-400-l));--my-theme-400-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-400)) * 100 + var(--mtc-l-400) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-500-h: var(--my-theme-h);--my-theme-500-s: calc(var(--my-theme-s) * 1%);--my-theme-500-l: calc(var(--my-theme-l) * 1%);--my-theme-500: var(--my-theme);--my-theme-500-contrast: hsl(0, 0%, calc(((var(--my-theme-l) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-600-h: var(--my-theme-h);--my-theme-600-s: calc(((1 - var(--mtc-s-600)) * 100 + var(--mtc-s-600) * var(--my-theme-s)) * 1%);--my-theme-600-l: calc(((1 - var(--mtc-l-600)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-600) * var(--my-theme-l)) * 1%);--my-theme-600: hsl(var(--my-theme-600-h), var(--my-theme-600-s), var(--my-theme-600-l));--my-theme-600-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-600)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-600) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-700-h: var(--my-theme-h);--my-theme-700-s: calc(((1 - var(--mtc-s-700)) * 100 + var(--mtc-s-700) * var(--my-theme-s)) * 1%);--my-theme-700-l: calc(((1 - var(--mtc-l-700)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-700) * var(--my-theme-l)) * 1%);--my-theme-700: hsl(var(--my-theme-700-h), var(--my-theme-700-s), var(--my-theme-700-l));--my-theme-700-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-700)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-700) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-800-h: var(--my-theme-h);--my-theme-800-s: calc(((1 - var(--mtc-s-800)) * 100 + var(--mtc-s-800) * var(--my-theme-s)) * 1%);--my-theme-800-l: calc(((1 - var(--mtc-l-800)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-800) * var(--my-theme-l)) * 1%);--my-theme-800: hsl(var(--my-theme-800-h), var(--my-theme-800-s), var(--my-theme-800-l));--my-theme-800-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-800)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-800) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-900-h: var(--my-theme-h);--my-theme-900-s: calc(((1 - var(--mtc-s-900)) * 100 + var(--mtc-s-900) * var(--my-theme-s)) * 1%);--my-theme-900-l: calc(((1 - var(--mtc-l-900)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-900) * var(--my-theme-l)) * 1%);--my-theme-900: hsl(var(--my-theme-900-h), var(--my-theme-900-s), var(--my-theme-900-l));--my-theme-900-contrast: hsl(0, 0%, calc(((((1 - var(--mtc-l-900)) * var(--my-theme-l) * var(--my-theme-l) / 100 + var(--mtc-l-900) * var(--my-theme-l)) * 1%) - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-A100-h: calc(var(--my-theme-h) * var(--mtc-h-A100));--my-theme-A100-s: calc(var(--mtc-s-A100) * 100%);--my-theme-A100-l: calc(var(--mtc-l-A100) * 100%);--my-theme-A100: hsl(var(--my-theme-A100-h), var(--my-theme-A100-s), var(--my-theme-A100-l));--my-theme-A100-contrast: hsl(0, 0%, calc((var(--mtc-l-A100) * 100% - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-A200-h: calc(var(--my-theme-h) * var(--mtc-h-A200));--my-theme-A200-s: calc(var(--mtc-s-A200) * 100%);--my-theme-A200-l: calc(var(--mtc-l-A200) * 100%);--my-theme-A200: hsl(var(--my-theme-A200-h), var(--my-theme-A200-s), var(--my-theme-A200-l));--my-theme-A200-contrast: hsl(0, 0%, calc((var(--mtc-l-A200) * 100% - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-A400-h: calc(var(--my-theme-h) * var(--mtc-h-A400));--my-theme-A400-s: calc(var(--mtc-s-A400) * 100%);--my-theme-A400-l: calc(var(--mtc-l-A400) * 100%);--my-theme-A400: hsl(var(--my-theme-A400-h), var(--my-theme-A400-s), var(--my-theme-A400-l));--my-theme-A400-contrast: hsl(0, 0%, calc((var(--mtc-l-A400) * 100% - var(--my-theme-contrast-threshold, 50%)) * (-100)));--my-theme-A700-h: calc(var(--my-theme-h) * var(--mtc-h-A700));--my-theme-A700-s: calc(var(--mtc-s-A700) * 100%);--my-theme-A700-l: calc(var(--mtc-l-A700) * 100%);--my-theme-A700: hsl(var(--my-theme-A700-h), var(--my-theme-A700-s), var(--my-theme-A700-l));--my-theme-A700-contrast: hsl(0, 0%, calc((var(--mtc-l-A700) * 100% - var(--my-theme-contrast-threshold, 50%)) * (-100)));--mdc-theme-primary: var(--my-theme)}.create-theme{align-items:center;display:grid;grid-template-columns:auto 50px;gap:0 16px}.create-theme h3{margin:0}.create-theme .value{text-align:center;font-weight:normal;font-size:1.2em}.create-theme .value.-h:before{counter-reset:variable var(--my-theme-h);content:counter(variable)}.create-theme .value.-s:before{counter-reset:variable var(--my-theme-s);content:counter(variable)}.create-theme .value.-l:before{counter-reset:variable var(--my-theme-l);content:counter(variable)}.create-theme .mdc-slider{grid-column:1/3}@media(min-width: 600px){.create-theme{grid-template-columns:auto 50px 1fr;row-gap:32px}.create-theme .mdc-slider{grid-column:auto}}.your-theme{margin:50px 0;display:grid;grid-template-columns:repeat(7, 1fr);font-size:14px;font-weight:normal}@media(min-width: 600px){.your-theme{grid-template-columns:repeat(14, 1fr)}.your-theme .point:first-child{border-radius:4px 0 0 4px}.your-theme .point:last-child{border-radius:0 4px 4px 0}}@media(max-width: 599px){.your-theme .point:first-child{border-radius:4px 0 0 0}.your-theme .point:nth-child(7){border-radius:0 4px 0 0}.your-theme .point:nth-child(8){border-radius:0 0 0 4px}.your-theme .point:last-child{border-radius:0 0 4px 0}}.your-theme .point{height:50px;display:flex;align-items:center;justify-content:center;position:relative;cursor:default}.your-theme .point[data-point="500"]{position:relative;z-index:2;box-shadow:0 0 0 4px var(--my-theme);border-radius:4px}.your-theme .point[data-point="50"]{background-color:var(--my-theme-50);color:var(--my-theme-50-contrast)}.your-theme .point[data-point="100"]{background-color:var(--my-theme-100);color:var(--my-theme-100-contrast)}.your-theme .point[data-point="200"]{background-color:var(--my-theme-200);color:var(--my-theme-200-contrast)}.your-theme .point[data-point="300"]{background-color:var(--my-theme-300);color:var(--my-theme-300-contrast)}.your-theme .point[data-point="400"]{background-color:var(--my-theme-400);color:var(--my-theme-400-contrast)}.your-theme .point[data-point="500"]{background-color:var(--my-theme-500);color:var(--my-theme-500-contrast)}.your-theme .point[data-point="600"]{background-color:var(--my-theme-600);color:var(--my-theme-600-contrast)}.your-theme .point[data-point="700"]{background-color:var(--my-theme-700);color:var(--my-theme-700-contrast)}.your-theme .point[data-point="800"]{background-color:var(--my-theme-800);color:var(--my-theme-800-contrast)}.your-theme .point[data-point="900"]{background-color:var(--my-theme-900);color:var(--my-theme-900-contrast)}.your-theme .point[data-point=A100]{background-color:var(--my-theme-A100);color:var(--my-theme-A100-contrast)}.your-theme .point[data-point=A200]{background-color:var(--my-theme-A200);color:var(--my-theme-A200-contrast)}.your-theme .point[data-point=A400]{background-color:var(--my-theme-A400);color:var(--my-theme-A400-contrast)}.your-theme .point[data-point=A700]{background-color:var(--my-theme-A700);color:var(--my-theme-A700-contrast)}.your-theme .point .info{position:absolute;padding:8px 16px;border-radius:4px;bottom:100%;left:50%;white-space:nowrap;backdrop-filter:blur(5px);transform:translate(-50%, -8px);background-color:rgba(0,0,0,.6);color:rgba(255,255,255,.7);text-shadow:0 0 5px #000;display:none;cursor:text;z-index:4}.your-theme .point .info:before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #000;bottom:-5px;content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.your-theme .point .info:after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}.your-theme .point:hover .info{display:block}.download-theme{display:flex;width:100%;align-items:center;gap:16px}.download-theme label{flex-grow:1}code[class*=language-],pre[class*=language-]{color:hsl(0, 0%, calc((var(--is-dark-theme)) * 70% + 20%));background:none;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{text-shadow:none;background:var(--my-theme)}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:hsl(0, 0%, calc((1 - var(--is-dark-theme)) * 70% + 20%))}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:hsl(calc(var(--my-theme-h) + 20), 20%, 60%)}.token.punctuation{color:hsl(calc(var(--my-theme-h) + 100), 90%, calc(var(--is-dark-theme) * 30% + 40%))}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:hsl(calc(var(--my-theme-h) + 70), 90%, calc(var(--is-dark-theme) * 30% + 40%))}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:hsl(calc(var(--my-theme-h) + 0), 90%, calc(var(--is-dark-theme) * 30% + 40%))}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:hsl(calc(var(--my-theme-h) + 210), 90%, calc(var(--is-dark-theme) * 30% + 40%))}.token.atrule,.token.attr-value,.token.keyword{color:hsl(calc(var(--my-theme-h) + 150), 90%, calc(var(--is-dark-theme) * 30% + 40%))}.token.function,.token.class-name{color:hsl(calc(var(--my-theme-h) + 280), 90%, calc(var(--is-dark-theme) * 30% + 40%))}.token.regex,.token.important,.token.variable{color:hsl(calc(var(--my-theme-h) + 90), 90%, calc(var(--is-dark-theme) * 30% + 40%))}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase);padding:0 8px 0 8px;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;border-radius:4px;border-radius:var(--mdc-shape-small, 4px);height:36px}.mdc-button .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small, 4px)}.mdc-button:not(:disabled){background-color:transparent}.mdc-button:disabled{background-color:transparent}.mdc-button .mdc-button__icon{margin-left:0;margin-right:8px;display:inline-block;width:18px;height:18px;font-size:18px;vertical-align:top}[dir=rtl] .mdc-button .mdc-button__icon,.mdc-button .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:0}.mdc-button .mdc-button__touch{position:absolute;top:50%;right:0;height:48px;left:0;transform:translateY(-50%)}.mdc-button:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-button:disabled{color:rgba(0, 0, 0, 0.38)}.mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:0}[dir=rtl] .mdc-button__label+.mdc-button__icon,.mdc-button__label+.mdc-button__icon[dir=rtl]{margin-left:0;margin-right:8px}svg.mdc-button__icon{fill:currentColor}.mdc-button--raised .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon,.mdc-button--outlined .mdc-button__icon{margin-left:-4px;margin-right:8px}[dir=rtl] .mdc-button--raised .mdc-button__icon,.mdc-button--raised .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--unelevated .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--outlined .mdc-button__icon,.mdc-button--outlined .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:-4px}.mdc-button--raised .mdc-button__label+.mdc-button__icon,.mdc-button--unelevated .mdc-button__label+.mdc-button__icon,.mdc-button--outlined .mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:-4px}[dir=rtl] .mdc-button--raised .mdc-button__label+.mdc-button__icon,.mdc-button--raised .mdc-button__label+.mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--unelevated .mdc-button__label+.mdc-button__icon,.mdc-button--unelevated .mdc-button__label+.mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--outlined .mdc-button__label+.mdc-button__icon,.mdc-button--outlined .mdc-button__label+.mdc-button__icon[dir=rtl]{margin-left:-4px;margin-right:8px}.mdc-button--raised,.mdc-button--unelevated{padding:0 16px 0 16px}.mdc-button--raised:not(:disabled),.mdc-button--unelevated:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee)}.mdc-button--raised:not(:disabled),.mdc-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary, #fff)}.mdc-button--raised:disabled,.mdc-button--unelevated:disabled{background-color:rgba(0, 0, 0, 0.12)}.mdc-button--raised:disabled,.mdc-button--unelevated:disabled{color:rgba(0, 0, 0, 0.38)}.mdc-button--raised{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-button--raised:hover,.mdc-button--raised:focus{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0,0,0,.12)}.mdc-button--raised:active{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12)}.mdc-button--raised:disabled{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0,0,0,.12)}.mdc-button--outlined{padding:0 15px 0 15px;border-width:1px;border-style:solid}.mdc-button--outlined .mdc-button__ripple{top:-1px;left:-1px;border:1px solid transparent}.mdc-button--outlined .mdc-button__touch{left:-1px;width:calc(100% + 2 * 1px)}.mdc-button--outlined:not(:disabled){border-color:rgba(0, 0, 0, 0.12)}.mdc-button--outlined:disabled{border-color:rgba(0, 0, 0, 0.12)}.mdc-button--touch{margin-top:6px;margin-bottom:6px}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-button{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-button .mdc-button__ripple::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee)}.mdc-button:hover .mdc-button__ripple::before{opacity:.04}.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:.12}.mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:.12}.mdc-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.12}.mdc-button .mdc-button__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-button:not(.mdc-button--outlined) .mdc-button__ripple{top:0;left:0}.mdc-button--raised .mdc-button__ripple::before,.mdc-button--raised .mdc-button__ripple::after,.mdc-button--unelevated .mdc-button__ripple::before,.mdc-button--unelevated .mdc-button__ripple::after{background-color:#fff;background-color:var(--mdc-theme-on-primary, #fff)}.mdc-button--raised:hover .mdc-button__ripple::before,.mdc-button--unelevated:hover .mdc-button__ripple::before{opacity:.08}.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before,.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{transition-duration:75ms;opacity:.24}.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after,.mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{transition:opacity 150ms linear}.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after,.mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{transition-duration:75ms;opacity:.24}.mdc-button--raised.mdc-ripple-upgraded,.mdc-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.24}.mdc-slider__thumb{--mdc-ri