/* routr/ | shared styles for every page */

:root {
  --ink: #0c0e0d;
  --ink-2: #131715;
  --paper: #e8e6d8;
  --moss: #8e978c;
  --moss-2: #5f6861;
  --line: #232925;
  --line-2: #3a423c;
  --lime: #b4d98b;
  --lime-2: #cbe6aa;
  --pale: #cfe0b4;
  --amber: #e3b479;
  --font: "Courier Prime", "Courier New", Courier, monospace;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 54px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  /* Page entrance, same as fuyu.xyz: each page fades in over 0.5s.
     The matching 0.3s fade-out before leaving a page lives in core.js. */
  animation: routr-in .5s var(--ease-out) both;
}

@keyframes routr-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
a { color: inherit; }
svg, canvas { display: block; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 1px solid var(--lime); outline-offset: 3px; }

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

.skip {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--lime);
  color: var(--ink);
  text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- Navigation ---------- */

.site-header {
  position: fixed;
  top: 16px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 1040px);
  height: var(--nav-h);
  padding: 0 7px 0 14px;
  background: rgba(12, 14, 13, .74);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  letter-spacing: -.01em;
  text-decoration: none;
}
.brand svg { flex: none; width: 24px; height: 24px; }
.nav .brand { margin-right: auto; }

.nav-links { display: flex; align-items: center; }

.nav-links > a,
.nav-dd > button {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 8px;
  color: var(--moss);
  font-size: 15px;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
}

/* Brackets mark the current page, the way agents wear them: [Technology] */
.nav-links > a::before,
.nav-links > a::after { color: transparent; transition: color .2s; }
.nav-links > a::before { content: "["; margin-right: 2px; }
.nav-links > a::after { content: "]"; margin-left: 2px; }
.nav-links > a:hover,
.nav-dd > button:hover,
.nav-dd.open > button { color: var(--paper); }
.nav-links > a:hover::before,
.nav-links > a:hover::after { color: var(--moss-2); }
.nav-links > a[aria-current],
.nav-links > a[aria-current]::before,
.nav-links > a[aria-current]::after { color: var(--lime); }

.nav-dd { position: relative; }
.nav-dd > button::after { content: "+"; margin-left: 6px; color: var(--moss-2); }
/* On docs pages Resources is the section you are in. */
.nav-dd.is-current > button,
.nav-dd.is-current > button::after { color: var(--lime); }
.nav-dd.open > button::after { content: "-"; }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -8px;
  display: none;
  width: 270px;
  padding: 6px;
  background: var(--ink);
  border: 1px solid var(--line-2);
}
.nav-dd.open .nav-dd-menu { display: block; }

.dd-item {
  display: block;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.dd-item small { display: block; margin-top: 2px; color: var(--moss); font-size: 13px; }
a.dd-item:hover { background: var(--ink-2); }
.dd-item[aria-current] { color: var(--lime); }
.dd-item.is-soon { color: var(--moss); }

.nav-cta { margin-left: 6px; }

.nav-burger {
  display: none;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  font-size: 15px;
  background: none;
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  padding: calc(var(--nav-h) + 56px) var(--gutter) 32px;
  background: var(--ink);
}
.mobile-menu.open { display: flex; }
.mobile-menu a:not(.btn) {
  padding: 12px 0;
  font-size: 30px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a[aria-current] { color: var(--lime); }
.mobile-menu .btn { height: 48px; margin-top: 28px; }
.menu-open body { overflow: hidden; }

@media (max-width: 860px) {
  .nav-links,
  .nav .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.btn:hover { border-color: var(--moss); }
.btn-lime { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.btn-lime:hover { background: var(--lime-2); border-color: var(--lime-2); transform: translateY(-1px); }
.btn[aria-disabled="true"] { color: var(--moss); border-style: dashed; cursor: default; }
.btn[aria-disabled="true"]:hover { border-color: var(--line-2); }
.btn[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); }
.btn-lime[aria-disabled="true"],
.btn-lime[aria-disabled="true"]:hover {
  color: var(--moss);
  background: transparent;
  border-color: var(--line-2);
  transform: none;
}

/* ---------- Scroll story (Product and Technology) ---------- */

.story { position: relative; }
.js .story { height: calc(100vh + (var(--chapters) - 1) * 115vh); }

.js .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@supports (height: 100svh) {
  .js .stage { height: 100svh; }
}

.world {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 95% at 60% 50%, transparent 55%, rgba(5, 6, 6, .6));
}

.no-js .world { display: none; }

.chapter {
  --tx: 0px;
  --ty: -50%;
  isolation: isolate;
}

.js .chapter {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  z-index: 2;
  width: min(500px, 40vw);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--tx), calc(var(--ty) + var(--dy, 0px)), 0);
  will-change: opacity, transform;
}
.js .chapter--wide { width: min(660px, 50vw); }
.js .chapter[data-align="right"] { left: auto; right: var(--gutter); }
.js .chapter[data-align="center"] {
  left: 50%;
  width: min(680px, 100% - 2 * var(--gutter));
  text-align: center;
  --tx: -50%;
}

/* A soft ink halo keeps text readable over the moving scene. */
.chapter::before {
  content: "";
  position: absolute;
  inset: -24% -30% -24% -45%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(12, 14, 13, .94), rgba(12, 14, 13, .78) 50%, rgba(12, 14, 13, 0));
}
.chapter[data-align="right"]::before { inset: -24% -45% -24% -30%; }
.chapter[data-align="center"]::before { inset: -30% -18%; }

.no-js .chapter {
  position: relative;
  max-width: 760px;
  padding: 140px var(--gutter) 40px;
}

.chapter h1 {
  font-size: clamp(46px, 6.8vw, 100px);
  line-height: .96;
  letter-spacing: -.045em;
}

.chapter h2 {
  font-size: clamp(34px, 4.3vw, 60px);
  line-height: 1.03;
  letter-spacing: -.035em;
}

.chapter > p {
  max-width: 44ch;
  margin-top: 20px;
  color: var(--moss);
}
.chapter[data-align="center"] > p { margin-inline: auto; }

.chapter .mark { width: 56px; height: 56px; margin: 0 auto 28px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.chapter[data-align="center"] .actions { justify-content: center; }

/* Chapter dots, like fuyu.xyz, plus the route you are on. */
.chapter-nav {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 34px;
  padding: 0 12px;
  background: rgba(12, 14, 13, .8);
  border: 1px solid var(--line-2);
  transform: translateX(-50%);
}

.chapter-dots { display: flex; align-items: center; gap: 8px; }

.chapter-dots button {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  background: var(--moss-2);
  border: 0;
  cursor: pointer;
  transition: width .35s var(--ease-out), background-color .2s;
}
.chapter-dots button::before { content: ""; position: absolute; inset: -10px -4px; }
.chapter-dots button:hover { background: var(--paper); }
.chapter-dots button[aria-current="step"] { width: 24px; background: var(--lime); }

.chapter-where {
  min-width: 17ch;
  color: var(--moss);
  font-size: 13px;
  white-space: nowrap;
}
.chapter-where span { color: var(--paper); }

/* ---------- Terminal cards ---------- */

.term {
  position: relative;
  max-width: 440px;
  margin-top: 30px;
  padding: 20px 16px 12px;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  background: rgba(12, 14, 13, .86);
  border: 1px solid var(--line-2);
}

.term-label,
.term-tag {
  position: absolute;
  top: 0;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.2;
  background: var(--ink);
  transform: translateY(-50%);
}
.term-label { left: 10px; color: var(--paper); }
.term-tag { right: 10px; color: var(--moss); }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--moss); }
.kv dd { text-align: right; }

.meter { color: var(--lime); letter-spacing: -.1em; }
.meter i { font-style: normal; color: var(--moss-2); }

.log {
  height: calc(6 * 1.6em);
  overflow: hidden;
  color: var(--moss);
  white-space: pre;
}
.log .row { display: block; overflow: hidden; text-overflow: ellipsis; }
.log b { font-weight: 400; color: var(--lime); }

.code {
  margin: 0;
  overflow-x: auto;
  color: var(--paper);
  font: 14px/1.6 var(--font);
  white-space: pre;
}
.code .k { color: var(--lime); }
.code .s { color: var(--pale); }
.code .c { color: var(--moss); }

.routes {
  width: 100%;
  font-size: 13.5px;
  border-collapse: collapse;
}
.routes th {
  padding: 0 8px 6px 0;
  color: var(--moss);
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.routes td {
  padding: 5px 8px 5px 0;
  white-space: nowrap;
  border-bottom: 1px dashed var(--line);
}
.routes tr:last-child td { border-bottom: 0; }
.routes th:last-child,
.routes td:last-child { padding-right: 0; text-align: right; }
.routes .pick { display: inline-block; width: 2ch; color: transparent; }
.routes tr.is-picked td { color: var(--lime); }
.routes tr.is-picked .pick { color: var(--lime); }

.spark {
  overflow: hidden;
  color: var(--lime);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.spark-axis {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 10px;
  color: var(--moss);
  font-size: 12px;
}

/* ---------- Waitlist form ---------- */

.waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 520px;
  margin-top: 30px;
}
.chapter[data-align="center"] .waitlist,
.cta-band .waitlist { margin-inline: auto; }

.waitlist-field {
  display: flex;
  flex: 1 1 250px;
  align-items: center;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  background: rgba(12, 14, 13, .9);
  border: 1px solid var(--line-2);
  transition: border-color .2s;
}
.waitlist-field:focus-within { border-color: var(--lime); }
.waitlist-field > span { margin-right: 10px; color: var(--lime); }

.waitlist input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: 16px;
  background: none;
  border: 0;
  outline: 0;
  caret-color: var(--lime);
}
.waitlist input::placeholder { color: var(--moss-2); opacity: 1; }
.waitlist .btn { flex: 0 0 auto; height: 46px; }

.waitlist-msg {
  flex-basis: 100%;
  min-height: 1.6em;
  color: var(--moss);
  font-size: 14px;
  text-align: left;
}
.chapter[data-align="center"] .waitlist-msg,
.cta-band .waitlist-msg { text-align: center; }
.waitlist-msg.is-ok { color: var(--lime); }
.waitlist-msg.is-error { color: var(--amber); }

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  padding: 56px var(--gutter) 48px;
  background: var(--ink);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 32px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.footer-line { max-width: 32ch; margin-top: 14px; color: var(--moss); }
.footer-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--moss); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--paper); }
.footer-meta { color: var(--moss); font-size: 14px; }

/* ---------- Swarm page ---------- */

.swarm-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
@supports (height: 100svh) {
  .swarm-hero { height: 100svh; }
}

.swarm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.swarm-canvas.is-pointing { cursor: pointer; }

.swarm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(110% 95% at 60% 54%, transparent 55%, rgba(5, 6, 6, .65));
}

.swarm-hud {
  position: absolute;
  inset: calc(16px + var(--nav-h) + 40px) var(--gutter) 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.swarm-hud > * { pointer-events: auto; }

.swarm-intro { position: relative; isolation: isolate; max-width: 380px; }
.swarm-intro::before {
  content: "";
  position: absolute;
  inset: -40% -40% -50% -60%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(12, 14, 13, .9), rgba(12, 14, 13, 0));
}
.swarm-intro h1 { font-size: clamp(44px, 6vw, 84px); line-height: .96; letter-spacing: -.045em; }
.swarm-intro p { max-width: 36ch; margin-top: 16px; color: var(--moss); }

.swarm-stats { width: min(340px, 100%); margin-top: 26px; font-size: 15px; }
.swarm-stats div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-2);
}
.swarm-stats dt { color: var(--moss); }

.swarm-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.swarm-filter { max-width: 780px; }
.swarm-filter p { margin-bottom: 10px; color: var(--moss); font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 32px;
  padding: 0 10px;
  color: var(--moss);
  font-size: 13px;
  background: rgba(12, 14, 13, .82);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.chip:hover { color: var(--paper); border-color: var(--moss); }
.chip[aria-pressed="true"] { color: var(--ink); background: var(--lime); border-color: var(--lime); }

.swarm-controls { display: flex; gap: 8px; }
.swarm-controls .btn { background: rgba(12, 14, 13, .82); }

.swarm-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  min-width: 250px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(12, 14, 13, .95);
  border: 1px solid var(--lime);
  pointer-events: none;
}
.swarm-tip[hidden] { display: none; }
.swarm-tip strong { display: block; margin-bottom: 6px; color: var(--lime); font-weight: 400; }
.swarm-tip div { display: flex; justify-content: space-between; gap: 18px; }
.swarm-tip dt { color: var(--moss); }

.board {
  padding: 120px var(--gutter) 96px;
  border-top: 1px solid var(--line);
}
.board-inner { max-width: 1000px; margin: 0 auto; }
.board h2,
.cta-band h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.04; letter-spacing: -.035em; }
.board-inner > p { max-width: 52ch; margin-top: 16px; color: var(--moss); }

.board-table {
  width: 100%;
  margin-top: 40px;
  font-size: 15px;
  border-collapse: collapse;
}
.board-table th {
  padding: 0 16px 10px 0;
  color: var(--moss);
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.board-table td {
  padding: 10px 16px 10px 0;
  white-space: nowrap;
  border-bottom: 1px dashed var(--line);
}
.board-table .num { text-align: right; }
.board-table tr.is-focus td { color: var(--lime); }
.board-table .share { color: var(--lime); }
.board-table .share i { font-style: normal; color: var(--moss-2); }
.board-table th:last-child,
.board-table td:last-child { padding-right: 0; }

.note { margin-top: 18px; color: var(--moss); font-size: 14px; }

.cta-band {
  padding: 110px var(--gutter);
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta-band p { max-width: 46ch; margin: 16px auto 0; color: var(--moss); }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .js .chapter,
  .js .chapter[data-align="right"],
  .js .chapter[data-align="center"] {
    top: auto;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 76px;
    width: auto;
    text-align: left;
    --tx: 0px;
    --ty: 0px;
  }
  .chapter::before,
  .chapter[data-align="right"]::before,
  .chapter[data-align="center"]::before {
    inset: -70px calc(-1 * var(--gutter)) -90px;
    background: linear-gradient(to top, rgba(12, 14, 13, .97) 58%, rgba(12, 14, 13, 0));
  }
  .chapter .term { display: none; }
  .chapter .mark { margin-left: 0; }
  .chapter[data-align="center"] > p { margin-inline: 0; }
  .chapter[data-align="center"] .actions { justify-content: flex-start; }
  .chapter[data-align="center"] .waitlist-msg { text-align: left; }
  .chapter-nav { bottom: 18px; }
  .chapter-where { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .swarm-stats { display: none; }
  .swarm-controls { display: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chip { flex: none; }
  .board-table th:nth-child(3),
  .board-table td:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation-duration: .01ms; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}