/* The landing page's two pictures, built by v-landing.js into index.html's
   [data-v="why"] and [data-v="collab"] slots (October 2026).

   Both are drawn in design pixels and scaled with --k, one design pixel, the way
   site.css's glimpses are, so each shrinks as one picture. The app pieces use
   the app's dark theme (theme.css, editor.css): a 36px title, 16/24 body, the
   nested page's card, other people's carets with a name flag, their selections
   at 22% of their colour, the faces at the foot of the page.

   Every selector starts with .vl-: two other pictures share this page. */

/* ================================================================ Why
   A person's notes, each tagged with what it becomes somewhere else; then the
   tags let go and the notes gather into one folder on their own computer. */
.vl-why {
  --kw: 1000; --kh: 400;
  --k: min(1px, calc(100cqw / var(--kw)));
  position: relative; width: calc(var(--k) * var(--kw)); height: calc(var(--k) * var(--kh)); margin-inline: auto;
  font-family: var(--ui); text-align: left; -webkit-font-smoothing: antialiased;
}
/* The light the notes stand in: cold and wide while they are somebody else's,
   gathered and ice blue once they are in the folder. */
.vl-why::before, .vl-why::after {
  content: ""; position: absolute; inset: -14% -6%; z-index: -1; pointer-events: none;
  transition: opacity 1.4s var(--ease);
}
.vl-why::before { background: radial-gradient(52% 50% at 50% 52%, rgba(120, 140, 170, .10), transparent 72%); }
.vl-why::after { opacity: 0; background: radial-gradient(34% 46% at 50% 50%, rgba(47, 123, 255, .34), rgba(47, 123, 255, .08) 58%, transparent 74%); }
.vl-why.vl-mine::before { opacity: 0; }
.vl-why.vl-mine::after { opacity: 1; }

/* A note: a page's title and its first line, as the app would list it. They
   come in one after another, the way they were written. */
.vl-n {
  position: absolute; left: calc(var(--k) * var(--x)); top: calc(var(--k) * var(--y)); width: calc(var(--k) * var(--w, 290));
  height: calc(var(--k) * 104);
  z-index: 2; opacity: 0; translate: 0 calc(var(--k) * 18);
  transition: opacity .8s ease, translate 1s var(--ease);
}
.vl-n.vl-up { opacity: 1; translate: 0 0; }
.vl-n-bg {
  position: absolute; inset: 0; transform-origin: 0 0; border-radius: calc(var(--k) * 16);
  background: linear-gradient(180deg, #24252a, #18191c);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 calc(var(--k) * 30) calc(var(--k) * 60) calc(var(--k) * -28) rgba(0, 0, 0, .9),
    0 0 calc(var(--k) * 60) calc(var(--k) * -26) rgba(47, 123, 255, .5);
  transition: border-color 1s ease, box-shadow 1s ease, background-color 1s ease;
}
.vl-n-tx { position: absolute; inset: 0; padding: calc(var(--k) * 20) calc(var(--k) * 22); }
.vl-n-tx b { display: block; font-size: calc(var(--k) * 17); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: #f2f2f0; transition: color .9s ease; }
.vl-n-tx span { display: block; margin-top: calc(var(--k) * 7); font-size: calc(var(--k) * 13.5); line-height: 1.45; color: #9b9b98; transition: color .9s ease; }
/* Taken: the note goes cold under its tag. */
.vl-n.vl-cold .vl-n-bg { border-color: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 calc(var(--k) * 30) calc(var(--k) * 60) calc(var(--k) * -28) rgba(0, 0, 0, .9), 0 0 0 0 rgba(47, 123, 255, 0); }
.vl-n.vl-cold .vl-n-tx b { color: #858a93; }
.vl-n.vl-cold .vl-n-tx span { color: #5d626b; }

/* The tag: grey card stock pinned through its hole to the note's corner. It
   swings once as it is pinned, and falls when the pin lets go. */
.vl-tag {
  position: absolute; right: calc(var(--k) * -22); bottom: calc(var(--k) * -18); z-index: 2;
  display: flex; align-items: center; gap: calc(var(--k) * 8);
  padding: calc(var(--k) * 7) calc(var(--k) * 14) calc(var(--k) * 7) calc(var(--k) * 10);
  border-radius: calc(var(--k) * 6) calc(var(--k) * 8) calc(var(--k) * 8) calc(var(--k) * 6);
  background: linear-gradient(180deg, #3a3e45, #2c3036);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 calc(var(--k) * 10) calc(var(--k) * 24) calc(var(--k) * -8) rgba(0, 0, 0, .85);
  color: #c9ced6; font-size: calc(var(--k) * 15); font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  transform-origin: calc(var(--k) * 14) 50%;
  opacity: 0; visibility: hidden;
}
.vl-tag::before {
  content: ""; flex: none; width: calc(var(--k) * 7); height: calc(var(--k) * 7); border-radius: 50%;
  background: #0b0c0f; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1);
}
.vl-n.vl-tagged .vl-tag { visibility: visible; animation: vl-pin .9s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes vl-pin {
  0% { opacity: 0; transform: translate(calc(var(--k) * 10), calc(var(--k) * -26)) rotate(-24deg); }
  40% { opacity: 1; transform: translate(0, 0) rotate(5deg); }
  68% { transform: rotate(-9deg); }
  86% { transform: rotate(-4.5deg); }
  100% { opacity: 1; transform: rotate(-6deg); }
}
.vl-n.vl-tagged.vl-drop .vl-tag { animation: vl-fall .85s cubic-bezier(.55, 0, .85, .45) both; animation-delay: var(--dd, 0s); }
@keyframes vl-fall {
  0% { opacity: 1; transform: rotate(-6deg); }
  18% { opacity: 1; transform: translate(0, calc(var(--k) * 2)) rotate(-16deg); }
  100% { opacity: 0; transform: translate(calc(var(--k) * 26), calc(var(--k) * 190)) rotate(-62deg); }
}

/* Gathering: each note flies into its row in the folder and becomes it. The
   card's box shrinks onto the row; its title rides along at the row's size and
   hands over to the row's own words as it lands. */
.vl-n-tx, .vl-n-tx b { transform-origin: 0 0; }
.vl-why.vl-gather .vl-n-bg {
  transform: translate(calc(var(--tx) * 1px), calc(var(--ty) * 1px)) scale(var(--sx), var(--sy));
  opacity: 0;
  transition: transform .8s cubic-bezier(.65, 0, .2, 1), opacity .28s ease;
  transition-delay: var(--gd), calc(var(--gd) + .62s);
}
.vl-why.vl-gather .vl-n-tx b {
  transform: translate(calc(var(--bx) * 1px), calc(var(--by) * 1px)) scale(var(--bs));
  color: #e6e6e4; opacity: 0;
  transition: transform .8s cubic-bezier(.65, 0, .2, 1), color .4s ease, opacity .2s ease;
  transition-delay: var(--gd), var(--gd), calc(var(--gd) + .66s);
}
.vl-why.vl-gather .vl-n-tx span { opacity: 0; transition: opacity .2s ease; transition-delay: var(--gd); }

/* The folder they land in: the app's own list of a folder of pages. */
.vl-fold {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(var(--k) * 470); translate: -50% -50%;
  border-radius: calc(var(--k) * 18); overflow: hidden;
  background: linear-gradient(180deg, #24252a, #17181b);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 calc(var(--k) * 34) calc(var(--k) * 80) calc(var(--k) * -26) rgba(0, 0, 0, .9),
    0 0 calc(var(--k) * 80) calc(var(--k) * -20) rgba(47, 123, 255, .55);
  color: #e6e6e4; font-size: calc(var(--k) * 14);
  opacity: 0; transform: scale(.94);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.vl-why.vl-gather .vl-fold { opacity: 1; transform: none; }
.vl-fold-hd {
  display: flex; align-items: center; gap: calc(var(--k) * 9); padding: calc(var(--k) * 14) calc(var(--k) * 18);
  border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: calc(var(--k) * 14);
}
.vl-fold-hd .g { font-size: calc(var(--k) * 15); color: #6cb4ff; }
.vl-fold-hd b { font-weight: 650; }
.vl-fold-hd span { margin-left: auto; color: #8fc8ff; font-size: calc(var(--k) * 12.5); font-weight: 600; }
.vl-fold-rows { padding: calc(var(--k) * 7); }
.vl-fold-row {
  position: relative; display: flex; align-items: center; gap: calc(var(--k) * 10);
  height: calc(var(--k) * 34); padding: 0 calc(var(--k) * 11); border-radius: calc(var(--k) * 8);
  font-size: calc(var(--k) * 13.5);
}
.vl-fold-row::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(108, 180, 255, .22); opacity: 0;
}
.vl-fold-row > * { position: relative; opacity: 0; transition: opacity .35s ease; transition-delay: calc(var(--gd) + .62s); }
.vl-fold-row .g { font-size: calc(var(--k) * 13.5); color: #9b9b98; }
.vl-fold-row em { margin-left: auto; font-style: normal; font-size: calc(var(--k) * 12); color: #74767b; }
.vl-why.vl-gather .vl-fold-row > * { opacity: 1; }
.vl-why.vl-gather .vl-fold-row::before { animation: vl-land 1.3s ease-out both; animation-delay: calc(var(--gd) + .55s); }
@keyframes vl-land { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* Reduced motion: the folder, with the notes in it. */
.vl-why.vl-still .vl-n { display: none; }
.vl-why.vl-still .vl-fold { opacity: 1; transform: none; transition: none; }
.vl-why.vl-still .vl-fold-row > * { opacity: 1; transition: none; }

@media (max-width: 640px) {
  .vl-why { --kw: 400; --kh: 640; }
  .vl-n { height: calc(var(--k) * 84); }
  .vl-n-tx { padding: calc(var(--k) * 15) calc(var(--k) * 18); }
  .vl-n-tx b { font-size: calc(var(--k) * 16); }
  .vl-n-tx span { margin-top: calc(var(--k) * 4); font-size: calc(var(--k) * 13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vl-tag { right: calc(var(--k) * -6); bottom: calc(var(--k) * -15); font-size: calc(var(--k) * 12.5); }
  .vl-fold { width: calc(var(--k) * 380); }
  .vl-fold-hd span { font-size: calc(var(--k) * 12); }
}

/* ================================================================ Together
   One page with three people in it; then, scrolled, a dive into the page it
   holds, and the one inside that. The stage pins inside a tall wrapper while
   the dive plays, and lets go when it is done. */
.vl-co {
  --kw: 820; --kh: 712;
  /* One design pixel: as large as the window allows, never larger than real. */
  --k: min(1px, calc((100vw - 48px) / var(--kw)), calc((100vh - var(--bar-h) - 56px) / var(--kh)));
  --k: min(1px, calc((100vw - 48px) / var(--kw)), calc((100svh - var(--bar-h) - 56px) / var(--kh)));
  --ink: #ececea; --sec: #9b9b98; --faint: #74767b; --rule: rgba(255, 255, 255, .14); --accent: #6cb4ff;
  position: relative; height: calc(100vh + 230vh); height: calc(100svh + 230vh);
  /* The page stands centred in the window while pinned; before that, most of
     the room above it would read as a gap under the heading. */
  margin-top: calc(-1 * max(0px, (100vh - var(--bar-h) - var(--k) * var(--kh)) / 2 - 12px));
  margin-top: calc(-1 * max(0px, (100svh - var(--bar-h) - var(--k) * var(--kh)) / 2 - 12px));
}
.vl-co.vl-still { margin-top: 0; }
.vl-co-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; pointer-events: none;
}
/* The light behind the page: the site's blue, widest at the start. */
.vl-co-light {
  position: absolute; left: 50%; top: calc(var(--bar-h) + (100% - var(--bar-h)) / 2);
  width: calc(var(--k) * 1500); height: calc(var(--k) * 1100); translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .28), rgba(47, 123, 255, .08) 55%, transparent);
}
/* Where a page sits when it is the one in view. Never drawn; the script reads it. */
.vl-co-frame {
  position: absolute; left: calc(50% - var(--k) * var(--kw) / 2); top: calc(var(--bar-h) + (100% - var(--bar-h) - var(--k) * var(--kh)) / 2);
  width: calc(var(--k) * var(--kw)); height: calc(var(--k) * var(--kh)); visibility: hidden;
}

/* A page. The first one stands where the frame is; the ones it holds open
   out of their card, so the script places them. */
.vl-co-pin > * { pointer-events: none; }
.vl-pg, .vl-pg-sh, .vl-ovl {
  position: absolute; left: 0; top: 0; width: calc(var(--k) * var(--kw)); height: calc(var(--k) * var(--kh));
  border-radius: calc(var(--k) * 18); transform-origin: 0 0;
}
.vl-pg {
  overflow: hidden;
  font-family: var(--ui); color: var(--ink); text-align: left; -webkit-font-smoothing: antialiased;
}
.vl-pg-bg {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, #232429, #17181b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* The shadow and the blue rim light sit on a twin behind the page, so a page
   opening out of its card can bring them up as it grows. */
.vl-pg-sh {
  box-shadow: 0 calc(var(--k) * 40) calc(var(--k) * 90) calc(var(--k) * -30) rgba(0, 0, 0, .95),
    0 0 calc(var(--k) * 90) calc(var(--k) * -26) rgba(47, 123, 255, .5);
}
/* Who else is on the page: over it and not clipped by it, so a pointer can come
   in from the night around it. */
.vl-ovl { z-index: 3; }
.vl-pg2, .vl-pg3, .vl-sh2, .vl-sh3, .vl-ov2, .vl-ov3 { visibility: hidden; }
.vl-pg-in { position: absolute; left: 0; top: 0; width: calc(var(--k) * var(--kw)); height: calc(var(--k) * var(--kh)); transform-origin: 0 0; }
.vl-pg-in > .vl-doc { position: relative; }

/* The page's own type: editor.css and theme.css at the app's sizes. */
.vl-doc { padding: calc(var(--k) * 46) calc(var(--k) * 58) 0; font-size: calc(var(--k) * 16); line-height: calc(var(--k) * 24); }
.vl-title { margin: 0; font-family: var(--ui); font-size: calc(var(--k) * 36); line-height: calc(var(--k) * 40); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.vl-meta { margin-top: calc(var(--k) * 7); font-size: calc(var(--k) * 13.5); line-height: calc(var(--k) * 20); color: var(--sec); }
.vl-p { margin: 0; padding: calc(var(--k) * 12) 0 calc(var(--k) * 4); color: var(--ink); }
.vl-p .w { position: relative; }
.vl-todo { list-style: none; margin: 0; padding: calc(var(--k) * 4) 0; }
.vl-todo li { position: relative; padding: calc(var(--k) * 5) 0 calc(var(--k) * 5) calc(var(--k) * 28); color: var(--ink); white-space: nowrap; }
.vl-todo li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--k) * 5 + (var(--k) * 24 - var(--k) * 16.8) / 2);
  width: calc(var(--k) * 16.8); height: calc(var(--k) * 16.8); box-sizing: border-box;
  border: calc(var(--k) * 1.5) solid var(--sec); border-radius: calc(var(--k) * 4);
  transition: background-color .15s ease, border-color .15s ease;
}
.vl-todo li.on { color: var(--sec); text-decoration: line-through; text-decoration-color: rgba(155, 155, 152, .7); }
.vl-todo li.on::before {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  border-color: var(--accent);
}
/* A line somebody is adding: it opens, then fills as they type. */
.vl-grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.3, .7, .2, 1); }
.vl-grow > * { min-height: 0; overflow: hidden; }
.vl-grow.vl-open { grid-template-rows: 1fr; }
.vl-g-todo.vl-open > ul { overflow: visible; }
.vl-g-todo > ul { padding: 0; }
.vl-pad { padding: 0 calc(var(--k) * 6); margin: 0 calc(var(--k) * -6); }
.vl-g-card .vl-card:not(.vl-in) { opacity: 0; }

/* A picture: the art is drawn on black, so it stands on a dark ground like a photo. */
.vl-fig { margin: 0; }
.vl-fig .vl-ph {
  position: relative; margin: calc(var(--k) * 12) 0; height: calc(var(--k) * var(--ph, 190)); border-radius: calc(var(--k) * 6); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #0b1830, #04060b 70%);
}
.vl-fig img { position: absolute; left: 50%; top: 50%; width: 112%; max-width: none; height: auto; translate: -50% -50%; }
.vl-fig.vl-dev img { opacity: 0; filter: blur(12px) brightness(1.6); transform: scale(1.06); transition: opacity .9s ease, filter 1.1s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.vl-fig.vl-dev.vl-shown img { opacity: 1; filter: none; transform: none; }

/* The nested page's card: theme.css .page-badge, with its glyph and its
   opening line turned on from the card's menu. */
.vl-card {
  position: relative; margin: calc(var(--k) * 6) 0; padding: calc(var(--k) * 14) calc(var(--k) * 16);
  border: 1px solid #292929; border-radius: calc(var(--k) * 8); background: rgba(255, 255, 255, .045);
  box-shadow: 0 0 4px rgba(0, 0, 0, .05); transition: background-color .2s ease, border-color .2s ease;
}
.vl-card.vl-hover { background: rgba(255, 255, 255, .08); border-color: #313131; }
.vl-card-t { display: flex; align-items: center; gap: calc(var(--k) * 6); font-size: calc(var(--k) * 14); line-height: calc(var(--k) * 20); font-weight: 500; color: #fff; }
.vl-card-t .g { font-size: calc(var(--k) * 14); opacity: .85; }
.vl-card-d { margin-top: calc(var(--k) * 2); font-size: calc(var(--k) * 12); line-height: calc(var(--k) * 16); color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pasted: picked out the way a new block is, in the colour of who pasted it, for a moment. */
.vl-card.vl-in { animation: vl-card-in .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vl-card-in { from { opacity: 0; transform: translateY(calc(var(--k) * 8)) scale(.985); } to { opacity: 1; transform: none; } }
.vl-card.vl-in::after {
  content: ""; position: absolute; inset: calc(var(--k) * -4); border-radius: calc(var(--k) * 11);
  border: calc(var(--k) * 1.5) solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent);
  animation: vl-picked 1.8s ease both .2s;
}
@keyframes vl-picked { 0% { opacity: 0; } 15%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* Columns, a table, a call: the second page's blocks. */
.vl-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(var(--k) * 28); margin-top: calc(var(--k) * 14); align-items: start; }
.vl-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  border: 1px solid var(--rule); border-radius: calc(var(--k) * 8); font-size: calc(var(--k) * 15); line-height: 1.5;
}
.vl-tbl th, .vl-tbl td { padding: calc(var(--k) * 7) calc(var(--k) * 11); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; white-space: nowrap; overflow: hidden; }
.vl-tbl tr > :last-child { border-right: 0; }
.vl-tbl tr:last-child > * { border-bottom: 0; }
.vl-tbl th { font-weight: 600; background: rgba(255, 255, 255, .05); }
.vl-tbl tr:first-child > th:first-child { border-top-left-radius: calc(var(--k) * 7); }
.vl-tbl tr:first-child > th:last-child { border-top-right-radius: calc(var(--k) * 7); }
.vl-tbl col.a { width: 46%; }
.vl-tbl col.b { width: 24%; }
.vl-tbl .no { color: var(--sec); }

.vl-call {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: calc(var(--k) * 12); background: rgba(255, 255, 255, .03);
  padding: 0 calc(var(--k) * 18) calc(var(--k) * 14);
}
.vl-call-h {
  display: flex; align-items: baseline; gap: calc(var(--k) * 8); margin: 0 calc(var(--k) * -18); padding: calc(var(--k) * 12) calc(var(--k) * 18) calc(var(--k) * 10);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.vl-call-h b { font-size: calc(var(--k) * 16); font-weight: 700; letter-spacing: -.012em; }
.vl-call-h span { font-size: calc(var(--k) * 14); font-weight: 600; color: var(--sec); }
.vl-say { margin-top: calc(var(--k) * 11); }
.vl-say .who { display: flex; align-items: center; gap: calc(var(--k) * 6); font-size: calc(var(--k) * 12); line-height: calc(var(--k) * 16); font-weight: 500; color: var(--sec); }
.vl-say .who i {
  display: inline-grid; place-items: center; width: calc(var(--k) * 16); height: calc(var(--k) * 16); border-radius: 50%;
  background: color-mix(in srgb, var(--c) 30%, transparent); color: var(--c); font-style: normal; font-size: calc(var(--k) * 9); font-weight: 700;
}
.vl-say p { margin: calc(var(--k) * 3) 0 0; font-size: calc(var(--k) * 14.5); line-height: calc(var(--k) * 21); color: var(--ink); }
.vl-say { opacity: 0; transform: translateY(calc(var(--k) * 6)); transition: opacity .6s ease, transform .6s var(--ease); transition-delay: calc(var(--i) * .7s + .3s); }
.vl-alive .vl-say { opacity: 1; transform: none; }

/* Other people: a pointer with their name, a caret with their name over it,
   what they have selected. Drawn over the page, never in it, like live.js. */
.vl-ptr { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s ease; }
.vl-ptr.vl-on { opacity: 1; }
.vl-ptr svg { margin: calc(var(--k) * -1.2) 0 0 calc(var(--k) * -1.6); display: block; width: calc(var(--k) * 20); height: calc(var(--k) * 23.6); overflow: visible; filter: drop-shadow(0 calc(var(--k) * 2) calc(var(--k) * 3) rgba(0, 0, 0, .45)); transition: transform .12s ease; transform-origin: calc(var(--k) * 1.6) calc(var(--k) * 1.2); }
.vl-ptr path { fill: var(--c); }
.vl-ptr.vl-press svg { transform: scale(.84); }
.vl-ptr b {
  position: absolute; left: calc(var(--k) * 13); top: calc(var(--k) * 20);
  padding: calc(var(--k) * 2.5) calc(var(--k) * 8) calc(var(--k) * 3); border-radius: calc(var(--k) * 4) calc(var(--k) * 10) calc(var(--k) * 10) calc(var(--k) * 10);
  background: var(--c); color: #0c0c0e; font-size: calc(var(--k) * 11.5); line-height: 1.3; font-weight: 650; white-space: nowrap;
  box-shadow: 0 calc(var(--k) * 4) calc(var(--k) * 12) rgba(0, 0, 0, .35);
  transform-origin: 0 0; transition: transform .3s cubic-bezier(.3, .7, .2, 1), opacity .25s ease;
}
/* While its owner types, the pointer's flag folds away: the caret has the name. */
.vl-ptr.vl-quiet b { transform: scale(.4); opacity: 0; }
.vl-band { position: absolute; left: 0; top: 0; background: var(--c); opacity: .22; border-radius: 2px; transition: opacity .3s ease; }
.vl-band.vl-gone { opacity: 0; }
.vl-caret {
  position: relative; display: inline-block; vertical-align: calc(var(--k) * -4); width: 2px; height: calc(var(--k) * 20); margin-left: 1px; margin-right: -3px;
  border-radius: 1px; background: var(--c); transition: opacity .25s ease;
}
.vl-caret::after {
  content: attr(data-who); position: absolute; left: 0; bottom: 100%; margin-bottom: calc(var(--k) * 1);
  padding: calc(var(--k) * 1) calc(var(--k) * 5); border-radius: 3px 3px 3px 0;
  background: var(--c); color: #0c0c0e; font-size: calc(var(--k) * 10); line-height: 1.35; font-weight: 650; white-space: nowrap; opacity: .95;
}
.vl-caret.vl-off { opacity: 0; }

/* The faces at the foot of the page (peers.js): stamps in black or white,
   solid and ringed in their colour while they are on this page. */
.vl-faces {
  position: absolute; left: 50%; bottom: calc(var(--k) * 14); translate: -50% 0; z-index: 4;
  display: flex; align-items: center; gap: calc(var(--k) * 6); padding: calc(var(--k) * 5) calc(var(--k) * 6); border-radius: calc(var(--k) * 10);
  background: rgba(28, 29, 31, .86);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 calc(var(--k) * 4) calc(var(--k) * 14) rgba(0, 0, 0, .3);
}
.vl-face {
  display: inline-grid; place-items: center; width: calc(var(--k) * 24); height: calc(var(--k) * 24); border-radius: calc(var(--k) * 6);
  background: #f2f2f0; color: #141416; font-size: calc(var(--k) * 11); font-weight: 600; line-height: 1;
  opacity: .38; transition: opacity .4s ease, box-shadow .4s ease;
}
.vl-face.vl-here { opacity: 1; box-shadow: 0 0 0 calc(var(--k) * 1.5) #1c1d1f, 0 0 0 calc(var(--k) * 3) var(--c); }

/* The card the page opens out of, drawn over the page while it opens. */
.vl-face-card { position: absolute; inset: 0; border-radius: inherit; background: #2b2c31; box-shadow: inset 0 0 0 1px #34353a; }
.vl-face-card > div { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; }

/* The words over the dive. */
.vl-scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 46% at 50% calc(var(--bar-h) / 2 + 50%), rgba(2, 3, 6, .82), rgba(2, 3, 6, .5) 60%, rgba(2, 3, 6, .2));
}
.vl-cap {
  position: absolute; left: 50%; top: calc(var(--bar-h) + (100% - var(--bar-h)) / 2); width: min(15ch, calc(100vw - 40px));
  margin: 0; translate: -50% -50%; text-align: center; pointer-events: none; opacity: 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5.8vw, 84px); line-height: .98; letter-spacing: -.045em; color: #fff;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .7), 0 0 80px rgba(2, 3, 6, .9);
}

/* ---------------------------------------------------------------- Phone
   The same story, re-laid for a narrow page rather than shrunk: one column,
   a shorter list, the call under the table. */
@media (max-width: 640px) {
  .vl-co {
    --kw: 400; --kh: 690;
    --k: min(1px, calc((100vw - 32px) / var(--kw)), calc((100vh - var(--bar-h) - 28px) / var(--kh)));
    --k: min(1px, calc((100vw - 32px) / var(--kw)), calc((100svh - var(--bar-h) - 28px) / var(--kh)));
    height: calc(100vh + 210vh); height: calc(100svh + 210vh);
  }
  .vl-doc { padding: calc(var(--k) * 30) calc(var(--k) * 24) 0; }
  .vl-title { font-size: calc(var(--k) * 30); line-height: calc(var(--k) * 34); }
  .vl-todo li { white-space: normal; }
  .vl-todo .vl-wide { display: none; }
  .vl-cols { grid-template-columns: minmax(0, 1fr); gap: calc(var(--k) * 12); margin-top: calc(var(--k) * 10); }
  .vl-tbl { font-size: calc(var(--k) * 14); }
  .vl-tbl th, .vl-tbl td { padding: calc(var(--k) * 5) calc(var(--k) * 9); }
  .vl-call .vl-say:nth-of-type(n + 3) { display: none; }
  .vl-fig .vl-ph { height: calc(var(--k) * var(--php, 130)); }
  .vl-cap { font-size: clamp(30px, 9vw, 40px); width: min(13ch, calc(100vw - 40px)); }
  .vl-hide-s { display: none; }
}

/* ---------------------------------------------------------------- Still
   Reduced motion: no pin and no dive. The page with everybody frozen mid-act,
   and under it the page its card opens. */
.vl-co.vl-still { height: auto; }
.vl-co.vl-still .vl-co-pin { position: relative; height: auto; overflow: visible; overflow-x: clip; padding-bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 6vw, 72px); }
.vl-co.vl-still .vl-co-frame, .vl-co.vl-still .vl-scrim, .vl-co.vl-still .vl-face-card { display: none; }
.vl-co.vl-still .vl-co-light { top: 30%; }
.vl-co.vl-still .vl-pg { position: relative; flex: none; }
.vl-co.vl-still .vl-pg3 { display: none; }
.vl-co.vl-still .vl-cap { position: static; translate: none; opacity: 1; order: 1; font-size: clamp(30px, 4.6vw, 64px); }
.vl-co.vl-still .vl-cap ~ .vl-cap { display: none; }
.vl-co.vl-still .vl-pg2 { order: 2; }
.vl-co.vl-still .vl-pg-sh { display: none; }
.vl-co.vl-still .vl-pg { box-shadow: 0 calc(var(--k) * 40) calc(var(--k) * 90) calc(var(--k) * -30) rgba(0, 0, 0, .95), 0 0 calc(var(--k) * 90) calc(var(--k) * -26) rgba(47, 123, 255, .5); overflow: hidden; }
.vl-co.vl-still * { transition: none !important; animation: none !important; }