@font-face {
	src: url("../fonts/Shop_Sans_Variable-v01.woff2");
	font-family: "Shop Sans";
}
html {
	color-scheme: light dark;
	--clr: deeppink;
	--clr: oklch(from deeppink l c calc( 360/1440*--mm ));
	--opa: .1;
	@media (prefers-color-scheme: dark) {
		--opa: .22;
	}
}

/* (79.6 - --dd) * 6.27  */
body {
	font-family: "Shop Sans";
	display: grid;
	height: 100vh;
	margin: 0;
	--clr: oklch(from deeppink l c calc( 360/1440* var(--mm) ));
}
div {
	grid-column: 1 / 1;
	grid-row: 1 / 1;
	margin: auto;
	display: grid;
}
body > div + div {
	display: none;
}
div div {
	transform: rotate( calc( var(--z) * 30deg ) );
	border: 1px solid;
	width: 80.3vh;
	text-align: center;
	font-variation-settings: "CURV" 50;
	font-size: 0;
	//offset-rotate: auto;
}

svg {
	grid-column: 1 / 1;
	grid-row: 1 / 1;
	z-index: 1;
	rotate: 90deg;
	max-width: 100vmin;
	max-height: 100vmin;
	margin: auto;
}
svg.n {
	scale: .999;
}
/* //(79.6 - --dd) * 6.27 */
textPath {
	fill: var(--clr);
	opacity: var(--opa);
	font-size: calc( var(--ff) * 1% );
	transition: 1s;
	font-variation-settings: "CURV" calc( var(--ff)/186*20);
}
/* 
186 == 20;
(-ff/186)*20/--dd*100
 */

textPath:nth-of-type(1n + 13) {
	--ff:  calc( (79.6 - var(--dd)) * 6.27 );
	font-variation-settings: "CURV" calc( var(--ff)/186*20/ var(--dd)*100 );
}

textPath.on {
	opacity: 1;
}