:where(html, [palette], [palette] .slice, [palette].slice) {
  --shadow-color: hsla(var(--sh-h), var(--sh-s), var(--sh-l), var(--fainter));
  --shadow-0: 0 0 #0000;
  --shadow-1: 0 1px 2px 0 var(--shadow-color);
  --shadow-2: 0 1px 3px 0 var(--shadow-color),
    0 1px 2px -1px var(--shadow-color);
  --shadow-3: 0 4px 6px -1px var(--shadow-color),
    0 2px 4px -2px var(--shadow-color);
  --shadow-4: 0 10px 15px -3px var(--shadow-color),
    0 4px 6px -4px var(--shadow-color);
  --shadow-5: 0 20px 25px -5px var(--shadow-color),
    0 8px 10px -6px var(--shadow-color);
  --shadow-6: 0 25px 50px -12px var(--shadow-color);
  --shadow-inner: inset 0 2px 4px 0 var(--shadow-color);
}

[palette] .slice-colors-invert,
[palette].slice-colors-invert {
  --shadow-color: hsla(
    var(--sh-h),
    var(--sh-s),
    calc(var(--sh-l) - (var(--sh-l) * var(--delta))),
    var(--faint)
  );
}

.shadow-0 { box-shadow: var(--shadow-0); }
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.shadow-3 { box-shadow: var(--shadow-3); }
.shadow-4 { box-shadow: var(--shadow-4); }
.shadow-5 { box-shadow: var(--shadow-5); }
.shadow-6 { box-shadow: var(--shadow-6); }
.shadow-inner {box-shadow: var(--shadow-inner); }

.hover-shadow-0:hover { box-shadow: var(--shadow-0); }
.hover-shadow-1:hover { box-shadow: var(--shadow-1); }
.hover-shadow-2:hover { box-shadow: var(--shadow-2); }
.hover-shadow-3:hover { box-shadow: var(--shadow-3); }
.hover-shadow-4:hover { box-shadow: var(--shadow-4); }
.hover-shadow-5:hover { box-shadow: var(--shadow-5); }
.hover-shadow-6:hover { box-shadow: var(--shadow-6); }
.hover-shadow-inner:hover {box-shadow: var(--shadow-inner); }