/* The page ships zero JavaScript: the boot sequence is CSS keyframes on animation-delay,
   so the reduced-motion block at the bottom is the only path that has to reveal everything. */

@font-face {
	font-family: "MD IO";
	src: url("/fonts/md-io.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--black: #111111;
	--gray: #99968f;
	--cream: #f6f6f6;
	--green: #00d424;
	--orange: #fa4323;
	--rule: #262626;
	/* The client icon's gradient, sampled from its top-right and bottom-left ends. */
	--magenta: #f052e0;
	--pink: #f0459d;
	--rose: #f3355c;
}

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

body {
	margin: 0;
	padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 5vw, 2rem) 4rem;
	background: var(--black);
	color: var(--cream);
	font-family: "MD IO", ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

main {
	max-width: 78ch;
	margin: 0 auto;
}

/* Set in a system monospace stack, not MD IO, because the half-block glyphs fall back
   per-character in fonts that lack them and the art shears apart. The art is 112 columns
   wide, so the size ceiling keeps it inside main and the vw term keeps it off the edge
   on narrow screens. */
.art {
	margin: 0 0 1.25rem;
	font-family:
		ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
	font-size: clamp(3.4px, 1.3vw, 9px);
	line-height: 1;
	color: var(--pink);
	overflow: hidden;
}

/* Carries the icon's gradient across the art the way the icon runs it: magenta at the
   top right, rose at the bottom left. Guarded so the flat pink above stays the fallback. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.art {
		background: linear-gradient(to bottom left, var(--magenta), var(--rose));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

h1 {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.34em;
	color: var(--cream);
}

.tagline {
	margin: 0.2rem 0 2.25rem;
	color: var(--gray);
	letter-spacing: 0.08em;
}

.boot {
	margin: 0 0 2.5rem;
}

.boot__line {
	margin: 0;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--gray);
	/* One step per column of the longest boot line, so the reveal lands on characters. */
	animation: type 340ms steps(68) both;
}

.boot__line:nth-child(1) {
	animation-delay: 0ms;
}

.boot__line:nth-child(2) {
	animation-delay: 320ms;
}

.boot__line:nth-child(3) {
	animation-delay: 620ms;
}

.boot__line:nth-child(4) {
	animation-delay: 920ms;
}

.boot__line:nth-child(5) {
	animation-delay: 1220ms;
}

.boot__label {
	display: inline-block;
	min-width: 18ch;
}

.boot__value {
	color: var(--cream);
}

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

.tag--ok {
	color: var(--green);
}

.tag--bad {
	color: var(--orange);
}

.caret {
	display: inline-block;
	width: 0.6em;
	height: 1em;
	margin-left: 0.3em;
	vertical-align: -0.15em;
	background: var(--green);
	animation: blink 1.05s step-end infinite;
	animation-delay: 1560ms;
}

.stage {
	animation: settle 420ms ease-out 1560ms both;
}

section {
	margin: 0 0 2.5rem;
}

h2 {
	margin: 0 0 0.75rem;
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gray);
}

p {
	margin: 0 0 0.85rem;
}

p:last-child {
	margin-bottom: 0;
}

/* Orange warns, pink informs: the signing warning and the beta notice are separate
   concerns and should not read as one alarm. */
.beta {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--pink);
	background: rgba(240, 69, 157, 0.06);
}

.beta h2 {
	color: var(--pink);
}

.beta p {
	color: #ffd7ea;
}

.hazard {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--orange);
	background: rgba(250, 67, 35, 0.06);
}

.hazard h2 {
	color: var(--orange);
}

.hazard p {
	color: #ffd2c7;
}

.build {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--rule);
	background: rgba(246, 246, 246, 0.02);
}

dl {
	display: grid;
	grid-template-columns: 12ch minmax(0, 1fr);
	gap: 0.35rem 1.5rem;
	margin: 0 0 1.6rem;
}

dt {
	color: var(--gray);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.78rem;
	align-self: baseline;
}

dd {
	margin: 0;
	word-break: break-all;
}

dd.absent {
	color: var(--orange);
}

.download {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--green);
	color: var(--green);
	text-decoration: none;
	word-break: break-all;
	transition:
		background 120ms linear,
		color 120ms linear;
}

.download:hover,
.download:focus-visible {
	background: var(--green);
	color: var(--black);
}

.download:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

pre.command {
	margin: 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--rule);
	background: rgba(246, 246, 246, 0.02);
	color: var(--green);
	overflow-x: auto;
}

ol {
	margin: 0 0 0.85rem;
	padding-left: 1.4rem;
}

li {
	margin-bottom: 0.3rem;
}

li::marker {
	color: var(--green);
}

footer {
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
	color: var(--gray);
}

a {
	color: var(--pink);
}

a:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

@keyframes type {
	from {
		max-width: 0;
	}
	to {
		max-width: 68ch;
	}
}

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

@keyframes settle {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boot__line {
		max-width: none;
		animation: none;
	}

	.stage {
		animation: none;
	}

	.caret {
		animation: none;
	}
}