/* CRT Terminal: a green-on-black computer screen.
   Colors, size and width come from the variables set on the .crt element. */

.crt {
	--crt-fg: #3dffa2;
	--crt-bg: #000;
	--crt-size: 22px;
	--crt-w: 960px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: var(--crt-w);
	margin: 24px auto;
	padding: 14px;
	background: linear-gradient(145deg, #2b2b2b, #111 60%, #1c1c1c);
	border-radius: 22px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #3a3a3a, inset 0 0 14px #000;
	font-family: "VT323", "Perfect DOS VGA 437", "Lucida Console", "Courier New", "Liberation Mono", monospace;
	font-size: var(--crt-size);
	font-weight: 400;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-align: left;
	text-transform: none;
	color: var(--crt-fg);
}

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

.crt p,
.crt div,
.crt span,
.crt a,
.crt button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: normal;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

/* ---------- The screen ---------- */

.crt .crt-screen {
	position: relative;
	overflow: hidden;
	padding: 26px 22px 22px;
	background: var(--crt-bg);
	color: var(--crt-fg);
	border-radius: 6px;
}

.crt.crt--curve .crt-screen {
	border-radius: 26px / 20px;
	box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.85), inset 0 0 14px rgba(0, 0, 0, 0.9);
}

.crt.crt--glow .crt-screen {
	text-shadow: 0 0 2px var(--crt-fg), 0 0 9px color-mix(in srgb, var(--crt-fg) 55%, transparent);
}

/* Double-line frame with the title sitting in its top edge */
.crt .crt-frame {
	position: relative;
	margin: 0;
	padding: 34px 18px 14px;
	border: 4px double var(--crt-fg);
}

.crt.crt--glow .crt-frame {
	box-shadow: 0 0 8px color-mix(in srgb, var(--crt-fg) 45%, transparent), inset 0 0 8px color-mix(in srgb, var(--crt-fg) 25%, transparent);
}

.crt .crt-title {
	position: absolute;
	top: 0;
	left: 22px;
	right: 22px;
	margin: 0;
	padding: 0;
	line-height: 1;
	transform: translateY(-52%);
	pointer-events: none;
}

.crt .crt-title span {
	display: inline-block;
	max-width: 100%;
	padding: 0 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: var(--crt-bg);
	color: var(--crt-fg);
	font-size: 1.15em;
	vertical-align: top;
}

/* ---------- Tabs ---------- */

.crt .crt-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: 0 0 22px;
	padding: 8px 10px;
	border: 2px solid var(--crt-fg);
}

.crt .crt-tab {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 2px 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--crt-fg);
	text-shadow: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.crt .crt-tab:hover,
.crt .crt-tab:focus-visible,
.crt .crt-tab.is-on {
	background: var(--crt-fg);
	color: var(--crt-bg);
	text-shadow: none;
	outline: none;
}

.crt .crt-tab:not(.is-on):hover {
	opacity: 0.85;
}

/* ---------- Panels ---------- */

.crt .crt-panel {
	position: relative;
	min-height: 270px;
	margin: 12px 0 18px;
	padding: 30px 14px 16px;
	border: 2px solid var(--crt-fg);
}

.crt .crt-panel[hidden] {
	display: none;
}

.crt .crt-panel-title {
	position: absolute;
	top: 0;
	left: 14px;
	line-height: 1;
	transform: translateY(-52%);
}

.crt .crt-panel-title span {
	display: inline-block;
	padding: 0 8px;
	background: var(--crt-bg);
}

.crt .crt-body {
	display: block;
}

.crt .crt-link {
	display: grid;
	grid-template-columns: 34px minmax(0, 11em) minmax(0, 1fr);
	align-items: center;
	gap: 0 14px;
	margin: 0;
	padding: 4px 10px;
	color: var(--crt-fg);
	text-decoration: none;
	text-shadow: inherit;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.crt .crt-link:hover,
.crt .crt-link:focus-visible {
	background: var(--crt-fg);
	color: var(--crt-bg);
	text-shadow: none;
	outline: none;
}

.crt .crt-page .crt-name::after {
	content: none;
}

.crt .crt-mark {
	text-align: center;
}

.crt .crt-ico {
	display: block;
	width: 30px;
	height: 30px;
	background-color: currentColor;
	-webkit-mask: var(--crt-ico, none) center / contain no-repeat;
	mask: var(--crt-ico, none) center / contain no-repeat;
}

.crt .crt-ico:not([style]) {
	-webkit-mask: none;
	mask: none;
	background: none;
	border: 2px dashed currentColor;
	opacity: 0.5;
}

.crt.crt--icon-orig .crt-ico[style] {
	-webkit-mask: none;
	mask: none;
	background: var(--crt-ico) center / contain no-repeat;
}

.crt .crt-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.crt .crt-name::after {
	content: ":";
}

.crt .crt-url {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.8;
}

.crt .crt-link:hover .crt-url,
.crt .crt-link:focus-visible .crt-url {
	opacity: 1;
}

.crt .crt-empty {
	margin: 0;
	opacity: 0.7;
}

.crt .crt-blank {
	min-height: 2em;
}

.crt .crt-cursor {
	display: inline-block;
	width: 0.55em;
	height: 1em;
	margin: 6px 0 0 10px;
	background: var(--crt-fg);
	vertical-align: text-bottom;
	animation: crt-blink 1.1s steps(1) infinite;
}

.crt .crt-foot[hidden] {
	display: none;
}

.crt .crt-foot {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 0.9em;
	opacity: 0.85;
}

/* ---------- Upload form (tab 2) ---------- */

.crt .crt-form { margin: 0; padding: 0; }
.crt .crt-form[hidden], .crt .crt-intro[hidden] { display: none; }
.crt .crt-intro { margin: 0 0 14px; }
.crt .crt-outro { margin: 16px 0 0; }
.crt .crt-outro[hidden] { display: none; }

.crt .crt-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 3px 22px;
	border: 2px solid var(--crt-fg);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--crt-fg);
	text-shadow: inherit;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.crt .crt-btn:hover,
.crt .crt-btn:focus-visible {
	background: var(--crt-fg);
	color: var(--crt-bg);
	text-shadow: none;
	outline: none;
}

.crt .crt-btn[disabled] { opacity: 0.5; cursor: default; }

.crt .crt-upload-row,
.crt .crt-send-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.crt .crt-file {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.85;
}

.crt .crt-hint { margin: -6px 0 16px; font-size: 0.9em; }
.crt .crt-hint[hidden] { display: none; }
.crt .crt-hint::before { content: "> ERROR: "; }
.crt .crt-upload-row { margin-bottom: 16px; }

.crt .crt-label { display: block; margin: 0 0 4px; color: var(--crt-fg); }

.crt .crt-text {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0 0 14px;
	padding: 8px 10px;
	border: 2px solid var(--crt-fg);
	border-radius: 0;
	background: var(--crt-bg);
	box-shadow: none;
	color: var(--crt-fg);
	caret-color: var(--crt-fg);
	font: inherit;
	line-height: 1.25;
	letter-spacing: inherit;
	text-shadow: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.crt textarea.crt-text { resize: vertical; }

.crt .crt-text::placeholder { color: var(--crt-fg); opacity: 0.45; }
.crt .crt-text:focus { outline: none; box-shadow: 0 0 8px color-mix(in srgb, var(--crt-fg) 55%, transparent); }

.crt .crt-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.crt .crt-status { min-width: 0; }
.crt .crt-status.is-error::before { content: "> ERROR: "; }
.crt .crt-status.is-ok::before { content: "> "; }

.crt .crt-panel:has(.crt-form) .crt-cursor { display: none; }

/* Lines appear one after the other when a tab opens */
.crt.is-js .crt-panel.is-typing .crt-link {
	animation: crt-line 0.05s linear backwards;
	animation-delay: calc(var(--i, 0) * 90ms);
}

/* ---------- Monitor effects ---------- */

.crt .crt-fx {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}

.crt .crt-fx > span {
	position: absolute;
	inset: 0;
	display: none;
}

.crt.crt--scan .crt-fx-scan {
	display: block;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0, rgba(0, 0, 0, 0.32) 1px, transparent 1px, transparent 3px);
}

.crt.crt--curve .crt-fx-vig {
	display: block;
	background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.crt.crt--roll .crt-fx-roll {
	display: block;
	height: 26%;
	bottom: auto;
	top: -30%;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--crt-fg) 10%, transparent), transparent);
	animation: crt-roll 7s linear infinite;
}

.crt.crt--flicker .crt-screen {
	animation: crt-flicker 5s infinite;
}

.crt.crt--power .crt-frame {
	animation: crt-on 0.8s ease-out both;
}

@keyframes crt-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes crt-line {
	from { opacity: 0; }
}

@keyframes crt-roll {
	from { transform: translateY(0); }
	to { transform: translateY(520%); }
}

@keyframes crt-flicker {
	0%, 100% { opacity: 1; }
	6% { opacity: 0.97; }
	7% { opacity: 1; }
	38% { opacity: 0.985; }
	40% { opacity: 1; }
	71% { opacity: 0.96; }
	72% { opacity: 0.99; }
	73% { opacity: 1; }
}

@keyframes crt-on {
	0% { opacity: 0; transform: scale(1, 0.01); filter: brightness(4); }
	35% { opacity: 1; transform: scale(1, 0.02); filter: brightness(3); }
	100% { opacity: 1; transform: scale(1, 1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
	.crt .crt-cursor,
	.crt .crt-fx-roll,
	.crt.crt--flicker .crt-screen,
	.crt.crt--power .crt-frame,
	.crt.is-js .crt-panel.is-typing .crt-link {
		animation: none !important;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
	.crt {
		font-size: calc(var(--crt-size) * 0.8);
		padding: 8px;
		border-radius: 16px;
	}
	.crt .crt-screen { padding: 22px 10px 14px; }
	.crt .crt-frame { padding: 30px 8px 10px; }
	.crt .crt-panel { padding: 26px 6px 12px; min-height: 200px; }
	.crt .crt-link { grid-template-columns: 28px minmax(0, 1fr); padding: 6px 6px; }
	.crt .crt-url { grid-column: 2; font-size: 0.85em; }
	.crt .crt-page .crt-mark { grid-row: 1 / span 2; align-self: start; }
	.crt .crt-ico { width: 24px; height: 24px; }
	.crt .crt-foot { font-size: 0.85em; }
}