:root {
			--bg: #0b0b0b;
			--fg: #e6e6e6;
			--muted: #9a9a9a;
			--accent: #00ff9c;
			--error: #ff5555;
			--info: #00ffff;
		}
		* {
			box-sizing: border-box;
		}
		html, body {
			margin: 0;
			padding: 0;
			background: var(--bg);
			color: var(--fg);
			height: 100%;
			font-family: ui-monospace, Consolas, monospace;
		}
		body {
			display: flex;
			flex-direction: column;
			height: 100vh;
			width: 75%;
			margin: auto;
			font-size: 13px;
			line-height: 1.7;
			padding: 8px 0 10px 0;
		}
		h3 {
			margin-top: 16px;
			margin-bottom: 10px;
			color: var(--fg);
		}
		/* ---------- Header ---------- */
		header {
			padding: 20px 24px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
		}
		.logo {
			white-space: pre;
			letter-spacing: 0.08em;
		}
		.cursor {
			color: var(--accent);
			animation: blink 1.2s step-end infinite;
			display: inline-block; /* Essential for cursor alignment */
		}
		@keyframes blink {
			50% { opacity: 0; }
		}
		/* ---------- Main ---------- */
		main {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 0 auto;
			width: 100%;
			overflow: hidden;
		}
		.hero {
			position: relative;
			min-height: 70px;
		}
		/*.home .hero {
			height: 130px;
		}*/
		.hero h1 {
			font-size: 28px;
			font-weight: 400;
			margin: 0 0 12px 0;
			letter-spacing: 0.12em;
		}
		.bars {
			color: var(--accent);
			font-size: 20px;
			letter-spacing: 6px;
			margin-bottom: 16px;
		}
		.logo {
			font-family: 'Courier New';
			line-height: 0.5;
			position: relative;
			top: 0;
			left: 0;
			transition: all 600ms ease-in;
		}
		@media screen and (max-width:720px) {
			.logo {
				font-size: 10px;
			}
		}
		.content {
    		overflow-y: auto;
			opacity: 0;
			color: var(--muted);
			transition: all 900ms ease-in;
		}
		.content {
			scrollbar-width: none;
			scrollbar-color: transparent transparent;
		}
		.content::-webkit-scrollbar {
			width: 8px;
		}
		.content::-webkit-scrollbar-track,
		.content::-webkit-scrollbar-thumb {
			background: transparent;
		}
		.content img {
			max-width: 100%;
			width: 700px;
		}
		.title {
			transition: all 900ms ease-in;
		}
		.home .title {
			color: var(--muted);
			cursor: normal;
			letter-spacing: 0.18em;
		}
		.hero .title {
			opacity: 0;
		}
		.page .title {
			color: var(--accent);
			cursor: pointer;
		}
		.entry {
			color: var(--accent);
			cursor: pointer;
			font-size: 16px;
		}

		/* Page transition */
		/*transition-timing-function: steps(6, end);*/
		.transit-move.home .logo,
		.page:not(.transit-move) .logo {
			font-size: 5px;
		}
		.transit-hide .hero .title,
		.transit-hide .content {
			opacity: 0;
		}

		/* ---------- Modules ---------- */
		.modules {
			margin-top: 24px;
		}
		.modules h2 {
			font-size: 13px;
			font-weight: 400;
			letter-spacing: 0.16em;
			margin-bottom: 14px;
			color: var(--muted);
		}
		.module {
			margin-bottom: 14px;
		}
		.module small {
			display: block;
			color: var(--muted);
			margin-left: 17px;
			font-size: 13px;
		}
		.module input {
			caret-color: var(--accent);
		}

		/* CLI Styles */
		contact-cli {
			margin-top: 8px;
			margin-left: 17px;
		}
		contact-cli .initial-cursor { 
			 display: inline-block;
		}
		contact-cli .contact-input {
			background: transparent;
			color: var(--fg);
			border: none;
			padding: 0;
			font-family: inherit;
			font-size: inherit;
			width: 70%; /* Give space for input, prompt, and cursor */
		}
		contact-cli .contact-input:focus {
			outline: none;
		}
		contact-cli .prompt-line {
			display: flex;
			posistion: relative;
		}
		contact-cli .prompt-line input {
			flex: 1;
		}
		contact-cli .prompt-label {
			 color: var(--fg);
			 margin-right: 5px;
			 white-space: pre; /* Ensure space after label is kept */
		}
		contact-cli .message-success { color: var(--info); }
		contact-cli .message-error { color: var(--error); }
		contact-cli .message-info { color: var(--info); }
		contact-cli .fixed-back {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		/* ---------- Footer ---------- */
		footer {
			padding: 16px 0;
			font-size: 12px;
			color: var(--muted);
			display: flex;
			justify-content: space-between;
		}
		footer div {
			margin-left: auto;
		}
		.hidden { display: none !important; }