/* REVA inner pages. Loaded after style.css: same plate, same tokens, same curves.
   Showcase pages (examples, made, how it works, card) keep one idea per screen; working pages (docs, agents, limits)
   are denser but stay on the plate: tone and space, never borders. The language sheet is at the top of inner.js. */

.pre [data-draft]:not(.is-set) { visibility: hidden; }
/* no opening flight on inner pages: the wordmark is simply there */
.pre .nav .wordmark { visibility: visible; }

/* the current page in the nav: ink, and the pen line under it */
.nav ul a[aria-current="page"] {
  color: var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 4px;
}
.sheet-links a[aria-current="page"] { color: var(--ink-3); }

/* ---------- page head: a drafted title on the plate, one sentence ---------- */

.page-head {
  position: relative;
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
  padding: calc(80px + 12vh) var(--edge) 9vh;
}
.page-title {
  font-stretch: 122%;
  font-weight: 600;
  font-size: clamp(44px, 6.6vw, 116px);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: 13em;
}
.page-sub {
  margin-top: 20px;
  font-stretch: 112%; font-weight: 600;
  font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
}
.page-lede {
  margin-top: 40px;
  max-width: 36rem;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
}
.page-lede a, .prose a, .doc a:not(.more) {
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.page-head .guides { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.band {
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
  padding: 12vh var(--edge);
}
.band-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; margin-bottom: 8vh; }
.band-head .sec-copy { max-width: 30rem; }

/* ---------- the window, at rest on the page: the one framed object ---------- */

.pane-win {
  position: relative;
  border-radius: var(--r-win);
  background: radial-gradient(120% 140% at 50% 0%, #181b21 0%, var(--glass) 60%);
  box-shadow: 0 2px 6px rgba(10, 11, 13, 0.06), 0 34px 70px -34px rgba(10, 11, 13, 0.45);
  overflow: hidden;
  isolation: isolate;
}
.pane-win.is-light {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 11, 13, 0.05), 0 2px 6px rgba(10, 11, 13, 0.06), 0 30px 80px -30px rgba(10, 11, 13, 0.38);
}
/* it opens in place, top edge down, on the window curve */
.pre .opens { clip-path: inset(0 0 100% 0 round var(--r-win)); }
.pre .opens.is-open { clip-path: inset(0 0 0 0 round var(--r-win)); transition: clip-path var(--clip-ms) var(--clip); }

.pane-win iframe, .pane-win img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pane-win img { object-fit: cover; object-position: 50% 0; }
.pane-win .sheetA, .pane-win .sheetB { position: absolute; inset: 0; background: #fff; }
.pane-win .is-top { z-index: 2; }
.pane-win .is-entering { z-index: 3; clip-path: inset(100% 0 0 0); }
.pane-win .is-entering.go { clip-path: inset(0 0 0 0); transition: clip-path 640ms var(--clip); }

/* a two-way switch above a window: what you are looking at */
.switch {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: rgba(10, 11, 13, 0.055);
}
.switch button {
  height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; font-stretch: 108%;
  color: var(--ink-2);
  transition: color var(--feedback-ms) var(--readout), background-color var(--feedback-ms) var(--readout), box-shadow var(--feedback-ms) var(--readout);
}
.switch button:hover { color: var(--ink); }
.switch button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10, 11, 13, 0.1); }

/* exact / fitted / unknown, on white: blue only for exact */
.tag { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); white-space: nowrap; }
.tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tag-exact::before { background: var(--fit); }
.tag-fitted::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tag-unknown::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); background: none; outline: 1.5px dashed transparent; }

/* ---------- code, as a tonal panel with its copy button ---------- */

.code-block {
  position: relative;
  margin: 22px 0 0;
  border-radius: 14px;
  background: #f3f4f6;
}
.code-block pre {
  margin: 0;
  padding: 18px 22px;
  font-family: var(--mono); font-size: 14px; line-height: 1.7;
  color: var(--ink);
  overflow-x: auto;
}
.code-block pre .c { color: #6b7079; }
.code-block .copy-btn {
  position: absolute; right: 10px; top: 10px;
  height: 34px; padding: 0 14px; border-radius: 999px; overflow: hidden;
  background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 600; font-stretch: 108%;
  opacity: 0; transition: opacity var(--feedback-ms) var(--readout), transform var(--feedback-ms) var(--readout);
}
.code-block:hover .copy-btn, .code-block .copy-btn:focus-visible, .code-block .copy-btn.is-copied { opacity: 1; }
.code-block .copy-btn:active { transform: scale(0.96); }
@media (hover: none) { .code-block .copy-btn { opacity: 1; } }
.code-block.is-line pre { padding-right: 96px; }
/* on touch screens the copy button always shows: a block of several lines starts below it, never under it */
@media (hover: none), (max-width: 820px) { .code-block:not(.is-line) pre { padding-top: 54px; } }

/* ---------- agents: one tab per client ---------- */

.setup-side { display: flex; flex-direction: column; gap: 24px; }
.client-tabs {
  display: flex; gap: 4px; padding: 4px; width: max-content; max-width: 100%;
  border-radius: 999px; background: rgba(10, 11, 13, 0.055);
  overflow-x: auto; scrollbar-width: none;
}
.client-tabs::-webkit-scrollbar { display: none; }
.client-tabs [role="tab"] {
  flex: none; height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; font-stretch: 108%; color: var(--ink-2);
  transition: color var(--feedback-ms) var(--readout), background-color var(--feedback-ms) var(--readout), box-shadow var(--feedback-ms) var(--readout);
}
.client-tabs [role="tab"]:hover { color: var(--ink); }
.client-tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10, 11, 13, 0.1); }
.client-panel { margin-top: 6px; }
.client-panel:not([hidden]) { animation: copy-in var(--readout-ms) var(--readout) both; }
.client-panel > p { margin-top: 18px; }
.first-prompt { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; color: var(--ink-2); }
.first-prompt .cmd { display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 6px 0 20px; border-radius: 999px; background: rgba(10, 11, 13, 0.055); font-weight: 600; font-stretch: 108%; color: var(--ink); }
.first-prompt .cmd .install-say { height: 38px; line-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14.5px; overflow: hidden; }
.turn-list { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.turn-list li { padding-left: 18px; position: relative; }
.turn-list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.turn-agent p + p, .turn-agent pre + p { margin-top: 12px; }

:not(pre) > code {
  font-family: var(--mono); font-size: 0.86em;
  padding: 0.12em 0.4em; border-radius: 6px;
  background: rgba(10, 11, 13, 0.055);
}

/* ---------- a fold: a plus drawn as two pen lines ---------- */

.fold { margin-top: 26px; }
.fold > summary {
  display: inline-flex; align-items: center; gap: 12px;
  list-style: none; cursor: pointer;
  font-size: 17px; font-weight: 600; font-stretch: 108%;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 50% / 14px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% 50% / 1.5px 14px no-repeat;
  transition: transform 640ms var(--clip);
}
.fold[open] > summary::before { transform: rotate(135deg); }
.fold-body { margin-top: 16px; }
.fold[open] .fold-body { animation: fold-in var(--readout-ms) var(--readout) both; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- examples ---------- */

.ex {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
  padding: 10vh var(--edge) 12vh;
}
.ex-text { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 22px; }
.ex-copy { font-size: 18px; color: var(--ink-2); max-width: 30rem; }
.ex-vals { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; max-width: 34rem; }
.ex-vals p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.ex-vals b { font-weight: 600; color: var(--ink); }
.ex-vals .tag { margin-left: 2px; font-size: 16px; }
.ex-reads { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.ex-reads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; font-size: 17px; }
.ex-reads li span:first-child { color: var(--ink); }
.ex-stage { display: flex; flex-direction: column; gap: 18px; }
.ex-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ex .pane-win { height: min(74vh, 680px); min-height: 460px; }
.ex-open { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.ex-open:hover { color: var(--ink); }
.ex-hint { font-size: 16px; color: var(--ink-2); }

/* ---------- made with REVA: one site per screen ---------- */

.made {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 56px;
  align-items: end;
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
  padding: 9vh var(--edge);
}
.made:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.made:nth-child(even) .made-shot { order: 2; }
.made-shot { display: block; aspect-ratio: 16 / 10; transition: transform 640ms var(--clip); }
.made-shot img { transition: transform 1300ms var(--clip); }
.made-shot:hover img { transform: scale(1.02); }
.made-text { display: flex; flex-direction: column; gap: 18px; padding-bottom: 6px; }
.made-name {
  font-stretch: 116%; font-weight: 600;
  font-size: clamp(30px, 3vw, 46px); line-height: 1.04; letter-spacing: -0.03em;
}
.made-what { font-size: 17.5px; color: var(--ink); }
.made-how { font-size: 17px; color: var(--ink-2); }
.made-brief {
  margin: 0; padding: 18px 20px; border-radius: 14px;
  background: #f3f4f6;
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.made-text .more { margin-top: 6px; }

/* ---------- how it works: drafted diagrams ---------- */

.flow {
  position: relative;
  display: grid;
  gap: 56px 44px;
  margin-top: 4vh;
}
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.node {
  position: relative;
  padding: 18px 20px 20px;
  font-size: 16.5px; line-height: 1.45;
  color: var(--ink-2);
}
.node b { display: block; margin-bottom: 4px; font-size: 19px; font-weight: 600; font-stretch: 112%; letter-spacing: -0.01em; color: var(--ink); }
.node.is-glass { border-radius: 16px; background: radial-gradient(120% 140% at 50% 0%, #181b21 0%, var(--glass) 60%); color: rgba(244, 245, 247, 0.74); box-shadow: 0 2px 6px rgba(10, 11, 13, 0.06), 0 24px 50px -28px rgba(10, 11, 13, 0.45); }
.node.is-glass b { color: #f4f5f7; }
.node.is-tone { border-radius: 16px; background: #f3f4f6; }
.node code { font-size: 0.84em; }
.node.is-glass code { background: rgba(244, 245, 247, 0.1); color: #f4f5f7; }
.flow-svg .edge { fill: none; stroke: var(--ink); stroke-opacity: 0.34; stroke-width: 1; stroke-linejoin: round; }
.flow-svg .edge-fit { stroke: var(--fit); stroke-opacity: 1; stroke-width: 1.5; }
.flow-svg .head { fill: var(--ink); fill-opacity: 0.5; }
.flow-svg .outline { fill: none; stroke: var(--ink); stroke-opacity: 0.22; stroke-width: 1; }

.flow-look { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas:
  "you robots browser clock"
  "out labels fit read"; }
.flow-arch { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas:
  "cli . mcp"
  "tools tools tools"
  "engine engine data"
  "browser browser ."; }

.figure { display: block; width: 100%; overflow: visible; }
.figure .dot { fill: var(--ink); }
.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.fig-pair h3 { font-stretch: 116%; font-weight: 600; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -0.03em; margin-top: 32px; }
.fig-pair p { margin-top: 12px; font-size: 18px; color: var(--ink-2); max-width: 30rem; }
.band-note { margin-top: 7vh; max-width: 40rem; font-size: 18px; color: var(--ink-2); }

/* ---------- docs: sidebar + one column ---------- */

.docs {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 72px;
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
  padding: 0 var(--edge) 12vh;
}
.toc { position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 128px); overflow-y: auto; padding-bottom: 24px; }
.toc ol { display: flex; flex-direction: column; gap: 2px; }
.toc a {
  display: block; padding: 6px 0 6px 16px;
  font-size: 15.5px; font-weight: 500; color: var(--ink-2);
  background: linear-gradient(var(--ink), var(--ink)) 0 50% / 1.5px 0 no-repeat;
  transition: color var(--feedback-ms) var(--readout), background-size 640ms var(--clip);
}
.toc a:hover { color: var(--ink); }
.toc a.is-here { color: var(--ink); background-size: 1.5px 70%; }
.toc .toc-group { margin-top: 18px; padding-left: 16px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.toc .toc-group:first-child { margin-top: 0; }

.doc { max-width: 52rem; }
.code-block + p, .code-block + .opts { margin-top: 18px; }
.doc section { padding-top: 56px; scroll-margin-top: 84px; }
.doc section:first-child { padding-top: 0; }
.doc h2 {
  font-stretch: 116%; font-weight: 600;
  font-size: clamp(30px, 2.8vw, 42px); line-height: 1.06; letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.doc h3 { font-size: 21px; font-weight: 600; font-stretch: 110%; letter-spacing: -0.01em; margin: 36px 0 10px; }
.doc p, .doc li { font-size: 17.5px; color: var(--ink-2); }
.doc p + p { margin-top: 14px; }
.doc ul.plain { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.doc ul.plain li { padding-left: 20px; position: relative; }
.doc ul.plain li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 8px; height: 1.5px; background: var(--ink-3); }
.opts { display: flex; flex-direction: column; margin-top: 14px; }
.opt { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 20px; padding: 14px 0; }
.opt + .opt { box-shadow: inset 0 1px 0 rgba(10, 11, 13, 0.07); }
.opt dt code { background: none; padding: 0; font-size: 14.5px; color: var(--ink); }
.opt dd { font-size: 16.5px; color: var(--ink-2); }
.trouble .opt { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
.trouble dt { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.doc .fold .opts { margin-top: 0; }

/* ---------- agents ---------- */

.agents-page .chat { max-width: 60rem; }
.ask { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ask li {
  font-size: 18px; color: var(--ink);
  padding: 14px 20px; border-radius: 18px 18px 18px 6px; background: #f3f4f6;
  align-self: flex-start; max-width: 40rem;
}
.tools-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 56px; margin-top: 8px; }
.tools-list li { font-size: 17px; color: var(--ink-2); }
.tools-list code { color: var(--ink); }

/* ---------- motion card anatomy (pinned) ---------- */

.anat { position: relative; height: calc(var(--n, 5) * 100vh); }
.anat-stick {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: center;
  padding: 96px var(--edge) 40px;
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
}
.anat .pane-win { height: min(76vh, 720px); }
.anat-steps { display: flex; flex-direction: column; gap: 22px; }
.anat-steps h3 {
  font-stretch: 116%; font-weight: 600;
  font-size: clamp(24px, 2.4vw, 36px); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--ink-3);
  transition: color var(--readout-ms) var(--readout);
}
.anat-steps li.is-on h3 { color: var(--ink); }
.anat-steps p { display: none; margin-top: 12px; max-width: 26rem; font-size: 17.5px; color: var(--ink-2); }
.anat-steps li.is-on p { display: block; animation: copy-in var(--readout-ms) var(--readout) both; }

/* ---------- limits: plain reading ---------- */

.prose { max-width: 44rem; }
.prose p, .prose li { font-size: 18px; color: var(--ink-2); }
.prose p + p { margin-top: 16px; }
.prose ul { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.prose li { padding-left: 22px; position: relative; }
.prose li::before { content: ""; position: absolute; left: 2px; top: 0.74em; width: 9px; height: 1.5px; background: var(--ink-3); }
.prose li b, .prose p b { color: var(--ink); font-weight: 600; }
.cols-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }

/* ---------- 404 ---------- */

.lost { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 120px var(--edge) 80px; max-width: calc(1312px + 2 * var(--edge)); margin: 0 auto; }
.lost-fig { width: 100%; max-width: 760px; overflow: visible; }
.lost-links { display: flex; gap: 32px; flex-wrap: wrap; }

/* ---------- small screens ---------- */

@media (max-width: 1100px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; max-height: none; margin-bottom: 24px; }
  .toc ol { flex-direction: row; flex-wrap: wrap; gap: 4px 0; }
  .toc .toc-group { display: none; }
  .toc a { padding: 6px 14px 6px 0; background: none; }
}

@media (max-width: 820px) {
  .page-head { padding-top: calc(68px + 8vh); padding-bottom: 6vh; }
  .page-lede { margin-top: 26px; font-size: 18px; }
  .band { padding: 9vh var(--edge); }
  .band-head { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 5vh; }
  .ex { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 7vh var(--edge) 9vh; }
  .ex-text { position: static; }
  .ex .pane-win { height: 78svh; min-height: 0; max-height: 640px; }
  .made, .made:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 7vh var(--edge); }
  .made:nth-child(even) .made-shot { order: 0; }
  .flow-look { grid-template-columns: minmax(0, 1fr); grid-template-areas: "you" "robots" "browser" "clock" "read" "fit" "labels" "out"; gap: 34px; }
  .flow-arch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cli mcp" "tools tools" "engine engine" "browser data"; gap: 34px 14px; }
  .flow-arch .node { padding: 14px 14px 16px; font-size: 15.5px; }
  .flow-arch .node b { font-size: 17px; }
  .fig-pair, .cols-2 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .opt { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tools-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .anat-stick { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px; padding: 80px var(--edge) 20px; align-items: start; }
  .anat-steps { gap: 0; }
  .anat-steps li { display: none; }
  .anat-steps li.is-on { display: block; }
  .anat .pane-win { height: auto; min-height: 0; max-height: none; align-self: stretch; }
  .code-block pre { font-size: 12.5px; padding: 16px; }
  .code-block.is-line pre { padding-right: 84px; }
  .ask li { font-size: 16.5px; }
}

.fig-label { font-family: var(--sans); font-size: 16px; font-weight: 500; fill: var(--ink-2); }

/* ---------- how it works: one look as one line with its stops; REVA as layers of text joined by thin lines ---------- */

.route { position: relative; max-width: 46rem; margin: 9vh 0 0 auto; }
.route li { position: relative; padding: 0 0 38px 46px; }
.route li:last-child { padding-bottom: 0; }
.route li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--ink);
}
.route li.is-end::before { background: var(--ink); }
.route li::after {
  content: ""; position: absolute; left: 5px; top: calc(0.42em + 15px); bottom: calc(-0.42em + 4px); width: 1px;
  background: rgba(10, 11, 13, 0.3); transform-origin: 50% 0;
}
.route li:last-child::after { display: none; }
.route li.is-fit::after { background: var(--fit); width: 1.5px; }
.route b { display: block; font-size: 21px; font-weight: 600; font-stretch: 112%; letter-spacing: -0.01em; color: var(--ink); }
.route span { display: block; margin-top: 4px; font-size: 17px; color: var(--ink-2); max-width: 34rem; }
.pre .route li::after { transform: scaleY(0); }
.pre .route li::before, .pre .route li > * { opacity: 0; }
.route.is-in li::after { transform: scaleY(1); transition: transform 640ms var(--clip) calc(var(--i) * 140ms + 200ms); }
.route.is-in li::before, .route.is-in li > * { opacity: 1; transition: opacity 560ms var(--readout) calc(var(--i) * 140ms); }

.stack { display: flex; flex-direction: column; align-items: center; gap: 64px; margin-top: 9vh; text-align: center; }
.stack-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; width: min(100%, 44rem); }
.stack-row.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 60rem); }
.stack-row + .stack-row::before {
  content: ""; position: absolute; left: 50%; top: -52px; height: 40px; width: 1px; background: rgba(10, 11, 13, 0.3);
}
.stack-row p { font-size: 17px; color: var(--ink-2); }
.stack-row b { display: block; margin-bottom: 6px; font-size: 21px; font-weight: 600; font-stretch: 112%; letter-spacing: -0.01em; color: var(--ink); }
.stack-row code { font-size: 0.84em; }
@media (max-width: 820px) {
  .route { margin-top: 6vh; }
  .route li { padding: 0 0 30px 36px; }
  .route b, .stack-row b { font-size: 19px; }
  .route span, .stack-row p { font-size: 16px; }
  .stack { gap: 48px; }
  .stack-row.is-two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stack-row + .stack-row::before { top: -40px; height: 32px; }
}