:root {
	--font-content: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif;
	--font-ui: var(--font-content);
	--border-radius: 4px;
	--font-small: 0.875em;
	--font-smaller: 0.8em;
	--wrap-normal: 37em;
	--heading-weight: 500;
	--input-width: 20em;
	--bg: #FFFCF0;
	--bg-2: #F2F0E5;
	--ui: #E6E4D9;
	--ui-2: #DAD8CE;
	--ui-3: #CECDC3;
	--tx-3: #B7B5AC;
	--tx-2: #878580;
	--tx: #100F0F;
	--re: #AF3029;
	--or: #BC5215;
	--bl: #205EA6;
	--line-height: 1.5;
}

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	width: 100%;
	height: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	margin: 2vw auto 0 auto;
	padding: 2rem 0 12rem;
	background: var(--bg);
	color: var(--tx);
	font-family: var(--font-content);
	font-size: 1.8rem;
	font-size: calc(1.5rem + .25vw);
	line-height: var(--line-height);
	overflow-x: hidden;
}

.page {
	width: var(--wrap-normal);
	max-width: var(--wrap-normal);
	margin: 0 auto;
	padding: 0 0.5rem;
}

h1 {
	font-weight: var(--heading-weight);
	font-size: 2em;
	font-size: calc(1.35em + .55vw);
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-top: 1.5em;
	margin-bottom: .35em;
}

h2 {
	font-weight: var(--heading-weight);
	font-size: 1.25em;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 1.75em 0 .35em;
}

.subtitle {
	margin: 0 0 1.5rem;
	color: var(--tx-2);
}

.panel {
	background: var(--bg-2);
	border: 1px solid var(--ui);
	border-radius: var(--border-radius);
	padding: 1.25rem;
}

.table-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.85rem;
	margin-bottom: 0.9rem;
}

.controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.85rem;
	margin-bottom: 1rem;
}

.control-group label {
	display: block;
	font-size: var(--font-small);
	font-weight: 600;
	color: var(--tx);
	padding: 0 0 .2em 0;
	margin-bottom: 0.35rem;
}

label[for="dataset-size"] {
	text-align: right;
}

.toggle-row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

button.toggle {
	appearance: none;
	border: 1px solid var(--ui);
	background: transparent;
	color: var(--tx-2);
	border-radius: 3px;
	padding: .4em .9em;
	font-size: var(--font-small);
	line-height: 1.15;
	font-weight: 500;
	cursor: pointer;
}

button.toggle:hover {
	border-color: var(--ui-2);
	background: var(--bg);
	color: var(--tx);
}

button.toggle.is-active {
	border-color: var(--tx);
	background: var(--tx);
	color: var(--bg);
}

button.toggle:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

input[type=number] {
	width: min(8rem, var(--input-width));
	display: block;
	margin-left: auto;
	padding: .45em .55em;
	border-radius: 3px;
	border: 1px solid var(--ui);
	background: transparent;
	color: var(--tx);
	font: inherit;
	font-size: var(--font-small);
	line-height: 1.15;
	text-align: right;
}

input[type=number]:focus {
	outline: none;
	border-color: var(--bl);
	background: var(--bg);
}

table {
	margin-top: 1.2em;
	margin-bottom: 0.4em;
	width: 100%;
	border-collapse: collapse;
	background: var(--bg);
	border-radius: var(--border-radius);
	overflow: hidden;
	font-size: 0.92em;
	font-variant-numeric: tabular-nums;
}

table.token-table {
	margin-top: 0.2em;
	font-size: 0.84em;
}

table.token-table th,
table.token-table td {
	padding-left: 0.55em;
	padding-right: 0.55em;
	white-space: nowrap;
}

table.token-table thead tr:first-child th[colspan] {
	text-align: center;
}

table.token-table thead th[rowspan] {
	vertical-align: middle;
}

thead th {
	text-align: left;
	font-size: 0.9em;
	letter-spacing: 0.02em;
	color: var(--tx-2);
	background: var(--bg-2);
	font-weight: 600;
	padding: .6em 1em .6em 0;
	border-bottom: 1px solid var(--ui);
}

tbody td {
	padding: .78em 1em .78em 0;
	border-bottom: 1px solid var(--ui);
	font-size: 0.95em;
	line-height: 1.3;
}

th:first-child,
td:first-child {
	padding-left: 1em;
}

th:last-child,
td:last-child {
	padding-right: 1em;
}

tbody tr:last-child td {
	border-bottom: none;
}

tbody tr:hover {
	background: color-mix(in srgb, var(--bg-2) 75%, var(--bg));
}

td:first-child {
	font-weight: 600;
}

@media (max-width: 760px) {
	:root {
		--wrap-normal: 88vw;
		--input-width: 100%;
		--heading-weight: 600;
	}

	body {
		margin-top: 0;
		padding-top: 1rem;
	}

	.controls,
	.table-controls {
		grid-template-columns: 1fr;
	}

	table,
	thead,
	tbody,
	tr,
	th,
	td {
		display: block;
	}

	thead {
		display: none;
	}

	tbody tr {
		border-bottom: 1px solid var(--ui);
		padding: 0.35rem 0;
	}

	tbody td {
		border-bottom: none;
		padding: .35em 0;
		display: flex;
		justify-content: space-between;
		gap: 0.8rem;
	}

	tbody td::before {
		content: attr(data-label);
		color: var(--tx-2);
		font-weight: 500;
	}
}