/* Round 5, the use cases (John, 16 Oct): the product's definition with a quiet
   aside, three points (Figs notice. / They suggest the right thing. / They
   expand your world.), and under them one of five things, ?below=1..5: one
   thing each; the plan on Timur's muted Apple map; the lab's own chat; your
   week; your lock screen. The map, the week and the lock screen are one panel
   under all three points, pinned while the line is drawn. */

/* the aside: quiet, grey, the page's own type, level (John: "lets put this in
   grey and in the same font, not handdrawn ... also no angle") */
.u123-def-aside { display: block; margin: clamp(16px, 1.8vw, 24px) 0 0; rotate: none; font-family: var(--sans); font-size: clamp(19px, 1.75vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: rgb(23 23 23 / 0.36); }   /* lighter, larger (John, round 5) */

.u123-box { position: relative; }
.u123-box > .figcur { z-index: 6; }
.u123-steps.u123-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 1180px); gap: clamp(26px, 4vw, 64px); }

/* ── 1 · one thing under each point ─────────────────────────────────────── */
.u123-steps--three .u-plan .lab { --k: 0.82; }
.u123-steps--three .u-exp { right: -6%; top: auto; bottom: 16%; width: 8.4em; }
.u-new { position: relative; display: inline-block; }
.u-new .lab { margin-top: 10px; }
.u-new-tag { position: absolute; z-index: 2; left: -4%; top: 0; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; color: var(--blue); box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06), 0 6px 16px rgb(23 21 15 / 0.1); font: 500 13px/1 var(--sans); rotate: -3deg; }
.u-new-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgb(0 0 184 / 0.14); }

/* ── 3 · in the lab's own chat, one moment under each point ─────────────── */
.u123--b3 .u123-vis { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 18px 16px 22px; border-radius: 26px; background: hsl(300 8% 97.5%); box-shadow: inset 0 0 0 1px rgb(23 23 23 / 0.04); }
.u123--b3 .lchat { --k: 1.04; }
.u123--b3 .lcard .lab { display: block; margin: -10px 0 -14px -12px; rotate: 0deg; }

/* ── the wide ones: pinned while the line is drawn ──────────────────────── */
.u123--wide .u123-scene { height: 290svh; }
.u123--wide .u123-stage { position: sticky; top: max(14px, 4svh); display: grid; gap: clamp(16px, 2.2vw, 28px); width: min(100%, 1180px); margin: 0 auto; }
.u123--wide .u123-steps--three { gap: clamp(18px, 3vw, 48px); }
.u123--wide .u123-n { font-size: clamp(46px, 4.2vw, 70px); }
.u123--wide .u123-word { font-size: clamp(19px, 1.8vw, 28px); }
.u123--wide .u123-step { gap: 10px; }

/* the Fig's line for each point, in the lab's caption bubble, one at a time */
.umap-says { display: grid; }
.umap-say { grid-area: 1 / 1; max-width: 19em; opacity: 0; translate: 0 8px; transition: opacity 420ms ease, translate 700ms var(--expo); }
.u123[data-stage="1"] .umap-say[data-s="1"],
.u123[data-stage="2"] .umap-say[data-s="2"],
.u123[data-stage="3"] .umap-say[data-s="3"] { opacity: 1; translate: 0 0; transition-delay: 160ms; }

/* ── 2 · the plan on the map ────────────────────────────────────────────── */
.umap { position: relative; width: min(100%, calc((100svh - 260px) * 2.4)); margin: 0 auto; }
.umap-map { position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: 28px; background: #f2f1ee; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06), 0 18px 50px rgb(23 21 15 / 0.08); }
.umap-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.umap-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.umap-ring { fill: hsl(0 0% 5% / 0.035); stroke: hsl(0 0% 5% / 0.45); stroke-width: 1.5; stroke-dasharray: 5 6; transform-box: fill-box; transform-origin: center; scale: 0.2; opacity: 0; transition: scale 1100ms var(--expo), opacity 500ms ease; }
.u123[data-stage="1"] .umap-ring--1, .u123[data-stage="2"] .umap-ring--1 { scale: 1; opacity: 1; }
.u123[data-stage="3"] .umap-ring--1 { scale: 1.5; opacity: 0; }
.u123[data-stage="3"] .umap-ring--2 { scale: 1; opacity: 1; transition-delay: 120ms; }
.umap-route { fill: none; stroke: hsl(0 0% 5% / 0.8); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--ease) 250ms; }
.u123[data-stage="2"] .umap-route, .u123[data-stage="3"] .umap-route { stroke-dashoffset: 0; }
.umap-home, .umap-rl, .umap-stop, .umap-edge { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); z-index: 2; }
.umap-home { translate: -50% -50%; opacity: 0; scale: 0.8; transition: opacity 360ms ease, scale 600ms var(--expo); }
.umap-rl { translate: -50% -50%; opacity: 0; transition: opacity 420ms ease; }
.u123:not([data-stage="0"]) .umap-home { opacity: 1; scale: 1; }
.u123[data-stage="1"] .umap-rl--1, .u123[data-stage="2"] .umap-rl--1 { opacity: 1; transition-delay: 500ms; }
.u123[data-stage="3"] .umap-rl--2 { opacity: 1; transition-delay: 700ms; }
.umap-edge { top: 14px; translate: -50% 0; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: hsl(0 0% 5%); color: #fff; font: 500 13px/1 var(--sans); white-space: nowrap; opacity: 0; transition: opacity 400ms ease; }
.u123:not([data-stage="0"]) .umap-edge { opacity: 1; }
/* a stop's number sits on its place; the name reads off it */
.umap-stop { translate: -18px -50%; opacity: 0; scale: 0.86; transform-origin: 18px 50%; transition: opacity 300ms ease, scale 520ms var(--expo); }
.umap-stop.is-flip { translate: calc(-100% + 18px) -50%; transform-origin: calc(100% - 18px) 50%; }
.umap-stop.is-dot { gap: 0; padding: 0 5px; }
.u123[data-stage="2"] .umap-stop, .u123[data-stage="3"] .umap-stop { opacity: 1; scale: 1; transition-delay: calc(var(--i) * 300ms + 350ms); }
/* the third point: every stop a first */
.umap-stop::after { content: 'new'; position: absolute; right: -6px; top: -9px; padding: 1px 6px 2px; border-radius: 999px; background: var(--blue); color: #fff; font: 500 10px/14px var(--sans); opacity: 0; scale: 0.6; transition: opacity 300ms ease, scale 500ms var(--expo); }
.umap-stop.is-flip::after { right: auto; left: -6px; }
.u123[data-stage="3"] .umap-stop::after { opacity: 1; scale: 1; transition-delay: calc(var(--i) * 140ms + 900ms); }
/* the Fig's line over a quiet corner of the map */
.umap-says { position: absolute; z-index: 3; pointer-events: none; }
.umap[data-at="tr"] .umap-says { top: 26px; right: 22px; justify-items: end; }
.umap[data-at="tl"] .umap-says { top: 26px; left: 22px; }
.umap[data-at="bl"] .umap-says { bottom: 20px; left: 22px; }
.umap[data-at="br"] .umap-says { bottom: 20px; right: 22px; justify-items: end; }
.umap[data-at="below"] .umap-says { position: relative; margin: 26px 0 0 14px; }
.umap .say { box-shadow: 0 0 0 1px rgb(23 23 23 / 0.05), 0 10px 26px rgb(23 21 15 / 0.16); }

/* ── 4 · in your week ───────────────────────────────────────────────────── */
.uweek { position: relative; width: min(100%, 1100px); margin: 0 auto; padding: 14px 16px 18px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06), 0 18px 50px rgb(23 21 15 / 0.08); font-family: var(--sans); }
.uw-head { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-left: 46px; padding-bottom: 10px; border-bottom: 1px solid rgb(23 23 23 / 0.07); font-size: 13px; color: var(--muted); }
.uw-head span { padding-left: 6px; }
.uw-head b { font-weight: 500; color: var(--ink); }
.uw-head .is-we b { color: var(--blue); }
.uw-grid { position: relative; height: min(400px, calc(100svh - 330px)); margin-left: 46px; }
.uw-hr { position: absolute; left: 0; right: 0; top: calc(var(--t) * 100%); height: 0; border-top: 1px solid rgb(23 23 23 / 0.05); }
.uw-hr em { position: absolute; left: -46px; top: -7px; width: 40px; font: 400 11px/14px var(--sans); font-style: normal; color: rgb(23 23 23 / 0.38); text-align: right; }
.uw-ev, .uw-gap { position: absolute; left: calc(var(--c) * 100% / var(--n) + 3px); width: calc(100% / var(--n) - 6px); top: calc(var(--t) * 100%); height: calc(var(--h) * 100% - 2px); }
.uw-ev { display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 5px 7px; border-radius: 7px; font-size: 11.5px; line-height: 1.2; opacity: 0; translate: 0 6px; transition: opacity 360ms ease, translate 600ms var(--expo); }
.uw-ev b { font-weight: 500; overflow-wrap: anywhere; }
.uw-ev small { font-size: 10.5px; opacity: 0.7; }
.uw-ev--r { background: hsl(240 5% 94.5%); color: hsl(240 2% 36%); }
.uw-ev--p { background: rgb(0 0 184 / 0.08); color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); padding-left: 9px; }
.uw-ev--n { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.uw-ev--n b::before { content: 'first · '; font-weight: 400; opacity: 0.75; }
.u123:not([data-stage="0"]) .uw-ev--r { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * 25ms); }
.u123[data-stage="2"] .uw-ev--p, .u123[data-stage="3"] .uw-ev--p { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * 260ms + 200ms); }
.u123[data-stage="3"] .uw-ev--n { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * 300ms + 250ms); }
/* the gap it noticed, ringed in the Fig's blue, then filled */
.uw-gap { border-radius: 9px; border: 1.5px dashed var(--blue); background: rgb(0 0 184 / 0.03); opacity: 0; transition: opacity 500ms ease 400ms; }
.u123[data-stage="1"] .uw-gap { opacity: 1; animation: uw-pulse 1.8s ease-in-out infinite 900ms; }
@keyframes uw-pulse { 50% { background: rgb(0 0 184 / 0.08); } }
.uw-says { position: relative; justify-items: center; margin-top: 14px; min-height: 64px; }

/* ── 5 · on your lock screen ────────────────────────────────────────────── */
.ulock { display: grid; justify-items: center; }
.ul-ph { width: min(300px, calc((100svh - 220px) * 0.49)); aspect-ratio: 9 / 18.6; padding: 9px; border-radius: 52px; background: #121212; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.2), 0 30px 70px rgb(23 21 15 / 0.22); }
.ul-scr { position: relative; height: 100%; overflow: hidden; border-radius: 44px; background: #2a2622; isolation: isolate; }
.ul-wall { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ul-scr::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0) 34%, rgb(0 0 0 / 0.08) 62%, rgb(0 0 0 / 0.42)); }
.ul-date { margin: 0; padding-top: 16%; text-align: center; color: rgb(255 255 255 / 0.92); font: 600 clamp(12px, 1.1vw, 15px)/1.2 var(--apple); }
.ul-time { margin: 2px 0 0; text-align: center; color: #fff; font: 700 clamp(56px, 6vw, 80px)/1 var(--apple); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ul-stack { position: absolute; left: 8px; right: 8px; bottom: 44px; display: flex; flex-direction: column; gap: 6px; }
.ul-n { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 22px; background: rgb(246 246 246 / 0.78); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 1px 2px rgb(0 0 0 / 0.1); opacity: 0; translate: 0 14px; scale: 0.96; transition: opacity 420ms ease, translate 700ms var(--expo), scale 700ms var(--expo); }
.u123[data-stage="1"] .ul-n[data-s="1"],
.u123[data-stage="2"] .ul-n[data-s="1"], .u123[data-stage="2"] .ul-n[data-s="2"],
.u123[data-stage="3"] .ul-n { opacity: 1; translate: 0 0; scale: 1; }
.ul-ic .figav { --s: 34px; }
.ul-b { min-width: 0; }
.ul-h { display: flex; justify-content: space-between; gap: 8px; margin: 0; font: 600 13px/1.25 var(--apple); color: #111; }
.ul-h time { font-weight: 400; color: rgb(0 0 0 / 0.45); }
.ul-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 1px 0 0; font: 400 13px/1.3 var(--apple); color: #111; }
.ul-att { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; object-position: 50% 12%; background: #fff; }
.ul-bar { position: absolute; left: 50%; bottom: 10px; width: 36%; height: 5px; translate: -50% 0; border-radius: 3px; background: rgb(255 255 255 / 0.85); }

/* ── phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .u123:not(.u123--wide) .u123-steps--three { grid-template-columns: minmax(0, 1fr); gap: 54px; padding-left: 30px; }
  .u123--wide .u123-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-left: 0; }
  .u123--wide .u123-n { font-size: 40px; }
  .u123--wide .u123-word { font-size: 15px; line-height: 1.1; }
  .u123--wide .u123-scene { height: 300svh; }
  .u123--wide .u123-stage { top: 10px; gap: 14px; }
  .u123-steps--three .u-exp { position: relative; right: auto; bottom: auto; margin: -26px 0 0 auto; }
  .u-new-tag { left: 0; }
  .umap { width: 100%; }
  .umap-map { border-radius: 22px; }
  .umap .say { font-size: 14.5px; }
  .uweek { padding: 10px 8px 12px; border-radius: 22px; }
  .uw-head, .uw-grid { margin-left: 34px; }
  .uw-hr em { left: -34px; width: 30px; font-size: 10px; }
  .uw-grid { height: min(360px, calc(100svh - 360px)); }
  .uw-ev { padding: 4px 5px; font-size: 10.5px; }
  .uw-ev small { display: none; }
  .ul-ph { width: min(250px, calc((100svh - 230px) * 0.49)); }
}

/* ═════ version 1, round 5 third notes (John, 16 Oct): one picture under each
   point, the Fig's line under it in the lab's own thought bubble (the same
   size under all three), then the grey line. The rows line up across the
   three points (subgrid): the numbers, the words, the pictures standing on
   one line, the bubbles, the grey lines. Since 17 Oct (John: "these three can
   be a bit smaller, less overwhelming. This whole page is quite
   in-your-face") the column is narrower (--pw), nothing is tilted, and the
   shadows are softer. ═════════════════════════════════════════════════════ */
/* the story's one line stands on the same left edge as the three points */
.u123--b1 .u123-for { width: min(100%, 1180px); }
.u123--b1 .u123-steps--three { grid-template-rows: repeat(5, auto); row-gap: 0; }
.u123--b1 .u5-step { --pw: 300px; grid-row: span 5; display: grid; grid-template-rows: subgrid; gap: 0; align-content: stretch; }
.u5-step > .u123-word { margin-top: clamp(14px, 1.6vw, 20px); }
.u5-pic { position: relative; align-self: end; width: min(100%, var(--pw)); margin-top: clamp(30px, 3vw, 40px); }
.u5-say.say { align-self: start; width: min(100%, var(--pw)); max-width: none; margin-top: 28px; }
.u5-grey { align-self: start; width: min(100%, var(--pw)); margin: 14px 0 0; padding-left: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* in order, once the line has come round its number: the picture, the Fig's line, the grey line */
.u5-pic, .u5-say.say, .u5-grey { opacity: 0; translate: 0 10px; transition: opacity 600ms ease, translate 900ms var(--expo); }
.u5-step.is-on .u5-pic { opacity: 1; translate: 0 0; transition-delay: 120ms; }
.u5-step.is-on .u5-say.say { opacity: 1; translate: 0 0; transition-delay: 1000ms; }
.u5-step.is-on .u5-grey { opacity: 1; translate: 0 0; transition-delay: 1300ms; }

/* ═════ notice, four ways (John, 17 Oct: "i still think we can do better on
   the notice visual. it's cheap and easy maybe more connectors angle> more
   minimal? try some versions"), ?notice=1..4. The same dots in each: two of
   your apps with one quiet detail, a line you keep saying to your Fig; and
   the one note they add up to. Each the same 300 wide as the map and the
   ticket beside it, each coming in once its point is reached. ═══════════ */
/* the Fig's signature, as the lab's note card signs it: its face, its name */
.u5-sig { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; line-height: 20px; color: var(--muted); }
.u5-sig .figav { --s: 20px; }

/* ── 1 · your apps, joined: the lab's connector tiles, the chat with your
   Fig a tile between them (your words under it), the Fig's dotted pen from
   each into the Fig ─────────────────────────────────────────────────── */
.u5-nt { position: relative; display: grid; gap: 48px; }
.u5-nt-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.u5-nt-svg path { fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 0.1 5.2; opacity: 0; transition: opacity 500ms ease; }
.u5-step.is-on .u5-nt-svg path { opacity: 0.9; transition-delay: calc(480ms + var(--k) * 160ms); }
.u5-nt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; }
.u5-nt-src { grid-row: span 2; display: grid; grid-template-rows: subgrid; justify-items: center; row-gap: 10px; min-width: 0; text-align: center; }
.u5-nt-src > :first-child { align-self: center; opacity: 0; scale: 0.9; transition: opacity 380ms ease, scale 640ms var(--spring); }
.u5-step.is-on .u5-nt-src > :first-child { opacity: 1; scale: 1; transition-delay: calc(200ms + var(--k) * 120ms); }
.u5-nt-src small { align-self: start; max-width: 100%; font-size: 12px; line-height: 1.3; color: var(--muted); text-wrap: balance; }
/* what you keep saying, in your words, in the ink */
.u5-nt-said small b { display: block; font-weight: 400; color: var(--ink); }
/* the lab's connector tile (app-sources.css .app-icon): white, rounded by a
   fifth of its side, the app's own mark in its own colour at 58%, lifted as
   a phone lifts an icon */
.u5-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22.5%; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 16px rgb(0 0 0 / 0.08); }
.u5-tile img { display: block; width: 58%; height: 58%; object-fit: contain; }
.u5-tile svg { display: block; width: 60%; height: 60%; }
/* the same tile, small, beside a line or a word */
.u5-mini { display: inline-grid; place-items: center; flex: none; width: var(--m, 20px); height: var(--m, 20px); border-radius: 24%; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07), 0 1px 2px rgb(0 0 0 / 0.06), 0 3px 8px rgb(0 0 0 / 0.06); }
.u5-mini img, .u5-mini svg { display: block; width: 62%; height: 62%; object-fit: contain; }
/* the note, the Fig on its top edge where the pen comes in */
.u5-nt-card { position: relative; padding: 26px 18px 17px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.04), 0 8px 24px rgb(23 21 15 / 0.07); }
.u5-nt-fig { position: absolute; left: 50%; top: 0; display: grid; padding: 3px; border-radius: 50%; background: #fff; translate: -50% -50%; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.05), 0 4px 10px rgb(23 21 15 / 0.08); opacity: 0; scale: 0.6; transition: opacity 300ms ease, scale 600ms var(--pop); }
.u5-step.is-on .u5-nt-fig { opacity: 1; scale: 1; transition-delay: 880ms; }
.u5-nt-fig .figav { --s: 26px; }
.u5-nt-by { margin: 0 0 5px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.u5-nt-s { margin: 0; font-size: 15.5px; line-height: 1.36; letter-spacing: -0.005em; text-wrap: balance; }

/* ── 2 · the record: the note as the lab brings it forward (NoteRecord):
   who noticed it, the sentence, then a line for each thing it was joined
   from, the source's mark on a soft square, its name, what it held ─────── */
.u5-nr { padding: 15px 16px 5px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.04), 0 8px 24px rgb(23 21 15 / 0.07); }
.u5-nr-s { margin: 9px 0 13px; font-size: 16px; line-height: 1.36; letter-spacing: -0.006em; text-wrap: pretty; }
.u5-nr-ev { margin: 0; padding: 0; list-style: none; }
.u5-nr-ev li { display: grid; grid-template-columns: 20px 58px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 9px 0; border-top: 1px solid rgb(23 23 23 / 0.06); font-size: 13px; line-height: 18px; opacity: 0; translate: 0 4px; transition: opacity 420ms ease, translate 700ms var(--expo); }
.u5-step.is-on .u5-nr-ev li { opacity: 1; translate: 0 0; transition-delay: calc(380ms + var(--k) * 150ms); }
.u5-nr-g { display: grid; place-items: center; width: 20px; height: 20px; margin-top: -1px; border-radius: 6px; background: hsl(240 5% 96%); color: var(--ink); }
.u5-nr-g svg { width: 13px; height: 13px; }
.u5-nr-n { color: var(--muted); white-space: nowrap; }
.u5-nr-t { color: var(--ink); text-wrap: pretty; }
.u5-nr-t small { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--muted); }

/* ── 3 · it adds up: the three things, the Fig's pen under them as under a
   sum, then what they come to ──────────────────────────────────────────── */
.u5-ns { padding: 0 2px; }
.u5-ns-ev { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.u5-ns-ev li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: 11px; font-size: 14px; line-height: 20px; color: rgb(23 23 23 / 0.82); opacity: 0; translate: -4px 0; transition: opacity 420ms ease, translate 700ms var(--expo); }
.u5-step.is-on .u5-ns-ev li { opacity: 1; translate: 0 0; transition-delay: calc(220ms + var(--k) * 150ms); }
.u5-ns-t small { font-size: 12.5px; color: var(--muted); }
.u5-ns-rule { display: block; width: 100%; height: 12px; margin: 15px 0 13px; overflow: visible; }
.u5-ns-rule path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 760ms var(--ease); }
.u5-step.is-on .u5-ns-rule path { stroke-dashoffset: 0; transition-delay: 560ms; }
.u5-ns-s { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; text-wrap: pretty; }
.u5-ns .u5-sig { margin-top: 12px; }
.u5-ns-s, .u5-ns .u5-sig { opacity: 0; transition: opacity 600ms ease; }
.u5-step.is-on .u5-ns-s, .u5-step.is-on .u5-ns .u5-sig { opacity: 1; transition-delay: 860ms; }

/* ── 4 · just the note: the lab's note card, which is its sentence, set
   larger; its sources as tiny tiles after the words they stand behind ──── */
.u5-nc { padding: 17px 18px 15px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.04), 0 8px 24px rgb(23 21 15 / 0.07); }
.u5-nc-s { margin: 0; font-size: 19px; line-height: 1.36; letter-spacing: -0.012em; text-wrap: pretty; }
.u5-nc-w { white-space: nowrap; }
.u5-nc-m { display: inline-block; margin-left: 5px; vertical-align: -2px; line-height: 0; opacity: 0; scale: 0.5; transition: opacity 300ms ease, scale 560ms var(--pop); }
.u5-nc-m + .u5-nc-m { margin-left: 3px; }
.u5-nc-m .u5-mini { --m: 17px; }
.u5-step.is-on .u5-nc-m { opacity: 1; scale: 1; transition-delay: calc(560ms + var(--k) * 170ms); }
.u5-nc .u5-sig { margin-top: 14px; }

/* ── Timur's map, drawn at 340 by 290 and scaled to its column ──────────── */
.u5-scale { position: relative; aspect-ratio: 340 / 290; }
.u5-scale > .u5-in { position: absolute; left: 0; top: 0; width: 340px; height: 290px; transform-origin: 0 0; scale: var(--z, 1); }
.u5-mapbox { overflow: hidden; border-radius: 20px; background: #f2f1ee; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.05), 0 8px 24px rgb(23 21 15 / 0.07); }
.u5-tiles { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.u5-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.u5-in .rb-spot i svg { flex: none; width: 18px; height: 18px; }
/* the plan's name, as a room's map floats its name */
.u5-mt { position: absolute; left: 12px; top: 12px; z-index: 4; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9999px; background: #fff; border: 1px solid rgb(0 0 0 / 0.05); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 16px -6px rgb(0 0 0 / 0.22); font: 500 13.5px/1 var(--sans); color: hsl(0 0% 5%); white-space: nowrap; }
/* the way between the stops, drawn in once the point is reached */
.u5-route path { fill: none; stroke: hsl(0 0% 5% / 0.8); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1700ms var(--ease) 500ms; }
.u5-step.is-on .u5-route path { stroke-dashoffset: 0; }
/* a mark stands on its place; they arrive in the plan's order */
.u5-mk { position: absolute; z-index: 2; width: 0; height: 0; opacity: 0; transition: opacity 360ms ease; }
.u5-step.is-on .u5-mk { opacity: 1; transition-delay: calc(var(--i) * 220ms + 520ms); }
.u5-mk > * { transition: scale 600ms var(--expo); }
.u5-mk > .u5-pb, .u5-mk > .rb-pin { scale: 0.86; }
.u5-step.is-on .u5-mk > .u5-pb, .u5-step.is-on .u5-mk > .rb-pin { scale: 1; transition-delay: calc(var(--i) * 220ms + 520ms); }
/* 1 · a stop pill, its number on the place */
.u5-pb { position: absolute; left: -18px; top: -18px; display: block; transform-origin: 18px 50%; }
.u5-pw.is-flip .u5-pb { left: auto; right: -18px; transform-origin: calc(100% - 18px) 50%; }
.u5-pb > .rb-stop { position: relative; z-index: 1; }
.u5-pb > .rb-stop.is-dot { width: 36px; padding: 0; justify-content: center; }
.u5-pb > .rb-stop.is-focus { box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.32), 0 1px 2px rgb(0 0 0 / 0.06); }
/* 2 · a spot card on its stem, the dot on the place */
.u5-pinw .rb-pin { position: absolute; left: -22px; top: -67px; width: max-content; transform-origin: 22px 67px; }
.u5-pinw.is-flip .rb-pin { left: auto; right: -22px; transform-origin: calc(100% - 22px) 67px; }
.u5-pinw.is-dot .rb-pin { top: -61px; transform-origin: 22px 61px; }
.u5-in .rb-spot.is-two { height: 50px; padding-right: 14px; }
.u5-in .rb-spot.is-flip.is-two { padding: 0 4px 0 14px; }
.u5-in .rb-spot.is-dot { width: 44px; padding: 0; justify-content: center; }
.u5-in .rb-spot i.is-glyph { background: #f1f0f2; color: #19191b; }
.u5-in .rb-two { display: flex; min-width: 0; flex-direction: column; gap: 2px; line-height: 1.2; }
/* the time, a touch larger than Timur's: the map is drawn a little smaller now */
.u5-in .rb-two small { font-size: 12px; font-weight: 400; color: rgb(23 23 23 / 0.55); }
.u5-in .rb-spot.is-flip .rb-two { align-items: flex-end; }
.u5-in .rb-spot.is-focus { box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.32), 0 1px 2px rgb(0 0 0 / 0.06); }
/* 3 · a stop as Timur first drew a day: a white card, its number and photograph */
.u5-ps { position: absolute; display: flex; align-items: center; gap: 8px; width: 80px; height: 54px; margin: -27px 0 0 -40px; padding: 6px 6px 6px 12px; border-radius: 14px; background: #fff; color: #1b1a18; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 6px 14px -6px rgb(0 0 0 / 0.35); font: 500 17px/1 var(--sans); transition: opacity 360ms ease, scale 600ms var(--expo); }
.u5-ps i { flex: 1; align-self: stretch; border-radius: 9px; background: #ddd center / cover no-repeat; }
.u5-ps.is-dot { width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; justify-content: center; border-radius: 50%; font-size: 13px; }
.u5-ps { scale: 0.86; }
.u5-step.is-on .u5-ps { scale: 1; transition-delay: calc(var(--i) * 220ms + 520ms); }
.u5-step.is-on .u5-ps.is-focus { scale: 1.12; }
/* the active spot's pictures, fanned up from behind its card (Timur's .rb-fan) */
.u5-fan { position: absolute; z-index: 0; left: 50%; bottom: calc(100% - 10px); width: 58px; height: 80px; translate: calc(-50% + var(--fx, 0px)) 0; pointer-events: none; }
.u5-dotw .rb-pin-dot { position: absolute; left: -5px; top: -5px; margin: 0; }
.u5-fan i { position: absolute; left: 0; bottom: 0; width: 58px; height: 72px; box-sizing: border-box; border-radius: 8px; border: 2.5px solid #fff; background: #ddd center / cover no-repeat; box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.38); transform-origin: 50% 112%; rotate: calc(-16deg + var(--k) * 16deg); opacity: 0; translate: 0 26px; scale: 0.8; transition: opacity 400ms ease, translate 700ms var(--expo), scale 700ms var(--expo); }
.u5-fan i:nth-child(2) { z-index: 1; }
.u5-fan i:nth-child(3) { z-index: 2; }
.u5-step.is-on .u5-fan i { opacity: 1; translate: 0 0; scale: 1; transition-delay: calc(1250ms + var(--k) * 110ms); }

/* ── expand: the lab's ticket with the red date (.rf-event-ticket), drawn
   at its own 300 and fitted to the column: every length is in the column's
   hundredths (cqw), 1px at 300 being 0.3333cqw. Level, its shadow quieter ── */
.u5-ev { position: relative; container-type: inline-size; padding-top: 14px; }
.u5-tag.u-new-tag { left: -6px; top: 0; z-index: 3; gap: 6px; padding: 6px 11px 6px 9px; font-size: 12px; rotate: 0deg; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.05), 0 4px 12px rgb(23 21 15 / 0.08); }
.u5-tag.u-new-tag::before { width: 6px; height: 6px; }
.u5-tk { position: relative; display: flex; min-height: 64cqw; border-radius: 3cqw; background: #fff7e6; border: 1px solid #fffdf6; box-shadow: 0 2px 0 #ebe2ce, 0 12px 20px -18px #44372577, 0 18px 34px -28px rgb(68 55 37 / 0.26); color: #39352e; }
.u5-tk::before, .u5-tk::after { content: ''; position: absolute; left: 36.33cqw; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--paper); }
.u5-tk::before { top: -2.67cqw; }
.u5-tk::after { bottom: -2.67cqw; }
.u5-tk-date { display: block; width: 39cqw; flex-shrink: 0; padding: 7cqw 4cqw 6cqw; text-align: center; border-right: 1px dashed #d3bda0; color: #e64225; }
.u5-tk-date small { display: block; font: 500 4.67cqw/1.3 var(--sans); letter-spacing: 0.67cqw; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.u5-tk-date small:last-child { letter-spacing: 0.4cqw; }
.u5-tk-date b { display: block; margin: 1.67cqw 0; padding-right: 2.33cqw; font: 800 29.33cqw/1.05 var(--sans); letter-spacing: -2.33cqw; }
.u5-tk-body { display: block; min-width: 0; padding: 9.67cqw 6.33cqw 8cqw; }
.u5-tk-body b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font: 700 6.6cqw/1.06 var(--sans); letter-spacing: -0.2cqw; color: #694c2f; text-wrap: pretty; }
.u5-tk-body span { display: block; margin-top: 7.33cqw; font-size: 4.67cqw; line-height: 1.5; color: #a38967; }
/* a place, the poster: its photograph on top, the words under it */
.u5-poster { display: block; overflow: hidden; border-radius: 20px; background: #fffdf9; color: #39352e; box-shadow: 0 1px 2px #332b2012, 0 12px 22px -20px #35291b66, 0 0 0 1px rgb(57 53 46 / 0.04); }
.u5-scene { display: block; aspect-ratio: 340 / 200; background: #ece7dd center / cover no-repeat; }
.u5-pbody { display: block; padding: 12px 15px 14px; }
.u5-pbody b { display: block; font: 600 18px/1.15 var(--sans); letter-spacing: -0.3px; }
.u5-pbody span { display: block; margin-top: 5px; font-size: 14px; color: #6f685c; }
.u5-ev > .u5-tk, .u5-ev > .u5-poster { translate: 0 8px; transition: translate 900ms var(--expo); }
.u5-step.is-on .u5-ev > .u5-tk, .u5-step.is-on .u5-ev > .u5-poster { translate: 0 0; }
.u5-tag { opacity: 0; scale: 0.7; transition: opacity 300ms ease, scale 600ms var(--pop); }
.u5-step.is-on .u5-tag { opacity: 1; scale: 1; transition-delay: 700ms; }

@media (max-width: 860px) {
  .u123--b1 .u123-steps--three { grid-template-rows: none; }
  .u123--b1 .u5-step { --pw: 288px; grid-row: auto; grid-template-rows: none; }
  .u5-pic { margin-top: 26px; }
  .u5-say.say { margin-top: 28px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .u5-pic, .u5-say.say, .u5-grey, .u5-mk, .u5-fan i, .u5-tag, .u5-nt-svg path, .u5-nt-src > :first-child, .u5-nt-fig, .u5-nr-ev li, .u5-ns-ev li, .u5-ns-rule path, .u5-ns-s, .u5-ns .u5-sig, .u5-nc-m { transition: none; }
}

/* the map and the ticket a tenth smaller, so the three titles lead (John, 17
   Oct: "make these two attached images 10% smaller so it's a bit less
   overwhelming and more focused on the titles"); zoom keeps their insides in
   proportion and their bubbles stay the column's width */
.u123--b1 .u5-step:nth-child(2) .u5-pic, .u123--b1 .u5-step:nth-child(3) .u5-pic { zoom: 0.8; }   /* and smaller again (John, 17 Oct: "these two can still be smaller") */