:root { color-scheme: dark; }
body {
	margin: 0;
	background: #0a0a0f;
	color: #e6e6f0;
	font-family: ui-sans-serif, system-ui, sans-serif;
}
main { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
.bar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.bar h1 { font-size: 1.1rem; margin: 0; }
.meta { color: #9a9ab0; margin: 0 0 1rem; }
table.tracks { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.tracks th, table.tracks td {
	text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #232334;
}
table.tracks a { color: #b58cff; text-decoration: none; }
table.tracks a:hover { text-decoration: underline; }
button {
	background: #1c1c28; color: #e6e6f0; border: 1px solid #33334a;
	border-radius: 6px; padding: 0.4rem 0.8rem; cursor: pointer;
}
button:hover { background: #26263a; }
canvas#viz {
	width: 100%; height: auto; aspect-ratio: 9 / 5;
	background: #000; border-radius: 10px; display: block; margin-top: 1rem;
}
#controls { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }
#seek { flex: 1; }