.undraw {

  --u-pri: var(--brand, #E11D1F);
  --u-pri-d: color-mix(in oklab, var(--u-pri) 75%, #000);
  --u-pri-l: color-mix(in oklab, var(--u-pri) 30%, #FFF);
  --u-dark: #2A2A2E;
  --u-mid: #6F6F75;
  --u-light: #E4E4E7;
  --u-paper: #FAFAF7;
  --u-skin: #FFCDB2;
  --u-skin-d: #E8A98C;
  --u-floor: color-mix(in oklab, currentColor 15%, transparent);

  display: block;
  width: 100%;
  height: auto;
}

html[data-theme="dark"] .undraw {
  --u-dark: #E4E4E7;
  --u-mid: #A1A1AA;
  --u-light: #27272A;
  --u-paper: #18181B;
}

.undraw .u-pri  { fill: var(--u-pri); }
.undraw .u-prid { fill: var(--u-pri-d); }
.undraw .u-pril { fill: var(--u-pri-l); }
.undraw .u-dark { fill: var(--u-dark); }
.undraw .u-mid  { fill: var(--u-mid); }
.undraw .u-light{ fill: var(--u-light); }
.undraw .u-paper{ fill: var(--u-paper); }
.undraw .u-skin { fill: var(--u-skin); }
.undraw .u-skind{ fill: var(--u-skin-d); }
.undraw .u-floor{ stroke: var(--u-floor); fill: none; }
.undraw .u-stroke-d { stroke: var(--u-dark); fill: none; }