@font-face {
	font-family: 'Cascadia Code';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/fontsource/fonts/cascadia-code@latest/latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Cascadia Code';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/fontsource/fonts/cascadia-code@latest/latin-700-normal.woff2') format('woff2');
}

:root {
	--page-bg: #000000;
	--terminal-bg: #282c34;
	--fg: #dcdfe4;
	--ansi-black: #282c34;
	--ansi-red: #e06c75;
	--ansi-green: #98c379;
	--ansi-yellow: #e5c07b;
	--ansi-blue: #61afef;
	--ansi-magenta: #c678dd;
	--ansi-cyan: #56b6c2;
	--ansi-white: #dcdfe4;
	--ghost: #5c6370;
}

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

html,
body {
	height: 100%;
	overflow: hidden;
	background: var(--page-bg);
	color: var(--fg);
	font-family: 'Cascadia Code', Consolas, monospace;
	font-size: 14px;
	line-height: 1.45;
	font-variant-ligatures: common-ligatures;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#app {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 16px 0 0 0;
	gap: 16px;
}

/* --- Identity Panel --- */

#identity-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	gap: 16px;
}

#avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}

#identity-info {
	text-align: center;
}

#identity-name {
	font-size: 18px;
	font-weight: bold;
	color: var(--ansi-white);
	margin-bottom: 4px;
}

#identity-title {
	font-size: 14px;
	color: var(--ghost);
	margin-bottom: 8px;
}

.identity-email {
	font-size: 13px;
	color: var(--ansi-blue);
	text-decoration: none;
}

#identity-email-link {
	display: none;
}

#identity-email-text {
	user-select: text;
	cursor: text;
}

@media (max-width: 767px) {
	#identity-email-text {
		display: none;
	}

	#identity-email-link {
		display: inline;
	}
}

/* --- Terminal --- */

#terminal-container {
	flex: 1;
	width: 100%;
	min-height: 0;
}

#terminal {
	width: 100%;
	height: 100%;
	background: var(--terminal-bg);
	padding: 16px;
	overflow-y: auto;
	position: relative;
}

#terminal::-webkit-scrollbar {
	width: 8px;
}

#terminal::-webkit-scrollbar-track {
	background: transparent;
}

#terminal::-webkit-scrollbar-thumb {
	background: #3e4451;
	border-radius: 4px;
}

#terminal-output {
	white-space: pre-wrap;
	word-break: break-word;
}

/* --- Prompt --- */

.prompt-line {
	display: flex;
	flex-wrap: wrap;
}

.prompt-spaced {
	margin-top: 24px;
}

.prompt-user {
	color: var(--ansi-green);
}

.prompt-shell {
	color: var(--ansi-magenta);
	margin: 0 8px 0;
}

.prompt-cwd {
	color: var(--ansi-yellow);
}

.prompt-dollar {
	color: var(--fg);
	margin-right: 8px;
}

/* --- Input Line --- */

.input-line {
	display: flex;
	align-items: center;
	min-height: 1.45em;
}

.input-text {
	outline: none;
	color: var(--fg);
	caret-color: transparent;
	white-space: pre;
}

.input-text.inline-prompt {
	margin-left: 8px;
}

.cursor {
	display: inline-block;
	width: 0.6em;
	height: 1.15em;
	background: var(--fg);
	animation: blink 1s step-end infinite;
	vertical-align: text-bottom;
}

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

/* --- Hidden input for mobile keyboard --- */

#hidden-input {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* --- ANSI color classes --- */

.ansi-red {
	color: var(--ansi-red);
}
.ansi-green {
	color: var(--ansi-green);
}
.ansi-yellow {
	color: var(--ansi-yellow);
}
.ansi-blue {
	color: var(--ansi-blue);
}
.ansi-magenta {
	color: var(--ansi-magenta);
}
.ansi-cyan {
	color: var(--ansi-cyan);
}
.ansi-white {
	color: var(--ansi-white);
}
.ansi-bold {
	font-weight: bold;
}

/* --- Links in output --- */

.terminal-link {
	color: var(--ansi-blue);
	text-decoration: none;
	cursor: pointer;
}

.terminal-link:hover {
	text-decoration: underline;
}

/* --- Ghost text --- */

.ghost-text {
	color: var(--ghost);
	padding-bottom: 8px;
}