:root {
	--blue: 230;
	--pink: 348;
	--green: 135;
	--ui: var(--blue);
	--sansFont: "Inter V";
	--headingFont: "Inter VD";
	--monoFont: "IAW";
	--script: "Script";
	--fontSize: 16px;
	--lineHeight: calc(var(--fontSize)*1.5);
	--baseline: calc(var(--lineHeight)/2);
	--blockSpacingTop: 0px;
	--blockSpacingBottom: var(--lineHeight);
	--hrThickness: 1px;
	--h1-size: 2.8rem;
	--h2-size: 2.2rem;
	--h3-size: 1.4rem;
	--h4-size: 1.1rem;
	--columnGap: var(--baseline);
	--rowGap: var(--lineHeight);
	--displayScale: 1;
	--pixel: 1px;
	--headerHeight: calc(var(--lineHeight) * 1.5);
	--pianoRollHeight: calc(100vh - var(--headerHeight));
}

* {
	--accent: calc(var(--hue, var(--ui)) - 32), 100%, 52%;
	--primary: var(--hue, var(--ui)), 100%, 99.6%;
	--secondary: var(--hue, var(--ui)), 3%, 57%;
	--tertiary: var(--hue, var(--ui)), 2%, 28%;
	--quaternary: var(--hue, var(--ui)), 3%, 17%;
	--quinary: var(--hue, var(--ui)), 0%, 0%;
}

html {
	background: hsl(var(--quaternary));
}

body {
	max-height: 100vh;
	overflow: hidden;
	color: hsl(var(--primary));
}

button,
input,
select {
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	overflow: visible;
	text-align: inherit;
	outline: none;

	background: transparent;

	/* inherit font & color from ancestor */
	color: inherit;
	font: inherit;

	/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
	line-height: inherit;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;

	/* Corrects inability to style clickable `input` types in iOS */
	-webkit-appearance: none;
}

button,
select {
	cursor: pointer;
}

button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	display: block;
	width: 100%;
}

hr {
	display: block;
	margin: calc(var(--lineHeight) * 2) 0;
}

/* 
[FRAME][debug="true"]>grid>c {
	--content-box: rgba(255, 0, 0, .1);
	--border-box: rgba(255, 255, 255, 1);
	background:
		linear-gradient(to bottom, var(--content-box), var(--content-box)) content-box,
		linear-gradient(to bottom, var(--border-box), var(--border-box)) border-box;
}

[FRAME][debug="true"] {
	background: rgba(255, 0, 0, .1);
} */

::selection {
	background-color: rgba(0, 0, 0, 0.001);
}