/* one world, blue, and literally #0000ff. type is one mono face in white at three strengths,
   signal yellow only where energy moves, and anything live or powered sits in a black screen.
   the same rules as the 3eyes launch machine, so the protocol reads as a 3eyes work */

@font-face {
  font-family: '3EYES Sans Mono';
  src:
    url('../fonts/3EYESSansMonoV2-Regular.woff2') format('woff2'),
    url('../fonts/3EYESSansMonoV2-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-3e: '3EYES Sans Mono';
  --font: '3EYES Sans Mono', ui-monospace, monospace;
  --paper: #0000ff;
  --paper-2: #0a0aee;
  --ink: #ffffff;
  --ink-2: rgb(255 255 255 / 0.92);
  --ink-3: rgb(255 255 255 / 0.8);
  --line: rgb(255 255 255 / 0.26);
  --line-strong: rgb(255 255 255 / 0.55);
  --edge: rgb(255 255 255 / 0.48);
  --void: #000000;
  --bone: #ffffff;
  --bone-2: rgb(255 255 255 / 0.84);
  --bone-3: rgb(255 255 255 / 0.64);
  --bone-line: rgb(255 255 255 / 0.16);
  --signal: #ffe600;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --head: 56px;
}

* {
  box-sizing: border-box;
}

/* scrolling is eased by scroll.js, and it settles on the story's slides and the loop's cards */
html {
  scrollbar-gutter: stable;
  background: var(--paper);
  color: var(--ink);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the body stays clear so the dither, drawn behind it, shows through */
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  /* the face joins runs like -- and :: into narrow ligatures, which would move decoding lines */
  font-variant-ligatures: none;
  font-feature-settings:
    'liga' 0,
    'calt' 0;
}

::selection {
  background: var(--signal);
  color: var(--paper);
}

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

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

p,
h1,
h2,
h3,
ol,
ul,
dl,
dd {
  margin: 0;
}

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

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#dither {
  position: fixed;
  inset: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

/* the parts */

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}

.label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.void .label {
  color: var(--bone-3);
}

.label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.num {
  font-variant-numeric: tabular-nums;
}

.void {
  background: var(--void);
  color: var(--bone);
}

.display {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.dim {
  display: block;
  color: var(--ink-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 9px 2px 8px;
  white-space: nowrap;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.dot.live {
  background: var(--signal);
  animation: beat 1.8s var(--ease) infinite;
}

/* buttons are blunt: square, uppercase, white until you touch them */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 0;
  transition:
    transform 120ms var(--ease),
    background 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease);
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.field {
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
  color: inherit;
  outline: none;
  transition: border-color 120ms var(--ease);
}
.field:focus {
  border-color: var(--ink);
}
.field::placeholder {
  color: var(--ink-3);
}

.link {
  width: fit-content;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-2);
  transition:
    border-color 160ms var(--ease),
    color 160ms var(--ease);
}
.link:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.door-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 300ms var(--out);
}
:is(a, button).door-label:hover {
  color: var(--ink);
}

.door-link {
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition:
    color 300ms var(--out),
    text-decoration-color 300ms var(--out);
}
.door-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.door-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  border-top: 1px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: left;
  overflow: hidden;
  transition:
    background-color 450ms var(--out),
    color 450ms var(--out);
}
:is(a, button).door-row:hover {
  background: var(--ink);
  color: var(--paper);
}
.door-row:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -6px;
}
.door-arrow {
  flex: none;
  transition: transform 450ms var(--out);
}
:is(a, button).door-row:hover .door-arrow,
.story-next:hover .door-arrow {
  transform: translateX(6px);
}

@keyframes beat {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  12% {
    transform: scale(1.35);
    opacity: 0.8;
  }
  24% {
    transform: scale(1);
    opacity: 1;
  }
}

/* the loading screen. it runs on css alone, so it ends on time even if a script never does */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  color: var(--ink);
  user-select: none;
  animation: intro-out 520ms var(--ease) 2600ms both;
}
.intro.gone {
  display: none;
}
.frame {
  position: absolute;
  inset: 12px;
  pointer-events: none;
}
.frame-top {
  position: absolute;
  top: 0;
  left: 36px;
  right: 36px;
  display: flex;
  align-items: flex-start;
}
.frame-top span {
  height: 1px;
  flex: 1;
  background: #262626;
}
.frame-top svg {
  display: none;
}
.frame-bottom {
  position: absolute;
  bottom: 0;
  left: 36px;
  right: 36px;
  height: 1px;
  background: #262626;
}
.frame-left,
.frame-right {
  position: absolute;
  top: 36px;
  bottom: 36px;
  width: 1px;
  background: #1a1a1a;
}
.frame-left {
  left: 0;
}
.frame-right {
  right: 0;
}
.corner {
  position: absolute;
}
.c-tl {
  left: 0;
  top: 0;
}
.c-tr {
  right: 0;
  top: 0;
  transform: rotate(90deg);
}
.c-br {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
.c-bl {
  left: 0;
  bottom: 0;
  transform: rotate(-90deg);
}
.intro-code {
  position: absolute;
  left: 24px;
  top: 32px;
  margin: 0;
  font-family: var(--font);
  font-size: 9px;
  line-height: 1.28;
  color: var(--ink-2);
  font-variant-ligatures: none;
  font-feature-settings:
    'liga' 0,
    'calt' 0;
}
.intro .type {
  display: block;
  width: 0;
  overflow: hidden;
  white-space: pre;
  animation: type var(--t, 200ms) steps(var(--n, 10), end) var(--d, 0ms) forwards;
}
.intro .gap {
  display: block;
  height: 1.28em;
}
.intro .px {
  opacity: 0;
  animation: px-in 90ms steps(2, end) var(--d, 0ms) forwards;
}
.intro .caret {
  display: inline-block;
  width: 0.62em;
  height: 1em;
  vertical-align: -0.12em;
  background: var(--ink);
  opacity: 0;
}
.intro-centre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-bird {
  position: relative;
  width: 34vw;
  max-width: 360px;
  min-width: 170px;
}
.intro-bird svg {
  display: block;
  width: 100%;
}
.intro-kiwi {
  color: var(--ink);
}
.intro-ghost {
  position: absolute;
  inset: 0;
  color: var(--signal);
  transform: translateX(3%);
  opacity: 0;
  animation: ghost 300ms steps(1, end) 1480ms both;
}
/* once assembled he shudders, and a signal copy shows under him for as long as he does */
.intro-glitch {
  position: relative;
  animation: glitch 300ms steps(1, end) 1480ms both;
}
.intro-foot {
  position: absolute;
  bottom: 32px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.intro-load {
  display: flex;
  align-items: center;
  gap: 12px;
}
.intro-track {
  position: relative;
  display: block;
  width: 96px;
  height: 1px;
  background: #262626;
}
.intro-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--ink);
  animation: bar 2300ms var(--ease) 150ms forwards;
}

@keyframes bar {
  to {
    width: 100%;
  }
}
@keyframes glitch {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2.5%, 0) skewX(-4deg);
  }
  40% {
    transform: translate(2%, 0);
  }
  60% {
    transform: translate(-1%, 1%);
  }
  80% {
    transform: translate(1.5%, -0.5%) skewX(3deg);
  }
}
@keyframes ghost {
  0%,
  100% {
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
}
@keyframes intro-out {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    pointer-events: none;
  }
}
@keyframes type {
  to {
    width: calc(var(--n, 10) * 1ch);
  }
}
@keyframes px-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* the header waits until the story is told, then stays */

.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgb(0 0 255 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-101%);
  transition: transform 600ms var(--out);
}
html[data-past-story] .head {
  transform: none;
}
.head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--head);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand .mark {
  width: 34px;
  height: auto;
  flex: none;
  transition: transform 500ms var(--out);
}
.brand:hover .mark {
  transform: translateY(-3px) rotate(-8deg);
}
.brand-name {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand-sub {
  display: none;
}
.grow {
  flex: 1;
}
.nav {
  display: none;
  align-items: center;
  gap: 28px;
}
.nav a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 200ms var(--ease);
}
.nav a:hover {
  color: var(--ink);
}

/* the story */

.story {
  --slides: 7;
  position: relative;
  height: calc(var(--slides) * 100svh);
}
.story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* black inside him, and as the camera pulls back to the room the black goes and the blue of
     the rest of the site, dither and all, is what the room is drawn on */
  --bg: rgb(0 0 0 / calc(1 - var(--clear, 0)));
  background: var(--bg);
  color: var(--ink);
  user-select: none;
  cursor: pointer;
}
.story-labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
/* a label in the scene, held next to the thing it points at; a line from story.js joins them */
.callout {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
  text-shadow: 0 0 12px var(--bg);
}
.callout-name {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}
.callout-says {
  font-size: 12px;
  color: var(--ink-2);
}
.story-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.story-bar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
}
.story-bar-top {
  top: 0;
}
.story-bar-bottom {
  bottom: 0;
}
.story-name {
  white-space: nowrap;
}
.story-rail {
  display: flex;
  gap: 4px;
}
/* each slide's mark is a button, taller than it looks, so it is easy to hit */
.story-rail button {
  padding: 10px 0;
}
.story-rail span {
  position: relative;
  display: block;
  width: 14px;
  height: 1px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.25);
  transition: background 300ms var(--out);
}
.story-rail button:hover span {
  background: rgb(255 255 255 / 0.6);
}
.story-rail [data-state='past'] span {
  background: var(--ink);
}
.story-rail [data-state='now'] span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  animation: door-x 900ms var(--out) both;
}
.story-count {
  font-size: 12px;
  color: var(--ink-2);
}
.story-moves {
  display: flex;
  align-items: center;
  gap: 24px;
}
.story-next {
  display: flex;
  align-items: center;
  gap: 8px;
}
.story[data-first] [data-back] {
  visibility: hidden;
}
/* on the first slide the arrow points down the page */
.story[data-first] .story-next .door-arrow {
  transform: rotate(90deg);
}
.story[data-first] .story-next:hover .door-arrow {
  transform: rotate(90deg) translateX(4px);
}
.story[data-last] .story-next {
  visibility: hidden;
}
/* the words drift and fade with the scroll (--off and --fade from story.js), so the page always
   answers, and the next slide arrives halfway */
.story-slide {
  position: absolute;
  inset: auto 24px 88px;
  z-index: 2;
  transform: translateY(calc(var(--off, 0) * -90px));
  opacity: var(--fade, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px;
}
.story-line {
  text-shadow: 0 0 28px var(--bg);
  animation: story-rise 1100ms var(--out) var(--d, 0ms) both;
}
.story-xl {
  max-width: 14ch;
  white-space: pre-line;
  font-size: clamp(30px, 5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.story-l {
  max-width: 40ch;
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
}
.story-m {
  max-width: 46ch;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--ink-2);
}
.text-signal {
  color: var(--signal);
}
.story-rows {
  width: min(24rem, 100%);
  margin-top: 8px;
  border-bottom: 1px solid var(--line-strong);
  animation: story-rise 1100ms var(--out) var(--d, 0ms) both;
  cursor: auto;
}
.story-rows .door-row {
  background: rgb(0 0 255 / 0.4);
}
html:not([data-ready]) :is(.story-line, .story-rows),
html:not([data-ready]) .story-rail span::after {
  animation-play-state: paused;
}
.story button:focus {
  outline: none;
}
.story button:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

@keyframes door-x {
  from {
    transform: scaleX(0);
  }
}
@keyframes story-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

/* the sections after the story */

.section-title {
  margin-top: 20px;
  max-width: 18ch;
  font-size: clamp(34px, 5vw, 72px);
}

.live-section {
  padding-top: 96px;
  padding-bottom: 40px;
}
.live-card {
  margin-top: 40px;
  border: 1px solid var(--bone-line);
  padding: 20px;
}
.live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-chip {
  color: var(--bone-2);
}
.live-meta {
  font-size: 12px;
  color: var(--bone-3);
}
.live-meta .sep {
  margin: 0 10px;
  color: var(--bone-line);
}
.live-doing {
  margin-top: 40px;
  max-width: 24ch;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  min-height: 1.9em;
  transition: opacity 400ms var(--out);
}
.live-why {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone-2);
  min-height: 3.1em;
}
.live-card[data-state='loading'] :is(.live-doing, .live-why) {
  opacity: 0.4;
}
.live-grid {
  display: grid;
  gap: 32px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--bone-line);
}
.live-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meter-line {
  position: relative;
  height: 1px;
  background: var(--bone-line);
}
.meter-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--bone-3);
}
.meter-mark {
  position: absolute;
  top: -5px;
  left: var(--at, 50%);
  width: 11px;
  height: 11px;
  margin-left: -5px;
  background: var(--signal);
  transition: left 1200ms var(--out);
}
.meter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.meter-ends .num {
  color: var(--bone);
  letter-spacing: 0;
}
.needs {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.needs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--bone-2);
}
.cells {
  display: flex;
  gap: 2px;
  flex: none;
}
.cells i {
  display: block;
  width: 7px;
  height: 10px;
  background: var(--bone-line);
  transition: background 600ms var(--out);
}
.cells i[data-on] {
  background: var(--bone);
}
.cells i[data-hot] {
  background: var(--signal);
}
.live-load {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.live-big {
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.live-loudest {
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone-2);
}
.live-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.why {
  padding-top: 96px;
  padding-bottom: 64px;
}
.why-title {
  margin-top: 32px;
  max-width: 16ch;
  font-size: clamp(44px, 8vw, 120px);
  line-height: 0.88;
}
.pair {
  display: grid;
  gap: 32px;
  max-width: 1024px;
  margin-top: 48px;
}
.pair > div {
  border-top: 1px solid var(--edge);
  padding-top: 16px;
}
.pair p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
}

/* the loop. on a phone, or with reduced motion, it is the cards in a column */

.loop {
  position: relative;
  overflow-x: clip;
}
.loop-pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 56px;
  padding-bottom: 56px;
}
.loop-track {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 40px;
}
.loop-card {
  border: 1px solid var(--bone-line);
  will-change: transform;
}
.loop-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}
.loop-n {
  font-size: 12px;
  color: var(--bone-3);
}
.loop-via {
  margin-top: 16px;
  min-height: 1.2em;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}
.loop-via::before {
  content: '→ ';
}
.loop-title {
  margin-top: 12px;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1;
}
.loop-text {
  margin-top: 12px;
  max-width: 28rem;
  font-size: 13px;
  line-height: 1.65;
  color: var(--bone-2);
}
.loop-figure {
  margin-top: auto;
  padding-top: 32px;
}
.loop-big {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.loop-figure .label {
  margin-top: 12px;
}
.loop-end {
  margin-top: 32px;
  color: var(--ink);
}

.wire {
  padding-top: 96px;
  padding-bottom: 64px;
}
.wire-grid {
  display: grid;
  gap: 40px;
}
.wire-words p {
  margin-top: 24px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.messages {
  margin-top: 32px;
  border-bottom: 1px solid var(--line);
}
.messages li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.messages li .num {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.code {
  border: 1px solid var(--bone-line);
  min-width: 0;
}
.code-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bone-line);
}
.code pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.6;
  color: var(--bone-2);
  font-variant-ligatures: none;
}
.code-foot {
  padding: 16px 18px;
  border-top: 1px solid var(--bone-line);
  font-size: 12px;
  line-height: 1.65;
  color: var(--bone-3);
}


.next {
  padding-top: 96px;
  padding-bottom: 96px;
}
.steps {
  display: grid;
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
}
.steps li {
  background: var(--paper);
  padding: 20px;
}
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-3);
}
.step-name {
  margin-top: 24px;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.steps li p:last-child {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* the tunnel: each plane's grid slides exactly one cell and loops, so the lines never jump */

.tunnel {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.tunnel-view {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 560px;
  perspective-origin: 50% 46%;
}
.tunnel-space {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.plane,
.slice {
  position: absolute;
  overflow: hidden;
}
.grid {
  position: absolute;
  inset: -72px;
  will-change: transform;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.55) 1px, transparent 1px);
  background-size: 72px 72px;
}
@keyframes tunnel-down {
  to {
    transform: translate3d(0, 72px, 0);
  }
}
@keyframes tunnel-up {
  to {
    transform: translate3d(0, -72px, 0);
  }
}
@keyframes tunnel-left {
  to {
    transform: translate3d(-72px, 0, 0);
  }
}
@keyframes tunnel-right {
  to {
    transform: translate3d(72px, 0, 0);
  }
}
.tunnel-words {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.fit {
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
}
.fit-line {
  white-space: nowrap;
  line-height: 0.82;
  letter-spacing: -0.02em;
  font-size: calc(100cqw / 6.4);
}
.tunnel-say {
  max-width: 28rem;
  margin-top: 32px;
  padding: 0 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.join,
.joined {
  width: 100%;
  max-width: 36rem;
  margin-top: 32px;
  padding: 0 16px;
  text-align: center;
}
.join-row {
  display: flex;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.join-row .field {
  border: 0;
  padding: 16px;
  font-size: 16px;
}
.join-row .btn {
  flex: none;
  padding-inline: 28px;
}
.trap {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
}
.join-note {
  min-height: 1.6em;
  margin-top: 10px;
  font-size: 12px;
  color: var(--signal);
}
.join-small {
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-3);
}
.joined-title {
  font-size: clamp(28px, 4vw, 48px);
}
.joined-email {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.join-again {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.join-again:hover {
  color: var(--ink);
}

.foot {
  margin-top: 128px;
  border-top: 1px solid var(--line);
}
.foot-grid {
  display: grid;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.foot .mark {
  width: 48px;
  height: auto;
}
.foot-title {
  margin-top: 32px;
  font-size: clamp(30px, 3.4vw, 40px);
}
.foot-say {
  margin-top: 16px;
  max-width: 28rem;
  color: var(--ink-2);
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.foot-col .label {
  margin-bottom: 8px;
}
.foot-quiet {
  margin-top: 8px;
  color: var(--ink-3);
}

/* wider screens */

@media (min-width: 640px) {
  .intro-code {
    left: 40px;
    top: 48px;
    font-size: 11px;
  }
  .story-rail {
    gap: 6px;
  }
  .story-rail span {
    width: 26px;
  }
  .brand-sub {
    display: inline;
  }
  .live-card {
    padding: 32px;
  }
  .live-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: 32px;
  }
  .frame {
    inset: 20px;
  }
  .frame-top svg {
    display: block;
  }
  .intro-code {
    left: 56px;
    top: 64px;
    font-size: 12px;
  }
  .intro-foot {
    left: 56px;
    right: 56px;
    bottom: 48px;
  }
  .intro-track {
    width: 160px;
  }
  .nav {
    display: flex;
  }
  .story-bar {
    padding: 0 40px;
  }
  /* on a wide screen the words sit on the left, and the scene is framed to the right of them */
  .story-slide {
    inset: 72px auto 72px 40px;
    width: min(38rem, 42vw);
    justify-content: center;
  }
  .loop-pin {
    min-height: calc(100svh - var(--head));
  }
  .loop-track {
    display: block;
  }
  .loop-inner {
    min-height: 400px;
    padding: 32px;
  }
  .loop-big {
    font-size: 52px;
  }
  .pair {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .wire-grid {
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: start;
  }
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
  .steps li {
    padding: 24px;
  }
  .foot-grid {
    grid-template-columns: 6fr 3fr 3fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .intro {
    display: none;
  }
}

/* the loop's heading runs the width of the page, so the pinned cards keep the screen */
.loop .section-title {
  max-width: none;
  font-size: clamp(30px, 4.2vw, 64px);
}

/* the loop's heading, its five words spread evenly across the page */
.section-title.spread {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 0.3em;
  max-width: none;
  font-size: clamp(28px, 4.8vw, 80px);
}

/* the interactions */

/* the sound switch: three bars that move while it is on */
.sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
}
.eq i {
  display: block;
  width: 2px;
  height: 100%;
  background: currentColor;
  transform-origin: 50% 100%;
  animation: eq 900ms var(--ease) infinite alternate;
}
.eq i:nth-child(2) {
  animation-delay: -300ms;
  animation-duration: 700ms;
}
.eq i:nth-child(3) {
  animation-delay: -600ms;
  animation-duration: 1100ms;
}
.sound[aria-pressed='false'] .eq i {
  animation: none;
  transform: scaleY(0.2);
}
@keyframes eq {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(1);
  }
}
.head .sound {
  display: none;
}
.story-tools {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 639px) {
  .story-tools [data-sound-word] {
    display: none;
  }
}

/* the menu draws a line under where you are, and under what you point at */
.nav a {
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 450ms var(--out);
}
.nav a:hover::after,
.nav a[aria-current]::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.nav a[aria-current] {
  color: var(--ink);
}

/* things rise into place the first time they come into view */
[data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 900ms var(--out) calc(var(--i, 0) * 90ms),
    transform 900ms var(--out) calc(var(--i, 0) * 90ms);
}
[data-rise][data-in] {
  opacity: 1;
  transform: none;
}

/* the kiwi blinks: the eye's empty module filled for a moment */
.mark .lid {
  opacity: 0;
}
.mark.blink .lid,
.brand:hover .mark .lid {
  animation: lid 260ms steps(1, end) both;
}
@keyframes lid {
  0%,
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.join-row {
  transition: box-shadow 450ms var(--out);
}
.join-row:focus-within {
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.14);
}

@media (min-width: 768px) {
  .head .sound {
    display: inline-flex;
    margin: 0 8px 0 16px;
  }
}

/* on a phone the five words wrap, so they sit together instead of being pushed to the edges */
@media (max-width: 767px) {
  .section-title.spread {
    justify-content: flex-start;
    gap: 0 0.35em;
  }
}

@media (max-width: 767px) {
  .callout-says {
    display: none;
  }
}

.nav-compact {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 9px 16px 10px;
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}
.nav-compact a {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (min-width: 768px) {
  .nav-compact {
    display: none;
  }
}
.nav-compact a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}