@font-face {
		font-family: Rubik;
		src: url(../font/rubik.ttf);
	}
	
	:root {
		--half-width: min(max(15em, calc(50% - 1em)), calc(100% - 1em));
		
		--c1: #161619;
		--c2: #222229;
		--c3: #303036;
		--c4: #44444c;
		--c5: #5f5f66;
		--e0: #eeeef9;
		
		--anim--page: 110ms;
		--anim--button: 150ms;
		--anim--dialog: 90ms;
		--anim--edit-mode: 200ms;
		--anim--style: 500ms;
		--anim--click: 200ms;
	}
	
	::-webkit-scrollbar { width: .325em; height: .325em; }
	::-webkit-scrollbar-track { background: var(--c3); }
	::-webkit-scrollbar-thumb { background: var(--c4); }
	::-webkit-scrollbar-thumb:hover { background: var(--c5); }
	::-webkit-scrollbar-corner { background: none; }
	
	html, body {
		height: 100dvh;
	}
	
	body, button, input {
		font-family: Rubik;
		font-size: 1em;
		line-height: 1.25;
		color: var(--e0);
	}
	
	body {
		margin: 0;
		background-color: var(--c2);
		display: flex;
		flex-direction: column;
		user-select: none;
	}
	
	button {
		background-color: var(--c4);
		border: none;
		border-radius: .25em;
		padding: .4em .8em;
		filter: brightness(.95);
		transition: all var(--anim--button), background 0s, margin 0s;
	}
	
	button.icon {
		width: 2em;
		background-image: var(--icon);
		background-repeat: no-repeat;
		background-position: center;
	}
	
	button.icon.text {
		padding-left: 2.5em;
		width: unset;
		background-position: left .5em center; 
	}
	
	button:hover {
		filter: brightness(1);
	}	
	
	button:active {
		filter: brightness(1);
		background-color: var(--c5);
	}
	
	button.primary {
		background-color: #448;
	}
	
	button.primary:active {
		background-color: #559;
	}
	
	button.dangerous {
		background-color: #922;
	}
	
	button.dangerous:active {
		background-color: #a33;
	}
	
	input {
		background-color: var(--c1);
		border: .125em solid var(--c4);
		border-radius: .25em;
		outline: none;
		padding: .5em;
	}
	
	input:focus {
		border: .125em solid var(--c5);
	}
	
	input[type="color"] {
		padding: 0;
		border: none !important;
		outline: none;
		background: none;
		height: 3em;
		width: 3em;
	}
	
	input[type="file"] {
		display: none;
	}
	
	label[for="file"] {
		border: .25em dashed var(--c4);
		width: var(--half-width);
		aspect-ratio: 1;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	label[for="file"]:hover,
	label[for="file"]:active {
		border: .25em dashed var(--c5);
		background-color: var(--c3);
	}
	
	label[for="file"]::after {
		content: 'Browse ...';
		opacity: .6;
	}
	
	label[for="file"]:hover::after,
	label[for="file"]:active::after {
		opacity: .8;
	}
	
	[disabled] {
		filter: opacity(.7);
		pointer-events: none;
	}
	
	main {
		flex: 1;
		display: flex;
		overflow: hidden;
		max-width: 35em;
		width: 100%;
		margin: 0 auto;
		background-color: var(--c2);
	}
	
	main > .loading {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url(../res/loading.svg) no-repeat center;
		background-size: 3em;
		opacity: 0;
		pointer-events: none;
		transition: .1s;
	}
	
	body.loading > main > .loading {
		opacity: 1;
	}
	
	.page {
		flex: 1;
		display: none;
		flex-direction: column;
		transition: var(--anim--page)
	}
	
	.page.fade-1 .title {
		translate: 0 -3em;
	}
	
	.page.fade-2 {
		opacity: 0;
	}
	
	.page.fade-2.left {
		translate: -10% 0;
	}
	
	.page.fade-2.right {
		translate: 10% 0;
	}
	
	.page.current {
		display: flex;
	}
	
	.page .title {
		display: flex;
		align-items: center;
		padding: .25em;
		gap: .25em;
		transition: var(--anim--page);
	}
	
	.page .title > button + div {
		flex: 100;
		max-width: calc(100vw - 13.5em);
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.page .content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: auto;
		gap: .5em;
		padding: .5em;
	}
	
	.page .content > *:first-child {
		margin-top: auto;
	}
	
	.page .content > *:last-child {
		margin-bottom: auto;
	}
	
	.page .content div:has(label + *) {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: .5em;
		align-items: center;
	}
	
	.page .content div:has(label + *) label {
		min-width: 7.5em;
		text-align: right;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.page .content div > label + * {
		display: flex;
	}
	
	.page .content div > label + * > button {
		padding-inline: .625em;
		border-radius: .25em 0 0 .25em;
		border: .125em solid var(--c4);
		border-right: none;
		background-color: var(--c3);
	}
	
	.page .content div > label + * > button + * {
		border-radius: 0;
	}
	
	.page .content div > label + * > button + * + button {
		border-radius: 0 .25em .25em 0;
		border-left: none;
		border-right: .125em solid var(--c4);
	}
	
	.page.boards .tags {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		overflow: auto;
		gap: .5em;
		padding: .125em;
		margin: 0;
		transition: var(--anim--edit-mode);
		max-height: 100vh;
	}
	
	.page.boards .tags:not(.visible) {
		padding: 0 .125em;
		max-height: 0;
		opacity: 0;
	}
	
	.page.boards .tags.visible + .list {
		padding: 0;
		max-height: 0;
		opacity: 0;
	}
	
	.page.boards .tags button {
		padding: .25em .625em;
	}
	
	.page.boards .list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		overflow: auto;
		margin-block: auto;
		gap: .75em;
		padding: .25em 0;
		transition: var(--anim--edit-mode);
		max-height: 100vh;
	}
	
	.page.boards .list button {
		border-bottom: .125em solid var(--c1);
		width: calc(50% - 1em);
		max-width: 12em;
		aspect-ratio: 1;
		position: relative;
		overflow: hidden;
	}
	
	.page.boards .list button.readonly {
		background-image: url(../res/lock.svg);
		background-repeat: no-repeat;
		background-position: .5em .85em;
		background-size: 1.25em;
		margin-inline: min(15vw, 10em);
		height: 3em;
	}
	
	.page.boards .list button::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: .3;
		mix-blend-mode: color;
		background: var(--color);
	}
	
	.page.boards .list button span {
		display: block;
		position: absolute;
		top: .5em;
		right: .25em;
		background-color: var(--c3);
		border-radius: 50%;
		width: 2em;
		height: 2em;
		line-height: 2;
		scale: .75;
	}
	
	.page.board .tracks {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: .5em;
	}
	
	.page.board .tracks .track {
		flex: 1;
		margin-inline: 15%;
		padding: 1.5em .5em;
	}
	
	.page.board:has([data-action="toggleEditModeAsync"].active) .tracks {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.page.board:has([data-action="toggleEditModeAsync"].active) .tracks .track {
		margin-inline: 0;
		padding: .95em .5em;
	}
	
	.page.board .tracks:has(:nth-child(6 of :not(.hidden))) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.page.board .tracks:has(:nth-child(6 of :not(.hidden))) .track {
		margin-inline: 0;
	}
	
	.page.board .tracks:has(:nth-child(13 of :not(.hidden))) .track {
		padding: .95em .5em;
	}
	
	.page.board .track {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: .5em center;
		background-size: 1.25em;
		border-bottom: .125em solid var(--c1);
	}
	
	.page.board .track .icon {
		position: absolute;
		left: .125em;
		top: .25em;
		width: 1em;
		height: 1em;
		pointer-events: none;
		mask-image: var(--icon);
		mask-size: contain;
		background-color: var(--color);
		filter: saturate(.6);
		z-index: -1;
		transition: var(--anim--style);
	}
	
	.page.board:has([data-action="toggleEditModeAsync"].active) .track {
		background-image: url(../res/eye.svg);
		padding-inline-start: 2em !important;
	}
	
	.page.board:has([data-action="toggleEditModeAsync"].active) .track .icon {
		display: none;
	}
	
	.page.board:has([data-action="toggleEditModeAsync"].active) .track.hidden {
		display: unset;
		opacity: .5;
		background-image: url(../res/eyeoff.svg);
	}
	
	.page.board .board-config {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		overflow: hidden;
		transition: var(--anim--edit-mode);
		padding: 0;
		max-height: 0;
		opacity: 0;
	}
	
	.page.board .board-config.test {
		margin-top: 0;
	}
	
	.page.board .board-config div:has(label + *) {
		grid-template-columns: 5em 1fr;
	}
	
	.page.board .board-config div:has(label + *) label {
		min-width: 5em;
	}
	
	.page.board:has([data-action="toggleEditModeAsync"].active) .board-config {
		padding-block: 1em;
		max-height: 5.8em;
		opacity: 1;
		overflow: unset;
	}
	
	[data-action="toggleStyle"] {
		display: none;
	}
	
	.page.board:has(.track:not(.hidden)) [data-action="toggleStyle"] {
		display: block;
	}
	
	.clicked {
		animation: click var(--anim--click);
	}
	
	.page.board .track::before,
	.page.board .track::after {
		content: '';
		position: absolute;
		pointer-events: none;
	}
	
	.page.board .track::before {
		left: .25em;
		right: .25em;
		bottom: .25em;
		height: .25em;
		border-radius: .25em;
		background-color: var(--color);
		transition: var(--anim--edit-mode),
			left var(--anim--style),
			right var(--anim--style),
			height var(--anim--style),
			filter var(--anim--style),
			box-shadow var(--anim--style);
		z-index: -1;
	}
	
	.page.board .track.has-color::before {
		border-top: .075em solid var(--c3);
	}
	
	.page.board .track::after {
		bottom: .25em;
		left: .25em;
		height: .25em;
		width: calc(100% * var(--track-progress, 0) - .5em);
		border-radius: .25em;
		mix-blend-mode: overlay;
		background-color: var(--e0);
		transition: var(--track-progress-transition, 0) linear;
		opacity: 0;
	}
	
	.page.board:not(:has([data-action="toggleEditModeAsync"].active)) .track:not(.clicked).play-later,
	.page.board:not(:has([data-action="toggleEditModeAsync"].active)) .track:not(.clicked).playing {
		background: linear-gradient(135deg, var(--c4) 0%, var(--c4) 10%, #667 50%, var(--c4) 90%, var(--c4) 100%);
		animation: background-position-shift 2s forwards infinite linear;
		background-size: 40em;
	}
	
	.page.board .track.playing::after {
		opacity: .8;
	}
	
	.hidden {
		display: none;
	}
	
	.select {
		padding: .5em;
		border: .125em solid var(--c4);
		border-radius: .25em;
		background-color: var(--c1);
	}
	
	.select:active {
		background-color: var(--c3);
	}
	
	[data-action="toggleEditModeAsync"] {
		--icon: url(../res/edit.svg);
	}
	
	.dialog-wrapper {
		position: absolute;
		backdrop-filter: contrast(.7) brightness(.5);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: var(--anim--dialog);
		opacity: 0;
		pointer-events: none;
	}
	
	.dialog-wrapper:has(.dialog.visible) {
		opacity: 1;
		pointer-events: unset;
	}
	
	.dialog {
		background-color: var(--c1);
		display: flex;
		flex-direction: column;
		box-shadow: 0 .5em 2em -.5em var(--c1);
		border: .075em solid var(--c2);
		border-radius: .25em;
		min-width: 10em;
		max-height: calc(100% - 4em);
		transition: var(--anim--dialog);
	}
	
	.dialog:not(.visible) {
		translate: 0 -1em;
	}
	
	.dialog .title {
		padding: .75em;
		background-color: var(--c2);
		border-radius: .25em .25em 0 0;
	}
	
	.dialog .content {
		padding: .5em 0;
		background-color: var(--c3);
		border-radius: .25em;
		overflow: auto;
	}
	
	.dialog .content .items.disabled .item:not(.selected),
	.dialog .content .items:has(.item.selected) .item:not(.selected) {
		opacity: .3;
	}
	
	.dialog .content .items .item {
		padding: .5em 1em;
	}
	
	@keyframes click {
		0% { outline: .125em solid #fff0; outline-offset: 0; scale: 1; }
		25% { outline: .125em solid #fff9; outline-offset: .1em; scale: .95; opacity: .8; }
		100% { outline: .125em solid #fff0; outline-offset: .2em; scale: 1; }
	}
	
	@keyframes background-position-shift {
		0% { background-position-x: 0; }
		50% { box-shadow: 0 0 .5em 0 #88a;  }
		100% { background-position-x: 40em; }
	}
	
	@media only screen and (min-width: 35em) {
		.page .title {
			padding: .5em;
		}
	}