@poupe/tailwindcss/dist/default.css

TailwindCSS v4 plugin for Poupe UI framework with theme customization support

/* This file is auto-generated by @poupe/tailwindcss. DO NOT EDIT */

@custom-variant print {
  @media print {
    @slot;
  }
}
@custom-variant screen {
  @media screen {
    @slot;
  }
}
@custom-variant dark {
  @media not print {
    &:where(.dark, .dark *) {
      @slot;
    }
  }
}

@layer base {
  :root {
    --md-primary: rgb(0 101 149);
    --md-primary-50: rgb(230 242 255);
    --md-primary-100: rgb(202 230 255);
    --md-primary-200: rgb(142 205 255);
    --md-primary-300: rgb(107 178 230);
    --md-primary-400: rgb(79 151 202);
    --md-primary-500: rgb(48 125 175);
    --md-primary-600: rgb(0 100 148);
    --md-primary-700: rgb(0 75 112);
    --md-primary-800: rgb(0 52 79);
    --md-primary-900: rgb(0 30 48);
    --md-primary-950: rgb(0 19 32);
    --md-secondary: rgb(72 98 119);
    --md-secondary-50: rgb(230 242 255);
    --md-secondary-100: rgb(202 230 255);
    --md-secondary-200: rgb(175 202 226);
    --md-secondary-300: rgb(148 174 198);
    --md-secondary-400: rgb(121 148 170);
    --md-secondary-500: rgb(96 122 144);
    --md-secondary-600: rgb(71 97 118);
    --md-secondary-700: rgb(47 73 94);
    --md-secondary-800: rgb(23 51 70);
    --md-secondary-900: rgb(0 30 48);
    --md-secondary-950: rgb(0 19 32);
    --md-tertiary: rgb(125 75 143);
    --md-tertiary-50: rgb(254 235 255);
    --md-tertiary-100: rgb(249 216 255);
    --md-tertiary-200: rgb(236 178 254);
    --md-tertiary-300: rgb(207 151 225);
    --md-tertiary-400: rgb(179 125 197);
    --md-tertiary-500: rgb(151 99 169);
    --md-tertiary-600: rgb(124 75 142);
    --md-tertiary-700: rgb(99 50 117);
    --md-tertiary-800: rgb(74 26 92);
    --md-tertiary-900: rgb(50 0 70);
    --md-tertiary-950: rgb(34 0 48);
    --md-neutral: rgb(116 119 123);
    --md-neutral-50: rgb(239 241 245);
    --md-neutral-100: rgb(224 226 231);
    --md-neutral-200: rgb(196 199 203);
    --md-neutral-300: rgb(169 171 176);
    --md-neutral-400: rgb(142 145 149);
    --md-neutral-500: rgb(116 119 123);
    --md-neutral-600: rgb(91 95 98);
    --md-neutral-700: rgb(68 71 75);
    --md-neutral-800: rgb(45 49 52);
    --md-neutral-900: rgb(25 28 31);
    --md-neutral-950: rgb(14 17 20);
    --md-neutral-variant: rgb(112 120 128);
    --md-neutral-variant-50: rgb(234 242 251);
    --md-neutral-variant-100: rgb(219 227 236);
    --md-neutral-variant-200: rgb(191 199 208);
    --md-neutral-variant-300: rgb(164 172 181);
    --md-neutral-variant-400: rgb(138 146 154);
    --md-neutral-variant-500: rgb(112 120 128);
    --md-neutral-variant-600: rgb(87 95 103);
    --md-neutral-variant-700: rgb(64 72 79);
    --md-neutral-variant-800: rgb(41 49 56);
    --md-neutral-variant-900: rgb(21 28 35);
    --md-neutral-variant-950: rgb(10 18 24);
    --md-surface: rgb(247 249 254);
    --md-surface-dim: rgb(216 218 223);
    --md-surface-bright: rgb(247 249 254);
    --md-surface-variant: rgb(224 226 231);
    --md-surface-container-lowest: rgb(255 255 255);
    --md-surface-container-low: rgb(241 244 248);
    --md-surface-container: rgb(236 238 242);
    --md-surface-container-high: rgb(230 232 237);
    --md-surface-container-highest: rgb(224 226 231);
    --md-inverse-surface: rgb(11 15 18);
    --md-on-surface: rgb(47 51 54);
    --md-on-surface-dim: rgb(47 51 54);
    --md-on-surface-bright: rgb(47 51 54);
    --md-on-surface-variant: rgb(92 95 99);
    --md-on-surface-container-lowest: rgb(47 51 54);
    --md-on-surface-container-low: rgb(47 51 54);
    --md-on-surface-container: rgb(47 51 54);
    --md-on-surface-container-high: rgb(47 51 54);
    --md-on-surface-container-highest: rgb(47 51 54);
    --md-on-inverse-surface: rgb(154 157 161);
    --md-primary-dim: rgb(0 88 131);
    --md-primary-container: rgb(115 189 244);
    --md-primary-fixed: rgb(115 189 244);
    --md-primary-fixed-dim: rgb(101 176 230);
    --md-inverse-primary: rgb(115 189 244);
    --md-on-primary: rgb(246 249 255);
    --md-on-primary-container: rgb(0 56 85);
    --md-on-primary-fixed: rgb(0 32 51);
    --md-on-primary-fixed-variant: rgb(0 65 99);
    --md-secondary-dim: rgb(60 86 106);
    --md-secondary-container: rgb(203 230 255);
    --md-secondary-fixed: rgb(203 230 255);
    --md-secondary-fixed-dim: rgb(189 216 240);
    --md-on-secondary: rgb(246 249 255);
    --md-on-secondary-container: rgb(59 84 105);
    --md-on-secondary-fixed: rgb(40 66 86);
    --md-on-secondary-fixed-variant: rgb(69 94 115);
    --md-tertiary-dim: rgb(112 63 130);
    --md-tertiary-container: rgb(230 172 248);
    --md-tertiary-fixed: rgb(230 172 248);
    --md-tertiary-fixed-dim: rgb(216 159 234);
    --md-on-tertiary: rgb(255 247 251);
    --md-on-tertiary-container: rgb(87 40 106);
    --md-on-tertiary-fixed: rgb(64 16 83);
    --md-on-tertiary-fixed-variant: rgb(97 49 115);
    --md-error: rgb(187 27 27);
    --md-error-container: rgb(254 78 68);
    --md-on-error: rgb(255 247 246);
    --md-on-error-container: rgb(87 0 3);
    --md-outline: rgb(120 123 127);
    --md-outline-variant: rgb(175 178 182);
    --md-shadow: rgb(0 0 0);
    --md-scrim: rgb(0 0 0);
    --md-primary-hover: rgb(42 111 157);
    --md-primary-focus: rgb(54 117 161);
    --md-primary-pressed: rgb(54 117 161);
    --md-primary-dragged: rgb(65 123 165);
    --md-primary-disabled: rgb(54 117 161);
    --md-secondary-hover: rgb(85 109 129);
    --md-secondary-focus: rgb(91 114 134);
    --md-secondary-pressed: rgb(91 114 134);
    --md-secondary-dragged: rgb(98 120 139);
    --md-secondary-disabled: rgb(91 114 134);
    --md-tertiary-hover: rgb(135 88 151);
    --md-tertiary-focus: rgb(140 94 155);
    --md-tertiary-pressed: rgb(140 94 155);
    --md-tertiary-dragged: rgb(145 101 159);
    --md-tertiary-disabled: rgb(140 94 155);
    --md-error-hover: rgb(195 54 42);
    --md-error-focus: rgb(199 64 50);
    --md-error-pressed: rgb(199 64 50);
    --md-error-dragged: rgb(203 74 58);
    --md-error-disabled: rgb(199 64 50);
    --md-surface-hover: rgb(229 231 236);
    --md-surface-focus: rgb(220 222 227);
    --md-surface-pressed: rgb(220 222 227);
    --md-surface-dragged: rgb(211 214 218);
    --md-surface-disabled: rgb(220 222 227);
    --md-surface-variant-hover: rgb(212 214 219);
    --md-surface-variant-focus: rgb(207 209 214);
    --md-surface-variant-pressed: rgb(207 209 214);
    --md-surface-variant-dragged: rgb(201 203 208);
    --md-surface-variant-disabled: rgb(207 209 214);
    --md-primary-container-hover: rgb(105 177 230);
    --md-primary-container-focus: rgb(101 171 223);
    --md-primary-container-pressed: rgb(101 171 223);
    --md-primary-container-dragged: rgb(96 165 216);
    --md-primary-container-disabled: rgb(101 171 223);
    --md-secondary-container-hover: rgb(190 217 242);
    --md-secondary-container-focus: rgb(184 211 235);
    --md-secondary-container-pressed: rgb(184 211 235);
    --md-secondary-container-dragged: rgb(178 204 229);
    --md-secondary-container-disabled: rgb(184 211 235);
    --md-tertiary-container-hover: rgb(217 160 235);
    --md-tertiary-container-focus: rgb(211 155 229);
    --md-tertiary-container-pressed: rgb(211 155 229);
    --md-tertiary-container-dragged: rgb(205 149 223);
    --md-tertiary-container-disabled: rgb(211 155 229);
    --md-error-container-hover: rgb(239 71 62);
    --md-error-container-focus: rgb(232 68 60);
    --md-error-container-pressed: rgb(232 68 60);
    --md-error-container-dragged: rgb(225 65 57);
    --md-error-container-disabled: rgb(232 68 60);
    --md-shadow-rgb: 0 0 0;
    --md-scrim-rgb: 0 0 0;
  }
  @media not print {
    .dark, .dark * {
      --md-primary: rgb(115 189 244);
      --md-primary-300: rgb(104 178 233);
      --md-primary-400: rgb(74 151 204);
      --md-primary-500: rgb(42 125 177);
      --md-secondary: rgb(175 202 226);
      --md-secondary-700: rgb(47 73 93);
      --md-secondary-800: rgb(24 51 70);
      --md-tertiary: rgb(240 189 255);
      --md-tertiary-100: rgb(248 216 255);
      --md-tertiary-200: rgb(231 181 246);
      --md-tertiary-300: rgb(202 154 217);
      --md-tertiary-400: rgb(174 128 189);
      --md-tertiary-500: rgb(147 103 162);
      --md-tertiary-600: rgb(120 78 136);
      --md-tertiary-700: rgb(95 54 110);
      --md-tertiary-800: rgb(70 31 86);
      --md-tertiary-900: rgb(47 7 63);
      --md-tertiary-950: rgb(34 0 49);
      --md-surface: rgb(11 15 18);
      --md-surface-dim: rgb(11 15 18);
      --md-surface-bright: rgb(41 44 48);
      --md-surface-variant: rgb(35 38 42);
      --md-surface-container-lowest: rgb(0 0 0);
      --md-surface-container-low: rgb(16 20 23);
      --md-surface-container: rgb(22 26 29);
      --md-surface-container-high: rgb(28 32 35);
      --md-surface-container-highest: rgb(35 38 42);
      --md-inverse-surface: rgb(247 249 254);
      --md-on-surface: rgb(227 229 234);
      --md-on-surface-dim: rgb(227 229 234);
      --md-on-surface-bright: rgb(227 229 234);
      --md-on-surface-variant: rgb(145 148 152);
      --md-on-surface-container-lowest: rgb(227 229 234);
      --md-on-surface-container-low: rgb(227 229 234);
      --md-on-surface-container: rgb(227 229 234);
      --md-on-surface-container-high: rgb(227 229 234);
      --md-on-surface-container-highest: rgb(227 229 234);
      --md-on-inverse-surface: rgb(82 85 89);
      --md-primary-dim: rgb(101 176 230);
      --md-primary-container: rgb(92 167 221);
      --md-inverse-primary: rgb(0 101 149);
      --md-on-primary: rgb(0 56 85);
      --md-on-primary-container: rgb(0 37 59);
      --md-secondary-dim: rgb(161 188 212);
      --md-secondary-container: rgb(36 62 81);
      --md-on-secondary: rgb(41 67 86);
      --md-on-secondary-container: rgb(168 194 218);
      --md-tertiary-dim: rgb(230 172 248);
      --md-on-tertiary: rgb(97 49 115);
      --md-error: rgb(255 113 100);
      --md-error-container: rgb(172 12 18);
      --md-on-error: rgb(74 0 2);
      --md-on-error-container: rgb(255 184 176);
      --md-outline: rgb(115 118 122);
      --md-outline-variant: rgb(69 72 76);
      --md-primary-hover: rgb(105 177 230);
      --md-primary-focus: rgb(101 171 223);
      --md-primary-pressed: rgb(101 171 223);
      --md-primary-dragged: rgb(96 165 216);
      --md-primary-disabled: rgb(101 171 223);
      --md-secondary-hover: rgb(163 190 213);
      --md-secondary-focus: rgb(157 184 208);
      --md-secondary-pressed: rgb(157 184 208);
      --md-secondary-dragged: rgb(152 178 202);
      --md-secondary-disabled: rgb(157 184 208);
      --md-tertiary-hover: rgb(227 176 243);
      --md-tertiary-focus: rgb(221 171 237);
      --md-tertiary-pressed: rgb(221 171 237);
      --md-tertiary-dragged: rgb(215 165 231);
      --md-tertiary-disabled: rgb(221 171 237);
      --md-error-hover: rgb(239 103 91);
      --md-error-focus: rgb(231 98 87);
      --md-error-pressed: rgb(231 98 87);
      --md-error-dragged: rgb(223 94 83);
      --md-error-disabled: rgb(231 98 87);
      --md-surface-hover: rgb(27 29 32);
      --md-surface-focus: rgb(34 37 39);
      --md-surface-pressed: rgb(34 37 39);
      --md-surface-dragged: rgb(41 44 47);
      --md-surface-disabled: rgb(34 37 39);
      --md-surface-variant-hover: rgb(42 45 49);
      --md-surface-variant-focus: rgb(46 49 53);
      --md-surface-variant-pressed: rgb(46 49 53);
      --md-surface-variant-dragged: rgb(50 53 57);
      --md-surface-variant-disabled: rgb(46 49 53);
      --md-primary-container-hover: rgb(84 155 206);
      --md-primary-container-focus: rgb(80 149 199);
      --md-primary-container-pressed: rgb(80 149 199);
      --md-primary-container-dragged: rgb(76 144 192);
      --md-primary-container-disabled: rgb(80 149 199);
      --md-secondary-container-hover: rgb(45 71 91);
      --md-secondary-container-focus: rgb(50 76 96);
      --md-secondary-container-pressed: rgb(50 76 96);
      --md-secondary-container-dragged: rgb(55 81 101);
      --md-secondary-container-disabled: rgb(50 76 96);
      --md-error-container-hover: rgb(179 36 29);
      --md-error-container-focus: rgb(183 45 35);
      --md-error-container-pressed: rgb(183 45 35);
      --md-error-container-dragged: rgb(187 53 41);
      --md-error-container-disabled: rgb(183 45 35);
    }
  }
  :root {
    --md-z-navigation-persistent: var(--md-z-navigation-persistent, 1000);
    --md-z-navigation-floating: var(--md-z-navigation-floating, 1050);
    --md-z-navigation-top: var(--md-z-navigation-top, 1100);
    --md-z-drawer: var(--md-z-drawer, 1200);
    --md-z-modal: var(--md-z-modal, 1300);
    --md-z-snackbar: var(--md-z-snackbar, 1400);
    --md-z-tooltip: var(--md-z-tooltip, 1500);
    --md-z-scrim-base: var(--md-z-scrim-base, 950);
    --md-z-scrim-content: var(--md-z-scrim-content, 975);
    --md-z-scrim-drawer: var(--md-z-scrim-drawer, 1175);
    --md-z-scrim-modal: var(--md-z-scrim-modal, 1275);
    --md-z-scrim-elevated: var(--md-z-scrim-elevated, 1350);
    --md-z-scrim-system: var(--md-z-scrim-system, 1450);
  }

  @keyframes ripple {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: var(--md-ripple-opacity, 0.12);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }
}

@theme {
  --color-*: initial;

  --color-black: #000;
  --color-current: currentcolor;
  --color-inherit: inherit;
  --color-transparent: transparent;
  --color-white: #fff;

  --color-error: var(--md-error);
  --color-error-container: var(--md-error-container);
  --color-error-container-disabled: var(--md-error-container-disabled);
  --color-error-container-dragged: var(--md-error-container-dragged);
  --color-error-container-focus: var(--md-error-container-focus);
  --color-error-container-hover: var(--md-error-container-hover);
  --color-error-container-pressed: var(--md-error-container-pressed);
  --color-error-disabled: var(--md-error-disabled);
  --color-error-dragged: var(--md-error-dragged);
  --color-error-focus: var(--md-error-focus);
  --color-error-hover: var(--md-error-hover);
  --color-error-pressed: var(--md-error-pressed);
  --color-inverse-primary: var(--md-inverse-primary);
  --color-inverse-surface: var(--md-inverse-surface);
  --color-inverse-surface-disabled: var(--md-inverse-surface-disabled);
  --color-inverse-surface-dragged: var(--md-inverse-surface-dragged);
  --color-inverse-surface-focus: var(--md-inverse-surface-focus);
  --color-inverse-surface-hover: var(--md-inverse-surface-hover);
  --color-inverse-surface-pressed: var(--md-inverse-surface-pressed);
  --color-neutral: var(--md-neutral);
  --color-neutral-50: var(--md-neutral-50);
  --color-neutral-100: var(--md-neutral-100);
  --color-neutral-200: var(--md-neutral-200);
  --color-neutral-300: var(--md-neutral-300);
  --color-neutral-400: var(--md-neutral-400);
  --color-neutral-500: var(--md-neutral-500);
  --color-neutral-600: var(--md-neutral-600);
  --color-neutral-700: var(--md-neutral-700);
  --color-neutral-800: var(--md-neutral-800);
  --color-neutral-900: var(--md-neutral-900);
  --color-neutral-950: var(--md-neutral-950);
  --color-neutral-disabled: var(--md-neutral-disabled);
  --color-neutral-dragged: var(--md-neutral-dragged);
  --color-neutral-focus: var(--md-neutral-focus);
  --color-neutral-hover: var(--md-neutral-hover);
  --color-neutral-pressed: var(--md-neutral-pressed);
  --color-neutral-variant: var(--md-neutral-variant);
  --color-neutral-variant-50: var(--md-neutral-variant-50);
  --color-neutral-variant-100: var(--md-neutral-variant-100);
  --color-neutral-variant-200: var(--md-neutral-variant-200);
  --color-neutral-variant-300: var(--md-neutral-variant-300);
  --color-neutral-variant-400: var(--md-neutral-variant-400);
  --color-neutral-variant-500: var(--md-neutral-variant-500);
  --color-neutral-variant-600: var(--md-neutral-variant-600);
  --color-neutral-variant-700: var(--md-neutral-variant-700);
  --color-neutral-variant-800: var(--md-neutral-variant-800);
  --color-neutral-variant-900: var(--md-neutral-variant-900);
  --color-neutral-variant-950: var(--md-neutral-variant-950);
  --color-neutral-variant-disabled: var(--md-neutral-variant-disabled);
  --color-neutral-variant-dragged: var(--md-neutral-variant-dragged);
  --color-neutral-variant-focus: var(--md-neutral-variant-focus);
  --color-neutral-variant-hover: var(--md-neutral-variant-hover);
  --color-neutral-variant-pressed: var(--md-neutral-variant-pressed);
  --color-on-error: var(--md-on-error);
  --color-on-error-container: var(--md-on-error-container);
  --color-on-inverse-surface: var(--md-on-inverse-surface);
  --color-on-primary: var(--md-on-primary);
  --color-on-primary-container: var(--md-on-primary-container);
  --color-on-primary-fixed: var(--md-on-primary-fixed);
  --color-on-primary-fixed-variant: var(--md-on-primary-fixed-variant);
  --color-on-secondary: var(--md-on-secondary);
  --color-on-secondary-container: var(--md-on-secondary-container);
  --color-on-secondary-fixed: var(--md-on-secondary-fixed);
  --color-on-secondary-fixed-variant: var(--md-on-secondary-fixed-variant);
  --color-on-surface: var(--md-on-surface);
  --color-on-surface-bright: var(--md-on-surface-bright);
  --color-on-surface-container: var(--md-on-surface-container);
  --color-on-surface-container-high: var(--md-on-surface-container-high);
  --color-on-surface-container-highest: var(--md-on-surface-container-highest);
  --color-on-surface-container-low: var(--md-on-surface-container-low);
  --color-on-surface-container-lowest: var(--md-on-surface-container-lowest);
  --color-on-surface-dim: var(--md-on-surface-dim);
  --color-on-surface-variant: var(--md-on-surface-variant);
  --color-on-tertiary: var(--md-on-tertiary);
  --color-on-tertiary-container: var(--md-on-tertiary-container);
  --color-on-tertiary-fixed: var(--md-on-tertiary-fixed);
  --color-on-tertiary-fixed-variant: var(--md-on-tertiary-fixed-variant);
  --color-outline: var(--md-outline);
  --color-outline-variant: var(--md-outline-variant);
  --color-primary: var(--md-primary);
  --color-primary-50: var(--md-primary-50);
  --color-primary-100: var(--md-primary-100);
  --color-primary-200: var(--md-primary-200);
  --color-primary-300: var(--md-primary-300);
  --color-primary-400: var(--md-primary-400);
  --color-primary-500: var(--md-primary-500);
  --color-primary-600: var(--md-primary-600);
  --color-primary-700: var(--md-primary-700);
  --color-primary-800: var(--md-primary-800);
  --color-primary-900: var(--md-primary-900);
  --color-primary-950: var(--md-primary-950);
  --color-primary-container: var(--md-primary-container);
  --color-primary-container-disabled: var(--md-primary-container-disabled);
  --color-primary-container-dragged: var(--md-primary-container-dragged);
  --color-primary-container-focus: var(--md-primary-container-focus);
  --color-primary-container-hover: var(--md-primary-container-hover);
  --color-primary-container-pressed: var(--md-primary-container-pressed);
  --color-primary-dim: var(--md-primary-dim);
  --color-primary-disabled: var(--md-primary-disabled);
  --color-primary-dragged: var(--md-primary-dragged);
  --color-primary-fixed: var(--md-primary-fixed);
  --color-primary-fixed-dim: var(--md-primary-fixed-dim);
  --color-primary-fixed-dim-disabled: var(--md-primary-fixed-dim-disabled);
  --color-primary-fixed-dim-dragged: var(--md-primary-fixed-dim-dragged);
  --color-primary-fixed-dim-focus: var(--md-primary-fixed-dim-focus);
  --color-primary-fixed-dim-hover: var(--md-primary-fixed-dim-hover);
  --color-primary-fixed-dim-pressed: var(--md-primary-fixed-dim-pressed);
  --color-primary-fixed-disabled: var(--md-primary-fixed-disabled);
  --color-primary-fixed-dragged: var(--md-primary-fixed-dragged);
  --color-primary-fixed-focus: var(--md-primary-fixed-focus);
  --color-primary-fixed-hover: var(--md-primary-fixed-hover);
  --color-primary-fixed-pressed: var(--md-primary-fixed-pressed);
  --color-primary-focus: var(--md-primary-focus);
  --color-primary-hover: var(--md-primary-hover);
  --color-primary-pressed: var(--md-primary-pressed);
  --color-scrim: var(--md-scrim);
  --color-secondary: var(--md-secondary);
  --color-secondary-50: var(--md-secondary-50);
  --color-secondary-100: var(--md-secondary-100);
  --color-secondary-200: var(--md-secondary-200);
  --color-secondary-300: var(--md-secondary-300);
  --color-secondary-400: var(--md-secondary-400);
  --color-secondary-500: var(--md-secondary-500);
  --color-secondary-600: var(--md-secondary-600);
  --color-secondary-700: var(--md-secondary-700);
  --color-secondary-800: var(--md-secondary-800);
  --color-secondary-900: var(--md-secondary-900);
  --color-secondary-950: var(--md-secondary-950);
  --color-secondary-container: var(--md-secondary-container);
  --color-secondary-container-disabled: var(--md-secondary-container-disabled);
  --color-secondary-container-dragged: var(--md-secondary-container-dragged);
  --color-secondary-container-focus: var(--md-secondary-container-focus);
  --color-secondary-container-hover: var(--md-secondary-container-hover);
  --color-secondary-container-pressed: var(--md-secondary-container-pressed);
  --color-secondary-dim: var(--md-secondary-dim);
  --color-secondary-disabled: var(--md-secondary-disabled);
  --color-secondary-dragged: var(--md-secondary-dragged);
  --color-secondary-fixed: var(--md-secondary-fixed);
  --color-secondary-fixed-dim: var(--md-secondary-fixed-dim);
  --color-secondary-fixed-dim-disabled: var(--md-secondary-fixed-dim-disabled);
  --color-secondary-fixed-dim-dragged: var(--md-secondary-fixed-dim-dragged);
  --color-secondary-fixed-dim-focus: var(--md-secondary-fixed-dim-focus);
  --color-secondary-fixed-dim-hover: var(--md-secondary-fixed-dim-hover);
  --color-secondary-fixed-dim-pressed: var(--md-secondary-fixed-dim-pressed);
  --color-secondary-fixed-disabled: var(--md-secondary-fixed-disabled);
  --color-secondary-fixed-dragged: var(--md-secondary-fixed-dragged);
  --color-secondary-fixed-focus: var(--md-secondary-fixed-focus);
  --color-secondary-fixed-hover: var(--md-secondary-fixed-hover);
  --color-secondary-fixed-pressed: var(--md-secondary-fixed-pressed);
  --color-secondary-focus: var(--md-secondary-focus);
  --color-secondary-hover: var(--md-secondary-hover);
  --color-secondary-pressed: var(--md-secondary-pressed);
  --color-shadow: var(--md-shadow);
  --color-surface: var(--md-surface);
  --color-surface-bright: var(--md-surface-bright);
  --color-surface-bright-disabled: var(--md-surface-bright-disabled);
  --color-surface-bright-dragged: var(--md-surface-bright-dragged);
  --color-surface-bright-focus: var(--md-surface-bright-focus);
  --color-surface-bright-hover: var(--md-surface-bright-hover);
  --color-surface-bright-pressed: var(--md-surface-bright-pressed);
  --color-surface-container: var(--md-surface-container);
  --color-surface-container-disabled: var(--md-surface-container-disabled);
  --color-surface-container-dragged: var(--md-surface-container-dragged);
  --color-surface-container-focus: var(--md-surface-container-focus);
  --color-surface-container-high: var(--md-surface-container-high);
  --color-surface-container-high-disabled: var(--md-surface-container-high-disabled);
  --color-surface-container-high-dragged: var(--md-surface-container-high-dragged);
  --color-surface-container-high-focus: var(--md-surface-container-high-focus);
  --color-surface-container-high-hover: var(--md-surface-container-high-hover);
  --color-surface-container-high-pressed: var(--md-surface-container-high-pressed);
  --color-surface-container-highest: var(--md-surface-container-highest);
  --color-surface-container-highest-disabled: var(--md-surface-container-highest-disabled);
  --color-surface-container-highest-dragged: var(--md-surface-container-highest-dragged);
  --color-surface-container-highest-focus: var(--md-surface-container-highest-focus);
  --color-surface-container-highest-hover: var(--md-surface-container-highest-hover);
  --color-surface-container-highest-pressed: var(--md-surface-container-highest-pressed);
  --color-surface-container-hover: var(--md-surface-container-hover);
  --color-surface-container-low: var(--md-surface-container-low);
  --color-surface-container-low-disabled: var(--md-surface-container-low-disabled);
  --color-surface-container-low-dragged: var(--md-surface-container-low-dragged);
  --color-surface-container-low-focus: var(--md-surface-container-low-focus);
  --color-surface-container-low-hover: var(--md-surface-container-low-hover);
  --color-surface-container-low-pressed: var(--md-surface-container-low-pressed);
  --color-surface-container-lowest: var(--md-surface-container-lowest);
  --color-surface-container-lowest-disabled: var(--md-surface-container-lowest-disabled);
  --color-surface-container-lowest-dragged: var(--md-surface-container-lowest-dragged);
  --color-surface-container-lowest-focus: var(--md-surface-container-lowest-focus);
  --color-surface-container-lowest-hover: var(--md-surface-container-lowest-hover);
  --color-surface-container-lowest-pressed: var(--md-surface-container-lowest-pressed);
  --color-surface-container-pressed: var(--md-surface-container-pressed);
  --color-surface-dim: var(--md-surface-dim);
  --color-surface-dim-disabled: var(--md-surface-dim-disabled);
  --color-surface-dim-dragged: var(--md-surface-dim-dragged);
  --color-surface-dim-focus: var(--md-surface-dim-focus);
  --color-surface-dim-hover: var(--md-surface-dim-hover);
  --color-surface-dim-pressed: var(--md-surface-dim-pressed);
  --color-surface-disabled: var(--md-surface-disabled);
  --color-surface-dragged: var(--md-surface-dragged);
  --color-surface-focus: var(--md-surface-focus);
  --color-surface-hover: var(--md-surface-hover);
  --color-surface-pressed: var(--md-surface-pressed);
  --color-surface-variant: var(--md-surface-variant);
  --color-surface-variant-disabled: var(--md-surface-variant-disabled);
  --color-surface-variant-dragged: var(--md-surface-variant-dragged);
  --color-surface-variant-focus: var(--md-surface-variant-focus);
  --color-surface-variant-hover: var(--md-surface-variant-hover);
  --color-surface-variant-pressed: var(--md-surface-variant-pressed);
  --color-tertiary: var(--md-tertiary);
  --color-tertiary-50: var(--md-tertiary-50);
  --color-tertiary-100: var(--md-tertiary-100);
  --color-tertiary-200: var(--md-tertiary-200);
  --color-tertiary-300: var(--md-tertiary-300);
  --color-tertiary-400: var(--md-tertiary-400);
  --color-tertiary-500: var(--md-tertiary-500);
  --color-tertiary-600: var(--md-tertiary-600);
  --color-tertiary-700: var(--md-tertiary-700);
  --color-tertiary-800: var(--md-tertiary-800);
  --color-tertiary-900: var(--md-tertiary-900);
  --color-tertiary-950: var(--md-tertiary-950);
  --color-tertiary-container: var(--md-tertiary-container);
  --color-tertiary-container-disabled: var(--md-tertiary-container-disabled);
  --color-tertiary-container-dragged: var(--md-tertiary-container-dragged);
  --color-tertiary-container-focus: var(--md-tertiary-container-focus);
  --color-tertiary-container-hover: var(--md-tertiary-container-hover);
  --color-tertiary-container-pressed: var(--md-tertiary-container-pressed);
  --color-tertiary-dim: var(--md-tertiary-dim);
  --color-tertiary-disabled: var(--md-tertiary-disabled);
  --color-tertiary-dragged: var(--md-tertiary-dragged);
  --color-tertiary-fixed: var(--md-tertiary-fixed);
  --color-tertiary-fixed-dim: var(--md-tertiary-fixed-dim);
  --color-tertiary-fixed-dim-disabled: var(--md-tertiary-fixed-dim-disabled);
  --color-tertiary-fixed-dim-dragged: var(--md-tertiary-fixed-dim-dragged);
  --color-tertiary-fixed-dim-focus: var(--md-tertiary-fixed-dim-focus);
  --color-tertiary-fixed-dim-hover: var(--md-tertiary-fixed-dim-hover);
  --color-tertiary-fixed-dim-pressed: var(--md-tertiary-fixed-dim-pressed);
  --color-tertiary-fixed-disabled: var(--md-tertiary-fixed-disabled);
  --color-tertiary-fixed-dragged: var(--md-tertiary-fixed-dragged);
  --color-tertiary-fixed-focus: var(--md-tertiary-fixed-focus);
  --color-tertiary-fixed-hover: var(--md-tertiary-fixed-hover);
  --color-tertiary-fixed-pressed: var(--md-tertiary-fixed-pressed);
  --color-tertiary-focus: var(--md-tertiary-focus);
  --color-tertiary-hover: var(--md-tertiary-hover);
  --color-tertiary-pressed: var(--md-tertiary-pressed);

  --shadow-*: initial;
  --shadow-z1: 0 1px 4px 0 rgb(var(--md-shadow-rgb) / 0.37);
  --shadow-z2: 0 2px 2px 0 rgb(var(--md-shadow-rgb) / 0.20), 0 6px 10px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --shadow: 0 2px 2px 0 rgb(var(--md-shadow-rgb) / 0.20), 0 6px 10px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --shadow-z3: 0 11px 7px 0 rgb(var(--md-shadow-rgb) / 0.19), 0 13px 25px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --shadow-z4: 0 14px 12px 0 rgb(var(--md-shadow-rgb) / 0.17), 0 20px 40px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --shadow-z5: 0 17px 17px 0 rgb(var(--md-shadow-rgb) / 0.15), 0 27px 55px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --shadow-none: 0 0 0 0 transparent;

  --drop-shadow-*: initial;
  --drop-shadow-z1: 0 1px 4px 0 rgb(var(--md-shadow-rgb) / 0.37);
  --drop-shadow-z2: 0 2px 2px 0 rgb(var(--md-shadow-rgb) / 0.20), 0 6px 10px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --drop-shadow: 0 2px 2px 0 rgb(var(--md-shadow-rgb) / 0.20), 0 6px 10px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --drop-shadow-z3: 0 11px 7px 0 rgb(var(--md-shadow-rgb) / 0.19), 0 13px 25px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --drop-shadow-z4: 0 14px 12px 0 rgb(var(--md-shadow-rgb) / 0.17), 0 20px 40px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --drop-shadow-z5: 0 17px 17px 0 rgb(var(--md-shadow-rgb) / 0.15), 0 27px 55px 0 rgb(var(--md-shadow-rgb) / 0.30);
  --drop-shadow-none: 0 0 0 0 transparent;

  --inset-shadow-*: initial;
  --inset-shadow: inset 0 2px 4px 0 rgb(var(--md-shadow-rgb) / 0.20);
  --inset-shadow-none: 0 0 0 0 transparent;
}

@utility surface-primary {
  @apply bg-primary text-on-primary;
}
@utility surface-secondary {
  @apply bg-secondary text-on-secondary;
}
@utility surface-tertiary {
  @apply bg-tertiary text-on-tertiary;
}
@utility surface {
  @apply bg-surface text-on-surface;
}
@utility surface-dim {
  @apply bg-surface-dim text-on-surface-dim;
}
@utility surface-bright {
  @apply bg-surface-bright text-on-surface-bright;
}
@utility surface-variant {
  @apply bg-surface-variant text-on-surface-variant;
}
@utility surface-container-lowest {
  @apply bg-surface-container-lowest text-on-surface-container-lowest;
}
@utility surface-container-low {
  @apply bg-surface-container-low text-on-surface-container-low;
}
@utility surface-container {
  @apply bg-surface-container text-on-surface-container;
}
@utility surface-container-high {
  @apply bg-surface-container-high text-on-surface-container-high;
}
@utility surface-container-highest {
  @apply bg-surface-container-highest text-on-surface-container-highest;
}
@utility surface-inverse {
  @apply bg-inverse-surface text-on-inverse-surface;
}
@utility surface-primary-container {
  @apply bg-primary-container text-on-primary-container;
}
@utility surface-primary-fixed {
  @apply bg-primary-fixed text-on-primary-fixed;
}
@utility surface-secondary-container {
  @apply bg-secondary-container text-on-secondary-container;
}
@utility surface-secondary-fixed {
  @apply bg-secondary-fixed text-on-secondary-fixed;
}
@utility surface-tertiary-container {
  @apply bg-tertiary-container text-on-tertiary-container;
}
@utility surface-tertiary-fixed {
  @apply bg-tertiary-fixed text-on-tertiary-fixed;
}
@utility surface-error {
  @apply bg-error text-on-error;
}
@utility surface-error-container {
  @apply bg-error-container text-on-error-container;
}
@utility surface-primary-dim {
  @apply bg-primary-dim text-on-primary;
}
@utility surface-secondary-dim {
  @apply bg-secondary-dim text-on-secondary;
}
@utility surface-tertiary-dim {
  @apply bg-tertiary-dim text-on-tertiary;
}
@utility surface-primary-fixed-variant {
  @apply bg-primary-fixed text-on-primary-fixed-variant;
}
@utility surface-secondary-fixed-variant {
  @apply bg-secondary-fixed text-on-secondary-fixed-variant;
}
@utility surface-tertiary-fixed-variant {
  @apply bg-tertiary-fixed text-on-tertiary-fixed-variant;
}
@utility surface-primary-fixed-dim {
  @apply bg-primary-fixed-dim text-on-primary-fixed;
}
@utility surface-primary-fixed-dim-variant {
  @apply bg-primary-fixed-dim text-on-primary-fixed-variant;
}
@utility surface-secondary-fixed-dim {
  @apply bg-secondary-fixed-dim text-on-secondary-fixed;
}
@utility surface-secondary-fixed-dim-variant {
  @apply bg-secondary-fixed-dim text-on-secondary-fixed-variant;
}
@utility surface-tertiary-fixed-dim {
  @apply bg-tertiary-fixed-dim text-on-tertiary-fixed;
}
@utility surface-tertiary-fixed-dim-variant {
  @apply bg-tertiary-fixed-dim text-on-tertiary-fixed-variant;
}
@utility surface-inverse-primary {
  @apply bg-inverse-surface text-inverse-primary;
}

@utility interactive-surface-primary {
  @apply bg-primary text-on-primary border-on-primary hover:bg-primary-hover focus:bg-primary-focus focus-visible:bg-primary-focus focus-within:bg-primary-focus active:bg-primary-pressed disabled:bg-primary-disabled disabled:text-on-primary/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-secondary {
  @apply bg-secondary text-on-secondary border-on-secondary hover:bg-secondary-hover focus:bg-secondary-focus focus-visible:bg-secondary-focus focus-within:bg-secondary-focus active:bg-secondary-pressed disabled:bg-secondary-disabled disabled:text-on-secondary/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-tertiary {
  @apply bg-tertiary text-on-tertiary border-on-tertiary hover:bg-tertiary-hover focus:bg-tertiary-focus focus-visible:bg-tertiary-focus focus-within:bg-tertiary-focus active:bg-tertiary-pressed disabled:bg-tertiary-disabled disabled:text-on-tertiary/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface {
  @apply bg-surface text-on-surface border-on-surface hover:bg-surface-hover focus:bg-surface-focus focus-visible:bg-surface-focus focus-within:bg-surface-focus active:bg-surface-pressed disabled:bg-surface-disabled disabled:text-on-surface/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-dim {
  @apply bg-surface-dim text-on-surface-dim border-on-surface-dim hover:bg-surface-dim-hover focus:bg-surface-dim-focus focus-visible:bg-surface-dim-focus focus-within:bg-surface-dim-focus active:bg-surface-dim-pressed disabled:bg-surface-dim-disabled disabled:text-on-surface-dim/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-bright {
  @apply bg-surface-bright text-on-surface-bright border-on-surface-bright hover:bg-surface-bright-hover focus:bg-surface-bright-focus focus-visible:bg-surface-bright-focus focus-within:bg-surface-bright-focus active:bg-surface-bright-pressed disabled:bg-surface-bright-disabled disabled:text-on-surface-bright/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-variant {
  @apply bg-surface-variant text-on-surface-variant border-on-surface-variant hover:bg-surface-variant-hover focus:bg-surface-variant-focus focus-visible:bg-surface-variant-focus focus-within:bg-surface-variant-focus active:bg-surface-variant-pressed disabled:bg-surface-variant-disabled disabled:text-on-surface-variant/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-container-lowest {
  @apply bg-surface-container-lowest text-on-surface-container-lowest border-on-surface-container-lowest hover:bg-surface-container-lowest-hover focus:bg-surface-container-lowest-focus focus-visible:bg-surface-container-lowest-focus focus-within:bg-surface-container-lowest-focus active:bg-surface-container-lowest-pressed disabled:bg-surface-container-lowest-disabled disabled:text-on-surface-container-lowest/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-container-low {
  @apply bg-surface-container-low text-on-surface-container-low border-on-surface-container-low hover:bg-surface-container-low-hover focus:bg-surface-container-low-focus focus-visible:bg-surface-container-low-focus focus-within:bg-surface-container-low-focus active:bg-surface-container-low-pressed disabled:bg-surface-container-low-disabled disabled:text-on-surface-container-low/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-container {
  @apply bg-surface-container text-on-surface-container border-on-surface-container hover:bg-surface-container-hover focus:bg-surface-container-focus focus-visible:bg-surface-container-focus focus-within:bg-surface-container-focus active:bg-surface-container-pressed disabled:bg-surface-container-disabled disabled:text-on-surface-container/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-container-high {
  @apply bg-surface-container-high text-on-surface-container-high border-on-surface-container-high hover:bg-surface-container-high-hover focus:bg-surface-container-high-focus focus-visible:bg-surface-container-high-focus focus-within:bg-surface-container-high-focus active:bg-surface-container-high-pressed disabled:bg-surface-container-high-disabled disabled:text-on-surface-container-high/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-container-highest {
  @apply bg-surface-container-highest text-on-surface-container-highest border-on-surface-container-highest hover:bg-surface-container-highest-hover focus:bg-surface-container-highest-focus focus-visible:bg-surface-container-highest-focus focus-within:bg-surface-container-highest-focus active:bg-surface-container-highest-pressed disabled:bg-surface-container-highest-disabled disabled:text-on-surface-container-highest/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-inverse {
  @apply bg-inverse-surface text-on-inverse-surface border-on-inverse-surface hover:bg-inverse-surface-hover focus:bg-inverse-surface-focus focus-visible:bg-inverse-surface-focus focus-within:bg-inverse-surface-focus active:bg-inverse-surface-pressed disabled:bg-inverse-surface-disabled disabled:text-on-inverse-surface/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-primary-container {
  @apply bg-primary-container text-on-primary-container border-on-primary-container hover:bg-primary-container-hover focus:bg-primary-container-focus focus-visible:bg-primary-container-focus focus-within:bg-primary-container-focus active:bg-primary-container-pressed disabled:bg-primary-container-disabled disabled:text-on-primary-container/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-primary-fixed {
  @apply bg-primary-fixed text-on-primary-fixed border-on-primary-fixed hover:bg-primary-fixed-hover focus:bg-primary-fixed-focus focus-visible:bg-primary-fixed-focus focus-within:bg-primary-fixed-focus active:bg-primary-fixed-pressed disabled:bg-primary-fixed-disabled disabled:text-on-primary-fixed/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-secondary-container {
  @apply bg-secondary-container text-on-secondary-container border-on-secondary-container hover:bg-secondary-container-hover focus:bg-secondary-container-focus focus-visible:bg-secondary-container-focus focus-within:bg-secondary-container-focus active:bg-secondary-container-pressed disabled:bg-secondary-container-disabled disabled:text-on-secondary-container/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-secondary-fixed {
  @apply bg-secondary-fixed text-on-secondary-fixed border-on-secondary-fixed hover:bg-secondary-fixed-hover focus:bg-secondary-fixed-focus focus-visible:bg-secondary-fixed-focus focus-within:bg-secondary-fixed-focus active:bg-secondary-fixed-pressed disabled:bg-secondary-fixed-disabled disabled:text-on-secondary-fixed/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-tertiary-container {
  @apply bg-tertiary-container text-on-tertiary-container border-on-tertiary-container hover:bg-tertiary-container-hover focus:bg-tertiary-container-focus focus-visible:bg-tertiary-container-focus focus-within:bg-tertiary-container-focus active:bg-tertiary-container-pressed disabled:bg-tertiary-container-disabled disabled:text-on-tertiary-container/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-tertiary-fixed {
  @apply bg-tertiary-fixed text-on-tertiary-fixed border-on-tertiary-fixed hover:bg-tertiary-fixed-hover focus:bg-tertiary-fixed-focus focus-visible:bg-tertiary-fixed-focus focus-within:bg-tertiary-fixed-focus active:bg-tertiary-fixed-pressed disabled:bg-tertiary-fixed-disabled disabled:text-on-tertiary-fixed/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-error {
  @apply bg-error text-on-error border-on-error hover:bg-error-hover focus:bg-error-focus focus-visible:bg-error-focus focus-within:bg-error-focus active:bg-error-pressed disabled:bg-error-disabled disabled:text-on-error/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-error-container {
  @apply bg-error-container text-on-error-container border-on-error-container hover:bg-error-container-hover focus:bg-error-container-focus focus-visible:bg-error-container-focus focus-within:bg-error-container-focus active:bg-error-container-pressed disabled:bg-error-container-disabled disabled:text-on-error-container/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-primary-fixed-variant {
  @apply bg-primary-fixed text-on-primary-fixed-variant border-on-primary-fixed-variant hover:bg-primary-fixed-hover focus:bg-primary-fixed-focus focus-visible:bg-primary-fixed-focus focus-within:bg-primary-fixed-focus active:bg-primary-fixed-pressed disabled:bg-primary-fixed-disabled disabled:text-on-primary-fixed-variant/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-secondary-fixed-variant {
  @apply bg-secondary-fixed text-on-secondary-fixed-variant border-on-secondary-fixed-variant hover:bg-secondary-fixed-hover focus:bg-secondary-fixed-focus focus-visible:bg-secondary-fixed-focus focus-within:bg-secondary-fixed-focus active:bg-secondary-fixed-pressed disabled:bg-secondary-fixed-disabled disabled:text-on-secondary-fixed-variant/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-tertiary-fixed-variant {
  @apply bg-tertiary-fixed text-on-tertiary-fixed-variant border-on-tertiary-fixed-variant hover:bg-tertiary-fixed-hover focus:bg-tertiary-fixed-focus focus-visible:bg-tertiary-fixed-focus focus-within:bg-tertiary-fixed-focus active:bg-tertiary-fixed-pressed disabled:bg-tertiary-fixed-disabled disabled:text-on-tertiary-fixed-variant/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}
@utility interactive-surface-inverse-primary {
  @apply bg-inverse-surface text-inverse-primary border-inverse-primary hover:bg-inverse-surface-hover focus:bg-inverse-surface-focus focus-visible:bg-inverse-surface-focus focus-within:bg-inverse-surface-focus active:bg-inverse-surface-pressed disabled:bg-inverse-surface-disabled disabled:text-inverse-primary/38 transition-colors duration-[var(--md-state-transition-duration,150ms)];
}

@utility scrim-* {
  @apply fixed inset-0;
  z-index: --value(integer, [integer]);
  background-color: rgb(var(--md-scrim-rgb) / var(--md-scrim-opacity, 32%));
  --md-scrim-opacity: --modifier([percentage]);
}
@utility scrim-base {
  @apply fixed inset-0;
  z-index: var(--md-z-scrim-base);
  background-color: rgb(var(--md-scrim-rgb) / var(--md-scrim-opacity, 32%));
  --md-scrim-opacity: --modifier([percentage]);
}
@utility scrim-content {
  @apply fixed inset-0;
  z-index: var(--md-z-scrim-content);
  background-color: rgb(var(--md-scrim-rgb) / var(--md-scrim-opacity, 32%));
  --md-scrim-opacity: --modifier([percentage]);
}
@utility scrim-drawer {
  @apply fixed inset-0;
  z-index: var(--md-z-scrim-drawer);
  background-color: rgb(var(--md-scrim-rgb) / var(--md-scrim-opacity, 32%));
  --md-scrim-opacity: --modifier([percentage]);
}
@utility scrim-modal {
  @apply fixed inset-0;
  z-index: var(--md-z-scrim-modal);
  background-color: rgb(var(--md-scrim-rgb) / var(--md-scrim-opacity, 32%));
  --md-scrim-opacity: --modifier([percentage]);
}
@utility scrim-elevated {
  @apply fixed inset-0;
  z-index: var(--md-z-scrim-elevated);
  background-color: rgb(var(--md-scrim-rgb) / var(--md-scrim-opacity, 32%));
  --md-scrim-opacity: --modifier([percentage]);
}
@utility scrim-system {
  @apply fixed inset-0;
  z-index: var(--md-z-scrim-system);
  background-color: rgb(var(--md-scrim-rgb) / var(--md-scrim-opacity, 32%));
  --md-scrim-opacity: --modifier([percentage]);
}
@utility z-navigation-persistent {
  z-index: var(--md-z-navigation-persistent);
}
@utility z-navigation-floating {
  z-index: var(--md-z-navigation-floating);
}
@utility z-navigation-top {
  z-index: var(--md-z-navigation-top);
}
@utility z-drawer {
  z-index: var(--md-z-drawer);
}
@utility z-modal {
  z-index: var(--md-z-modal);
}
@utility z-snackbar {
  z-index: var(--md-z-snackbar);
}
@utility z-tooltip {
  z-index: var(--md-z-tooltip);
}

@utility ripple-effect {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background-color: currentColor;
  animation: ripple var(--md-ripple-duration, 600ms) ease-out;
  will-change: transform, opacity;
}

@utility shape-none {
  border-radius: var(--md-shape-none, 0px);
}
@utility shape-extra-small {
  border-radius: var(--md-shape-extra-small, 4px);
}
@utility shape-squircle-extra-small {
  mask-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 30 0 L 170 0 C 186.56854249493 0 200 13.43145750507 200 30 L 200 170 C 200 186.56854249493 186.56854249493 200 170 200 L 30 200 C 13.43145750507 200 0 186.56854249493 0 170 L 0 30 C 0 13.43145750507 13.43145750507 0 30 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 30 0 L 170 0 C 186.56854249493 0 200 13.43145750507 200 30 L 200 170 C 200 186.56854249493 186.56854249493 200 170 200 L 30 200 C 13.43145750507 200 0 186.56854249493 0 170 L 0 30 C 0 13.43145750507 13.43145750507 0 30 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  --md-shape-family-extra-small: squircle;
  @supports not (mask-image: url()) {
    border-radius: var(--md-shape-extra-small, 4px);
  }
}
@utility shape-small {
  border-radius: var(--md-shape-small, 8px);
}
@utility shape-squircle-small {
  mask-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 40 0 L 160 0 C 182.09138999324 0 200 17.90861000676 200 40 L 200 160 C 200 182.09138999324 182.09138999324 200 160 200 L 40 200 C 17.90861000676 200 0 182.09138999324 0 160 L 0 40 C 0 17.90861000676 17.90861000676 0 40 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 40 0 L 160 0 C 182.09138999324 0 200 17.90861000676 200 40 L 200 160 C 200 182.09138999324 182.09138999324 200 160 200 L 40 200 C 17.90861000676 200 0 182.09138999324 0 160 L 0 40 C 0 17.90861000676 17.90861000676 0 40 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  --md-shape-family-small: squircle;
  @supports not (mask-image: url()) {
    border-radius: var(--md-shape-small, 8px);
  }
}
@utility shape-medium {
  border-radius: var(--md-shape-medium, 12px);
}
@utility shape-squircle-medium {
  mask-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 50 0 L 150 0 C 177.61423749155 0 200 22.385762508450004 200 50 L 200 150 C 200 177.61423749155 177.61423749155 200 150 200 L 50 200 C 22.385762508450004 200 0 177.61423749155 0 150 L 0 50 C 0 22.385762508450004 22.385762508450004 0 50 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 50 0 L 150 0 C 177.61423749155 0 200 22.385762508450004 200 50 L 200 150 C 200 177.61423749155 177.61423749155 200 150 200 L 50 200 C 22.385762508450004 200 0 177.61423749155 0 150 L 0 50 C 0 22.385762508450004 22.385762508450004 0 50 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  --md-shape-family-medium: squircle;
  @supports not (mask-image: url()) {
    border-radius: var(--md-shape-medium, 12px);
  }
}
@utility shape-large {
  border-radius: var(--md-shape-large, 16px);
}
@utility shape-squircle-large {
  mask-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 60 0 L 140 0 C 173.13708498986 0 200 26.86291501014 200 60 L 200 140 C 200 173.13708498986 173.13708498986 200 140 200 L 60 200 C 26.86291501014 200 0 173.13708498986 0 140 L 0 60 C 0 26.86291501014 26.86291501014 0 60 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+