index.css

/* https://css-tricks.com/box-sizing/#aa-universal-box-sizing-with-inheritance */
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

/* delegate full viewport layout to r4-app */
html {
	min-height: 100%;
	background-color: transprent;
}
body {
	margin: 0;
}

html,
body,
r4-radio,
r4-app {
	display: flex;
	flex-direction: column;
}
body,
r4-radio,
r4-app {
	flex-grow: 1;
}

/* missing default variables; but on purpose to not enforce styles? */
r4-app {
	/* the defautl font size at the top most element */
	--font-size: 18px;
	--s: 1.3em;
}
@media screen (min-width: 50rem) {
	r4-app {
		--font-size: 21px;
	}
}
@media (prefers-color-scheme: dark) {
	r4-app {
		color-scheme: dark;
		--c-bg: black;
		--c-fg: white;
	}
}
@media (prefers-color-scheme: light) {
	r4-app {
		color-scheme: light;
		--c-bg: white;
		--c-fg: black;
	}
}

/*
	missing default styles
*/

r4-app {
	font-size: var(--font-size);
}

/* fix page main when over the player sticky */
r4-page-main {
	background-color: var(--c-bg);
}

/* fix page header links too close to each other (bad click area) */
r4-page-header a {
	padding: calc(var(--s) / 2);
}

/* fix tracks too close to each other */
r4-list r4-list-item {
	padding: calc(var(--s) / 2);
}

/* fix tracks tag */
r4-list r4-list-item a {
	padding: calc(var(--s) / 2);
}