:root {
	--bg: #ffffff;
	--accent: #2563eb;
	--text-main: #111111;
	--text-secondary: #64748b;
	--code-bg: #f8fafc;
	--border: #e2e8f0;
	--section-gap: 100px;
}

body {
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
	background-color: var(--bg);
	color: var(--text-main);
	margin: 0;
	padding: 80px 24px;
	padding-bottom: 20px;
	-webkit-font-smoothing: antialiased;
}

.wrapper {
	max-width: 800px;
	margin: 0 auto;
}

header {
	margin-bottom: var(--section-gap);
	border-bottom: 1px solid var(--border);
	padding-bottom: 40px;
}

h1 {
	font-size: 3.5rem;
	font-weight: 800;
	margin: 0;
	line-height: 1.1;
}

.tagline {
	font-size: 1.2rem;
	color: var(--text-secondary);
	margin-top: 16px;
	font-weight: 400;
}

/* Markdown Rendered Styles */
#content h2 {
	font-size: 2rem;
	font-weight: 700;
	margin: var(--section-gap) 0 20px 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

#content h2::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--accent);
	font-size: 1.5rem;
}

/* Step Specific Icons using CSS based on Header Text */
#content h2:nth-of-type(1)::before {
	content: "\f0c2";
}

/* Cloud Download */
#content h2:nth-of-type(2)::before {
	content: "\f3ed";
}

/* Shield Check */
#content h2:nth-of-type(3)::before {
	content: "\f13d";
}

/* Rocket */
#content h2:nth-of-type(4)::before {
	content: "\f51a";
}

/* Broom */
#content h2:nth-of-type(5)::before {
	content: "\f085";
}

/* Gears */

#content p {
	font-size: 1.1rem;
	color: var(--text-secondary);
	max-width: 650px;
	line-height: 1.7;
	margin-bottom: 32px;
}

#content p a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.block-container {
	position: relative;
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
}

.block-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.block-title {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.7rem;
	color: var(--text-secondary);
	font-weight: 700;
}

pre {
	margin: 0;
	overflow-x: auto;
	white-space: pre;
	scrollbar-width: none;
}

code {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.95rem;
	color: var(--text-main);
	background: var(--code-bg);
	padding: 2px 6px;
	border-radius: 4px;
}

pre code {
	padding: 0;
	background: transparent;
}

.copy-trigger {
	background: #ffffff;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.2s;
}

.copy-trigger.success {
	border-color: #10b981;
	color: #10b981;
}

.info-card {
	margin-top: 24px;
	padding: 16px 20px;
	background: #f0f9ff;
	border-radius: 12px;
	display: flex;
	gap: 16px;
	font-size: 0.95rem;
	color: #0369a1;
}

.url-input {
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--text-secondary);
	color: var(--accent);
	font-family: "JetBrains Mono", monospace;
	font-size: 0.95rem;
	padding: 0;
	margin: 0 2px;
	outline: none;
	box-sizing: content-box;
	transition: border-color 0.2s ease;
}

.url-input:focus {
	border-bottom-color: var(--accent);
}

.url-input::placeholder {
	color: var(--text-secondary);
	opacity: 0.5;
}