:root {
	--phosphor: #33ff66;
	--dim: #1a8c3a;
	--glass: #020a04;
	color-scheme: dark;
}
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	height: 100%;
	background: #000;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	font: 16px/1.25 "IBM Plex Mono", "DEC Terminal", "Courier New", ui-monospace, monospace;
}
.bezel {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 12px 12px 4px;
	gap: 8px;
}
.screen {
	position: relative;
	flex: 1;
	overflow-y: auto;
	padding: 18px 22px;
	background: radial-gradient(ellipse at center, #062010 0%, var(--glass) 75%);
	border-radius: 18px;
	box-shadow: inset 0 0 60px #000, 0 0 0 3px #2a2a2a, 0 0 0 7px #4a4a4a;
	outline: none;
	cursor: text;
	scrollbar-color: var(--dim) transparent;
}
.screen::after {
	content: "";
	position: sticky;
	display: block;
	top: 0;
	height: 100%;
	margin-top: -100%;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px);
	animation: flicker 0.15s infinite alternate;
}
@keyframes flicker {
	from {
		opacity: 0.85;
	}
	to {
		opacity: 1;
	}
}
#out {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--phosphor);
	text-shadow: 0 0 2px var(--phosphor), 0 0 8px rgb(51 255 102 / 0.5);
}
.cursor {
	display: inline-block;
	width: 0.6em;
	background: var(--phosphor);
	box-shadow: 0 0 8px var(--phosphor);
	animation: blink 1s steps(1) infinite;
}
@keyframes blink {
	50% {
		opacity: 0;
	}
}
.panel {
	display: flex;
	gap: 16px;
	align-items: center;
	color: var(--phosphor);
	text-shadow: 0 0 2px var(--phosphor), 0 0 6px rgb(51 255 102 / 0.4);
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-wrap: wrap;
	row-gap: 6px;
	padding: 2px 8px;
}
/* Each group stays on one line; the row wraps between groups. */
.panel > * {
	white-space: nowrap;
}
.panel label {
	display: flex;
	align-items: center;
	gap: 6px;
}
.panel .first {
	margin-left: auto;
}
.panel a {
	color: inherit;
}
.panel select {
	background: #000;
	color: inherit;
	text-shadow: inherit;
	border: 1px solid var(--dim);
	font: inherit;
	text-transform: uppercase;
	padding: 1px 2px;
}

#kbd {
	position: fixed;
	left: -1000px;
	top: 0;
	width: 10px;
	height: 10px;
	opacity: 0;
}