@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light dark;
}

*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

body {
	padding: 1.5rem;
	background: light-dark(white, black);
	color: light-dark(black, white);
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 100%;
	gap: 1rem;
	font-family: "JetBrains Mono", monospace;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

header {
	display: grid;
	gap: 0.5rem;
}

.label-container {
	display: flex;
	gap: 1ch;
	font-size: 1.5rem;
}

input {
	border: 2px solid light-dark(oklch(0 0 0), oklch(1 0 0));
	background: light-dark(oklch(1 0 0), oklch(0 0 0));
	color: light-dark(oklch(0 0 0), oklch(1 0 0));
	font: inherit;
}

input:focus-visible {
	outline: 4px double light-dark(blue, aqua);
}

input[type="text"] {
	padding-inline: 0.25rem;
}

#input-text {
	width: 100%;
}

main {
	display: contents;
}

#output {
	list-style-type: none;
	font-size: 8rem;
}

#output > * {
	width: calc(var(--segment-width) + 0.25ch);
	height: 12rem;
	text-align: center;
	display: inline-block;
	vertical-align: bottom;
}

/* segments alternate between transparent (even) and grayish (odd) */
#output > :nth-child(odd) {
	background: light-dark(oklch(0.65 0 0), oklch(0.35 0 0));
}

/* segment group colors */
#output > .output-group-1 {
	color: light-dark(oklch(0.28 0.2 265), oklch(0.9 0.15 195));
}

#output > .output-group-2 {
	color: light-dark(oklch(0.25 0.1 30), oklch(0.9 0.25 135));
}

#output > .output-group-3 {
	color: light-dark(oklch(0.25 0.1 135), oklch(0.89 0.2 95));
}

#output > .output-group-4 {
	color: light-dark(oklch(0.3 0.15 310), oklch(0.75 0.2 325));
}

/* start of segment group (odd) */
#output > .output-group:not(.output-group + .output-group):nth-child(odd) {
	background: linear-gradient(
		135deg,
		oklch(0.50 0 0),
		oklch(0.50 0 0) 10%,
		light-dark(oklch(0.65 0 0), oklch(0.35 0 0)) 10%,
		light-dark(oklch(0.65 0 0), oklch(0.35 0 0))
	);
}

/* start of segment group (even) */
#output > .output-group:not(.output-group + .output-group):nth-child(even) {
	background: linear-gradient(
		135deg,
		oklch(0.50 0 0),
		oklch(0.50 0 0) 10%,
		transparent 10%,
		transparent
	);
}

/* end of segment group (odd) */
#output > .output-group:not(:has(+ .output-group)):nth-child(odd) {
	background: linear-gradient(
		135deg,
		light-dark(oklch(0.65 0 0), oklch(0.35 0 0)),
		light-dark(oklch(0.65 0 0), oklch(0.35 0 0)) 90%,
		oklch(0.50 0 0) 90%,
		oklch(0.50 0 0)
	);
}

/* end of segment group (even) */
#output > .output-group:not(:has(+ .output-group)):nth-child(even) {
	background: linear-gradient(
		135deg,
		transparent,
		transparent 90%,
		oklch(0.50 0 0) 90%,
		oklch(0.50 0 0)
	);
}

/* single segment group (odd) */
#output > .output-group:not(.output-group + .output-group):not(:has(+ .output-group)):nth-child(odd) {
	background: linear-gradient(
		135deg,
		oklch(0.50 0 0),
		oklch(0.50 0 0) 10%,
		light-dark(oklch(0.65 0 0), oklch(0.35 0 0)) 10%,
		light-dark(oklch(0.65 0 0), oklch(0.35 0 0)) 90%,
		oklch(0.50 0 0) 90%,
		oklch(0.50 0 0)
	);
}

/* single segment group (even) */
#output > .output-group:not(.output-group + .output-group):not(:has(+ .output-group)):nth-child(even) {
	background: linear-gradient(
		135deg,
		oklch(0.50 0 0),
		oklch(0.50 0 0) 10%,
		transparent 10%,
		transparent 90%,
		oklch(0.50 0 0) 90%,
		oklch(0.50 0 0)
	);
}

/* hide header when printing */
@media print {
	body {
		grid-template-rows: 1fr;
	}

	header {
		display: none;
	}
}