@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--size-5);
	gap: var(--size-7);
}
.rings {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-3);
}
svg {
	width: 200px;
	height: 200px;
	transform: rotate(-90deg);
}
circle {
	fill: none;
	stroke-width: 8;
}
.bg { stroke: var(--gray-3); }
.fg { stroke-linecap: round; }
.center-text {
	font-size: var(--font-size-5);
	font-weight: var(--font-weight-7);
	fill: var(--text-1);
	text-anchor: middle;
	dominant-baseline: middle;
	transform: rotate(90deg);
	transform-origin: 100px 100px;
}
.labels {
	display: flex;
	gap: var(--size-3);
	font-size: var(--font-size-1);
}
.label {
	padding: var(--size-1) var(--size-3);
	border-radius: var(--radius-round);
	font-weight: var(--font-weight-6);
}
.label.red {
	background: var(--red-2);
	color: var(--red-9);
}
.label.green {
	background: var(--green-2);
	color: var(--green-9);
}
.label.blue {
	background: var(--blue-2);
	color: var(--blue-9);
}
.label.orange {
	background: var(--orange-2);
	color: var(--orange-9);
}
.chat {
	width: 100%;
	max-width: 400px;
	border: var(--border-size-1) solid var(--gray-3);
	border-radius: var(--radius-2);
	padding: var(--size-3);
	display: flex;
	flex-direction: column;
	gap: var(--size-3);
}
.message {
	padding: var(--size-2);
	border-radius: var(--radius-2);
	background: var(--gray-2);
}
input {
	padding: var(--size-2);
	border: var(--border-size-1) solid var(--gray-3);
	border-radius: var(--radius-2);
}

/* minimal header */
.site-header {
	width: 100%;
	max-width: 420px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-3);
	padding: var(--size-2) var(--size-3);
	border: var(--border-size-1) solid var(--gray-3);
	border-radius: var(--radius-2);
	background: var(--surface-1);
	color: var(--text-2);
}
.site-header a {
	color: var(--blue-7);
	text-decoration: none;
}
.site-header a:hover {
	text-decoration: underline;
}

/* changelog styles */
.changelog {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--size-2);
	max-width: 600px;
	width: 100%;
}
.changelog li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-2);
	align-items: baseline;
}
.changelog strong {
	font-weight: var(--font-weight-7);
}
.changelog .date {
	font-size: var(--font-size-0);
	color: var(--text-2);
}