/* archetype.ing, in the app's dark monochrome (packages/delivery/app styles.css): its tokens,
   its type, its 8 px corners and thin lines. White on black; colour stays in the small state dots.
   What moves is ink in the hero, drawn by site.js, each section sliding over the last as the page
   scrolls, and the parts of each coming in. No web fonts; nothing is loaded from elsewhere. */
:root {
	color-scheme: dark;
	--bg: #0a0a0a;
	--surface: #0f0f0f;
	--sunken: #141414;
	--fg: #ededed;
	--muted: #8f8f8f;
	--line: #262626;
	--accent-soft: #1f1f1f;
	--run: #ededed;
	--run-soft: #1f1f1f;
	--state-run: #7aa7ff;
	--ok: #6fcf97;
	--warn: #f2b45a;
	--warn-soft: rgb(242 180 90 / 6%);
	--warn-line: rgb(242 180 90 / 32%);
	--on-accent: #0a0a0a;
	--card-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
	--window-shadow:
		0 0 0 1px rgb(255 255 255 / 0.02), 0 24px 60px -20px rgb(0 0 0 / 0.8);
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--sans:
		-apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
		"Noto Sans KR", sans-serif;
	--wide: 1180px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
	-webkit-font-smoothing: antialiased;
}

* {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	background: var(--bg);
	color: var(--fg);
	font: 16px / 1.6 var(--sans);
}

body {
	margin: 0 auto;
	max-width: var(--wide);
	padding: 0 28px;
}

:lang(ko) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

code {
	font: 0.92em var(--mono);
}

.icon {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------- header and footer */
.top {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
}

.top::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(50% - 50vw);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}

.brand img {
	border-radius: 7px;
	box-shadow: 0 0 0 1px var(--line);
}

nav {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 14px;
}

nav a {
	color: var(--muted);
	text-decoration: none;
}

nav a:hover,
nav a[aria-current] {
	color: var(--fg);
}

footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 32px 0 48px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

footer p {
	margin: 0;
}

/* ---------------------------------------------------------------- type and shared parts */
section {
	padding: 120px 0;
	border-top: 1px solid var(--line);
}

h1,
h2,
h3,
h4 {
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

h1 {
	margin: 0 0 22px;
	font-size: clamp(42px, 6.2vw, 78px);
	font-weight: 600;
	letter-spacing: -0.038em;
	line-height: 1.04;
}

h2 {
	margin: 0 0 14px;
	font-size: clamp(30px, 3.8vw, 48px);
	font-weight: 600;
	letter-spacing: -0.03em;
}

h3 {
	margin: 0 0 6px;
	font-size: 16px;
}

.lead {
	max-width: 560px;
	margin: 0 0 30px;
	color: var(--muted);
	font-size: 18px;
	line-height: 1.6;
}

.note {
	color: var(--muted);
	font-size: 14px;
}

.section-head {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.section-head p {
	margin: 0;
	color: var(--muted);
	font-size: 17px;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.button:hover {
	border-color: var(--muted);
}

.button.primary {
	background: var(--run);
	border-color: var(--run);
	color: var(--on-accent);
}

.button.primary:hover {
	filter: brightness(1.08);
}

.command {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 10px;
	padding: 8px 8px 8px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--sunken);
}

.command .prompt {
	color: var(--muted);
	font-family: var(--mono);
}

.command code {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	white-space: nowrap;
	font-size: 13.5px;
}

.command button {
	flex: none;
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--muted);
	font: 13px var(--sans);
	cursor: pointer;
}

.command button:hover {
	color: var(--fg);
	border-color: var(--muted);
}

.dot {
	display: inline-block;
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.dot.run {
	background: var(--state-run);
}

.dot.ok {
	background: var(--ok);
}

/* ---------------------------------------------------------------- hero */
section.hero {
	position: relative;
	z-index: 0;
	padding: 96px 0 88px;
	border-top: 0;
}

section.hero:not(.small) {
	text-align: center;
}

.intro {
	max-width: 860px;
	margin: 0 auto 64px;
}

section.hero:not(.small) .lead {
	margin-inline: auto;
}

.hero:not(.small) .actions {
	justify-content: center;
}

section.hero.small {
	display: block;
	max-width: 760px;
	padding: 64px 0 24px;
}

/* Two windows of the app, the person's and the team's, side by side with the ink passing between. */
.stage {
	position: relative;
	min-height: 492px;
	text-align: left;
}

.app-window {
	position: absolute;
	top: 0;
	width: calc(50% - 22px);
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	box-shadow: var(--window-shadow);
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.5;
	transition:
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		z-index 0s 0.35s,
		opacity 0.5s;
}

.app-window.personal {
	left: 0;
}

.app-window.team {
	right: 0;
}

.chrome {
	display: flex;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	background: var(--sunken);
}

.chrome span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--muted) 35%, transparent);
}

.app-body {
	display: grid;
	grid-template-columns: 138px minmax(0, 1fr);
	min-height: 400px;
}

.app-side {
	padding: 10px 8px;
	border-right: 1px solid var(--line);
	background: var(--sunken);
}

.app-side p {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 1px;
	padding: 5px 7px;
	border-radius: 7px;
	white-space: nowrap;
	overflow: hidden;
}

.app-side .icon {
	width: 13px;
	height: 13px;
	color: var(--muted);
}

.host {
	gap: 5px;
	margin-bottom: 8px !important;
	font-weight: 650;
	font-size: 12.5px;
}

.host .icon {
	flex: none;
	width: 12px;
	height: 12px;
	margin-left: auto;
}

.mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: var(--fg);
	color: var(--bg);
	font: normal 700 9px var(--sans);
}

.mark.team {
	background: var(--run);
	color: var(--on-accent);
}

.side-item {
	color: var(--fg);
}

.side-item b {
	margin-left: auto;
	color: var(--muted);
	font-weight: 500;
	font-size: 11px;
}

.side-item.on,
.side-row.on {
	background: color-mix(in srgb, var(--fg) 7%, transparent);
}

.side-head {
	margin-top: 10px !important;
	color: var(--muted);
	font-size: 11px;
}

.side-row {
	color: var(--muted);
}

.side-row span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.side-row.on {
	color: var(--fg);
}

.avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fg) 12%, transparent);
	color: var(--fg);
	font: normal 600 9px var(--sans);
}

.avatar.me {
	background: var(--fg);
	color: var(--bg);
}

.avatar.spark {
	background: transparent;
	border: 1px solid var(--line);
}

.avatar.spark .icon {
	width: 11px;
	height: 11px;
}

.app-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 16px 10px;
}

.talk {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.you {
	align-self: flex-end;
	max-width: 80%;
	min-height: 2.4em;
	margin: 0;
	padding: 7px 11px;
	border-radius: 12px;
	background: var(--sunken);
}

.answer-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 176px;
	gap: 12px;
	align-items: start;
}

.answer {
	margin: 0;
}

.margin {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.to-team {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding-bottom: 6px;
	border-bottom: 1px dotted var(--line);
	color: var(--muted);
	font-size: 11.5px;
}

.to-team .icon,
.sent .icon,
.hop .icon {
	width: 13px;
	height: 13px;
}

.team-card {
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

.seg {
	display: flex;
	gap: 2px;
	margin: 0 0 7px;
	padding: 2px;
	border-radius: 7px;
	background: var(--sunken);
	font-size: 10.5px;
}

.seg button {
	flex: 1 1 auto;
	padding: 2px;
	border: 0;
	border-radius: 5px;
	background: none;
	color: var(--muted);
	font: inherit;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
}

.seg button:hover {
	color: var(--fg);
}

.seg button.on {
	background: var(--surface);
	color: var(--fg);
	box-shadow: 0 0 0 1px var(--line);
}

/* What belongs to one place an answer can go: the picked one's shows (site.js). */
[data-for]:not(.on) {
	display: none;
}

.team-view.on {
	display: contents;
}

.try {
	margin-left: auto;
	font-size: 10.5px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.stage.playing[data-at="4"]:not(.touched) .try {
	opacity: 1;
}

.stage.playing[data-at="4"]:not(.touched) [data-send] {
	animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
	50% {
		box-shadow: 0 0 0 4px rgb(255 255 255 / 0.16);
	}
}

.field-line {
	margin: 0 0 7px;
	padding: 4px 6px;
	border: 1px solid var(--line);
	border-radius: 6px;
	font-size: 11px;
}

.card-actions {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}

.card-actions .primary {
	padding: 3px 9px;
	border: 0;
	border-radius: 6px;
	background: var(--run);
	color: var(--on-accent);
	font: 600 10.5px / 1.5 var(--sans);
	cursor: pointer;
}

.card-actions .primary:hover {
	opacity: 0.85;
}

.sent {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 7px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 11px;
}

.sent span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding: 8px 8px 8px 12px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
	color: var(--muted);
}

.field p {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.send {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--run-soft);
	color: var(--run);
}

.send .icon {
	width: 12px;
	height: 12px;
}

.status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0 4px;
	color: var(--muted);
	font-size: 11px;
}

/* The team's host: a note, a post, and the agent's answer with its card. */
.note-page {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.crumb {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	color: var(--muted);
	font-size: 11px;
}

.crumb .icon {
	width: 12px;
	height: 12px;
}

.note-page h4 {
	margin: 0 0 6px;
	font-size: 16px;
	letter-spacing: -0.02em;
}

.by {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 11px;
}

.note-body {
	margin: 0;
}

.post {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.post p {
	margin: 0;
}

.post .who {
	font-weight: 600;
}

.mention-card {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin-top: 6px !important;
	padding: 6px 9px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	font-size: 11.5px;
}

.mention-card .icon:first-child {
	padding: 3px;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--fg) 7%, transparent);
}

.mention-card .icon:last-child {
	margin-left: auto;
	width: 12px;
	height: 12px;
	color: var(--muted);
}

/* Between the windows, the answer on its way. */
.hop {
	position: absolute;
	z-index: 3;
	top: 44%;
	left: 50%;
	translate: -50% 0;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	box-shadow: var(--card-shadow);
	color: var(--fg);
	font-size: 12.5px;
	font-weight: 600;
}

.hop .icon {
	color: var(--run);
}

/* Playing (site.js): parts come in at their beat, and the team's window comes to the front. */
.stage.playing [data-beat] {
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.4s ease,
		transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.stage.playing .team-card[data-beat] {
	transform: translateY(6px) scale(0.98);
}

.stage.playing[data-at="1"] [data-beat="1"],
.stage.playing[data-at="2"] :is([data-beat="1"], [data-beat="2"]),
.stage.playing[data-at="3"]
	:is([data-beat="1"], [data-beat="2"], [data-beat="3"]),
.stage.playing[data-at="4"]
	:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"]),
.stage.playing[data-at="5"]
	:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="5"]),
.stage.playing[data-at="6"]
	:is(
		[data-beat="1"],
		[data-beat="2"],
		[data-beat="3"],
		[data-beat="5"],
		[data-beat="6"]
	),
.stage.playing[data-at="7"]
	:is(
		[data-beat="1"],
		[data-beat="2"],
		[data-beat="3"],
		[data-beat="5"],
		[data-beat="6"],
		[data-beat="7"]
	),
.stage.playing[data-at="8"]
	:is(
		[data-beat="1"],
		[data-beat="2"],
		[data-beat="3"],
		[data-beat="5"],
		[data-beat="6"],
		[data-beat="7"],
		[data-beat="8"]
	) {
	opacity: 1;
	transform: none;
}

/* Without the play the card has done its work: its line stands for it. */
.stage:not(.playing) .team-card {
	display: none;
}

.stage.playing:not([data-at="4"]) .team-card {
	position: absolute;
	visibility: hidden;
}

.stage.playing:is([data-at="6"], [data-at="7"], [data-at="8"])
	.app-window.team {
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 0.16),
		0 24px 80px -20px rgb(255 255 255 / 0.1);
}

.stage.playing:is([data-at="6"], [data-at="7"], [data-at="8"])
	.app-window.personal {
	opacity: 0.45;
}

.stage.playing:is([data-at="6"], [data-at="7"], [data-at="8"]) .hop {
	opacity: 0;
}

.stage.playing [data-type]::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-left: 1px;
	vertical-align: -0.15em;
	background: currentColor;
	animation: blink 1s steps(2) infinite;
}

.stage.playing:not([data-at="1"]) [data-type]::after {
	display: none;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

/* ---------------------------------------------------------------- cards */
.cards {
	display: grid;
	gap: 1px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--line);
	overflow: hidden;
}

.cards.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards.six {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
	position: relative;
	padding: 24px;
	background: var(--bg);
	transition: background 0.2s;
}

/* Under the pointer, a little light (site.js says where). */
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(
		280px at var(--x, 50%) var(--y, 50%),
		rgb(255 255 255 / 0.06),
		transparent
	);
	transition: opacity 0.25s;
	pointer-events: none;
}

.card:hover::before {
	opacity: 1;
}

.card p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

.card-mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	margin-bottom: 14px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--fg) 7%, transparent);
}

.card.big {
	padding: 26px;
}

.card.big h3 {
	font-size: 19px;
}

.card.big .actions {
	margin-top: 8px;
}

/* The team's agent: what it does, and a Slack message it sent. */
.team-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: 40px;
	align-items: center;
}

.points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.points li {
	display: flex;
	gap: 12px;
	margin: 0;
}

.points .card-mark {
	margin: 0;
}

.points p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

.slack {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	font-size: 14px;
}

.slack-head {
	margin: 0;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--sunken);
}

.slack-msg {
	display: flex;
	gap: 10px;
	padding: 14px;
}

.slack-msg .avatar {
	width: 30px;
	height: 30px;
	border-radius: 7px;
}

.slack-msg .avatar .icon {
	width: 15px;
	height: 15px;
}

.slack-msg p {
	margin: 0;
}

.slack-msg .who {
	font-weight: 700;
}

.slack-msg small {
	padding: 0 4px;
	border-radius: 3px;
	background: var(--sunken);
	color: var(--muted);
	font-size: 10px;
	font-weight: 600;
}

.slack-link {
	color: var(--muted);
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 8px !important;
	padding-left: 10px;
	border-left: 3px solid var(--line);
}

.works {
	margin: 48px 0 0;
	font-size: 13.5px;
	text-align: center;
}

.works > span {
	display: block;
	margin-bottom: 14px;
	color: var(--muted);
}

.names {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.names + .names {
	display: none;
}

.names b {
	padding: 4px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-weight: 500;
	white-space: nowrap;
}

.moving .run-line {
	display: flex;
	overflow: hidden;
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 12%,
		#000 88%,
		transparent
	);
}

.moving .names,
.moving .names + .names {
	display: flex;
	flex: none;
	flex-wrap: nowrap;
	padding-right: 8px;
	animation: run-line 34s linear infinite;
}

@keyframes run-line {
	to {
		transform: translateX(-100%);
	}
}

/* ---------------------------------------------------------------- download and legal pages */
.split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 14px;
}

.split > * {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
}

.split h2 {
	font-size: 24px;
}

.split p,
.split li {
	color: var(--muted);
}

ol {
	padding-left: 20px;
	margin: 0 0 28px;
}

li {
	margin-bottom: 8px;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

th,
td {
	text-align: left;
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--line);
}

th {
	color: var(--muted);
	font-weight: 500;
}

td a {
	overflow-wrap: anywhere;
	font-family: var(--mono);
	font-size: 14px;
}

.legal {
	max-width: 720px;
	padding: 56px 0;
}

.legal h1 {
	font-size: 40px;
}

.legal h2 {
	margin-top: 36px;
	font-size: 22px;
}

.legal p {
	color: var(--muted);
}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1000px) {
	.app-body,
	.answer-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.app-window .app-side {
		display: none;
	}

	.team-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cards.three,
	.cards.six {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	body {
		padding: 0 18px;
	}

	section {
		padding: 80px 0;
	}

	.cards.three,
	.cards.six,
	.cards.two,
	.points {
		grid-template-columns: minmax(0, 1fr);
	}

	.stage {
		min-height: 0;
	}

	.app-window {
		position: relative;
		width: 100%;
	}

	.app-window.team {
		display: none;
	}

	.app-window.personal {
		top: 0;
	}

	.app-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.app-side,
	.hop {
		display: none;
	}

	.stage.playing .personal {
		opacity: 1 !important;
	}
}

/* ---------------------------------------------------------------- the three moves, as the app shows them */
.move-vis {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-height: 150px;
	margin: -4px -4px 18px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	font-size: 12px;
	line-height: 1.45;
}

.move-vis p {
	margin: 0;
	color: var(--fg);
	font-size: 12px;
}

.move-vis .answer-line {
	color: var(--muted);
}

.move-vis .to-team,
.move-vis .sent {
	background: var(--surface);
}

.move-vis .to-team {
	padding: 4px 8px;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--fg);
}

.dialog {
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

.dialog b {
	display: block;
	margin-bottom: 8px;
	font-size: 12.5px;
}

.choice {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	margin: 0 0 5px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.choice:hover {
	color: var(--fg);
}

.choice i {
	width: 12px;
	height: 12px;
	border: 1.5px solid var(--line);
	border-radius: 50%;
}

.choice.on i {
	border: 4px solid var(--run);
}

.dialog .card-actions {
	margin-top: 8px;
}

.dialog .moved {
	flex: 1;
	align-self: center;
	min-width: 0;
	color: var(--muted);
	font-size: 11px;
}

.dialog.touched :is(.primary, .choice.on i) {
	animation: none !important;
}

.mini-field {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 9px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px;
	border-radius: 6px;
	background: var(--accent-soft);
	color: var(--fg);
	font-weight: 600;
}

.chip .icon {
	width: 11px;
	height: 11px;
}

.move-vis .mention-card {
	margin: 0 !important;
}

/* ---------------------------------------------------------------- the ink, and what moves
   All of it is under .moving, which site.js sets unless reduced motion is asked for: without it
   the page stands whole and still. */
.ink {
	display: none;
	position: absolute;
	z-index: -1;
	top: -72px;
	bottom: 0;
	left: 50%;
	width: 100vw;
	translate: -50% 0;
	mask-image: linear-gradient(#000 78%, transparent);
}

.moving .ink {
	display: block;
}

.w {
	display: inline-block;
	margin: 0 -0.06em -0.14em;
	padding: 0 0.06em 0.14em;
	overflow: hidden;
	vertical-align: top;
}

.w > span {
	display: inline-block;
}

@keyframes word-rise {
	from {
		transform: translateY(112%) rotate(3deg);
	}
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
}

.moving .hero h1 .w > span {
	animation: word-rise 1s var(--ease) backwards;
	animation-delay: calc(var(--i) * 70ms + 0.1s);
}

.moving .intro > :not(h1) {
	animation: rise 0.9s var(--ease) 0.55s backwards;
}

.moving .stage {
	transform: perspective(1800px) rotateX(calc(var(--tilt, 0) * 11deg));
	transform-origin: 50% 100%;
	animation: rise 1.2s var(--ease) 0.7s backwards;
}

/* The two windows part a little around the pointer (site.js). */
.moving .app-window.personal {
	transform: translate(
		calc(var(--lean-x, 0) * 5px),
		calc(var(--lean-y, 0) * 3px)
	);
}

.moving .app-window.team {
	transform: translate(
		calc(var(--lean-x, 0) * -5px),
		calc(var(--lean-y, 0) * -3px)
	);
}

.moving .reveal:not(.in) h2 .w > span {
	transform: translateY(112%);
}

.moving .reveal.in h2 .w > span {
	animation: word-rise 0.9s var(--ease) backwards;
	animation-delay: calc(var(--i) * 55ms);
}

.moving
	.reveal:not(.in)
	:is(.section-head p, .card, .points li, .slack, .works) {
	opacity: 0;
}

.moving .reveal.in :is(.section-head p, .card, .points li, .slack, .works) {
	animation: rise 0.8s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 80ms + 0.25s);
}

.moving .reveal:not(.in) .card-mark path {
	stroke-dashoffset: 1;
}

.card-mark path {
	stroke-dasharray: 1;
	transition: stroke-dashoffset 1.3s ease 0.5s;
}

/* The answer on its way from one window to the other, with the ink surging behind it. */
.stage:not(.playing) .hop {
	display: none;
}

.stage.playing[data-at="5"] .hop {
	animation: hop 1.7s var(--ease);
}

@keyframes hop {
	from {
		left: 26%;
	}
	55%,
	to {
		left: 50%;
	}
}

/* Each way to the team, playing small and on repeat. */
@keyframes loop-in {
	0%,
	22% {
		opacity: 0;
		transform: translateY(6px);
	}
	30%,
	86% {
		opacity: 1;
		transform: none;
	}
	100% {
		opacity: 0;
	}
}

@keyframes loop-press {
	0%,
	48%,
	60%,
	100% {
		transform: none;
	}
	54% {
		transform: scale(0.92);
	}
}

@keyframes loop-glow {
	0%,
	8%,
	30%,
	100% {
		border-color: var(--line);
	}
	16% {
		border-color: var(--muted);
	}
}

@keyframes loop-pick {
	0%,
	28% {
		border-width: 1.5px;
		border-color: var(--line);
	}
	36%,
	100% {
		border-width: 4px;
		border-color: var(--fg);
	}
}

.moving .in .move-vis .to-team {
	animation: loop-glow 7s infinite;
}

.moving .in .move-vis .sent {
	animation: loop-in 7s var(--ease) infinite;
}

.moving .in .choice.on i {
	animation: loop-pick 7s infinite;
}

.moving .in .dialog .primary {
	display: inline-block;
	animation: loop-press 7s infinite;
}

.moving .in .mini-field .chip {
	animation: loop-in 7s var(--ease) -1.1s infinite;
}

.moving .in .move-vis .mention-card {
	animation: loop-in 7s var(--ease) infinite;
}

/* Sheets: each section comes to rest (site.js sets how high), still drifting up as it slows
   (--drift, as far as --reach), and the next slides over it while it sinks back, late and little
   (--cover), and the new one's heading comes up a little behind its edge (--enter). */
.moving:has(.sheets),
.moving:has(.sheets) body {
	background: #000;
}

.sheets > section {
	position: sticky;
	padding-bottom: 120px;
	border-top: 0;
	transform: translateY(calc(var(--drift, 0) * var(--reach, 0px) * -1))
		scale(calc(1 - var(--cover, 0) * 0.025));
	will-change: transform;
}

.sheets > section.hero {
	padding-bottom: 110px;
}

.sheets > section.start {
	position: relative;
	transform: none;
	will-change: auto;
}

.sheets > section::before,
.sheets > section::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	border-radius: 14px 14px 0 0;
	pointer-events: none;
}

.sheets > section::before {
	z-index: -2;
	border-top: 1px solid var(--line);
	background: var(--bg);
	box-shadow: 0 -30px 70px rgb(0 0 0 / 55%);
}

.sheets > section.hero::before {
	border-top: 0;
	border-radius: 0;
	box-shadow: none;
}

.sheets > section::after {
	background: #000;
	opacity: calc(var(--cover, 0) * 0.5);
}

.sheets > section > .section-head {
	transform: translateY(calc((1 - var(--enter, 1)) * 44px));
}

.sheets .intro {
	opacity: calc(1 - var(--away, 0) * 0.85);
	transform: translateY(calc(var(--away, 0) * 70px));
}

.end {
	position: relative;
	z-index: 6;
	left: 50%;
	width: 100vw;
	translate: -50% 0;
	background: var(--bg);
}

.moving:has(.sheets) footer {
	position: relative;
	z-index: 6;
	background: var(--bg);
	box-shadow: 0 0 0 100vmax var(--bg);
	clip-path: inset(0 -100vmax);
}

/* The name, as large as the page, lit where the pointer is. */
.wordmark {
	margin: 0;
	padding-top: 40px;
	overflow: hidden;
	text-align: center;
	font-size: 20.5vw;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1.3;
	color: transparent;
	background:
		radial-gradient(
			420px at var(--x, 50%) var(--y, 40%),
			#ededed,
			transparent 70%
		),
		#161616;
	-webkit-background-clip: text;
	background-clip: text;
	user-select: none;
}