body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.content {
	width: min(var(--maxw), 90vw);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1 {
	color: var(--accent);
	padding: 10px;
	margin-bottom: 25px;
}

ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	padding: 0;
	margin: 0;
}

li {
	width: min(420px, 90vw);
}

.tile {
	/* layout */
	display: flex;
	align-items: center;
	gap: 14px;

	/* box */
	padding: 18px 22px;
	border-radius: var(--radius);
	background: var(--overlay2);

	/* text */
	text-decoration: none;
	color: var(--surface2);
	font-weight: 700;
	font-size: 1.35rem;

	/* UX */
	transition: transform 120ms ease, background-color 120ms ease;
}

.tile:hover {
	transform: translateY(-1px);
	background: var(--overlay);
}

.tile:active {
	transform: translateY(0px);
}

.tile .icon {
	padding: 0 5px;
	text-align: center;
	flex: 0 0 auto;
	line-height: 1;
	font-size: 1.5rem;
}

.tile .label {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tile.is-disabled {
	color: var(--muted);
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.2);
	cursor: not-allowed;
	pointer-events: none;
}

.tile.is-disabled .icon {
	opacity: 0.6;
}