LeaVerou

/**
 * Stiched effect
 */

.tag {
	--background: hsl(220 20 90);
	--stitch-light: #0008;
	--stitch-shadow: white;
	--border-color: hsl(220 20 30);

LeaVerou

/**
 * color(display-p3) test
 */

background: red;
background: color(display-p3 0 1 0);

LeaVerou

/**
 * oklab interpolation weirdness
 */

background: no-repeat 0 / 100% 50%;
background-image: linear-gradient(to right, red, blue, aqua, lime, yellow, green),
linear-gradient(to right in oklab, red, blue, aqua, lime, yellow, green);
background-position: top, bottom;
min-height: 100%;

LeaVerou

/**
 * Safari color space conversion bug Part 2
 */

div {
	width: 12em;
	height: 3em;
	border: 1px solid silver;
}

LeaVerou

/**
 * Safari bug potential workaround
 */

oklch(from oklab(from var(--color) calc(l - 0.5) a b) calc(l + 0.5) c calc(h + var(--hue-shift)));
--color: #e5f6ff;
--hue-shift: -30;
--color-tweaked: oklch(from oklab(from var(--color) calc(l - 0.5) a b) calc(l + 0.5) c calc(h + var(--hue-shift)));
background: linear-gradient(var(--color-tweaked) 0% 100%) #e5f6ff no-repeat 0 0 / 100% 50%;
min-height: 100%;

LeaVerou

/**
 * Safari color space conversion bug
 */

div {
	width: 10em;
	height: 2em;
	border: 1px solid silver;
}

LeaVerou

/**
 * Safari bug playground
 */

--color: rgb(from oklch(90% 0.02 230) r g b);
background: linear-gradient(oklch(from var(--color) l c h) 0% 100%) var(--color) no-repeat 0 0 / 100% 50%;
min-height: 100%;

LeaVerou

/**
 * WTF Safari?!
 */

background: linear-gradient(oklch(from #e5f6ff l c h) 0% 100%) #e5f6ff no-repeat 0 0 / 100% 50%;
min-height: 100%;

LeaVerou

/**
 * Playing with background-attachment
 */

pre {
	max-height: 150px;
	border: 1px solid silver;
	overflow: auto;
	background: url('https://placecats.com/200/200');
	color: white;

LeaVerou

@media (height > 600px) and (width > 900px) {
	.tally-progress-bar {
		position: fixed;
	}
}

.tally-progress-bar-item {
	height: .6em;

	&.tally-progress-bar-item-done {