/* Animate Arcade's landing. Cuadra's page (apps/cuadra/web/landing/DESIGN.md) adapted to an
   animation tool: the same frame, type scale and scene-by-scene light, with the app's own world
   for the light. Night is the app's dark UI, paper is its white stage, the one colour that acts
   is its accent blue, and paint orange (Show Kinds) is light and paint only, never an action.
   Cuadra's story line along the nav is a timeline ruler here, its playhead the scroll.
   No inline style or script anywhere: the CSP is 'self'. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
	/* The app's own dark (its window is #17181b, raised #202226, borders #2e3036). */
	--night: #121317;
	--night-2: #1b1c21;
	--night-3: #202226;
	--night-line: #2e3036;
	--night-ink: #e9eaed;
	--night-quiet: #8a8c93;
	/* The light, scene by scene: the stage's paper from cool to warm, then a violet dusk
	   taken from the icon's ground. */
	--morning: #eef1f6;
	--noon: #f8f7f4;
	--afternoon: #f4ede2;
	--golden: #ecdcc4;
	--dusk: #1b1830;
	--violet: #3a1f7a;
	/* Ink on paper. */
	--ink: #15171c;
	--ink-2: #3b3f4a;
	--quiet: #6b6f7c;
	--line: #e2e3e8;
	--surface: #ffffff;
	/* The one colour that acts: the app's accent on night, a deeper blue on paper. */
	--accent: #5b9dff;
	--accent-ink: #0b1424;
	--brand: #2b6be0;
	--brand-ink: #1f55b8;
	--brand-tint: #e3ecfc;
	--brand-soft: #8fb8ff;
	/* Show Kinds: vector blue, paint orange. Orange never acts. */
	--vec: #5b8fe0;
	--paint: #e3912c;
	--playhead: #e5484d;

	--sans: 'IBM Plex Sans', system-ui, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, monospace;
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--gutter: max(clamp(16px, 5vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
	--measure: 1320px;
	--bar: 64px;

	background: var(--night);
	color-scheme: light;
	overflow-x: clip;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: var(--bar);
}

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

body {
	margin: 0;
	background: var(--night);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

a, button { touch-action: manipulation; }
button { user-select: none; -webkit-user-select: none; font: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--brand-tint); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible, .bar[data-tone='night'] :focus-visible { outline-color: var(--accent); }

.wrap { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }

/* ── Type: Cuadra's scale ─────────────────────────────────────────────── */
.display {
	margin: 0;
	font-size: clamp(2.75rem, 6.4vw, 6rem);
	line-height: 0.96;
	letter-spacing: -0.04em;
	font-weight: 600;
	text-wrap: balance;
}
.title {
	margin: 0;
	font-size: clamp(2.25rem, 4.4vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
	font-weight: 600;
	text-wrap: balance;
}
.lede {
	margin: 0;
	font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
	line-height: 1.55;
	max-width: 42ch;
	text-wrap: pretty;
	color: var(--ink-2);
}
.body {
	margin: 0;
	max-width: 42ch;
	text-wrap: pretty;
	color: var(--ink-2);
}
.note {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--quiet);
}
.figure { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
kbd {
	font-family: var(--mono);
	font-size: 0.875em;
	padding: 1px 7px 2px;
	border-radius: 6px;
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	background: var(--surface);
	color: var(--ink);
}

.scene { position: relative; color: var(--ink); }
.scene.night, .scene.next { color: var(--night-ink); }
.night .lede { color: #b9bcc5; }
.night .note, .next .note { color: var(--night-quiet); }
.night ::selection { background: #2a4f8f; color: #fff; }

/* ── The bar, and the timeline ruler along its foot ────────────────────── */
.bar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--bar);
	color: var(--ink);
	transition: color 400ms ease, background-color 400ms ease, border-color 400ms ease;
	border-bottom: 1px solid transparent;
}
.bar[data-tone='night'] { color: var(--night-ink); }
.bar.scrolled {
	background: rgb(248 247 244 / 0.78);
	border-bottom-color: rgb(21 23 28 / 0.08);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.bar.scrolled[data-tone='night'] {
	background: rgb(18 19 23 / 0.72);
	border-bottom-color: rgb(255 255 255 / 0.06);
}
.bar-in { height: 100%; display: flex; align-items: center; gap: 28px; }
.mark { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; letter-spacing: -0.02em; }
.mark img { width: 28px; height: 28px; }
.links { display: flex; gap: 26px; margin-left: auto; }
.links a { color: inherit; opacity: 0.78; text-decoration: none; font-size: 15px; transition: opacity 160ms ease; }
.bar-get {
	margin-left: 4px;
	padding: 7px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--brand);
	color: var(--brand);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.bar[data-tone='night'] .bar-get { border-color: var(--accent); color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
	.links a:hover { opacity: 1; }
	.bar-get:hover { background: var(--brand); color: #fff; }
	.bar[data-tone='night'] .bar-get:hover { background: var(--accent); color: var(--accent-ink); }
}

/* Ticks every frame, a taller one every fifth, as on the app's timeline. */
.ruler {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 14px;
	pointer-events: none;
	transition: opacity 400ms ease;
}
.bar:not(.scrolled) .ruler { opacity: 0; }
.ruler::before {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 7px;
	background:
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 60px) bottom / 100% 7px no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px) bottom / 100% 3px no-repeat;
	opacity: 0.25;
}
/* The playhead: where the reader is in the page. Moved by landing.js, transform only. */
.ruler-head {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2px;
	height: 14px;
	background: var(--playhead);
	border-radius: 1px;
	will-change: transform;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 26px;
	border-radius: 10px;
	background: var(--brand);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px rgb(31 85 184 / 0.3), 0 12px 28px -10px rgb(31 85 184 / 0.55);
	transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}
.night .btn {
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: 0 1px 2px rgb(91 157 255 / 0.3), 0 14px 34px -12px rgb(91 157 255 / 0.6);
}
.btn::before {
	content: '';
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
	.btn:hover { background: var(--brand-ink); transform: translateY(-1px); box-shadow: 0 1px 2px rgb(31 85 184 / 0.3), 0 18px 34px -12px rgb(31 85 184 / 0.6); }
	.night .btn:hover { background: #7cb1ff; }
	.btn:hover:active { transform: scale(0.97); }
}
.cta-state { margin: 0; font-size: 15px; color: var(--night-quiet); max-width: 34ch; }
.cta-state b { color: var(--night-ink); font-weight: 500; }

/* ── The first screen ─────────────────────────────────────────────────── */
.hero {
	min-height: 100svh;
	overflow: hidden;
	padding: calc(var(--bar) + clamp(24px, 8svh, 104px)) 0 80px;
	background:
		radial-gradient(60% 80% at 78% 112%, rgb(91 157 255 / 0.13), transparent 70%),
		var(--night);
}
.glow {
	position: absolute;
	right: -16%;
	top: -36%;
	width: 82vw;
	height: 92vh;
	background: radial-gradient(closest-side, rgb(90 52 180 / 0.42), rgb(58 31 122 / 0.14) 55%, transparent);
	pointer-events: none;
}
.glow::after {
	content: '';
	position: absolute;
	left: 30%;
	top: 46%;
	width: 36%;
	height: 36%;
	background: radial-gradient(closest-side, rgb(227 145 44 / 0.22), transparent);
}
.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}
.copy { position: relative; z-index: 3; }
.hero .display { font-size: clamp(2.5rem, min(5.2vw, 9svh), 5.25rem); }
.hero .display span { display: block; }
.hero .display .second { color: var(--brand-soft); }
.hero .lede { margin: clamp(18px, 3.4svh, 30px) 0 clamp(22px, 4.4svh, 40px); }
.hero .note { margin-top: clamp(14px, 2.4svh, 22px); }
@media (min-width: 900px) and (min-height: 620px) {
	.hero { height: 100svh; min-height: 640px; }
}

.stage { position: relative; margin-right: calc(-1 * var(--gutter) - 12vw); }
.tilt { perspective: 2000px; }
.app {
	margin: 0;
	transform: rotateY(-16deg) rotateX(5deg);
	transform-origin: 0% 50%;
	container-type: inline-size;
	border-radius: 14px;
	overflow: hidden;
	background: #17181b;
	color: #d9dade;
	box-shadow:
		inset 0 0 0 1px var(--night-line),
		0 50px 110px -30px rgb(0 0 0 / 0.75),
		0 0 140px 0 rgb(143 184 255 / 0.08);
	font-size: 1.05cqi;
	line-height: 1.3;
}
.app-top { display: flex; align-items: center; gap: 0.6em; padding: 0.8em 1em; border-bottom: 1px solid var(--night-line); white-space: nowrap; }
.app-tab { padding: 0.35em 0.9em; border-radius: 0.4em 0.4em 0 0; background: var(--night-3); margin-right: 1em; }
.app-pill { padding: 0.25em 0.8em; border-radius: 0.35em; background: var(--night-3); color: #b6b8be; }
.app-pill.on { background: var(--accent); color: #0b1424; }
.app-pill.kinds { margin-right: 1em; }
.app-tool { font-weight: 600; }
.app-mid { display: grid; grid-template-columns: 3.2em 1fr 15em; }
.app-tools { display: flex; flex-direction: column; gap: 0.55em; padding: 0.8em 0.6em; border-right: 1px solid var(--night-line); }
.app-tools i { display: block; height: 1.9em; border-radius: 0.3em; background: var(--night-3); }
.app-tools i.on { background: #2a3b5c; box-shadow: inset 0 0 0 1px var(--accent); }
.app-stage { display: grid; place-items: center; padding: 1.6em 2em; background: #1d1e22; }
.frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; box-shadow: 0 0.6em 1.8em rgb(0 0 0 / 0.35); }
/* The sprite: six poses stacked, each held for two of the twelve frames. */
.loop { width: 100%; height: auto; max-width: none; transform: translateY(-33.3333%); }
.app-props { display: flex; flex-direction: column; gap: 0.7em; padding: 1em 1.1em; border-left: 1px solid var(--night-line); color: #8a8c93; }
.app-props b { color: #d9dade; }
.app-props .row { display: flex; justify-content: space-between; align-items: center; }
.app-props em { font-style: normal; }
.slider { width: 5em; height: 0.35em; border-radius: 1em; background: linear-gradient(90deg, var(--accent) 30%, #3a3d45 30%); }
.num { font-style: normal; color: #d9dade; }
.app-time { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--night-line); padding: 0.4em 0 0.8em; background: #17181b; }
.layers { display: flex; flex-direction: column; padding-top: 1.7em; }
.layers span { display: flex; align-items: center; gap: 0.6em; height: 1.9em; padding-left: 1em; }
.layers span::before {
	content: '';
	width: 0.95em;
	height: 0.95em;
	border: 0.16em solid #6f8fd6;
	border-bottom: 0;
	border-radius: 0.6em 0.6em 0 0;
}
.layers span.px::before { border: 0; border-radius: 0; background: conic-gradient(#d7a54a 25%, #8a6a2e 0 50%, #d7a54a 0 75%, #8a6a2e 0) 0 0 / 50% 50%; }
.chip { order: 3; margin-left: auto; margin-right: 1em; width: 0.7em; height: 0.7em; border-radius: 0.1em; }
.c1 { background: #e84bdc; } .c2 { background: #f08a24; } .c3 { background: #9b3fd6; } .c4 { background: #2ed3e6; }
.cells { position: relative; padding-right: 1em; }
.nums, .track { display: grid; grid-template-columns: repeat(12, 1fr); }
.nums { height: 1.7em; align-items: center; color: #6c6e75; font-weight: 400; }
.nums b { font-weight: 400; padding-left: 0.2em; }
.track { height: 1.9em; }
.track i { position: relative; display: block; background: #2a2c31; border-right: 1px solid #1d1e22; margin: 0.25em 0; }
.track i.k::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.55em;
	height: 0.55em;
	margin: -0.275em 0 0 -0.275em;
	border-radius: 50%;
	background: #e3e4e8;
}
.track i.end { box-shadow: inset -0.25em 0 0 #3a3c42; }
/* The playhead: one cell wide, stepped across twelve. */
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: calc((100% - 1em) / 12); transform: translateX(500%); pointer-events: none; }
.playhead span { position: absolute; left: 50%; top: 0.2em; bottom: 0; width: 2px; margin-left: -1px; background: var(--playhead); }
.playhead span::before { content: ''; position: absolute; left: 50%; top: 0; width: 0.9em; height: 1.2em; margin-left: -0.45em; border-radius: 0.2em; background: var(--playhead); opacity: 0.9; }

.spill {
	position: absolute;
	left: 6%;
	right: 12%;
	bottom: -14%;
	height: 26%;
	background: radial-gradient(closest-side, rgb(226 232 255 / 0.1), transparent);
	filter: blur(10px);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	/* Twelve frames at 12 fps: the six poses step with the playhead, the same second. */
	.loop { animation: poses 1s steps(6) infinite; }
	.playhead { animation: run 1s steps(12) infinite; }
	.in { animation: rise 900ms var(--ease-out) both; }
	.d0 { animation-delay: 120ms; }
	.d1 { animation-delay: 220ms; }
	.d2 { animation-delay: 340ms; }
	.d3 { animation-delay: 460ms; }
	.d4 { animation-delay: 800ms; }
	.tilt { animation: power 1400ms var(--ease-out) 200ms both; }
	.glow { animation: dawn 2400ms var(--ease-out) both; }
}
@keyframes poses { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(1200%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } }
@keyframes power {
	from { opacity: 0; transform: translateX(80px); filter: brightness(0.25) blur(4px); }
	45% { filter: brightness(0.6) blur(0); }
}
@keyframes dawn { from { opacity: 0; } }

/* ── The scenes ───────────────────────────────────────────────────────── */
.scene:not(.hero):not(.get) { padding: 140px 0; }
.why { background: linear-gradient(var(--night), var(--morning) 240px); padding-top: 220px !important; }
.timeline { background: linear-gradient(var(--morning), var(--noon)); }
.tools { background: var(--noon); }
.files { background: linear-gradient(var(--noon), var(--afternoon)); }
.ai { background: linear-gradient(var(--afternoon), var(--golden)); }
.next { background: linear-gradient(var(--golden), var(--dusk) 240px); padding-top: 220px !important; }
.get { background: linear-gradient(var(--dusk), var(--night) 60%); padding: 120px 0 40px; }

.split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}
.words { display: flex; flex-direction: column; gap: 22px; }
.words .title { margin-bottom: 6px; }

.shot-col { display: flex; flex-direction: column; gap: 14px; }
.shot {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #17181b;
	box-shadow: 0 1px 2px rgb(20 20 15 / 0.08), 0 40px 80px -36px rgb(20 20 15 / 0.45);
}
.shot img { width: 100%; }
.shot .over { position: absolute; inset: 0; opacity: 0; transition: opacity 220ms ease; }
.kinds { position: relative; }
.kinds[data-on] .over { opacity: 1; }
.kinds-btn {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--night-line);
	border-radius: 8px;
	background: rgb(32 34 38 / 0.94);
	color: #d9dade;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out);
}
.kinds-btn .dot { width: 10px; height: 10px; border-radius: 50%; background: #55585f; transition: background-color 160ms ease; }
.kinds-btn[aria-pressed='true'] { border-color: var(--accent); }
.kinds-btn[aria-pressed='true'] .dot { background: var(--accent); }
.kinds-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
	.kinds-btn:hover { background: #2a2c31; }
}
.legend { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key.vec { background: var(--vec); }
.key.pnt { background: var(--paint); margin-left: 12px; }

/* The tool panel, in the app's colours. */
.panel {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	border-radius: 14px;
	overflow: hidden;
	background: #17181b;
	color: #d9dade;
	box-shadow: 0 1px 2px rgb(20 20 15 / 0.08), 0 40px 80px -36px rgb(20 20 15 / 0.45);
}
.toollist { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--night-line); font-size: 15px; }
.toollist li { padding: 7px 12px; border-radius: 7px; color: #b6b8be; }
.toollist li.on { background: #24324c; color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.panel-props { display: flex; flex-direction: column; gap: 10px; padding: 24px; font-size: 15px; color: #8a8c93; }
.panel-props b { color: #d9dade; font-size: 16px; }
.stroke { margin-top: auto; border-radius: 8px; background: #fff; padding: 10px; }
.stroke svg { display: block; width: 100%; height: 96px; }
.stroke path { fill: none; stroke-width: 14; stroke-linecap: round; }
.s-vec { stroke: var(--vec); }
.s-pnt { stroke: var(--paint); }
.stroke-note { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.stroke-note .key.pnt { margin-left: 8px; }

/* Files in and out. */
.flow {
	display: grid;
	grid-template-columns: 1fr auto 1.25fr auto 1fr;
	align-items: center;
	gap: 10px;
}
.file {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 18px;
	border-radius: 3px;
	background: var(--surface);
	box-shadow: 0 1px 2px rgb(20 20 15 / 0.05), 0 30px 60px -30px rgb(20 20 15 / 0.35);
	font-size: 14px;
	color: var(--quiet);
}
.file .ext { font-family: var(--mono); font-size: 1.75rem; letter-spacing: -0.03em; color: var(--ink); }
.file.fla .ext { color: #b4232c; }
.file.psd .ext { color: #1f6fb8; }
.arrow { position: relative; width: clamp(44px, 6vw, 84px); height: 2px; background: var(--ink-2); }
.arrow::after { content: ''; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--ink-2); border-right: 0; }
.arrow.both::before { content: ''; position: absolute; left: -1px; top: -5px; border: 6px solid transparent; border-right: 8px solid var(--ink-2); border-left: 0; }
.arrow span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; max-width: 11ch; text-align: center; font-size: 12px; line-height: 1.3; color: var(--quiet); }
.doc { border-radius: 10px; overflow: hidden; background: #17181b; color: #d9dade; font-size: 13px; box-shadow: 0 30px 60px -30px rgb(20 20 15 / 0.5); }
.doc-tab { display: block; padding: 8px 12px; background: var(--night-3); border-bottom: 1px solid var(--night-line); }
.doc-body { display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.lyr { padding: 5px 9px; border-radius: 5px; background: #24262b; }
.lyr::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--vec); margin-right: 8px; }
.lyr.px::before { background: var(--paint); }
.flow-out { grid-column: 3 / 6; margin: 8px 0 0; font-size: 14px; color: var(--quiet); }

/* Rendered frames, cut from the same sprite as the hero's loop. */
.strip-col { display: flex; flex-direction: column; gap: 14px; }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.strip li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--quiet); }
.thumb {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	background: #fff url(/img/loop.webp) 0 0 / 100% 600% no-repeat;
	box-shadow: 0 1px 2px rgb(20 20 15 / 0.05), 0 18px 40px -22px rgb(20 20 15 / 0.4);
}
.p2 { background-position: 0 20%; } .p3 { background-position: 0 40%; } .p4 { background-position: 0 60%; }
.p5 { background-position: 0 80%; } .p6 { background-position: 0 100%; }

/* Still to come: blank keyframes ahead of the playhead. */
.ahead {
	list-style: none;
	margin: 56px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
	color: var(--night-ink);
}
.ahead::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: rgb(255 255 255 / 0.18); }
.ahead li { position: relative; display: flex; flex-direction: column; gap: 18px; font-size: 1.0625rem; line-height: 1.4; text-wrap: balance; }
.kf { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--night-ink); background: var(--dusk); }

/* The download. */
.offer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
	padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 72px);
	border-radius: 24px;
	background: var(--night-2);
	border: 1px solid var(--night-line);
	box-shadow: 0 60px 120px -60px rgb(0 0 0 / 0.8);
}
.offer .cta { justify-content: center; }
.cta.stacked { flex-direction: column; }
.cta.stacked .cta-state { text-align: center; max-width: 44ch; }
.offer .lede { max-width: 40ch; }
.offer-icon { width: 88px; height: 88px; }
.foot { display: flex; justify-content: center; padding: 48px 0 8px; font-size: 13px; color: var(--night-quiet); text-align: center; }

/* ── The two pages behind the login: thanks (download.html) and refused (denied.html) ──
   One night scene, the offer card alone, so the tab keeps the site's look while the
   installer downloads or after a login is refused. */
.solo { min-height: 100svh; background: var(--night); }
.solo-scene {
	min-height: 100svh;
	display: grid;
	align-items: center;
	padding: calc(var(--bar) + 48px) 0 64px !important;
	background:
		radial-gradient(60% 70% at 70% 0%, rgb(90 52 180 / 0.28), transparent 70%),
		var(--night) !important;
}
.solo .bar { background: rgb(18 19 23 / 0.72); border-bottom-color: rgb(255 255 255 / 0.06); }
.bar-back { margin-left: auto; color: inherit; opacity: 0.78; text-decoration: none; font-size: 15px; transition: opacity 160ms ease; }
.solo .offer .display { font-size: clamp(2.5rem, 5.6vw, 4.75rem); }
.steps {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	max-width: 46ch;
	color: #b9bcc5;
}
.steps li { display: flex; gap: 14px; align-items: baseline; }
.steps .figure {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--night-line);
	font-size: 13px;
	color: var(--night-ink);
}
.back-link { color: var(--night-quiet); font-size: 15px; text-decoration: underline; text-decoration-color: var(--night-line); text-underline-offset: 5px; transition: color 160ms ease; }
.btn.plain::before { display: none; }
@media (hover: hover) and (pointer: fine) {
	.bar-back:hover { opacity: 1; }
	.back-link:hover { color: var(--night-ink); }
}
@media (prefers-reduced-motion: no-preference) {
	.solo .offer { animation: rise 700ms var(--ease-out) both; }
}

/* Scroll reveals: hidden only when the script runs, so the page reads whole without it. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .reveal.on { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 60ms; }
.js .reveal.d2 { transition-delay: 120ms; }
.js .reveal.d3 { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
	.js .reveal { transform: none; transition: opacity 300ms ease; }
}

/* ── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 899px) {
	.hero { padding-top: calc(var(--bar) + 44px); }
	.hero-grid, .split { grid-template-columns: 1fr; gap: 48px; }
	.stage { margin-right: calc(-1 * var(--gutter) - 24vw); }
	.app { transform: rotateY(-12deg) rotateX(4deg); font-size: 1.5cqi; }
	.app-mid { grid-template-columns: 1fr; }
	.app-tools, .app-props, .app-pill, .app-tool { display: none; }
	.app-time { grid-template-columns: 1fr; }
	.layers { display: none; }
	.cells { padding-left: 1em; }
	.playhead { left: 1em; width: calc((100% - 2em) / 12); }
	.scene:not(.hero):not(.get) { padding: 96px 0; }
	.why, .next { padding-top: 160px !important; }
	.flow { grid-template-columns: 1fr; justify-items: center; gap: 30px; }
	.flow .file, .flow .doc { width: min(100%, 300px); }
	.arrow { width: 2px; height: 40px; }
	.arrow::after { right: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-top: 8px solid var(--ink-2); border-bottom: 0; }
	.arrow.both::before { left: -5px; top: -1px; border: 6px solid transparent; border-bottom: 8px solid var(--ink-2); border-top: 0; }
	.arrow span { left: 16px; bottom: auto; top: 50%; transform: translateY(-50%); text-align: left; max-width: 22ch; }
	.flow-out { grid-column: auto; text-align: center; }
	.ahead { grid-template-columns: 1fr 1fr; row-gap: 40px; }
	.ahead::before { display: none; }
}
@media (max-width: 759px) {
	.links { display: none; }
	.bar-get { margin-left: auto; }
	.panel { grid-template-columns: 1fr; }
	.toollist { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--night-line); font-size: 14px; }
	.strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.ahead { grid-template-columns: 1fr; }
}