header {
	margin: 4rem 0 1.5rem 0;
	position: relative;
	overflow: hidden;
}
header h1 a {
	text-shadow: 0 0 24px color(display-p3 var(--pink) / 1);
}
header h1 a:hover {
	text-shadow: 0 0 24px color(display-p3 var(--pink) / 0.5);
}
header h1 a:active {
	text-shadow: 0 0 24px color(display-p3 var(--orange) / 0.5);
}
.dune-sea-special h2 {
	color: color(display-p3 var(--text) / 0.75);
	text-shadow: 0 0 16px color(display-p3 var(--blue) / 0.5);
}
.dune-sea-special {
	padding: 1em 0 1.5em 0;
	transform: skewY(-7.5deg);
}
.dune-sea-special a, .dune-sea-special a:visited {
	text-decoration: none;
}
.dune-sea-special h1 {
	line-height: 0.73em;
}
.dune-sea-special h1,
.dune-sea-special h2 {
	height: revert;
	margin: 0;
}
@keyframes rock {
	0%, 100% { transform: rotate(0deg) translateX(-3px); }
	50% { transform: rotate(4deg) translateX(3px); }
}
@keyframes speeder {
	0%, 100% { transform:translateX(12px); }
	50% { transform: translateX(-16px); }
}
@keyframes pulse {
	0%, 100% { border-color: color(display-p3 var(--blue) / 1); }
	16% { border-color: color(display-p3 var(--purple) / 1); }
	33% { border-color: color(display-p3 var(--pink) / 1); }
	50% { border-color: color(display-p3 var(--orange) / 1); }
	66% { border-color: color(display-p3 var(--yellow) / 1); }
	83% { border-color: color(display-p3 var(--green) / 1); }
}
button {
	border: 1px solid color(display-p3 var(--green) / 1);
}
button.pulse {
	animation: pulse 500ms infinite linear;
}
button:hover {
	color: color(display-p3 var(--orange) / 1);
	background-color: color(display-p3 var(--purple) / 0.25);
	text-shadow: 0 0 8px color(display-p3 var(--orange) / 0.5);
}
button:active {
	color: color(display-p3 var(--yellow) / 1);
	background-color: color(display-p3 var(--orange) / 0.25);
}
.characters {
	margin-top: 2rem;
	cursor: default;
	font-size: 4rem;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	white-space: nowrap;
	overflow: hidden;
	animation: speeder 10s infinite ease-in-out;
}
.characters span {
	display: inline-block;
	animation: rock 2s infinite ease-in-out;
}
.characters span:nth-child(3n) { animation-delay: 0s; }
.characters span:nth-child(3n+1) { animation-delay: 300ms; }
.characters span:nth-child(3n+2) { animation-delay: 600ms; }

.orange {
	color: color(display-p3 var(--orange) / 1);
}
.yellow {
	color: color(display-p3 var(--yellow) / 1);
}
.green {
	color: color(display-p3 var(--green) / 1);
}
.blue {
	color: color(display-p3 var(--blue) / 1);
}
.purple {
	color: color(display-p3 var(--purple) / 1);
}
.pink {
	color: color(display-p3 var(--pink) / 1);
}
.gray {
	color: color(display-p3 var(--gray) / 1);
}

.rotating {
	position: absolute;
	top: -224px;
	left: calc(50% + 1em);
	transform: translateX(-50%);
	z-index: -1;
	width: 88em;
	pointer-events: none;
	animation: beat 500ms ease-in-out infinite;
}
@keyframes beat {
	0% { transform: translateX(-50%) scale(0.95); }
	20% { transform: translateX(-50%) scale(1); }
	100% { transform: translateX(-50%) scale(0.95); }
}
.circled-text {
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
	transform-origin: 250px 250px;
}
.circled {
	fill: color(display-p3 var(--purple) / 0.25);
	font-size: 3em;
	animation: rotate 30s linear infinite;
	transform-origin: 250px 250px;
}
form.opentype {
	border: 1px solid color(display-p3 var(--green) / 1);
}
form.filter, .repertoire li {
	border: 1px solid color(display-p3 var(--purple) / 1);
}

@keyframes flicker {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

.stylistic-sets-grid {
	width: calc(100% - 1px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24em, 1fr));
	gap: 0;
	padding: 0;
	border: 0;
	text-align: center;
	list-style-type: none;
	margin: 1.5rem 0;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.stylistic-set {
	position: relative;
	cursor: default;
	align-items: center;
	color: color(display-p3 var(--text) / 1);
	border: 1px solid color(display-p3 var(--orange) / 1);
	margin-right: -1px;
	margin-bottom: -1px;
	padding-top: 0.5rem;
}
.stylistic-set h2 {
	line-height: 0.875em;
}
.stylistic-set p {
	font-weight: bold;
	color: color(display-p3 var(--orange) / 1);
}
.stylistic-set:hover {
	color: color(display-p3 var(--text) / 1) !important;
	background: color(display-p3 var(--highlight) / 0.375) !important;
	border: 1px solid color(display-p3 var(--highlight) / 1) !important;
	z-index: 10 !important;
}
.stylistic-set:hover p {
	color: color(display-p3 var(--highlight) / 1);
}
.stylistic-set:hover p::after {
	content: " OFF";
	color: color(display-p3 var(--text) / 1);
}
.stylistic-set:hover h2 {
	font-feature-settings: normal !important;
}

@keyframes rotate { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
	header {
		width: 100vw;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
}

@media (max-width: 680px) {
	.stylistic-sets-grid {
		grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
	}
	.rotating {
		width: 64em;
		top: -160px;
	}
	.characters {
		font-size: 2rem;
	}
}

@media (max-width: 470px) {
	.stylistic-sets-grid {
		grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
	}
	.stylistic-set {
		padding: 0;
	}
	.stylistic-set h2 {
		font-size: 1rem;
	}
	.stylistic-set p {
		display: none;
	}
}