:root {
	color-scheme: dark;
	font-family: "JetBrains Mono", monospace;
	background: var(--page-bg);
	color: var(--accent);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	--page-bg: #07110c;
	--terminal-bg: rgba(2, 8, 4, 0.88);
	--accent: #a6f2b3;
	--accent-dim: #5c9169;
	--accent-muted: #52745a;
	--accent-line: rgba(166, 242, 179, 0.15);
	--accent-grid: rgba(166, 242, 179, 0.025);
	--accent-soft: rgba(166, 242, 179, 0.04);
	--accent-hover: rgba(166, 242, 179, 0.08);
	--accent-glow: rgba(166, 242, 179, 0.7);
	--accent-text-glow: rgba(166, 242, 179, 0.24);
	--directory-accent: #d2ff82;
	--theme-swatch: var(--accent);
	--green: var(--accent);
	--green-dim: var(--accent-dim);
	--line: var(--accent-line);
}

* {
	box-sizing: border-box;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	background-color: var(--page-bg);
	background-image:
		linear-gradient(var(--accent-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--accent-grid) 1px, transparent 1px);
	background-size: 48px 48px;
}

body[data-theme="light"] {
	color-scheme: light;
	--page-bg: #eef2f5;
	--terminal-bg: #ffffff;
	--accent: #1f4e6b;
	--accent-dim: #516b7a;
	--accent-muted: #6e7f8a;
	--accent-line: rgba(43, 70, 89, 0.2);
	--accent-grid: rgba(44, 83, 108, 0.035);
	--accent-soft: rgba(36, 91, 129, 0.07);
	--accent-hover: rgba(36, 91, 129, 0.13);
	--accent-glow: rgba(36, 91, 129, 0.2);
	--accent-text-glow: rgba(36, 91, 129, 0.12);
	--directory-accent: #146b8c;
	--green: var(--accent);
	--green-dim: var(--accent-dim);
	--line: var(--accent-line);
}

body[data-theme="vscode"] {
	--page-bg: #181818;
	--terminal-bg: #1e1e1e;
	--accent: #4fc1ff;
	--accent-dim: #9da5b4;
	--accent-muted: #858585;
	--accent-line: rgba(174, 183, 193, 0.2);
	--accent-grid: rgba(174, 183, 193, 0.025);
	--accent-soft: rgba(79, 193, 255, 0.08);
	--accent-hover: rgba(79, 193, 255, 0.14);
	--accent-glow: rgba(79, 193, 255, 0.4);
	--accent-text-glow: rgba(79, 193, 255, 0.18);
	--directory-accent: #dcdcaa;
	--green: var(--accent);
	--green-dim: var(--accent-dim);
	--line: var(--accent-line);
}

body[data-theme="ubuntu"] {
	--page-bg: #2C001E;
	--terminal-bg: #5E2750;
	--accent: #ffffff;
	--accent-dim: #f0ddeb;
	--accent-muted: #d8bdd2;
	--accent-line: #77216F;
	--accent-grid: rgba(119, 33, 111, 0.18);
	--accent-soft: rgba(44, 0, 30, 0.35);
	--accent-hover: #77216F;
	--accent-glow: rgba(119, 33, 111, 0.72);
	--accent-text-glow: rgba(119, 33, 111, 0.55);
	--directory-accent: #ffffff;
	--theme-swatch: #77216F;
	--green: var(--accent);
	--green-dim: var(--accent-dim);
	--line: var(--accent-line);
}

body[data-theme="ubuntu"] .console__output {
	color: #ffffff;
}

body[data-theme="ubuntu"] .console__line--command,
body[data-theme="ubuntu"] .console__prompt,
body[data-theme="ubuntu"] .console__prompt input,
body[data-theme="ubuntu"] .console__choice,
body[data-theme="ubuntu"] .console__choice::before {
	color: #8ae234;
}

.terminal {
	width: min(100% - 64px, 1000px);
	min-height: 100vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.terminal__bar {
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--line);
	color: var(--green-dim);
	font-size: 12px;
}

.terminal__status {
	color: var(--green);
}

.terminal__status::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 9px 1px 0;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 10px var(--accent-glow);
}

.welcome {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 0 120px;
}

.welcome__command,
.welcome__path {
	margin: 0;
	color: var(--green-dim);
	font-size: 13px;
}

.welcome__command span {
	margin-right: 10px;
	color: var(--green);
}

body[data-theme="ubuntu"] .welcome__command,
body[data-theme="ubuntu"] .welcome__command span {
	color: #8ae234;
}

.welcome h1 {
	max-width: 900px;
	margin: 24px 0 28px;
	color: var(--green);
	font-size: 64px;
	font-weight: 500;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.welcome__cursor {
	display: inline-block;
	margin-left: 8px;
	animation: blink 1s steps(2, start) infinite;
}

.welcome__path {
	color: var(--accent-muted);
}

.welcome__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 56px;
}

.welcome__continue {
	width: fit-content;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--green-dim);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.welcome__continue:hover,
.welcome__continue:focus-visible {
	color: var(--green);
}

.welcome__theme {
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 11px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--green-dim);
	font: inherit;
	font-size: 11px;
	cursor: pointer;
}

.welcome__theme:hover,
.welcome__theme:focus-visible {
	color: var(--green);
}

.welcome__theme:focus-visible {
	outline: 1px solid var(--green-dim);
	outline-offset: 6px;
}

.welcome__theme-swatch {
	width: 8px;
	height: 8px;
	background: var(--theme-swatch);
	box-shadow: 0 0 8px var(--accent-glow);
}

.welcome__language {
	min-height: 36px;
	display: inline-flex;
	border: 1px solid var(--line);
}

.welcome__language button {
	min-width: 38px;
	padding: 0 9px;
	border: 0;
	background: transparent;
	color: var(--green-dim);
	font: inherit;
	font-size: 11px;
	cursor: pointer;
}

.welcome__language button[aria-pressed="true"] {
	background: var(--accent-soft);
	color: var(--green);
}

body[data-theme="ubuntu"] .welcome__language button[aria-pressed="true"] {
	background: #8ae234;
	color: #2c001e;
	box-shadow: 0 0 8px rgba(138, 226, 52, 0.25);
}

.welcome__language button:focus-visible {
	position: relative;
	z-index: 1;
	outline: 1px solid var(--green-dim);
	outline-offset: 2px;
}

.welcome__continue:focus-visible {
	outline: 1px solid var(--green-dim);
	outline-offset: 6px;
}

.welcome__hint--touch {
	display: none;
}

.console:not([hidden]) {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 48px 0;
}

.console__window {
	width: 100%;
	height: min(68vh, 620px);
	min-height: 280px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	background: var(--terminal-bg);
}

.cv-dialog {
	width: min(900px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--terminal-bg);
	color: var(--green);
}

.cv-dialog::backdrop {
	background: rgba(0, 0, 0, 0.72);
}

.cv-dialog__header,
.cv-dialog__footer {
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
}

.cv-dialog__header {
	border-bottom: 1px solid var(--line);
}

.cv-dialog__title {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

.cv-dialog__close,
.cv-dialog__download {
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--line);
	background: var(--accent-soft);
	color: var(--green);
	font: inherit;
	font-size: 11px;
	text-decoration: none;
	cursor: pointer;
}

.cv-dialog__close:hover,
.cv-dialog__close:focus-visible,
.cv-dialog__download:hover,
.cv-dialog__download:focus-visible {
	border-color: var(--green);
	background: var(--accent-hover);
}

.cv-dialog__close:focus-visible,
.cv-dialog__download:focus-visible {
	outline: 1px solid var(--green-dim);
	outline-offset: 2px;
}

.cv-dialog__preview {
	width: 100%;
	height: min(68vh, 720px);
	display: block;
	border: 0;
	background: #ffffff;
}

.cv-dialog__footer {
	justify-content: flex-end;
	border-top: 1px solid var(--line);
}

.console__titlebar {
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-bottom: 1px solid var(--line);
	color: var(--green-dim);
	font-size: 11px;
}

.console__lights {
	position: absolute;
	left: 14px;
	display: flex;
	gap: 6px;
}

.console__lights i {
	width: 7px;
	height: 7px;
	border: 1px solid var(--green-dim);
	border-radius: 50%;
}

.console__body {
	min-height: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 24px;
}

.console__output {
	min-height: 0;
	flex: 1;
	overflow-y: auto;
	color: var(--green-dim);
	font-size: 13px;
	line-height: 1.8;
}

.console__welcome-art {
	max-width: 100%;
	margin: 0 0 20px;
	overflow-x: auto;
	overflow-y: hidden;
	color: var(--green);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	white-space: pre;
	text-shadow: 0 0 18px var(--accent-text-glow);
}

.console__line,
.console__message {
	margin: 0 0 8px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.console__line--command {
	color: var(--green);
}

.console__line--command span:first-child {
	margin-right: 10px;
}

.console__listing {
	margin: 0 0 8px;
}

.console__listing-entry {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.console__listing-entry::before {
	display: inline-block;
	min-width: 42px;
	color: var(--green-dim);
	font-size: 10px;
}

.console__listing-entry--file::before {
	content: "FILE";
}

.console__listing-entry--directory {
	color: var(--green);
	font-weight: 700;
}

.console__listing-entry--directory::before {
	content: "DIR";
	color: var(--directory-accent);
}

.console__note {
	margin: 14px 0 8px;
	padding: 8px 12px;
	border-left: 2px solid var(--green-dim);
	background: var(--accent-soft);
	color: var(--green);
	font-size: 12px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.console__prompt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
	color: var(--green);
}

.console__prompt input {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--green);
	font: inherit;
	font-size: 13px;
}

.console__prompt input::placeholder {
	color: var(--accent-muted);
}

.console__choices {
	display: none;
}

[hidden] {
	display: none !important;
}

@keyframes blink {
	to {
		visibility: hidden;
	}
}

@media (max-width: 560px) {
	.terminal {
		width: min(100% - 40px, 1000px);
	}

	.welcome {
		padding: 64px 0 96px;
	}

	.welcome__command,
	.welcome__path {
		font-size: 11px;
	}

	.welcome h1 {
		font-size: 32px;
	}

	.welcome__continue {
		margin-top: 44px;
	}

	.console:not([hidden]) {
		padding: 24px 0;
	}

	.console__body {
		padding: 16px;
	}

	.console__output,
	.console__prompt input {
		font-size: 12px;
	}

	.console__welcome-art {
		font-size: 6px;
	}

	.cv-dialog__preview {
		height: 65vh;
	}
}

@media (hover: none) and (pointer: coarse) {
	.welcome__hint--keyboard {
		display: none;
	}

	.welcome__hint--touch {
		display: inline;
	}

	.console__prompt {
		display: none;
	}

	.console__choices {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 16px;
	}

	.console__choice {
		min-height: 44px;
		padding: 10px 12px;
		border: 1px solid var(--line);
		background: var(--accent-soft);
		color: var(--green);
		font: inherit;
		font-size: 11px;
		text-align: left;
		cursor: pointer;
	}

	.console__choice::before {
		content: "$ ";
		color: var(--green-dim);
	}

	.console__choice:hover,
	.console__choice:focus-visible {
		border-color: var(--green-dim);
		background: var(--accent-hover);
	}

	.console__choice:focus-visible {
		outline: 1px solid var(--green-dim);
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}