/* /tech (tech.html, filled by tech/page.ts): how MUSEGOD works and why to
   join. The hero with the god and three muses, the live tally, the two ways
   in, the holder rewards, the muse agents, the weekly pot, the reasons and
   the contracts. What only builders need folds away in a .deep details.
   The shell is site.css; this is the page's own. */

main {
	max-width: 1120px;
	margin: 0 auto;
	padding: 20px var(--pad) calc(56px + env(safe-area-inset-bottom));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 72px;
	overflow-x: clip;
}
main > section {
	display: grid;
	gap: 24px;
	min-width: 0;
	scroll-margin-top: calc(var(--bar-h, 64px) + 16px);
}
.go,
.more {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
section h2 {
	margin: 0;
	font: italic 600 clamp(30px, 7vw, 46px) / 1.06 var(--serif);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
section h2 em,
main h3 em {
	color: var(--gold);
}
main h3 {
	margin: 0;
	font: 700 18px / 1.3 var(--sans);
	color: var(--bone);
}
.sec-line {
	margin: 0;
	max-width: 60ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--soft);
	text-wrap: pretty;
}
.sec-line b {
	--lh: 1.55;
	color: var(--bone);
}
main .i {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
section a:not(.btn, .way),
.fan a {
	color: var(--gold-hi);
	text-decoration-color: var(--underline);
	text-underline-offset: 3px;
}
main code {
	font: 400 0.9em var(--mono);
	color: var(--gold-hi);
	overflow-wrap: anywhere;
}

/* The hero: the words beside the god, three muses fanned over his foot. */
.hero {
	display: grid;
	gap: 40px;
	align-items: center;
}
.hero-copy {
	display: grid;
	justify-items: start;
}
.hero .go {
	margin-top: 28px;
}
.hero-art {
	position: relative;
	margin: 0 auto;
	width: min(100%, 440px);
	padding-bottom: 96px;
}
.god {
	position: relative;
	border-radius: 36px;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--line);
}
.god::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 40% at 50% 10%, rgba(var(--gold-hi-rgb), 0.18), transparent 70%),
		linear-gradient(180deg, transparent 55%, rgba(var(--void-rgb), 0.85));
	pointer-events: none;
}
.god img {
	display: block;
	width: 100%;
	height: auto;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 14px 0 12px;
	border-radius: 999px;
	background: rgba(var(--void-rgb), 0.75);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.3);
	font: 600 13px var(--sans);
	color: var(--gold-hi);
}
.chip .i {
	width: 16px;
	height: 16px;
}
.god-chip {
	position: absolute;
	z-index: 1;
	top: 16px;
	left: 16px;
}
.fan {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	width: 112%;
	transform: translateX(-50%);
}
.fan li {
	flex: 0 0 34%;
	margin: 0 -2%;
	transform: rotate(-7deg) translateY(10px);
	transition: transform 0.3s;
}
.fan li:nth-child(2) {
	z-index: 1;
	transform: translateY(-6px);
}
.fan li:nth-child(3) {
	transform: rotate(7deg) translateY(10px);
}
.fan a,
.fan li[aria-hidden] {
	display: grid;
	gap: 8px;
	padding: 8px 8px 10px;
	border-radius: 20px;
	background: var(--card-hi);
	box-shadow:
		0 18px 40px rgba(var(--void-rgb), 0.6),
		inset 0 0 0 1px var(--line-hi);
	text-decoration: none;
}
@media (hover: hover) {
	.fan li:hover {
		z-index: 2;
		transform: translateY(-14px) scale(1.04);
	}
}
.fan-art {
	display: block;
	aspect-ratio: 1;
	border-radius: 14px;
	overflow: hidden;
	background: var(--card);
}
.fan-art img,
.fan-art .skel-art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fan-t {
	display: grid;
	gap: 2px;
	padding: 0 4px;
	min-width: 0;
}
.fan-t b {
	font: 700 14px / 1.25 var(--sans);
	color: var(--bone);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fan-t small {
	font: 400 11px / 1.3 var(--mono);
	color: var(--gold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The tally: four live numbers, two by two on a phone. */
.tally {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.tally li {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 18px 16px;
	border-radius: 22px;
	background:
		radial-gradient(100% 90% at 0% 0%, rgba(var(--gold-rgb), 0.12), transparent 70%), var(--card);
}
.tally b {
	--lh: 1.05;
	justify-self: start;
	font: 600 clamp(30px, 8vw, 44px) / 1.05 var(--serif);
	letter-spacing: -0.02em;
	color: var(--gold-hi);
	font-variant-numeric: lining-nums tabular-nums;
}
.tally li > span:not(.t-i) {
	font-size: 14px;
	line-height: 1.4;
	color: var(--soft);
}
.t-i,
.way-i,
.why-i {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: rgba(var(--gold-rgb), 0.12);
	color: var(--gold-hi);
}
.t-i .i,
.way-i .i,
.why-i .i {
	width: 20px;
	height: 20px;
}
.proof {
	margin-top: -32px;
}

/* The two ways in, each a card that jumps to its section. */
.ways {
	display: grid;
	gap: 12px;
}
.way {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: 24px 20px;
	border-radius: 28px;
	background:
		radial-gradient(80% 100% at 100% 0%, rgba(var(--gold-rgb), 0.16), transparent 70%), var(--card);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s;
}
.way h3 {
	font: italic 600 clamp(26px, 6vw, 32px) / 1.1 var(--serif);
	letter-spacing: -0.01em;
}
.way-more {
	margin-top: 4px;
	font: 600 15px var(--sans);
	color: var(--gold-hi);
}
.way-more::after {
	content: " ↓";
}
@media (hover: hover) {
	.way:hover {
		background-color: var(--card-hi);
	}
}
.ticks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.ticks li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--soft);
}
.ticks li::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background: var(--gold);
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") center / 16px no-repeat;
}

/* The rewards as a pipe: each step on a line that runs gold. */
.pipe {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}
.pipe::before {
	content: "";
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: 21px;
	width: 2px;
	background:
		linear-gradient(180deg, transparent, rgba(var(--gold-hi-rgb), 0.9) 50%, transparent) 0 -100% /
		100% 40% no-repeat,
		rgba(var(--gold-rgb), 0.2);
	animation: pipe-run 4s linear infinite;
}
.pipe > li {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}
.pipe-i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--card-hi);
	box-shadow: 0 0 0 4px var(--void);
	color: var(--gold-hi);
}
.pipe-i .i {
	width: 20px;
	height: 20px;
}
.pipe-t {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 18px;
	background: var(--card);
}
.pipe-t b,
.half > b {
	font: 700 16px var(--sans);
	color: var(--bone);
}
.pipe-t span,
.half > span {
	font-size: 14px;
	line-height: 1.5;
	color: var(--soft);
}
@keyframes pipe-run {
	to {
		background-position:
			0 200%,
			0 0;
	}
}

/* For builders: folded away until opened. */
.deep {
	border-radius: 20px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--line);
}
.deep summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 18px;
	font: 600 15px var(--sans);
	color: var(--bone);
	cursor: pointer;
	list-style: none;
}
.deep summary::-webkit-details-marker {
	display: none;
}
.deep summary .i {
	width: 18px;
	height: 18px;
	color: var(--gold);
}
.deep summary .chev {
	margin-left: auto;
	color: var(--ash);
	transition: transform 0.2s;
}
.deep[open] summary .chev {
	transform: rotate(180deg);
}
.deep-body {
	display: grid;
	gap: 16px;
	padding: 0 18px 18px;
	min-width: 0;
}
.facts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.facts li {
	font-size: 15px;
	line-height: 1.55;
	color: var(--soft);
}
.facts b {
	color: var(--bone);
}
.deep pre {
	margin: 0;
	padding: 16px;
	border-radius: 14px;
	background: rgba(var(--void-rgb), 0.6);
	overflow-x: auto;
	font: 400 13px / 1.6 var(--mono);
}
.deep pre code {
	color: var(--bone);
	overflow-wrap: normal;
	font-size: inherit;
}
.deep .c {
	color: var(--dim);
}

/* One muse read live: its art, name, soul and agent. */
.meet {
	display: grid;
	gap: 20px;
	padding: 16px;
	background:
		radial-gradient(70% 90% at 0% 0%, rgba(var(--gold-rgb), 0.14), transparent 70%), var(--card);
}
.meet-art {
	display: block;
	aspect-ratio: 1;
	border-radius: 20px;
	overflow: hidden;
	background: var(--card-hi);
}
.meet-art img,
.meet-art .skel-art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.meet-t {
	display: grid;
	align-content: center;
	gap: 12px;
	min-width: 0;
	padding: 0 4px 4px;
}
.meet h3 {
	font: italic 600 clamp(34px, 8vw, 48px) / 1 var(--serif);
	letter-spacing: -0.02em;
}
.meet h3 a {
	color: var(--bone);
	text-decoration: none;
}
.meet-line,
.meet-agent {
	margin: 0;
	font-size: 14px;
	color: var(--ash);
}
.meet-agent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}
.meet-intro {
	display: grid;
	gap: 6px;
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--bone);
	text-wrap: pretty;
}
.meet-soul {
	display: grid;
	gap: 8px;
	margin: 0;
}
.meet-soul div {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 12px;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(var(--void-rgb), 0.45);
}
.meet-soul dt {
	font: 400 11px / 1.9 var(--mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}
.meet-soul dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--soft);
}
.meet-go {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.meet-go .i {
	width: 16px;
	height: 16px;
}

/* Numbered steps. */
.steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
	counter-reset: step;
}
.steps li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 18px 18px 18px 64px;
	border-radius: 20px;
	background: var(--card);
	counter-increment: step;
}
.steps li::before {
	content: counter(step);
	position: absolute;
	top: 16px;
	left: 16px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(var(--gold-rgb), 0.14);
	font: 700 15px var(--sans);
	color: var(--gold-hi);
}
.steps b {
	font: 700 16px var(--sans);
	color: var(--bone);
}
.steps span {
	font-size: 15px;
	line-height: 1.5;
	color: var(--soft);
}

/* The weekly pot: the pot in a lit vault beside how to enter, then where
   it comes from. */
.vault {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: 24px;
	padding: 24px 20px;
	border-radius: 32px;
	background:
		radial-gradient(90% 70% at 50% 110%, rgba(var(--gold-rgb), 0.22), transparent 70%),
		linear-gradient(180deg, var(--card-hi), var(--card));
	box-shadow: inset 0 0 0 1px var(--line);
}
.vault-n {
	display: grid;
	align-content: center;
	gap: 10px;
}
.big {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}
.big b {
	--lh: 1;
	font: 600 clamp(56px, 15vw, 104px) / 1 var(--serif);
	letter-spacing: -0.035em;
	color: var(--gold-hi);
	font-variant-numeric: lining-nums tabular-nums;
	filter: drop-shadow(0 0 24px rgba(var(--gold-hi-rgb), 0.3));
}
.big > span {
	font-size: 17px;
	color: var(--soft);
}
.vault-s {
	margin: 0;
	font-size: 15px;
	color: var(--soft);
}
.vault-s b {
	--lh: 1.4;
	color: var(--bone);
}
.vault .steps li {
	background: rgba(var(--void-rgb), 0.5);
}
.fork {
	display: grid;
	gap: 12px;
}
.fork-out {
	display: grid;
	gap: 12px;
}
.half {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 14px;
	row-gap: 4px;
	align-items: start;
	padding: 18px;
	border-radius: 22px;
	background: var(--card);
}
.half .pipe-i {
	grid-row: span 2;
	box-shadow: none;
}
.half.pot {
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(var(--gold-rgb), 0.16), transparent 70%), var(--card);
}
.half.burn .pipe-i {
	color: var(--soft);
}
.half span b {
	--lh: 1.5;
	font: 700 14px var(--sans);
	color: var(--bone);
}

/* The reasons, each with its icon. */
.reasons {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}
.reasons li {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 20px;
	border-radius: 22px;
	background: var(--card);
}
.reasons .why-i {
	margin-bottom: 4px;
}
.reasons b {
	font: 700 17px var(--sans);
	color: var(--bone);
}
.reasons li > span:not(.why-i) {
	font-size: 15px;
	line-height: 1.55;
	color: var(--soft);
}

/* The token's address, a tap to copy, and every contract folded away. */
.ca {
	justify-self: start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	max-width: 100%;
	padding: 14px 18px;
	border: 0;
	border-radius: 18px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.3);
	font: 600 14px var(--sans);
	color: var(--soft);
	text-align: left;
	cursor: pointer;
}
.ca code {
	font-size: 14px;
}
.ca .i {
	width: 18px;
	height: 18px;
	color: var(--gold);
}
.addrs {
	display: grid;
	gap: 8px;
	margin: 0;
}
.addrs div {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(var(--void-rgb), 0.45);
}
.addrs dt {
	font-size: 14px;
	color: var(--soft);
}
.addrs dd {
	margin: 0;
}
.addrs a {
	text-decoration: none;
}
.addrs code {
	font-size: 13px;
}

/* The close: one line and the three ways in, over a gold glow. */
.close {
	justify-items: center;
	gap: 20px;
	padding: 48px 20px;
	border-radius: 32px;
	text-align: center;
	background:
		radial-gradient(70% 90% at 50% 100%, rgba(var(--gold-rgb), 0.22), transparent 70%),
		linear-gradient(180deg, var(--card-hi), var(--card));
}
.close .go {
	justify-content: center;
}

@media (min-width: 640px) {
	.tally {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.ways,
	.fork-out,
	.reasons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.meet {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 28px;
		padding: 20px;
	}
	.addrs div {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: baseline;
		gap: 16px;
	}
}
@media (min-width: 900px) {
	.hero {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 48px;
	}
	.hero-art {
		width: 100%;
	}
	section > .steps,
	.reasons {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.pipe {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.pipe::before {
		top: 21px;
		bottom: auto;
		left: 22px;
		right: 22px;
		width: auto;
		height: 2px;
		background:
			linear-gradient(90deg, transparent, rgba(var(--gold-hi-rgb), 0.9) 50%, transparent) -100% 0 /
			40% 100% no-repeat,
			rgba(var(--gold-rgb), 0.2);
		animation-name: pipe-run-x;
	}
	.pipe > li {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 44px 1fr;
		align-items: start;
	}
	.pipe-t {
		height: 100%;
		align-content: start;
	}
	.vault {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
		padding: 36px;
	}
	.close {
		padding: 64px 32px;
	}
}
@keyframes pipe-run-x {
	to {
		background-position:
			200% 0,
			0 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pipe::before {
		animation: none;
	}
	.fan li {
		transition: none;
	}
}