/*
 * Ballot — researcher sales deck.
 *
 * The landing page's system, as slides: paper and ink, safety orange for "you" and money, yellow
 * for planned, bounty blue, violet for data; Saira at 125% for display, Geist for text, Geist Mono
 * for labels. Each slide belongs to a side (Build, Pilot, Trade) and wears that side's pattern and
 * lead-word look: Build in hazard tape, Pilot outlined on a hard shadow, Trade knocked out of a tag.
 *
 * Every size is a design pixel on a 1920×1080 canvas: --px is 1/1920 of the slide's width, so the
 * artwork scales to any window, the overview and the printed page.
 *
 * Live and static: with html.live, slides with steps cycle (data-step on the slide, .is-on on the
 * step's screens and cards) and stages run. Without it (reduced motion, ?static, print, overview)
 * every slide shows its static composition: all steps expanded, the [data-static] screens and cards.
 */

@font-face {
  font-family: "Saira Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  src: url("assets/fonts/saira-latin-wdth-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("assets/fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Geist Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --paper: #f2f1ec;
  --paper-2: #e9e8e2;
  --paper-3: #dcdbd4;
  --card: #f7f6f2;
  --ink: #111111;
  --ink-2: #45443f;
  --ink-3: #6b6a64;
  --line: rgb(17 17 17 / 0.12);
  --line-2: rgb(17 17 17 / 0.26);
  --orange: #f25a1d;
  --yellow: #f5c42a;
  --bounty: #2447f5;
  --bounty-ink: #f4f6ff;
  --violet: #7a3cff;
  --party-dev: #2447f5;
  --party-pilot: #f25a1d;
  --party-trader: #7a3cff;
  --surround: #0e0e0f;
  --surround-ink: #f2f1ec;
  --surround-ink-2: rgb(242 241 236 / 0.6);
  --bar-h: 52px;
  --font-display: "Saira Variable", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--bar-h);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--surround);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

p,
h1,
h2,
h3,
ul,
ol,
figure,
pre {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ------------------------------------------------------------------------------------------ */
/* Stage                                                                                      */
/* ------------------------------------------------------------------------------------------ */

.deck {
  container-type: size;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px;
}

.slide {
  container-type: inline-size;
  position: relative;
  display: none;
  width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7);
  --party: var(--party-pilot);
}

.slide.is-current {
  display: block;
}

.slide > * {
  --px: 0.0520833cqi;
}

.side-dev {
  --party: var(--party-dev);
}

.side-pilot {
  --party: var(--party-pilot);
}

.side-trade {
  --party: var(--party-trader);
}

@media (prefers-reduced-motion: no-preference) {
  .slide.is-current {
    animation: slide-in 0.4s var(--ease);
  }
}

@keyframes slide-in {
  from {
    opacity: 0.35;
  }
}

.slide-in {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(40 * var(--px)) calc(72 * var(--px)) calc(30 * var(--px));
  font-size: calc(22 * var(--px));
  line-height: 1.45;
}

.slide-body {
  position: relative;
  min-height: 0;
}

/* ---- The background: the landing's traders' pattern (marketing/src/styles/components.css,
   .pweb-layer.is-trader), on every slide but the title. Lit squares of data in violet, in two
   layers that step past each other on different beats, so the field flickers like something
   live. Tiles and steps are in design pixels, so the pattern scales with the slide. ---- */

.web {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.26;
  -webkit-mask-image: radial-gradient(64% 58% at 60% 55%, transparent 16%, #000 80%);
  mask-image: radial-gradient(64% 58% at 60% 55%, transparent 16%, #000 80%);
}

.web i {
  position: absolute;
  background-color: var(--party-trader);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  will-change: transform;
}

.web .w-a {
  inset: 0 0 0 calc(-96 * var(--px));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect x='4' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='4' width='4' height='4' fill-opacity='1'/%3E%3Crect x='40' y='4' width='4' height='4' fill-opacity='1'/%3E%3Crect x='52' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='64' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='28' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='40' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='52' y='16' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='88' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='28' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='28' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='88' y='28' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='40' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='52' y='40' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='52' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='64' y='64' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='64' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='88' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='52' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='76' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='88' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='88' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='52' y='88' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='64' y='88' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='88' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='88' width='4' height='4' fill-opacity='0.22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect x='4' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='4' width='4' height='4' fill-opacity='1'/%3E%3Crect x='40' y='4' width='4' height='4' fill-opacity='1'/%3E%3Crect x='52' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='64' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='4' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='28' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='40' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='52' y='16' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='88' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='28' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='28' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='88' y='28' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='40' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='52' y='40' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='52' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='28' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='64' y='64' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='64' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='88' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='52' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='76' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='88' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='88' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='52' y='88' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='64' y='88' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='88' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='88' y='88' width='4' height='4' fill-opacity='0.22'/%3E%3C/svg%3E");
  -webkit-mask-size: calc(96 * var(--px)) calc(96 * var(--px));
  mask-size: calc(96 * var(--px)) calc(96 * var(--px));
}

.web .w-b {
  inset: calc(-84 * var(--px)) 0 0 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Crect x='16' y='4' width='4' height='4' fill-opacity='1'/%3E%3Crect x='40' y='4' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='4' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='28' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='4' y='28' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='28' width='4' height='4' fill-opacity='1'/%3E%3Crect x='4' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='40' y='40' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='52' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='52' width='4' height='4' fill-opacity='1'/%3E%3Crect x='28' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='52' y='52' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='52' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='64' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='64' width='4' height='4' fill-opacity='1'/%3E%3Crect x='52' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='28' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='40' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='52' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='64' y='76' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Crect x='16' y='4' width='4' height='4' fill-opacity='1'/%3E%3Crect x='40' y='4' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='4' y='16' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='28' y='16' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='4' y='28' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='28' width='4' height='4' fill-opacity='1'/%3E%3Crect x='4' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='40' y='40' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='76' y='40' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='52' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='16' y='52' width='4' height='4' fill-opacity='1'/%3E%3Crect x='28' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='52' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='52' y='52' width='4' height='4' fill-opacity='1'/%3E%3Crect x='64' y='52' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='64' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='40' y='64' width='4' height='4' fill-opacity='1'/%3E%3Crect x='52' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='64' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='4' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='16' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='28' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='40' y='76' width='4' height='4' fill-opacity='1'/%3E%3Crect x='52' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3Crect x='64' y='76' width='4' height='4' fill-opacity='0.5'/%3E%3Crect x='76' y='76' width='4' height='4' fill-opacity='0.22'/%3E%3C/svg%3E");
  -webkit-mask-size: calc(84 * var(--px)) calc(84 * var(--px));
  mask-size: calc(84 * var(--px)) calc(84 * var(--px));
}

html.live .slide.is-current .web .w-a {
  animation: web-a 6.4s steps(8) infinite;
}

html.live .slide.is-current .web .w-b {
  animation: web-b 7.7s steps(7) infinite;
}

@keyframes web-a {
  to {
    transform: translateX(calc(96 * var(--px)));
  }
}

@keyframes web-b {
  to {
    transform: translateY(calc(84 * var(--px)));
  }
}

/* ------------------------------------------------------------------------------------------ */
/* Slide chrome                                                                               */
/* ------------------------------------------------------------------------------------------ */

.slide-head,
.slide-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(24 * var(--px));
}

.slide-head {
  padding-bottom: calc(14 * var(--px));
  border-bottom: 1px solid var(--line-2);
}

.slide-foot {
  grid-template-columns: 1fr auto;
  padding-top: calc(12 * var(--px));
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

.sec {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--px));
  font-size: calc(15 * var(--px));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sec b {
  font-family: var(--font-mono);
  font-weight: 450;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* The sides as the landing's header switch: an underline fills under the side on screen. */

.flags {
  display: flex;
  justify-content: flex-end;
  gap: calc(8 * var(--px));
}

.small {
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.page svg {
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  color: var(--ink);
}

/* The wordmark, as the landing sets it: the name in lower case, its "i" drawn as the arm. */
.wm {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}

.page .wm {
  font-size: calc(21 * var(--px));
}

.wm .logo-i,
.page .wm .logo-i,
.bar-brand .wm .logo-i,
.mks-brand .wm .logo-i {
  display: inline-block;
  width: 0.334em;
  height: 0.743em;
  overflow: visible;
  color: var(--orange);
  vertical-align: baseline;
  flex: none;
}

.wm sup {
  margin-left: 0.06em;
  font-size: 0.45em;
  font-weight: 600;
  vertical-align: 0.95em;
}

/* ------------------------------------------------------------------------------------------ */
/* 01 · The title: herbie, as big as the slide takes it, its "i" the landing's arm render      */
/* ------------------------------------------------------------------------------------------ */

.title {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.t-line {
  margin-bottom: calc(10 * var(--px));
  font-size: calc(40 * var(--px));
  line-height: 1.2;
  color: var(--ink-2);
}

.t-line b {
  font-weight: 650;
  color: var(--ink);
}

.t-word {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 820;
  font-size: calc(492 * var(--px));
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
  margin-bottom: calc(-6 * var(--px));
}

/* The word's "i" is the arm itself, on the baseline, reaching out over the "e" with its head bowed
   to look at it (the landing's footer word: arm-i.webp is 1100 x 1600; the base takes the i's
   place and the rest hangs over the e without pushing it along). */
.t-i {
  display: inline-block;
  width: auto;
  height: 0.98em;
  margin: 0 -0.243em -0.04em 0.014em;
  vertical-align: baseline;
  transform-origin: 30% 97%;
}

.t-word .tm {
  margin-left: 0.04em;
  font-size: 0.16em;
  font-weight: 600;
  vertical-align: 3.9em;
}

html.live .slide.is-current .t-i {
  animation: t-bow 5.5s ease-in-out infinite alternate;
}

@keyframes t-bow {
  from {
    transform: rotate(1.2deg);
  }
  to {
    transform: rotate(-2deg);
  }
}

html.live .slide.is-current .t-line {
  animation: piece-in 0.7s var(--ease-out) 0.2s both;
}

/* ---- Flags: the landing's small mono labels. ---- */

.flag {
  display: inline-flex;
  align-items: center;
  height: calc(26 * var(--px));
  padding: 0 calc(10 * var(--px));
  border-radius: calc(4 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(12.5 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  font-style: normal;
}

.flag-ink {
  background: var(--ink);
  color: var(--paper);
}

.flag-line {
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
}

.flag-launch {
  background: var(--orange);
  color: #111;
}

.flag-planned {
  background: var(--yellow);
  color: #111;
}

/* ------------------------------------------------------------------------------------------ */
/* Type                                                                                       */
/* ------------------------------------------------------------------------------------------ */

.kicker {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  margin-bottom: calc(20 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(15 * var(--px));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kicker b {
  color: var(--orange);
  font-weight: 500;
}

.h {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 820;
  font-size: calc(76 * var(--px));
  line-height: 0.94;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink);
}

.h > span {
  display: block;
}

.h em {
  font-style: normal;
}

/* Build: hazard tape, as the landing's headline wears it, crawling slowly. */
.tape {
  color: transparent;
  background: repeating-linear-gradient(135deg, var(--tape-dark, #111) 0 0.15em, var(--yellow) 0.15em 0.235em);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.025em var(--tape-stroke, #111);
}

html.live .slide.is-current .tape {
  animation: tape-crawl 7s linear infinite;
}

@keyframes tape-crawl {
  to {
    background-position: 0.3323em 0;
  }
}

/* Pilot: hollow, on a hard shadow, like a sticker. */
.outline {
  color: var(--paper);
  letter-spacing: 0.015em;
  -webkit-text-stroke: 0.045em var(--ink);
  text-shadow: 0.055em 0.055em 0 var(--ink);
}

/* Trade: knocked out of a tag that hugs the capitals. */
.knock {
  display: inline-block;
  padding: 0.07em 0.13em 0.03em;
  border-radius: 0.05em;
  background: var(--ink);
  color: var(--paper);
  line-height: 0.86;
}

.lede {
  font-size: calc(28 * var(--px));
  line-height: 1.4;
  color: var(--ink-2);
}

.lede b {
  font-weight: 600;
  color: var(--ink);
}

.k {
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- The landing's pill button, with its round arrow dot. ---- */

.btn {
  --btn-h: calc(64 * var(--px));
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--px));
  height: var(--btn-h);
  padding: 0 calc(7 * var(--px)) 0 calc(28 * var(--px));
  border-radius: 999px;
  font-size: calc(15 * var(--px));
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-orange {
  background: var(--orange);
  color: #111;
}

.btn-dot {
  display: grid;
  place-items: center;
  width: calc(var(--btn-h) - 12 * var(--px));
  height: calc(var(--btn-h) - 12 * var(--px));
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}

.btn-orange .btn-dot {
  background: #111;
  color: #f2f1ec;
}

.btn-dot svg {
  width: 48%;
  height: 48%;
}

html.live .slide.is-current .btn-orange .btn-dot svg {
  animation: nudge 1.8s var(--ease) infinite;
}

@keyframes nudge {
  0%,
  60%,
  100% {
    transform: none;
  }
  30% {
    transform: translateX(calc(4 * var(--px)));
  }
}

/* ------------------------------------------------------------------------------------------ */
/* Steps: the landing's rail, and the hero's tabs                                             */
/* ------------------------------------------------------------------------------------------ */

.rail {
  position: relative;
  display: grid;
  gap: calc(2 * var(--px));
  margin-top: calc(30 * var(--px));
  border-left: 1px solid var(--line-2);
}

.step {
  position: relative;
  padding-left: calc(22 * var(--px));
}

.step::before {
  content: "";
  position: absolute;
  left: calc(-2 * var(--px));
  top: calc(8 * var(--px));
  bottom: calc(8 * var(--px));
  width: calc(3 * var(--px));
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
}

.step .go {
  display: grid;
  grid-template-columns: calc(40 * var(--px)) minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  padding: calc(9 * var(--px)) 0;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 760;
  font-size: calc(20 * var(--px));
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition:
    color 0.25s,
    font-size 0.35s var(--ease-out);
}

.step .n {
  font-family: var(--font-mono);
  font-size: calc(14 * var(--px));
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.step .body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}

.step .in {
  min-height: 0;
  overflow: hidden;
}

.step .body p {
  max-width: 34ch;
  padding: calc(2 * var(--px)) 0 calc(12 * var(--px)) calc(40 * var(--px));
  font-size: calc(19 * var(--px));
  line-height: 1.45;
  color: var(--ink-2);
}

/* Current (live) or every step (static): the title in quoted bold capitals, its words open. */
.slide[data-step] .step.is-current::before {
  animation: rail-fill var(--dur, 6s) linear forwards;
}

.slide[data-step] .step.is-current .go,
.slide:not([data-step]) .step .go {
  color: var(--ink);
}

.slide[data-step] .step.is-current .go {
  font-stretch: 125%;
  font-weight: 820;
  font-size: calc(28 * var(--px));
  letter-spacing: -0.005em;
}

.slide[data-step] .step.is-current .n {
  color: var(--orange);
}

.slide[data-step] .step.is-current .t::before {
  content: "“";
}

.slide[data-step] .step.is-current .t::after {
  content: "”";
}

.slide[data-step] .step.is-done .go {
  color: var(--ink-2);
}

.slide[data-step] .step.is-current .body,
.slide:not([data-step]) .step .body {
  grid-template-rows: 1fr;
}

.slide:not([data-step]) .step::before {
  transform: scaleY(1);
  background: var(--line-2);
  width: calc(1 * var(--px));
  left: calc(-1 * var(--px));
}

.slide:not([data-step]) .step .n {
  color: var(--orange);
}

.slide:not([data-step]) .step .body p {
  padding-bottom: calc(6 * var(--px));
}

@keyframes rail-fill {
  from {
    transform: scaleY(0.06);
  }
  to {
    transform: scaleY(1);
  }
}

/* Tabs: numbered, titled, and a bar under each that fills while it plays. */

/* ------------------------------------------------------------------------------------------ */
/* Screens, cards, chips: the landing's product pieces                                         */
/* ------------------------------------------------------------------------------------------ */

/* Per-step pieces: shown for their step while a slide plays, and in the static composition if
   marked [data-static]. Positioned absolutely, so hiding them never moves anything else. */
.slide[data-step] [data-show]:not(.is-on),
.slide:not([data-step]) [data-show]:not([data-static]) {
  visibility: hidden;
  opacity: 0;
}

.slide[data-step] [data-show].is-on {
  animation: piece-in 0.6s var(--ease-out) both;
  animation-delay: calc(0.08s + var(--i, 0) * 0.12s);
}

@keyframes piece-in {
  from {
    opacity: 0;
    transform: translateY(calc(16 * var(--px))) scale(0.97);
  }
}

/* A detached screen, floating by the stage: a title bar and what it shows. */
.sx {
  position: absolute;
  z-index: 3;
  width: calc(340 * var(--px));
  overflow: hidden;
  border-radius: calc(14 * var(--px));
  background: var(--paper);
  box-shadow:
    0 0 0 1px var(--line-2),
    0 26px 50px -28px rgb(0 0 0 / 0.5);
}

.sx-bar {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--px));
  height: calc(36 * var(--px));
  padding: 0 calc(12 * var(--px));
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sx-bar b {
  font-weight: 600;
  color: var(--ink);
}

.sx-logo {
  width: auto;
  height: calc(18 * var(--px));
  flex: none;
}

.sx-bar .lock {
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
  color: var(--orange);
  flex: none;
}

.sx-flag {
  margin-left: auto;
  flex: none;
  padding: calc(3 * var(--px)) calc(7 * var(--px));
  border-radius: calc(3 * var(--px));
  background: var(--yellow);
  color: #111;
  font-size: calc(11 * var(--px));
}

.sx-flag.is-ink {
  background: var(--ink);
  color: var(--paper);
}

.rec {
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  flex: none;
  border-radius: 50%;
  background: var(--orange);
}

html.live .slide.is-current .rec {
  animation: blink 1.1s steps(2, end) infinite;
}

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

/* The event log, line by line, as the landing's replay card reads it back. */
.log {
  display: grid;
  gap: calc(2 * var(--px));
  padding: calc(10 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  line-height: 1.35;
}

.ev {
  display: grid;
  grid-template-columns: calc(84 * var(--px)) calc(70 * var(--px)) minmax(0, 1fr);
  gap: calc(8 * var(--px));
  padding: calc(4 * var(--px)) 0;
  color: var(--ink-2);
  opacity: 0.22;
  transition: opacity 0.3s;
}

.ev.is-on {
  opacity: 1;
}

.ev time {
  color: var(--ink-3);
}

.ev b {
  font-weight: 600;
  color: var(--ink);
}

.ev span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev.is-you b {
  color: var(--orange);
}

.ev.is-ok b {
  padding: 0 calc(4 * var(--px));
  border-radius: calc(3 * var(--px));
  background: var(--orange);
  color: #111;
  justify-self: start;
}

.ev.is-no b {
  color: #b32d0c;
}

/* A product card, as the landing's step cards: paper, mono labels, soft deep shadow. */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(7 * var(--px));
}

.chips i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: calc(6 * var(--px)) calc(10 * var(--px));
  border-radius: calc(5 * var(--px));
  background: var(--paper-2);
  color: var(--ink);
}

.chips i.is-hot {
  background: var(--orange);
  color: #111;
}

.cli {
  margin-top: calc(16 * var(--px));
  padding: calc(13 * var(--px)) calc(15 * var(--px));
  border-radius: calc(14 * var(--px));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(14 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cli b {
  margin-right: calc(6 * var(--px));
  color: var(--orange);
  font-weight: 500;
}

/* Typing: a mono line revealed character by character (live), or whole (static). */
.type {
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  vertical-align: bottom;
  max-width: calc(var(--n) * 1ch + 0.2ch);
}

/* ------------------------------------------------------------------------------------------ */
/* 3D stages and the HTML that follows them                                                   */
/* ------------------------------------------------------------------------------------------ */

.stage3d {
  position: relative;
  margin: 0;
}

.stage3d .poster,
.stage3d .stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage3d .poster {
  object-fit: fill;
  transition: opacity 0.4s;
  pointer-events: none;
}

.stage3d.is-live .poster {
  opacity: 0;
}

/* A tag on a point of the scene: a label on a hairline, as the landing hangs its pilot tags. */
.tag3d {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tag3d::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: calc(22 * var(--px));
  background: var(--ink);
}

.tag3d > b {
  position: absolute;
  left: 0;
  bottom: calc(22 * var(--px));
  transform: translateX(-50%);
  padding: calc(7 * var(--px)) calc(11 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--ink);
  color: var(--paper);
  font-size: calc(13.5 * var(--px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-pilot > b {
  background: var(--orange);
  color: #111;
}

.tag-pilot > i {
  position: absolute;
  left: 0;
  bottom: calc(22 * var(--px) + 34 * var(--px));
  transform: translateX(-50%);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: calc(11.5 * var(--px));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.tag-data::after {
  height: 0;
}

.tag-data > b {
  bottom: auto;
  top: calc(12 * var(--px));
  padding: calc(5 * var(--px)) calc(8 * var(--px));
  background: var(--paper);
  color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.tag-zip > b {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The outcome pops up from the goal, like the landing's points. */
.pop3d {
  position: absolute;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
}

.pop3d > * {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pop3d b {
  bottom: calc(26 * var(--px));
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 820;
  font-size: calc(44 * var(--px));
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--orange);
  text-shadow: 0 2px 18px rgb(242 241 236 / 0.9);
}

.pop3d[data-kind="dropped"] b {
  color: var(--ink);
}

.pop3d em {
  bottom: 0;
  padding: calc(5 * var(--px)) calc(9 * var(--px));
  border-radius: calc(4 * var(--px));
  background: rgb(10 10 11 / 0.82);
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f2f1ec;
}

html.live .pop3d:not(.is-on) {
  opacity: 0;
}

html.live .pop3d.is-on {
  animation: pop 2.2s var(--ease-out) forwards;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(calc(18 * var(--px))) scale(0.7);
  }
  14% {
    opacity: 1;
    transform: none;
  }
  78% {
    opacity: 1;
    transform: translateY(calc(-14 * var(--px)));
  }
  100% {
    opacity: 0;
    transform: translateY(calc(-26 * var(--px)));
  }
}

/* ------------------------------------------------------------------------------------------ */
/* 01 · Cover                                                                                 */
/* ------------------------------------------------------------------------------------------ */

.cover {
  display: grid;
  grid-template-columns: calc(700 * var(--px)) minmax(0, 1fr);
  gap: calc(48 * var(--px));
}

.cover-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(40 * var(--px));
}

.s2 .kicker {
  margin-bottom: calc(28 * var(--px));
}

.s2 .h {
  font-size: calc(115 * var(--px));
  line-height: 0.9;
}

/* The one line under the hero: a share mark and the distribution promise. */
.cover-sub {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
  margin-top: calc(46 * var(--px));
  font-size: calc(30 * var(--px));
  line-height: 1.25;
  color: var(--ink-2);
}

.cover-sub b {
  display: block;
  font-weight: 650;
  color: var(--ink);
}

.share-ico {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(62 * var(--px));
  height: calc(62 * var(--px));
  border-radius: 50%;
  background: var(--orange);
  color: #111;
}

.share-ico svg {
  width: 46%;
  height: 46%;
}

/* Rings that spread out from the mark, as the link goes out. */
.share-ico::before,
.share-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--orange);
  opacity: 0;
}

html.live .slide.is-current .share-ico::before {
  animation: share-ring 2.8s var(--ease-out) 1s infinite;
}

html.live .slide.is-current .share-ico::after {
  animation: share-ring 2.8s var(--ease-out) 1.5s infinite;
}

@keyframes share-ring {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

html.live .slide.is-current .cover-sub {
  animation: piece-in 0.6s var(--ease-out) 0.3s both;
}

/* The right half: your sim in MuJoCo, one command, and the play page it becomes. */
.cover-vis {
  position: relative;
}

.sim-card {
  position: absolute;
  z-index: 4;
  left: calc(6 * var(--px));
  top: calc(26 * var(--px));
  width: calc(300 * var(--px));
  margin: 0;
  overflow: hidden;
  border-radius: calc(14 * var(--px));
  background: var(--card);
  transform: rotate(-3deg);
  box-shadow:
    0 0 0 1.5px var(--ink),
    0 calc(30 * var(--px)) calc(50 * var(--px)) calc(-26 * var(--px)) rgb(0 0 0 / 0.45);
}

.sim-card figcaption {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  height: calc(42 * var(--px));
  padding: 0 calc(10 * var(--px)) 0 calc(12 * var(--px));
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: calc(12.5 * var(--px));
  color: var(--ink-2);
  white-space: nowrap;
}

.sim-card figcaption img {
  width: auto;
  height: calc(20 * var(--px));
}

.sim-card figcaption .flag {
  margin-left: auto;
  height: calc(22 * var(--px));
  font-size: calc(11 * var(--px));
}

.sim-shot {
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
}

.sim-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
  filter: saturate(0.85);
}

.sim-arrow {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: calc(1028 * var(--px));
  height: calc(900 * var(--px));
  overflow: visible;
  pointer-events: none;
}

.sa-track {
  fill: none;
  stroke: rgb(242 90 29 / 0.25);
  stroke-width: 7;
  stroke-linecap: round;
}

.sa-flow {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 12 9;
}

html.live .slide.is-current .sa-flow {
  animation: flow 1.1s linear infinite;
}

.sim-cmd {
  position: absolute;
  z-index: 5;
  left: calc(380 * var(--px));
  top: calc(88 * var(--px));
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(36 * var(--px));
  padding: 0 calc(14 * var(--px));
  border-radius: calc(6 * var(--px));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(14.5 * var(--px));
  white-space: nowrap;
}

.sim-cmd b {
  color: var(--orange);
  font-weight: 500;
}

html.live .slide.is-current .sim-card {
  animation: sim-in 0.6s var(--ease-out) both;
}

html.live .slide.is-current .sim-arrow {
  animation: sim-draw 0.7s var(--ease-out) 0.25s both;
}

html.live .slide.is-current .sim-cmd {
  animation: piece-in 0.5s var(--ease-out) 0.35s both;
}

html.live .slide.is-current .splash .sp-url {
  animation: sp-link 1.2s var(--ease-out) 0.85s both;
}

@keyframes sim-in {
  from {
    opacity: 0;
    transform: rotate(-3deg) translateY(calc(14 * var(--px))) scale(0.96);
  }
}

@keyframes sim-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes sp-link {
  0% {
    box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 rgb(242 90 29 / 0.7);
  }
  40% {
    box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 calc(8 * var(--px)) rgb(242 90 29 / 0.2);
  }
  100% {
    box-shadow: inset 0 0 0 1px var(--line), 0 0 0 calc(14 * var(--px)) rgb(242 90 29 / 0);
  }
}

.splash {
  position: absolute;
  right: calc(24 * var(--px));
  bottom: calc(10 * var(--px));
  width: calc(850 * var(--px));
  height: calc(650 * var(--px));
  overflow: hidden;
  border-radius: calc(24 * var(--px));
  /* The deck's own paper; the ink outline and orange offset set it apart from the slide. */
  background: var(--paper);
  box-shadow:
    0 0 0 1.5px var(--ink),
    calc(12 * var(--px)) calc(12 * var(--px)) 0 0 var(--orange),
    0 calc(50 * var(--px)) calc(100 * var(--px)) calc(-50 * var(--px)) rgb(0 0 0 / 0.35);
  color: var(--ink);
}

.splash > :not(.poster):not(.stage-canvas) {
  z-index: 3;
}

.splash .stage-canvas {
  z-index: 1;
}

/* A soft wash behind the title only (bottom-left), so it reads over the floor without
   fading the robot. */
.splash::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgb(242 241 236 / 0.95) 0%, rgb(242 241 236 / 0.6) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 38%, transparent 62%);
  mask-image: linear-gradient(to right, #000 38%, transparent 62%);
}

.sp-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  height: calc(52 * var(--px));
  padding: 0 calc(12 * var(--px)) 0 calc(18 * var(--px));
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
}

.sp-bar .dots {
  display: flex;
  gap: calc(7 * var(--px));
}

.sp-bar .dots i {
  display: block;
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
  border-radius: 50%;
}

.sp-bar .dots i:nth-child(1) {
  background: #ff5f57;
}

.sp-bar .dots i:nth-child(2) {
  background: #febc2e;
}

.sp-bar .dots i:nth-child(3) {
  background: #28c840;
}

.sp-url {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--px));
  height: calc(32 * var(--px));
  margin: 0 auto;
  padding: 0 calc(16 * var(--px));
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono);
  font-size: calc(14 * var(--px));
  color: var(--ink-3);
}

.sp-url svg {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  color: var(--orange);
}

.sp-url b {
  color: var(--ink);
  font-weight: 600;
}

.sp-share {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(32 * var(--px));
  padding: 0 calc(14 * var(--px));
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(12.5 * var(--px));
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sp-share svg {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
}

/* The pilot's view, live: the stage draws a first-person camera into this card, so the card is a
   frame around a hole, with the headset's overlays on top, as the landing's headset view. */
.sp-pov {
  position: absolute;
  left: calc(30 * var(--px));
  top: calc(80 * var(--px));
  width: calc(330 * var(--px));
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border-radius: calc(16 * var(--px));
  background: transparent;
  /* The stage lays its view in with the same rounded corners, so only the outline is drawn here. */
  box-shadow: 0 0 0 1.5px var(--ink);
}

.pov-view {
  position: absolute;
  inset: 0;
  display: block;
}

/* The lenses darken the corners, the way a headset does. */
.sp-pov::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 calc(40 * var(--px)) calc(10 * var(--px)) rgb(17 17 17 / 0.3);
  pointer-events: none;
}

.pov-rec,
.pov-who {
  position: absolute;
  z-index: 1;
  top: calc(10 * var(--px));
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  padding: calc(4 * var(--px)) calc(8 * var(--px));
  border-radius: calc(8 * var(--px));
  background: rgb(17 17 17 / 0.76);
  color: #f2f1ec;
  font-family: var(--font-mono);
  font-size: calc(10.5 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pov-rec {
  left: calc(10 * var(--px));
}

.pov-rec b {
  font-weight: 500;
}

.pov-who {
  right: calc(10 * var(--px));
}

.pov-goals {
  position: absolute;
  z-index: 1;
  left: calc(10 * var(--px));
  bottom: calc(10 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
  padding: calc(6 * var(--px)) calc(9 * var(--px));
  border-radius: calc(9 * var(--px));
  background: rgb(17 17 17 / 0.72);
  color: rgb(242 241 236 / 0.7);
  font-family: var(--font-mono);
  font-size: calc(9.5 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pov-goals li {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--px));
  white-space: nowrap;
}

.pov-goals i {
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.pov-goals .is-done {
  color: #f2f1ec;
}

.pov-goals .is-done i {
  background: #f2f1ec;
}

.pov-goals .is-now {
  color: var(--orange);
}

.pov-goals .is-now i {
  background: var(--orange);
  box-shadow:
    inset 0 0 0 1.5px currentColor,
    0 0 0 calc(3 * var(--px)) rgb(242 90 29 / 0.3);
}

.pov-goals .is-fail {
  color: rgb(242 241 236 / 0.45);
  text-decoration: line-through;
}

/* Where the pilot is looking. */
.pov-aim {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  margin: calc(-8 * var(--px)) 0 0 calc(-8 * var(--px));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(242 241 236 / 0.6);
}

.pov-aim::after {
  content: "";
  position: absolute;
  inset: calc(6 * var(--px));
  border-radius: 50%;
  background: rgb(242 241 236 / 0.8);
}

.sp-info {
  position: absolute;
  left: calc(32 * var(--px));
  right: calc(32 * var(--px));
  bottom: calc(28 * var(--px));
}

.sp-title {
  margin: calc(10 * var(--px)) 0 calc(18 * var(--px));
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 820;
  font-size: calc(50 * var(--px));
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink);
}

.sp-cta {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--px));
}

/* The button is the loader: it fills while your sim is brought in, then becomes Play in VR. */
.sp-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(64 * var(--px));
  min-width: calc(290 * var(--px));
  overflow: hidden;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgb(242 90 29 / 0.5);
}

.sp-go {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--px));
  width: 100%;
  padding: 0 calc(7 * var(--px)) 0 calc(28 * var(--px));
  font-size: calc(17 * var(--px));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  white-space: nowrap;
}

.sp-go svg {
  box-sizing: content-box;
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  padding: calc(16 * var(--px));
  border-radius: 50%;
  background: #111;
  color: #f7f6f2;
}

.sp-players {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  height: calc(52 * var(--px));
  padding: 0 calc(18 * var(--px)) 0 calc(9 * var(--px));
  border-radius: 999px;
  background: rgb(242 241 236 / 0.94);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 calc(10 * var(--px)) calc(24 * var(--px)) calc(-14 * var(--px)) rgb(0 0 0 / 0.3);
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sp-players > span:last-child {
  display: grid;
  gap: calc(3 * var(--px));
}

.sp-players b {
  font-family: var(--font-sans);
  font-size: calc(16 * var(--px));
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.sp-players .faces {
  display: flex;
}

.sp-players .faces i {
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  box-shadow: 0 0 0 calc(3 * var(--px)) #f2f1ec;
}

.sp-players .faces i + i {
  margin-left: calc(-9 * var(--px));
}

/* Already live: the button breathes and the share button pulses. The headset card has no
   entrance: the stage draws its view underneath, so a fading frame would show the view bare. */
html.live .slide.is-current .splash .sp-play {
  animation: sp-ready 2.4s var(--ease-out) 1s infinite;
}

html.live .slide.is-current .splash .sp-share {
  animation: sp-share 2.6s var(--ease) 2.2s infinite;
}

@keyframes sp-ready {
  0% {
    box-shadow: 0 0 0 0 rgb(242 90 29 / 0.5);
  }
  70%,
  100% {
    box-shadow: 0 0 0 calc(22 * var(--px)) rgb(242 90 29 / 0);
  }
}

@keyframes sp-share {
  0%,
  70%,
  100% {
    box-shadow: 0 0 0 0 rgb(17 17 17 / 0.35);
  }
  85% {
    box-shadow: 0 0 0 calc(8 * var(--px)) rgb(17 17 17 / 0);
  }
}

/* ------------------------------------------------------------------------------------------ */
/* Shared: window dots and a tap                                                              */
/* ------------------------------------------------------------------------------------------ */

.dots {
  display: inline-flex;
  gap: calc(6 * var(--px));
  flex: none;
}

.dots b {
  display: block;
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  border-radius: 50%;
  background: var(--paper-3);
}

.dots b:nth-child(1) {
  background: #ff5f57;
}

.dots b:nth-child(2) {
  background: #febc2e;
}

.dots b:nth-child(3) {
  background: #28c840;
}

.tap {
  position: absolute;
  left: 75.6%;
  top: 90.4%;
  width: 0;
  height: 0;
}

.tap::before,
.tap i {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tap::before {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  background: var(--orange);
  box-shadow: 0 0 0 calc(4 * var(--px)) rgb(242 241 236 / 0.9);
}

.tap i {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  border: calc(3 * var(--px)) solid var(--orange);
  opacity: 0;
}

/* ------------------------------------------------------------------------------------------ */
/* 04 · The copy column beside the store window                                               */
/* ------------------------------------------------------------------------------------------ */

.market {
  display: grid;
  grid-template-columns: calc(540 * var(--px)) minmax(0, 1fr) calc(440 * var(--px));
  gap: calc(20 * var(--px));
}

.story-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(176 * var(--px));
}

/* Still (print, overview, reduced motion): every step is open, so the copy centres instead. */
.slide:not([data-step]) .story-copy {
  justify-content: center;
  padding-top: 0;
}

.market .h {
  font-size: calc(58 * var(--px));
}

.s5 .h {
  font-size: calc(72 * var(--px));
}

.code .toml {
  white-space: normal;
  padding: calc(14 * var(--px)) calc(16 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(14.5 * var(--px));
  line-height: 1.65;
  color: var(--ink);
  background: var(--card);
}

.code .toml em {
  font-style: normal;
  color: #1f3fd6;
}

.code .toml .type {
  display: block;
}

/* Checks card */

@keyframes tick {
  from {
    transform: scale(0);
    background: var(--orange);
  }
  60% {
    transform: scale(1.25);
    background: var(--orange);
  }
}

/* Invite card */

/* Episodes card */

/* The saved episode opens its own row at the top of the list. */

/* The join screen's tap, on the story's quest screen. */

/* ------------------------------------------------------------------------------------------ */
/* 02 · How it works: the rail on the left, the live cell on the right, one card per step      */
/* ------------------------------------------------------------------------------------------ */

.how {
  display: grid;
  grid-template-columns: calc(560 * var(--px)) minmax(0, 1fr);
  gap: calc(24 * var(--px));
}

.how-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding-top: calc(150 * var(--px));
}

.slide:not([data-step]) .how-copy {
  justify-content: center;
  padding-top: 0;
}

.how .h {
  font-size: calc(58 * var(--px));
}

.how-stage {
  position: relative;
  margin: calc(-6 * var(--px)) calc(-72 * var(--px)) 0 calc(-10 * var(--px));
}

/* Three components per step, always in the same three places around the live cell: top left,
   bottom left and right. They arrive in turn (--i), so the eye goes left, down, then across. */
.how-card {
  position: absolute;
  z-index: 3;
  margin: 0;
}

.hc-tl {
  left: calc(20 * var(--px));
  top: calc(30 * var(--px));
  width: calc(430 * var(--px));
}

.hc-bl {
  left: calc(20 * var(--px));
  top: auto;
  bottom: calc(26 * var(--px));
  width: calc(400 * var(--px));
}

.hc-r {
  right: calc(52 * var(--px));
  top: calc(330 * var(--px));
  width: calc(300 * var(--px));
}

.sx-bar > span:not(.sx-flag):not(.sx-clock) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-clock {
  margin-left: auto;
  color: var(--ink);
  font-weight: 600;
}

.sx-body {
  position: relative;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  background: var(--paper-2);
}

.sx-body > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
}

.sx-flag.is-line {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
}

/* A light panel: a heading chip, then rows with small glyphs. */
.hc-ctl,
.hc-host,
.hc-rel,
.hc-eps {
  overflow: hidden;
  padding: calc(14 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px));
  border-radius: calc(14 * var(--px));
  background: var(--paper);
  box-shadow:
    0 0 0 1px var(--line-2),
    0 26px 50px -28px rgb(0 0 0 / 0.5);
}

.hk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--px));
  margin-bottom: calc(12 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hk b,
.hk span {
  white-space: nowrap;
}

.hk span {
  font-size: calc(10.5 * var(--px));
}

.hk b {
  padding: calc(5 * var(--px)) calc(10 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--orange);
  color: #111;
  font-weight: 600;
}

.hc-rows {
  display: grid;
  gap: calc(10 * var(--px));
}

.hc-rows li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
}

.hc-rows li > span {
  display: grid;
  gap: calc(1 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(11.5 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hc-rows b {
  font-family: var(--font-sans);
  font-size: calc(16 * var(--px));
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Glyphs: small ink tiles with a drawn mark, in the landing's line style. */
.gl {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border-radius: calc(9 * var(--px));
  background: var(--ink);
}

.gl::before,
.gl::after {
  content: "";
  position: absolute;
}

.gl-hand::before {
  width: 42%;
  height: 42%;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--orange);
}

.gl-hand::after {
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: var(--orange);
}

.gl-trig::before {
  width: 30%;
  height: 46%;
  border-radius: calc(3 * var(--px)) calc(3 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px));
  background: var(--orange);
}

.gl-menu::before {
  width: 44%;
  height: calc(2.5 * var(--px));
  background: var(--paper);
  box-shadow:
    0 calc(-6 * var(--px)) 0 var(--paper),
    0 calc(6 * var(--px)) 0 var(--paper);
}

.gl-cloud::before {
  width: 52%;
  height: 28%;
  top: 44%;
  border-radius: calc(8 * var(--px));
  background: var(--paper);
}

.gl-cloud::after {
  width: 28%;
  height: 28%;
  top: 30%;
  left: 38%;
  border-radius: 50%;
  background: var(--paper);
}

.gl-box::before {
  width: 42%;
  height: 42%;
  border-radius: calc(3 * var(--px));
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--orange);
}

.gl-disk::before {
  width: 46%;
  height: 16%;
  top: 30%;
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    0 calc(5 * var(--px)) 0 var(--paper),
    0 calc(10 * var(--px)) 0 var(--paper);
}

.hc-status {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  margin-top: calc(14 * var(--px));
  padding-top: calc(12 * var(--px));
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange);
}

.hc-status i {
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  border-radius: 50%;
  background: currentColor;
}

.hc-status.is-ink {
  color: var(--ink-2);
}

/* 01 · The SDK: init, what it found, the config it writes. */
.hc-cmd,
.hc-found {
  padding: calc(12 * var(--px)) calc(16 * var(--px)) 0;
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hc-cmd b {
  margin-right: calc(6 * var(--px));
  color: var(--orange);
  font-weight: 500;
}

.hc-found {
  padding-top: calc(6 * var(--px));
  color: var(--ink-3);
}

.hc-found i {
  margin-right: calc(8 * var(--px));
  font-style: normal;
  color: var(--orange);
}

.hc-found b {
  font-weight: 600;
  color: var(--ink);
}

.hc-code .toml {
  margin: calc(12 * var(--px)) calc(12 * var(--px)) calc(14 * var(--px));
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border-radius: calc(10 * var(--px));
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(14 * var(--px));
}

.hc-file {
  display: block;
  margin-bottom: calc(4 * var(--px));
  font-size: calc(11 * var(--px));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.s3[data-step="1"] .toml .type {
  animation: typing 0.6s steps(var(--n)) both;
  animation-delay: var(--d);
}

.s3[data-step="1"] .hc-found {
  animation: line-in 0.4s var(--ease-out) 0.7s both;
}

.s3[data-step] .hc-rows li[style*="--d"] {
  animation: line-in 0.4s var(--ease-out) both;
  animation-delay: var(--d);
}

@keyframes typing {
  from {
    max-width: 0;
  }
}

@keyframes line-in {
  from {
    opacity: 0;
    transform: translateX(calc(-8 * var(--px)));
  }
}

/* 02 · The CLI: one command, then the cloud's checks, then hosted. */
.hc-term {
  overflow: hidden;
  padding: calc(16 * var(--px)) calc(18 * var(--px)) calc(18 * var(--px));
  border-radius: calc(14 * var(--px));
  background: #121213;
  box-shadow:
    0 0 0 1px #000,
    0 26px 50px -28px rgb(0 0 0 / 0.55);
  color: #f2f1ec;
  font-family: var(--font-mono);
  font-size: calc(15 * var(--px));
}

.ht-cmd {
  padding-bottom: calc(12 * var(--px));
  border-bottom: 1px solid rgb(242 241 236 / 0.12);
}

.ht-cmd b {
  margin-right: calc(8 * var(--px));
  color: var(--orange);
  font-weight: 500;
}

.ht-lines {
  display: grid;
  gap: calc(7 * var(--px));
  padding-top: calc(12 * var(--px));
}

.ht-lines li {
  display: grid;
  grid-template-columns: calc(22 * var(--px)) calc(106 * var(--px)) minmax(0, 1fr);
  align-items: baseline;
  font-size: calc(14 * var(--px));
}

.ht-lines i {
  font-style: normal;
  color: var(--orange);
}

.ht-lines b {
  font-weight: 500;
  color: #f2f1ec;
}

.ht-lines span {
  color: rgb(242 241 236 / 0.55);
}

.ht-lines .is-hot b,
.ht-lines .is-hot span {
  color: var(--orange);
}

.s3[data-step="2"] .ht-lines li {
  animation: line-in 0.35s var(--ease-out) both;
  animation-delay: var(--d);
}

/* 03 · Preview in your own headset, then publish. */
.hp-body {
  display: grid;
  gap: calc(12 * var(--px));
  padding: calc(16 * var(--px)) calc(16 * var(--px)) calc(18 * var(--px));
}

.hp-ok {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
}

.hp-ok > i {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
  border-radius: 50%;
  background: var(--ink);
  color: var(--orange);
  font-style: normal;
  font-size: calc(15 * var(--px));
}

.hp-ok span {
  display: grid;
  gap: calc(2 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hp-ok b {
  font-family: var(--font-sans);
  font-size: calc(18 * var(--px));
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.hp-btn {
  position: relative;
  display: grid;
  height: calc(52 * var(--px));
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: calc(15 * var(--px));
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp-btn > .hp-a,
.hp-btn > .hp-b {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--px));
}

.hp-b {
  opacity: 0;
}

.hp-b svg {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  color: var(--orange);
}

.hp-btn .tap {
  left: 78%;
  top: 50%;
}

/* Static: already published. */
.slide:not([data-step]) .hp-a {
  opacity: 0;
}

.slide:not([data-step]) .hp-b {
  opacity: 1;
}

.s3[data-step="3"] .hp-a {
  animation: hp-out 0.3s var(--ease-out) 2.6s both;
}

.s3[data-step="3"] .hp-b {
  animation: hp-in 0.4s var(--ease-out) 2.7s both;
}

.s3[data-step="3"] .hp-btn .tap i {
  animation: ripple 0.9s var(--ease-out) 2.3s both;
}

.s3[data-step="3"] .hp-btn .tap::before {
  animation: tap-dot 1.2s var(--ease-out) 1.9s both;
}

.s3[data-step="3"] .hp-btn {
  animation: hp-done 0.5s var(--ease-out) 2.6s both;
}

@keyframes hp-out {
  to {
    opacity: 0;
    transform: translateY(calc(-6 * var(--px)));
  }
}

@keyframes hp-in {
  from {
    opacity: 0;
    transform: translateY(calc(6 * var(--px)));
  }
  to {
    opacity: 1;
  }
}

@keyframes hp-done {
  to {
    background: #2a2a2d;
  }
}

@keyframes ripple {
  0% {
    opacity: 0.9;
    width: calc(22 * var(--px));
    height: calc(22 * var(--px));
  }
  100% {
    opacity: 0;
    width: calc(110 * var(--px));
    height: calc(110 * var(--px));
  }
}

@keyframes tap-dot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.4);
  }
  30%,
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, -50%) scale(0.75);
  }
  100% {
    opacity: 0;
  }
}

.hp-btn .tap::before {
  opacity: 0;
}

/* 04 · The link, and the pilots who join from it. */
.hl-copy {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  margin-left: auto;
  flex: none;
  padding: calc(4 * var(--px)) calc(10 * var(--px));
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: calc(11 * var(--px));
}

.hl-copy svg {
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
}

.hl-joins {
  display: grid;
  gap: calc(8 * var(--px));
  padding: calc(14 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px));
}

.hl-joins li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(12.5 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hl-joins .av {
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
}

.hl-joins b {
  font-family: var(--font-sans);
  font-size: calc(16 * var(--px));
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.s3[data-step="4"] .hl-joins li {
  animation: line-in 0.4s var(--ease-out) both;
  animation-delay: calc(0.9s + var(--i) * 0.55s);
}

/* 03 · The release and its limits. */
.hc-kv {
  display: grid;
  gap: calc(9 * var(--px));
}

.hc-kv div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.hc-kv div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10 * var(--px));
  padding-bottom: calc(8 * var(--px));
  border-bottom: 1px dashed var(--line-2);
}

.hc-kv dt {
  font-family: var(--font-mono);
  font-size: calc(11.5 * var(--px));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hc-kv dd {
  white-space: nowrap;
  font-size: calc(15 * var(--px));
  font-weight: 650;
  color: var(--ink);
}

.s3[data-step="3"] .hc-kv div {
  animation: line-in 0.4s var(--ease-out) both;
}

.s3[data-step="3"] .hc-kv div:nth-child(1) {
  animation-delay: 2.9s;
}

.s3[data-step="3"] .hc-kv div:nth-child(2) {
  animation-delay: 3.15s;
}

.s3[data-step="3"] .hc-kv div:nth-child(3) {
  animation-delay: 3.4s;
}

.s3[data-step="3"] .hc-kv div:nth-child(4) {
  animation-delay: 3.65s;
}

/* Your own checks while you preview: they tick as you try it. */
.pov-checks li {
  color: rgb(242 241 236 / 0.45);
}

.s3[data-step="3"] .pov-checks li {
  animation: tick-on 0.3s var(--ease-out) both;
  animation-delay: var(--d);
}

.s3[data-step="3"] .pov-checks li i {
  animation: tick-dot 0.3s var(--ease-out) both;
  animation-delay: var(--d);
}

@keyframes tick-on {
  to {
    color: #f2f1ec;
  }
}

@keyframes tick-dot {
  to {
    background: #f2f1ec;
  }
}

/* 04 · Episodes arriving as the pilots play. */
.he-list {
  display: grid;
  gap: calc(7 * var(--px));
}

.he-list li {
  display: grid;
  grid-template-columns: calc(88 * var(--px)) auto minmax(0, 1fr);
  align-items: center;
  gap: calc(10 * var(--px));
  padding: calc(8 * var(--px)) calc(10 * var(--px));
  border-radius: calc(10 * var(--px));
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono);
  font-size: calc(13 * var(--px));
}

.he-list .st {
  justify-self: start;
  padding: calc(3 * var(--px)) calc(7 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--orange);
  color: #111;
  font-style: normal;
  font-size: calc(10.5 * var(--px));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.he-list .st.is-no {
  background: var(--paper-3);
}

.he-list b {
  font-weight: 600;
}

.he-list span {
  justify-self: end;
  color: var(--ink-3);
}

.s3[data-step="4"] .he-list li {
  animation: line-in 0.4s var(--ease-out) both;
  animation-delay: var(--d);
}

/* The pilot's view, bottom left. The stage draws into its hole, so it has no fade: it appears
   in one frame, once the pilot is in. */
.how-pov {
  left: calc(20 * var(--px));
  top: auto;
  bottom: calc(28 * var(--px));
  width: calc(410 * var(--px));
}

.slide[data-step] .how-pov.is-on {
  animation: pov-show 0.01s linear 1.5s both;
}

@keyframes pov-show {
  from {
    visibility: hidden;
  }
}

.how .step .body p {
  max-width: 40ch;
}

/* The cloud's own sample run, labelled at the gripper. */
.tag-rec::after {
  height: 0;
}

.tag-rec > b {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  bottom: auto;
  top: calc(12 * var(--px));
  padding: calc(5 * var(--px)) calc(9 * var(--px));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The sample recording runs before anyone plays; its outcome is not a pilot's success. */
.s3[data-step="2"] .pop3d,
.s3[data-step="3"] .pop3d {
  display: none;
}

/* ------------------------------------------------------------------------------------------ */
/* 03 · The line: pilots → classified → enriched → time-aligned → delivered                   */
/* ------------------------------------------------------------------------------------------ */

.line {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(10 * var(--px));
  padding-top: calc(26 * var(--px));
}

.line-top {
  display: grid;
  grid-template-columns: minmax(0, 1200fr) minmax(0, 576fr);
  gap: calc(40 * var(--px));
  align-items: end;
}

.line-top .kicker {
  margin-bottom: calc(14 * var(--px));
}

.s4 .h {
  font-size: calc(62 * var(--px));
}

.s4 .line-top .lede {
  font-size: calc(21 * var(--px));
  padding-bottom: calc(4 * var(--px));
}

/* The line: one live stage, from three pilots' takes to your laptop. */
.line-stage {
  margin: calc(-8 * var(--px)) calc(-72 * var(--px)) 0;
  min-height: 0;
}

/* A pilot's tag, hung over their headset as the landing hangs its pilot tags: who, which
   headset and when, and the clock of the take they are recording. */
.seat3d {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}

.seat3d::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.5px;
  height: calc(18 * var(--px));
  background: var(--seat);
}

.seat3d .who {
  position: absolute;
  left: 0;
  bottom: calc(18 * var(--px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: calc(3 * var(--px));
  padding: calc(7 * var(--px)) calc(11 * var(--px)) calc(7 * var(--px));
  border-radius: calc(6 * var(--px));
  background: var(--paper);
  box-shadow:
    inset 0 calc(4 * var(--px)) 0 var(--seat),
    inset 0 0 0 1px var(--line-2),
    0 calc(10 * var(--px)) calc(22 * var(--px)) calc(-12 * var(--px)) rgb(0 0 0 / 0.35);
  white-space: nowrap;
}

.seat3d .who b {
  margin-top: calc(2 * var(--px));
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: calc(19 * var(--px));
  line-height: 1;
  text-transform: uppercase;
}

.seat3d .who > span,
.seat3d .who em {
  font-family: var(--font-mono);
  font-size: calc(11 * var(--px));
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.seat3d .who em {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  color: var(--ink);
}

.seat3d .who em i {
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  border-radius: 50%;
  background: var(--orange);
}

html.live .slide.is-current .seat3d .who em i {
  animation: blink 1.2s steps(2, jump-none) infinite;
}

/* Small labels on the data stages: a layer's name, a graph node, a relation. */
.layer3d,
.node3d {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.layer3d {
  transform: translateY(-50%);
  padding-left: calc(18 * var(--px));
  font-size: calc(11.5 * var(--px));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.layer3d::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(12 * var(--px));
  height: 1px;
  background: var(--ink-3);
}

.node3d {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  transform: translate(-50%, -100%);
  padding: calc(3 * var(--px)) calc(8 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  font-size: calc(11.5 * var(--px));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.node3d i {
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  border-radius: 50%;
  background: var(--mod, var(--orange));
}

.node3d.is-below {
  transform: translate(-50%, 0);
}

.stn3d > span i {
  padding: 0 calc(5 * var(--px));
  border-radius: calc(3 * var(--px));
  background: var(--yellow);
  font-style: normal;
  color: #111;
}

/* A station's callout: its quoted name, one line of what happens there, a hairline to the model. */
.stn3d {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}

.stn3d::before {
  content: "";
  position: absolute;
  left: calc(-4 * var(--px));
  top: calc(-4 * var(--px));
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 calc(3 * var(--px)) var(--paper);
}

.stn3d::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: calc(24 * var(--px));
  background: var(--ink);
}

.stn3d > b {
  position: absolute;
  left: 0;
  bottom: calc(52 * var(--px));
  transform: translateX(-50%);
  display: inline-flex;
  gap: calc(8 * var(--px));
  padding: calc(6 * var(--px)) calc(11 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-family: var(--font-mono);
  font-size: calc(14 * var(--px));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stn3d > b em {
  font-style: normal;
  font-weight: 600;
  color: var(--orange);
}

.stn3d > span {
  position: absolute;
  left: 0;
  bottom: calc(28 * var(--px));
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.av,
.faces i,
.t-av {
  display: grid;
  place-items: end center;
  flex: none;
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  border-radius: 50%;
  overflow: hidden;
  background: var(--seat, var(--orange));
  font-style: normal;
}

.av svg,
.faces i svg,
.t-av svg {
  width: 84%;
  height: 84%;
}

.pl-body {
  fill: #111;
}

.pl-visor {
  fill: #f2f1ec;
}

.line-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: calc(24 * var(--px));
  align-items: center;
}

.line-foot .chips .k {
  margin-right: calc(4 * var(--px));
}

.proof {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  padding: calc(10 * var(--px)) calc(16 * var(--px));
  border-radius: calc(12 * var(--px));
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: calc(15.5 * var(--px));
  line-height: 1.38;
  color: var(--ink-2);
}

.proof b {
  font-weight: 600;
  color: var(--ink);
}

/* ------------------------------------------------------------------------------------------ */
/* 04 · Marketplace: the store window                                                         */
/* ------------------------------------------------------------------------------------------ */

.market {
  grid-template-columns: calc(520 * var(--px)) minmax(0, 1fr);
  gap: calc(40 * var(--px));
}

.win {
  position: relative;
  margin: calc(14 * var(--px)) calc(-72 * var(--px)) 0 0;
  overflow: hidden;
  border-radius: calc(22 * var(--px)) 0 0 calc(22 * var(--px));
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 50px 100px -50px rgb(0 0 0 / 0.5);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  height: calc(52 * var(--px));
  padding: 0 calc(18 * var(--px));
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.win-bar .dots b,
.win-bar .dots i {
  display: block;
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
  border-radius: 50%;
}

.win-bar .dots i:nth-child(1) {
  background: #ff5f57;
}

.win-bar .dots i:nth-child(2) {
  background: #febc2e;
}

.win-bar .dots i:nth-child(3) {
  background: #28c840;
}

.url {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(32 * var(--px));
  padding: 0 calc(16 * var(--px));
  margin: 0 auto;
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(14 * var(--px));
  color: var(--ink-3);
}

.url svg {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  color: var(--ink-3);
}

.url b {
  color: var(--ink);
  font-weight: 600;
}

.faces {
  display: flex;
}

.faces i {
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--bounty);
}

.faces i + i {
  margin-left: calc(-7 * var(--px));
}

/* What each step points at, on the window: your sim throughout, the dataset made in it at the end. */

/* The knob rests on Marketplace; on step 1 it slides there from Unlisted. */

/* Step 3: a sale, split between you, the pilots and Ballot. Equal segments: no rate is fixed. */

@keyframes mk-pop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.18);
  }
}

/* The marketplace, as the landing draws it: a store of dataset stacks. A dataset is a pack of
   episodes, so each card sits on two sheets. Yours is first on the shelf. */
.mk-store {
  display: flex;
  flex-direction: column;
}

.mks-top {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--px));
  padding: calc(18 * var(--px)) calc(26 * var(--px)) calc(16 * var(--px));
  border-bottom: 1px solid var(--line);
}

.mks-brand {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--px));
  flex: none;
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: calc(20 * var(--px));
  text-transform: uppercase;
}

.mks-brand .wm {
  font-size: calc(24 * var(--px));
}

.mks-brand > span:last-child {
  padding: calc(4 * var(--px)) calc(7 * var(--px)) calc(3 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--ink);
  color: var(--paper);
  font-size: calc(13 * var(--px));
  line-height: 1;
}

.mks-search {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  flex: 1;
  min-width: 0;
  height: calc(46 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: 999px;
  background: var(--paper-2);
  font-size: calc(15 * var(--px));
  color: var(--ink-3);
  white-space: nowrap;
}

.mks-search svg {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  flex: none;
}

.mks-search kbd {
  margin-left: auto;
  padding: calc(2 * var(--px)) calc(6 * var(--px));
  border-radius: calc(4 * var(--px));
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--font-mono);
  font-size: calc(11 * var(--px));
}

.mks-tabs {
  display: flex;
  gap: calc(4 * var(--px));
  padding: calc(4 * var(--px));
  border-radius: 999px;
  background: var(--paper-2);
}

.mks-tabs i {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--px));
  height: calc(38 * var(--px));
  padding: 0 calc(15 * var(--px));
  border-radius: 999px;
  font-style: normal;
  font-size: calc(15 * var(--px));
  font-weight: 600;
  color: var(--ink-2);
}

.mks-tabs i.is-on {
  background: var(--ink);
  color: var(--paper);
}

.mks-tabs svg {
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
}

.mks-cart {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(46 * var(--px));
  height: calc(46 * var(--px));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.mks-cart svg {
  width: calc(19 * var(--px));
  height: calc(19 * var(--px));
}

.mks-cart b {
  position: absolute;
  top: calc(-4 * var(--px));
  right: calc(-4 * var(--px));
  display: grid;
  place-items: center;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border-radius: 50%;
  background: var(--orange);
  color: #111;
  font-family: var(--font-mono);
  font-size: calc(11 * var(--px));
  font-weight: 600;
}

.mks-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  column-gap: calc(26 * var(--px));
  row-gap: calc(44 * var(--px));
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: calc(26 * var(--px)) calc(28 * var(--px)) 0;
}

/* The shelf runs on past the window's edge, as a store does when you scroll. */
.mk-store::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(120 * var(--px));
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, var(--card) 0%, rgb(252 251 248 / 0) 100%);
}

.mks-stack {
  position: relative;
  display: grid;
  min-width: 0;
  --shop-card: #fcfbf8;
}

.mks-sheet {
  position: absolute;
  z-index: 1;
  top: calc(16 * var(--px));
  right: calc(10 * var(--px));
  bottom: calc(-10 * var(--px));
  left: calc(10 * var(--px));
  border-radius: calc(16 * var(--px));
  background: #f5f4ef;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 6px 12px -8px rgb(17 17 17 / 0.35);
}

.mks-sheet.is-back {
  z-index: 0;
  right: calc(20 * var(--px));
  bottom: calc(-20 * var(--px));
  left: calc(20 * var(--px));
  background: #ecebe5;
}

.mks-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: calc(16 * var(--px));
  background: var(--shop-card);
  box-shadow:
    0 0 0 1px var(--line-2),
    0 6px 12px -8px rgb(17 17 17 / 0.35);
  transition:
    transform 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}

.mks-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #ebeae5 0%, #dcdbd4 100%);
}

.mks-media > img {
  position: absolute;
  top: 3%;
  left: 5%;
  width: 90%;
  height: 97%;
  object-fit: contain;
}

/* A single robot, not a whole world: drawn smaller, so it sits like the world tiles. */
.mks-media.is-solo > img {
  top: 14%;
  left: 22%;
  width: 56%;
  height: 80%;
}

.mks-chips {
  position: absolute;
  top: calc(10 * var(--px));
  left: calc(10 * var(--px));
  display: flex;
  gap: calc(5 * var(--px));
}

.mks-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--px));
  height: calc(24 * var(--px));
  padding: 0 calc(9 * var(--px));
  border-radius: 999px;
  background: rgb(255 255 255 / 0.94);
  box-shadow:
    0 0 0 1px rgb(17 17 17 / 0.06),
    0 3px 8px -4px rgb(17 17 17 / 0.3);
  color: #111;
  font-family: var(--font-mono);
  font-size: calc(11 * var(--px));
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mks-chip svg {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
}

.mks-chip.is-new,
.mks-chip.is-yours {
  background: var(--orange);
  box-shadow: none;
}

.mks-save {
  position: absolute;
  top: calc(10 * var(--px));
  right: calc(10 * var(--px));
  display: grid;
  place-items: center;
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  border-radius: 50%;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 3px 8px -4px rgb(17 17 17 / 0.3);
  color: #111;
}

.mks-save svg {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.is-yours .mks-save {
  color: var(--orange);
}

.is-yours .mks-save svg {
  fill: currentColor;
}

.mks-live {
  position: absolute;
  bottom: calc(10 * var(--px));
  left: calc(10 * var(--px));
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--px));
  height: calc(24 * var(--px));
  padding: 0 calc(10 * var(--px));
  border-radius: 999px;
  background: rgb(17 17 17 / 0.9);
  color: #f2f1ec;
  font-family: var(--font-mono);
  font-size: calc(11 * var(--px));
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mks-dot {
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  border-radius: 50%;
  background: var(--orange);
}

html.live .slide.is-current .mks-dot {
  animation: blink 1.1s steps(2, end) infinite;
}

.mks-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(9 * var(--px));
  padding: calc(13 * var(--px)) calc(15 * var(--px)) calc(15 * var(--px));
}

.mks-meta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  min-width: 0;
  height: calc(26 * var(--px));
  font-size: calc(13.5 * var(--px));
  color: var(--ink-3);
}

.mks-bots {
  display: flex;
  flex: none;
}

.mks-bot {
  display: block;
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  overflow: hidden;
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--shop-card);
}

.mks-bot + .mks-bot {
  margin-left: calc(-8 * var(--px));
}

.mks-bot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mks-names {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mks-sku {
  flex: none;
  font-family: var(--font-mono);
  font-size: calc(11 * var(--px));
  font-style: normal;
  letter-spacing: 0.04em;
}

.mks-name {
  overflow: hidden;
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: calc(24 * var(--px));
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mks-stats {
  display: flex;
  gap: calc(10 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  color: var(--ink-3);
  white-space: nowrap;
}

.mks-stats b {
  color: var(--ink);
  font-weight: 600;
}

.mks-crew {
  display: flex;
  align-items: center;
  min-width: 0;
}

.mks-crew > span {
  margin-left: calc(8 * var(--px));
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mks-av {
  position: relative;
  display: grid;
  flex: none;
  place-items: end center;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  overflow: hidden;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--shop-card);
}

.mks-av + .mks-av {
  margin-left: calc(-7 * var(--px));
}

.mks-av svg {
  width: 88%;
  height: 88%;
}

.mks-av.is-orange {
  background: var(--orange);
}

.mks-av.is-yellow {
  background: var(--yellow);
}

.mks-av.is-ink .pl-body {
  fill: #f2f1ec;
}

.mks-av.is-ink .pl-visor {
  fill: #111;
}

.mks-buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(8 * var(--px));
  margin-top: auto;
  padding-top: calc(11 * var(--px));
  border-top: 1px solid var(--line);
}

.mks-price {
  display: grid;
  gap: calc(5 * var(--px));
  min-width: 0;
}

.mks-price i {
  font-family: var(--font-mono);
  font-size: calc(10.5 * var(--px));
  font-style: normal;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mks-price b {
  overflow: hidden;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: calc(15 * var(--px));
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mks-add {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(2 * var(--px));
  height: calc(36 * var(--px));
  padding: 0 calc(12 * var(--px));
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}

.mks-add svg {
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
}

.mks-add svg:first-child {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
}

/* Colour on the shelf, as the landing has it: playable sims in bounty blue, datasets on paper,
   yours on a warm tile, and the odd dataset on the landing's dark tile. */
.mks-media.is-warm {
  background: linear-gradient(180deg, #fbe7da 0%, #f3cdb4 100%);
}

.mks-media.is-dark {
  background: radial-gradient(120% 92% at 50% -10%, #3a3a40 0%, #1f1f23 55%, #131315 100%);
}

.mks-stack.is-sim {
  --shop-card: #2447f5;
}

.mks-stack.is-sim > .mks-sheet {
  background: #2d49ec;
  box-shadow: 0 6px 12px -8px rgb(28 51 210 / 0.7);
}

.mks-stack.is-sim > .mks-sheet.is-back {
  background: #1d35cb;
}

.mks-stack.is-sim .mks-card {
  background: linear-gradient(168deg, #4d69ff 0%, #2447f5 42%, #1c33d2 100%);
  box-shadow:
    0 0 0 1px rgb(17 17 17 / 0.06),
    0 24px 44px -24px rgb(36 71 245 / 0.75);
  color: #fff;
}

.mks-stack.is-sim .mks-media {
  background: transparent;
}

.mks-stack.is-sim .mks-meta,
.mks-stack.is-sim .mks-stats,
.mks-stack.is-sim .mks-crew > span,
.mks-stack.is-sim .mks-price i {
  color: rgb(255 255 255 / 0.72);
}

.mks-stack.is-sim .mks-stats b {
  color: #fff;
}

.mks-stack.is-sim .mks-buy {
  border-top-color: rgb(255 255 255 / 0.2);
}

.mks-org {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  border-radius: calc(7 * var(--px));
  background: #fff;
  color: var(--bounty);
  font-family: var(--font-mono);
  font-size: calc(10 * var(--px));
  font-style: normal;
  font-weight: 700;
}

.mks-live.is-sim {
  background: rgb(255 255 255 / 0.94);
  color: var(--bounty);
}

.mks-play {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(7 * var(--px));
  height: calc(36 * var(--px));
  padding: 0 calc(14 * var(--px));
  border-radius: 999px;
  background: #fff;
  color: var(--bounty);
  font-size: calc(14 * var(--px));
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.mks-play svg {
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
}

/* Yours: an orange ring, lifted off the shelf. */
.mks-stack.is-yours > .mks-card {
  transform: translateY(calc(-4 * var(--px)));
  box-shadow:
    0 0 0 calc(3 * var(--px)) var(--orange),
    0 24px 44px -26px rgb(17 17 17 / 0.5);
}

/* The two wide panels on the second row: the shelf space for your sim, and what a sale pays. */

/* The steps, in the store (every card is already on the shelf). 1: yours is picked out. */
.s5[data-step="1"] .mks-stack.is-yours > .mks-card {
  animation: yours-ring 1.8s var(--ease-out) 0.3s 2 both;
}

@keyframes yours-ring {
  0% {
    box-shadow:
      0 0 0 calc(3 * var(--px)) var(--orange),
      0 0 0 calc(3 * var(--px)) rgb(242 90 29 / 0.5),
      0 24px 44px -26px rgb(17 17 17 / 0.5);
  }
  100% {
    box-shadow:
      0 0 0 calc(3 * var(--px)) var(--orange),
      0 0 0 calc(22 * var(--px)) rgb(242 90 29 / 0),
      0 24px 44px -26px rgb(17 17 17 / 0.5);
  }
}

.s5[data-step="2"] .mks-stack.is-yours > .mks-card {
  box-shadow:
    0 0 0 calc(3 * var(--px)) var(--orange),
    0 24px 44px -26px rgb(17 17 17 / 0.5);
}

/* 3: someone adds your dataset to their cart; the sale shares back to you. */
.s5[data-step="3"] .is-yours .mks-add {
  animation: add-cart 0.9s var(--ease-out) 0.3s both;
}

@keyframes add-cart {
  0% {
    transform: none;
  }
  25% {
    transform: scale(0.88);
    background: var(--orange);
    color: #111;
  }
  100% {
    background: var(--orange);
    color: #111;
  }
}

.mks-cart b {
  visibility: hidden;
}

.s5:not([data-step]) .mks-cart b,
.s5[data-step="3"] .mks-cart b {
  visibility: visible;
}

.s5[data-step="3"] .mks-cart b {
  animation: mk-pop 0.45s var(--ease-out) 0.7s both;
}

/* Step 2's toast rises just under your card. */
.mk-store .toasts {
  right: auto;
  left: calc(40 * var(--px));
  top: calc(740 * var(--px));
}

.toasts {
  position: absolute;
  z-index: 5;
  right: calc(96 * var(--px));
  top: calc(126 * var(--px));
  width: calc(420 * var(--px));
  height: calc(70 * var(--px));
}

.toast {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  padding: calc(10 * var(--px)) calc(16 * var(--px)) calc(10 * var(--px)) calc(10 * var(--px));
  border-radius: calc(14 * var(--px));
  background: #111;
  color: var(--paper);
  box-shadow: 0 30px 50px -20px rgb(0 0 0 / 0.55);
  white-space: nowrap;
}

.toast > span {
  display: grid;
  gap: calc(2 * var(--px));
}

.toast b {
  font-size: calc(16 * var(--px));
  font-weight: 650;
}

.toast > span i {
  font-style: normal;
  font-size: calc(13 * var(--px));
  color: rgb(242 241 236 / 0.6);
}

.toast > em {
  margin-left: calc(10 * var(--px));
  font-style: normal;
  font-family: var(--font-mono);
  font-size: calc(12 * var(--px));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}

.t-av {
  width: calc(34 * var(--px));
  height: calc(34 * var(--px));
}

.slide[data-step] .toast.is-on {
  animation: toast 5s var(--ease-out) both;
}

@keyframes toast {
  0% {
    opacity: 0;
    transform: translateY(calc(-18 * var(--px))) scale(0.96);
  }
  8%,
  88% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(-8 * var(--px)));
  }
}

@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}

/* The rev-share, under the steps: a sale branches three ways, yours first. No proportions are
   drawn, since no rate is set. */
.s5 .story-copy {
  padding-top: calc(70 * var(--px));
}

.slide.s5:not([data-step]) .story-copy {
  justify-content: flex-start;
  padding-top: calc(40 * var(--px));
}

.s5 .h {
  font-size: calc(66 * var(--px));
}

/* It takes the rest of the column under the steps, and sits in the middle of it. */
.rev {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: center;
  align-items: start;
  gap: calc(16 * var(--px));
  flex: 1;
  margin: calc(34 * var(--px)) 0 0;
  padding: calc(20 * var(--px)) 0;
  border-top: 1px solid var(--line-2);
}

.rev-node {
  display: grid;
  justify-items: center;
  gap: calc(18 * var(--px));
  width: calc(200 * var(--px));
}

.rev-l {
  display: grid;
  gap: calc(5 * var(--px));
  text-align: center;
  font-family: var(--font-mono);
  font-size: calc(14 * var(--px));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rev-l b {
  font-family: var(--font-sans);
  font-size: calc(23 * var(--px));
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* A dataset: the store's stack of sheets, with your sim on the front one. */
.rev-stack {
  position: relative;
  width: calc(160 * var(--px));
  height: calc(142 * var(--px));
}

.rev-stack i {
  position: absolute;
  border-radius: calc(12 * var(--px));
  background: #ecebe5;
  box-shadow: 0 0 0 1px var(--line-2);
}

.rev-stack i:nth-child(1) {
  left: calc(22 * var(--px));
  right: calc(22 * var(--px));
  top: calc(28 * var(--px));
  bottom: 0;
}

.rev-stack i:nth-child(2) {
  left: calc(11 * var(--px));
  right: calc(11 * var(--px));
  top: calc(14 * var(--px));
  bottom: calc(11 * var(--px));
  background: #f5f4ef;
}

.rev-stack i:nth-child(3) {
  inset: 0 0 calc(22 * var(--px));
  border-radius: calc(16 * var(--px));
  overflow: hidden;
  background: linear-gradient(180deg, #ebeae5 0%, #dcdbd4 100%);
  box-shadow:
    0 0 0 1px var(--line-2),
    0 10px 18px -10px rgb(17 17 17 / 0.4);
}

.rev-stack img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Your share: an orange coin with the share mark. */
.rev-share {
  display: grid;
  place-items: center;
  width: calc(132 * var(--px));
  height: calc(132 * var(--px));
  margin-top: calc(5 * var(--px));
  border-radius: 50%;
  background: var(--orange);
  box-shadow:
    inset 0 0 0 calc(8 * var(--px)) rgb(17 17 17 / 0.12),
    0 20px 36px -14px rgb(242 90 29 / 0.7);
  color: #111;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 820;
  font-size: calc(58 * var(--px));
  line-height: 1;
}

/* The arrow between them, with a coin running along it. */
.rev-arrow {
  position: relative;
  height: calc(2.5 * var(--px));
  margin-top: calc(70 * var(--px));
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 calc(6 * var(--px)), transparent calc(6 * var(--px)) calc(11 * var(--px)));
}

.rev-arrow::after {
  content: "";
  position: absolute;
  right: calc(-2 * var(--px));
  top: 50%;
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
  border-top: calc(2.5 * var(--px)) solid var(--ink-3);
  border-right: calc(2.5 * var(--px)) solid var(--ink-3);
  transform: translateY(-50%) rotate(45deg);
}

.rev-coin {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  margin-top: calc(-8 * var(--px));
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
}

html.live .slide.is-current .rev-coin {
  animation: rev-run 2.4s var(--ease) infinite;
}

html.live .slide.is-current .rev-share {
  animation: rev-land 2.4s var(--ease) infinite;
}

@keyframes rev-run {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  55% {
    left: calc(100% - 16 * var(--px));
    opacity: 1;
  }
  62%,
  100% {
    left: calc(100% - 16 * var(--px));
    opacity: 0;
  }
}

@keyframes rev-land {
  0%,
  55% {
    transform: none;
  }
  64% {
    transform: scale(1.1);
  }
  78%,
  100% {
    transform: none;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* 05 · Your task: the question, and the box in the showroom                                  */
/* ------------------------------------------------------------------------------------------ */

/* A soft showroom light on the paper, behind the box. */
.spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 52% at 77% 46%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 70%),
    radial-gradient(40% 30% at 77% 86%, rgb(242 90 29 / 0.1), transparent 70%);
}

html.live .slide.is-current .spot {
  animation: spot 9s ease-in-out infinite alternate;
}

@keyframes spot {
  to {
    transform: translateX(calc(-30 * var(--px)));
    opacity: 0.85;
  }
}

.partner {
  display: grid;
  grid-template-columns: calc(1000 * var(--px)) minmax(0, 1fr);
  gap: calc(30 * var(--px));
}

.partner-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(20 * var(--px));
}

.s6 .h {
  font-size: calc(92 * var(--px));
  line-height: 0.94;
  white-space: nowrap;
}

.close-lede {
  max-width: 34ch;
  margin-top: calc(34 * var(--px));
  font-size: calc(30 * var(--px));
  line-height: 1.35;
  color: var(--ink-2);
}

.cta {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--px));
  margin-top: calc(56 * var(--px));
}

.cta .btn {
  --btn-h: calc(72 * var(--px));
  font-size: calc(17 * var(--px));
  padding-left: calc(32 * var(--px));
}

.cta-note {
  max-width: 24ch;
  font-size: calc(19 * var(--px));
  line-height: 1.4;
  color: var(--ink-3);
}

.close {
  position: relative;
  display: grid;
}

.show-stage {
  margin: calc(-20 * var(--px)) calc(-72 * var(--px)) calc(-10 * var(--px)) calc(-80 * var(--px));
}

.contact {
  display: flex;
  gap: calc(40 * var(--px));
  margin-top: calc(56 * var(--px));
  padding-top: calc(20 * var(--px));
  border-top: 1px solid var(--line-2);
}

.contact a {
  display: grid !important;
  gap: calc(4 * var(--px)) !important;
}

.contact a {
  display: flex;
  gap: calc(12 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(16 * var(--px));
}

.contact a b {
  color: var(--orange);
  font-weight: 600;
}

.contact a span {
  color: var(--ink-2);
}

.tag-zip > b {
  background: var(--orange);
  color: #111;
  box-shadow: none;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------------------------------ */
/* Navigation bar, bare capture, overview, print                                              */
/* ------------------------------------------------------------------------------------------ */

.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--surround);
  color: var(--surround-ink);
  border-top: 1px solid rgb(242 241 236 / 0.12);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--surround-ink-2);
  white-space: nowrap;
  overflow: hidden;
}

.bar-brand svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--surround-ink);
}

.bar-brand .wm {
  font-size: 18px;
  color: var(--surround-ink);
}

.bar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 36px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgb(242 241 236 / 0.2);
  color: var(--surround-ink);
}

.bar-btn:hover {
  background: rgb(242 241 236 / 0.1);
}

.bar-btn[aria-pressed="true"] {
  background: var(--surround-ink);
  color: #111;
  border-color: var(--surround-ink);
}

.bar-btn svg {
  width: 14px;
  height: 14px;
}

.bar-pos {
  min-width: 78px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.bar-hint {
  justify-self: end;
  color: var(--surround-ink-2);
  white-space: nowrap;
}

.bar-hint kbd {
  font: inherit;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgb(242 241 236 / 0.2);
  margin: 0 1px;
}

@media (max-width: 1400px) {
  .bar-brand span {
    display: none;
  }
}

@media (max-width: 900px) {
  .bar-hint {
    display: none;
  }
  .navbar {
    grid-template-columns: 1fr auto;
  }
}

html.bare body {
  grid-template-rows: minmax(0, 1fr);
}

html.bare .navbar {
  display: none;
}

html.bare .deck {
  padding: 0;
}

html.bare .slide {
  box-shadow: none;
  animation: none;
}

body.is-overview .deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 18px;
  padding: 22px;
  overflow: auto;
}

body.is-overview .slide {
  display: block;
  width: 100%;
  cursor: pointer;
  animation: none;
  outline: 2px solid transparent;
  outline-offset: 4px;
  border-radius: 6px;
}

body.is-overview .slide.is-current {
  outline-color: var(--orange);
}

body.is-overview .slide::after {
  content: attr(data-title);
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.2cqi 1.8cqi;
  background: rgb(17 17 17 / 0.84);
  color: #f2f1ec;
  font-family: var(--font-mono);
  font-size: 2.2cqi;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  body.is-overview .deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.is-overview .deck {
    grid-template-columns: minmax(0, 1fr);
  }
}

@page {
  size: 1920px 1080px;
  margin: 0;
}

@media print {
  html,
  body {
    height: auto;
    overflow: visible;
    background: #fff;
  }

  body {
    display: block;
  }

  .navbar {
    display: none !important;
  }

  .deck {
    display: block;
    padding: 0;
    overflow: visible;
    container-type: normal;
  }

  .slide {
    display: block !important;
    width: 1920px;
    height: 1080px;
    aspect-ratio: auto;
    box-shadow: none;
    animation: none !important;
    outline: none;
    border-radius: 0;
    break-after: page;
    break-inside: avoid;
  }

  .slide:last-child {
    break-after: auto;
  }

  body.is-overview .slide::after {
    content: none;
  }

  .stage3d .stage-canvas {
    display: none !important;
  }

  .stage3d .poster {
    opacity: 1 !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .slide [data-show] {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .slide [data-show][data-static] {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .slide .step .body {
    grid-template-rows: 1fr !important;
  }

  .slide,
  .slide * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}