:root {
	--circle-size: 600px;
	--station-size: 80px;
}

body {
	font-family: monospace;
	font-size: 15px;
	background: #000;
	color: #fff;
}

#player {
	display: none;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 300px;
	height: 150px;
}

.track-info {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 5;
	margin: auto;
	width: 300px;
	height: 150px;
	line-height: 2em;
	text-align: center;
	text-shadow: 0 0 4px #000;
}

#please-play {
	display: block;
	width: var(--circle-size);
	height: var(--circle-size);
	background-color: red;
}

#interface {
	width: var(--circle-size);
	height: var(--circle-size);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.station {
	position: absolute;
	top: 50%;
	left: 50%;
}

.station > span {
	font-size: 0;
	width: var(--station-size);
	height: var(--station-size);
	border-radius: var(--station-size);
	background-size: cover;
	background-position: center center;
	filter: grayscale(1);
	opacity: 0.3;
	transition: opacity 0.3s ease border 0.2s ease-in 0.3s;
	cursor: pointer;
	position: absolute;
	right: calc(var(--circle-size)/2 * -1);
	top: 0;
	z-index: 2;
}

.station > span:hover {
	opacity: 0.6;
}

.station.active > span {
	opacity: 1;
	pointer-events: none;
}