style.css

:root {
	font: 120%/1 Inter, sans-serif;
}

body {
	max-width: 30em;
	margin: auto;

	display: flex;
	flex-direction: column;
}

input {
	align-self: stretch;

	font: inherit;

	margin: 0.3rem;
	padding: 0.3rem;

	border: 1px solid rgba(0, 0, 0, 20%);
	border-radius: 8px;
}

.vis {
	display: grid;

	grid-auto-flow: row;

	grid-template-columns: [utf-8] max-content [utf-16] max-content [codepoint] 1fr [grapheme] max-content;
	grid-auto-rows: max-content;

	margin-bottom: 30em;

	gap: 0 0.2em;
}

.table-header {
	grid-column: 1 / -1;

	display: grid;
	grid-template-columns: subgrid;

	position: sticky;
	top: 0;

	background-color: #FFF;

	border-bottom: 1px solid rgba(0, 0, 0, 20%);
}

.table-header > div {
	padding: 0.6rem 0.3rem;
}


.table-footer {
	grid-column: 1 / -1;

	display: grid;
	grid-template-columns: subgrid;
}

.table-footer > div {
	padding: 0.6rem 0;

	color: #666;
	font-size: 70%;

	text-align: center;
}

.grapheme {
	grid-column: 1 / -1;

	display: grid;
	grid-template-columns: subgrid;
}

.grapheme__codepoints {
	/* End before the grapheme column. */
	grid-column: 1 / grapheme;

	display: grid;
	grid-template-columns: subgrid;
	grid-auto-rows: 1fr;

	align-items: stretch;
	justify-content: stretch;
}

.grapheme__text-container {
	grid-column: grapheme;
	grid-row: 1;

	align-self: stretch;
	justify-self: stretch;

	display: flex;
	align-items: center;
	justify-content: center;
}

.grapheme__text {
	font-size: 180%;
	line-height: 1.6;
	margin: 0 0.8em;
}

/* Every other grapheme has a shaded background. */
.grapheme.grapheme--alternate .grapheme__text-container {
	background-color: #EEE;
}

.codepoint {
	grid-column: 1 / -1;

	display: grid;
	grid-template-columns: subgrid;
}

.codepoint__utf-8 {
	grid-column: utf-8;
}
.codepoint__utf-16 {
	grid-column: utf-16;
}

.codepoint__utf-8,
.codepoint__utf-16 {
	grid-row: 1 / -1;

	display: flex;
	flex-direction: column;
}

.codepoint__utf-8 > div,
.codepoint__utf-16 > div {
	align-self: stretch;
	justify-self: stretch;
	flex: 1;

	padding: 0.3rem;

	text-align: center;

	display: flex;
	align-items: center;
	justify-content: center;

	font-family: monospace;
}

/* Every other code unit has a shaded background. */
.codepoint__utf-8 > .code-unit--alternate,
.codepoint__utf-16 > .code-unit--alternate {
	background-color: #EEE;
}

.code-unit--utf8-continuation {
	color: #808;
}

.code-unit--utf8-start-mb2 {
	color: #B00;
}

.code-unit--utf8-start-mb3 {
	color: #090;
}

.code-unit--utf8-start-mb4 {
	color: #00B;
}

.code-unit--utf16-high-surrogate {
	color: #B00;
}

.code-unit--utf16-low-surrogate {
	color: #00B;
}

.codepoint__description {
	padding: 0.3rem;

	display: flex;
	flex-direction: column;

	gap: 0.3rem;
}

/* Every other codepoint has a shaded background. */
.codepoint.codepoint--alternate .codepoint__description {
	background-color: #EEE;
}

.codepoint__id {
	grid-row: codepoint-id;
	grid-column: 1 / -1;

	font-family: monospace;

	/* Set the color for the `U+`-portion of this codepoint ID */
	color: #888;
}

.codepoint__number {
	font-family: monospace;

	color: #000;
}

.codepoint__name {
	grid-row: codepoint-name;
	grid-column: 1 / -1;

	font-size: 70%;
}

.codepoint__actions {
	flex: 1;
	align-self: end;

	display: flex;
	align-items: end;
	justify-content: end;

	gap: 0.3rem;
}

.codepoint__actions button {
	border-radius: 3px;
	background: none;

	font-size: 70%;
	font-weight: bold;

	margin: 0;
	padding: 0;

	width: 1.3em;
	height: 1.3em;

	text-align: center;

	cursor: pointer;

	border: none;
	background-color: rgba(0, 0, 0, 10%);
}

.codepoint__insert {
	color: #14E;
}

.codepoint__delete {
	color: #C11;
}

p {
	line-height: 1.6;

	margin: 0 0.3rem;
}

* + p {
	margin-top: 1rem;
}

.table-load-bar {
	display: block;
	inline-size: auto;

	align-self: stretch;

	margin: 0 0.3rem;
	margin-top: 1rem;

	transition: opacity 1s ease;
}

.table-load-bar--done {
	opacity: 0;
}