body {
	display: flex;
	height: 100vh;
	background:
		linear-gradient(80deg, var(--white) 20vh, transparent 20vh),
		linear-gradient(to bottom, var(--white), transparent 40%, transparent 60%, var(--white)),
		url(_asset/cloud.png) right,
		linear-gradient(to right, transparent, var(--blue)),
		url(_asset/checkerboard.png) var(--bg-x, 0) calc(var(--bg-y, 0px) + 50%) var(--blue);
	
	&::before {
		content: url(_asset/neil.gif);
		position: fixed;
		top: calc(50% - 25px);
		left: calc(75% - 25px);
		z-index: -1;
		opacity: 0.25;
	}
}



/* parts */

.tag, .note {
	display: inline-flex;
	align-items: center;
	font: 0.875em pixel;
	border: 0 solid;
}

.tag {
	height: 18px;
	padding-inline: 6px 10px;
	border-image: url(_asset/tag.png) 1 8 1 1 fill / 1px 8px 1px 1px;
}

.note {
	padding-block: 1.5px;
	padding-inline: 10px 6px;
	border-image: url(_asset/note.png) 3 1 0 4 fill / 3px 1px 0 4px repeat;
}



/* left */

#left {
	display: flex;
	gap: 1em;
	flex-direction: column;
	background-color: var(--white);
	width: 450px;
	padding: 2em;
	transform: skew(10deg);
	margin-left: 60px;
	scrollbar-color: rgba(from var(--black) r g b / 0.25) var(--white);
}

header {
	display: grid;
	grid-template-columns: max-content 1fr;
}

h1 {
	font-size: 3em;
	transform: skew(-10deg);
}

#subtitle {
	margin-block: -0.25em;
	margin-left: 0.75em;
}

#dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 24px;
	transform: skew(-10deg);

	div {
		width: 12px;
		aspect-ratio: 1;
		border-radius: 50%;
		opacity: 0.5;

		&:nth-of-type(3n) {background-color: var(--red)}
		&:nth-of-type(3n - 1) {background-color: var(--yellow)}
		&:nth-of-type(3n - 2) {background-color: var(--blue)}
	}
}



/* filters */

#filters {
	border: 1px solid rgb(from var(--black) r g b / 0.125);
	padding: 0.5em;
	border-radius: 8px;
}

#filter-title {
	font: 0.75em pixel;
	letter-spacing: 0.1em;
}

c-filter {
	margin-block: 2px;
	cursor: pointer;

	&:hover {border-image-source: url(_asset/tag-hover.png)}
	&.active {border-image-source: url(_asset/tag-active.png)}

	&::after {
		font-size: 0.75em;;
		content: var(--count);
		margin-left: 0.75em;
		opacity: 0.5;
	}
}



/* tracklist */

#tracklist {
	overflow: hidden auto;
	position: relative;
	border-radius: 4px;
	flex: 1;
}

c-track {
	display: grid;
	grid-template:
		"disc header"
		"disc tags"
		/ max-content 1fr;
		align-items: center;
	row-gap: 4px;
	padding: 1em;
	border-radius: 4px;
	cursor: pointer;

	&:hover {
		background-color: rgba(from var(--black) r g b / 0.05);
	}

	&.active {
		background: url(_asset/cloud.png) left rgba(from var(--blue) r g b / 0.5);
		&:nth-of-type(2n) {background-position: center}
		&:nth-of-type(3n) {background-position: bottom}
	}
}

.track-disc {
	content: url(_asset/disc.png);
	height: var(--size);
	margin: calc(var(--size) * -0.5);
	margin-right: 0.5em;
	grid-area: disc;
	image-rendering: auto;
}

.track-header {
	display: flex;
	align-items: end;
	gap: 0.5em;
	grid-area: header;
}
.track-name {
	font-family: alte;
}
.track-date {
	font: 0.875em/1.2 pixel;
	white-space: nowrap;
}

.track-tags {
	display: flex;
	gap: 4px;
	grid-area: tags;
}

#back {
	font-family: pixel;
	letter-spacing: 0.1em;
	margin-top: 1em;
	transform: skew(-10deg);
	align-self: start;

	&:hover {
		text-decoration: underline var(--blue);

		&::after {
			content: url(_asset/sad.gif);
			display: inline-block;
			margin-left: 0.5em;
			margin-block: -10px;
			transform: translateY(3px);
		}
	}
}



/* light */

#left {
	box-shadow:
		4px 0 rgb(from var(--red) r g b / 0.25),
		32px 0 64px -32px rgb(from var(--yellow) r g b / 0.5);
}

#light {
	background-image:
		linear-gradient(77deg, var(--red) 36%, transparent 36%),
		linear-gradient(83deg, var(--yellow) 34%, transparent 34%);
	width: 250px;
	margin-inline: -64px -186px;
	opacity: 0.4;
	z-index: -1;
}



/* view */

#view {
	--padding-left: 4rem;
	margin-left: -2em;
	align-self: center;
	flex: 1;
}

#view-name {
	font-size: 3em;
	margin-left: var(--padding-left);
}

#view-ribbon {
	background-color: rgb(from var(--white) r g b / 0.75);
	padding-block: 1em;
	padding-inline: calc(var(--padding-left) + 2rem) 1em;

	iframe {
		background-image: url(_asset/dither.png);
		height: 200px;
		box-sizing: border-box;
		padding: 1em;
		border-radius: 8px;
	}
}

#view-footer {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
	gap: 0.5em 1em;
	height: 0;
	margin-top: 1em;
	margin-left: calc(var(--padding-left) + 5rem);
}

.view-key {
	font: 0.875em pixel;
}
.view-empty {
	font: 0.75em pixel;
}

#view-note {
	width: max-content;
	max-width: 400px;
}

#view-tags .tag {
	border-image-source: url(_asset/tag-solid.png);
	margin-right: 4px;
}



/* mobile */

@media (max-width: 1000px) {
	body {
		flex-direction: column;
		background: url(_asset/cloud.png) right var(--blue);
	}

	#left {
		width: unset;
		margin-left: 0;
		flex: 1;
	}
	#left, #back {
		transform: none;
	}
	#tracklist {
		contain: size;
	}

	#view {
		align-self: unset;
		flex: unset;
		position: relative;
	}
	#view, #view-name, #view-ribbon, #view-footer {
		margin-left: 0;
	}
	#view-ribbon {
		padding-left: 1em;
		iframe {height: 160px}
	}
	#view-name, .view-key, #view-tags {
		display: none;
	}
	#view-footer {
		display: unset;
		height: unset;
	}
	#view-note {
		display: flex;
		justify-content: center;
		width: unset;
		background: rgb(from var(--white) r g b / 0.75);
		max-width: unset;
		padding: 1em;
		padding-top: 0;

		.note {
			filter: drop-shadow(-4px 0 8px rgb(from var(--blue) r g b / 0.75));
		}
	}
}