/* round 5 (John, 16 Oct): the four pillars (kit/pillars.js). The four words
   on one row, the hand lettering, as tabs; one phone centred under them, in
   the carica lab's light look (the sheet hsl(300 8% 97.5%), white cards and
   rooms, the lab's own chat and composer). The phone is drawn at its own
   size, 380 by 800 with a 360 by 780 screen, and scaled whole by --ps, which
   the script sets so the heading, the words and the phone share one screen.
   17 Oct ("this whole page is quite in-your-face"): the words, the line and
   the phone a size smaller and its shadow lighter, so the section sits
   quietly on the paper. Everything here is .pl5-* (or scoped under .pl5), so
   the round 4 rules in home3.css (.pl-*, .ph-*, .sp-*) no longer touch the
   section, and nothing here leans on home3.css's shared rules. */

#pillars.pillars { padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(72px, 9vw, 130px); }
.pl5 { --dir: 1; --ios: cubic-bezier(0.32, 0.72, 0, 1); display: grid; justify-items: center; text-align: center; }
.pl5-k { margin: 0 0 clamp(10px, 1.2vw, 16px); font-size: 15px; line-height: 1.3; font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* ── the words: one scale for all four (their own pixel widths), lined up on
   their baselines; the one on show in full ink with the blue pen under it ── */
.pl5-tabs { --g: clamp(18px, 2.6vw, 38px); container-type: inline-size; display: flex; justify-content: center; align-items: flex-start; gap: var(--g); width: min(100%, 820px, 96svh); }
.pl5-w { --s: calc((100cqw - 3 * var(--g)) / 1699); position: relative; flex: none; width: calc(var(--s) * var(--sw)); margin: calc(var(--s) * (280 - var(--b))) 0 0; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; opacity: 0.22; transition: opacity 380ms ease; -webkit-tap-highlight-color: transparent; }
.pl5-w img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pl5-w:hover { opacity: 0.45; }
.pl5-w.is-on { opacity: 1; }
.pl5-w:focus-visible { outline: 2px solid var(--blue); outline-offset: 10px; }
.pl5-ul { position: absolute; left: -4%; right: -2%; top: calc(var(--s) * (var(--b) + 24)); pointer-events: none; }
#pillars .pl5-ul .pen { clip-path: inset(-60% 100% -60% 0); transition: clip-path 240ms ease; }
#pillars .pl5-w.is-on .pl5-ul .pen { clip-path: inset(-60% -2% -60% 0); transition: clip-path 780ms cubic-bezier(0.6, 0.05, 0.3, 1) 80ms; }

/* the line under the words, for the one on show */
/* each pillar's line, a size up and in ink (John, 17 Oct: "a bit larger and
   more prominent") */
.pl5-line { display: grid; max-width: 26em; margin: clamp(12px, 1.4vw, 18px) 0 0; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.4; color: var(--ink); text-wrap: balance; }
.pl5-line > span { grid-area: 1 / 1; opacity: 0; translate: 0 6px; transition: opacity 320ms ease, translate 500ms var(--expo); }
.pl5-line > span.is-on { opacity: 1; translate: 0 0; transition-delay: 140ms; }

/* ── the phone ───────────────────────────────────────────────────────── */
.pl5-stage { display: grid; justify-items: center; margin-top: clamp(18px, 2vw, 28px); border-radius: 30px; outline: none; }
.pl5-stage:focus-visible { outline: 2px solid var(--blue); outline-offset: 10px; }
/* its drop shadow lives on a layer of its own, so what plays on the screen
   never has to paint it again; a soft one, so the phone rests on the paper */
.pl5-phone { --ps: 0.8; --dh: 800; position: relative; width: calc(380px * var(--ps)); height: calc(var(--dh) * 1px * var(--ps)); }
.pl5-phone::before { content: ''; position: absolute; inset: 0; border-radius: calc(60px * var(--ps)); box-shadow: 0 calc(40px * var(--ps)) calc(80px * var(--ps)) calc(-36px * var(--ps)) rgb(23 21 15 / 0.3), 0 calc(16px * var(--ps)) calc(34px * var(--ps)) calc(-20px * var(--ps)) rgb(23 21 15 / 0.16); will-change: transform; pointer-events: none; }
.pl5-dev { position: absolute; left: 0; top: 0; width: 380px; height: calc(var(--dh) * 1px); padding: 10px; border-radius: 60px; background: #0c0c0d; box-shadow: inset 0 0 0 1.5px #3c3c40, inset 0 0 0 3.5px #0c0c0d, inset 0 0 0 4.5px #222225; transform: scale(var(--ps)); transform-origin: 0 0; text-align: left; }
.pl5-scr { position: relative; width: 360px; height: calc(var(--dh) * 1px - 20px); overflow: hidden; border-radius: 50px; background: hsl(300 8% 97.5%); isolation: isolate; font-family: var(--sans); color: hsl(0 0% 5%); }

/* the status bar: the time of day each story happens at, the island */
.pl5-sb { position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 2px 27px 0 38px; font: 600 15.5px/1 var(--apple); letter-spacing: -0.01em; color: #0c0c0d; pointer-events: none; transition: color 260ms ease; }
.pl5-clock { min-width: 44px; transition: opacity 170ms ease; }
.pl5-clock.is-swap { opacity: 0; }
.pl5-island { position: absolute; left: 50%; top: 11px; width: 100px; height: 29px; translate: -50% 0; border-radius: 20px; background: #000; }
.pl5-icons { display: flex; align-items: center; gap: 5px; }
.pl5-icons svg { width: auto; height: 11.5px; fill: currentColor; }
.pl5-icons svg:last-child { height: 13px; }
/* the home bar, white over the app and over the lock screen */
.pl5-home { position: absolute; z-index: 21; left: 50%; bottom: 7px; width: 124px; height: 5px; translate: -50% 0; border-radius: 3px; background: #0c0c0d; transition: background 400ms ease; pointer-events: none; }
.pl5-scr.is-app .pl5-home, .pl5-scr.is-lk-low .pl5-home { background: rgb(255 255 255 / 0.86); }

/* ── the first screen: the lock screen, the cut fig on blue as the
   wallpaper (as the use cases' ?below=5 draws it). Basil's evening message
   lands on it; then the wallpaper lifts away (kit/pillars.js) while the
   notification flies into the chat and becomes its first bubble. The status
   bar is white over it, with no small clock (the big one says it) ── */
.pl5-scr.is-lk .pl5-sb { color: #fff; }
.pl5-scr.is-lk .pl5-clock { opacity: 0; }
.pl5-scr.is-lk-low .pl5-comp { opacity: 0; translate: 0 36px; }
.pl5-lock { position: absolute; inset: 0; z-index: 17; pointer-events: none; }
.pl5-lock[hidden] { display: none; }
.pl5-lock.is-gone { opacity: 0; transition: opacity 260ms ease; }
/* the sheet that lifts: its foot rounds like the glass it sits behind, and
   casts a little shadow on the chat as it goes */
.pl5-lk { position: absolute; inset: 0; overflow: hidden; border-radius: 0 0 50px 50px; background: #0453a5; box-shadow: 0 18px 42px rgb(8 12 40 / 0.3); }
.pl5-lk-wall { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.pl5-lk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.05) 60%, rgb(0 0 0 / 0.36)); pointer-events: none; }
.pl5-lk-pad, .pl5-lk-date, .pl5-lk-time { position: absolute; z-index: 1; left: 0; right: 0; margin: 0; text-align: center; color: #fff; }
.pl5-lk-pad { top: 52px; display: grid; justify-items: center; }
.pl5-lk-pad svg { width: 13px; height: 17px; overflow: visible; }
.pl5-lk-pad rect { fill: currentColor; }
.pl5-lk-pad .pl5-shk { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; transform-origin: 10.3px 8.4px; transition: transform 380ms var(--spring); }
.pl5-lk-pad.is-open .pl5-shk { transform: translateY(-2.4px) rotate(20deg); }
.pl5-lk-date { top: 77px; color: rgb(255 255 255 / 0.92); font: 600 18px/22px var(--apple); letter-spacing: 0; text-shadow: 0 1px 10px rgb(0 0 0 / 0.08); }
.pl5-lk-time { top: 99px; font: 700 96px/1 var(--apple); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 16px rgb(0 0 0 / 0.1); }
/* the notification: the lock screen's glass, the Fig's face, its name, now */
.pl5-ln { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 92px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; padding: 12px 16px 12px 12px; border-radius: 24px; 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 3px rgb(0 0 0 / 0.08); font-family: var(--apple); color: #111; text-align: left; opacity: 0; translate: 0 46px; scale: 0.94; transition: opacity 380ms ease, translate 860ms var(--expo), scale 860ms var(--expo); }
.pl5-ln.is-in { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; cursor: pointer; }
.pl5-ln .figav { --s: 38px; }
.pl5-ln-b { min-width: 0; }
.pl5-ln-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.pl5-ln-h time { font-size: 13px; font-weight: 400; color: rgb(0 0 0 / 0.46); }
.pl5-ln-t { margin: 1px 0 0; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; }
/* the bubble it becomes: a copy of the chat's own, flown in over the rest */
.pl5-ghost { --k: 1.5; --lfig: #fff; position: absolute; z-index: 3; margin: 0; white-space: nowrap; -webkit-font-smoothing: antialiased; transform-origin: 50% 50%; opacity: 0; }
.pl5-lock .pl5-tap { z-index: 4; }

/* the four screens, one at a time: the new one comes in from the side it is
   on, the old one goes the other way */
.pl5-views { position: absolute; inset: 0; }
.pl5-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir, 1) * 28px)); }
.pl5-view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 460ms ease 90ms, transform 780ms var(--expo) 60ms, visibility 0s; }
.pl5-view.is-out { opacity: 0; visibility: visible; transform: translateX(calc(var(--dir, 1) * -28px)); transition: opacity 300ms ease, transform 620ms var(--expo), visibility 0s; }
.pl5-view.is-on.is-dip { opacity: 0; transition: opacity 200ms ease; }
.pl5-app { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; }
.pl5-app.is-reset, .pl5-app.is-reset * { transition: none !important; }

/* the lab's composer: the Fig's green orb and the white pill, over the
   screen fading out under it; it steps away while an app has the screen */
.pl5-comp { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; height: 108px; pointer-events: none; transition: opacity 260ms ease, translate 520ms var(--expo); }
.pl5-scr.is-app .pl5-comp { opacity: 0; translate: 0 36px; }
.pl5-comp::before { content: ''; position: absolute; inset: 0; background: linear-gradient(hsl(300 8% 97.5% / 0), hsl(300 8% 97.5% / 0.86) 58%, hsl(300 8% 97.5% / 0.94)); }
.pl5-orb { position: absolute; left: 21px; bottom: 25px; width: 39px; height: 39px; border-radius: 50%; box-shadow: 0 4px 12px rgb(40 140 0 / 0.16); }
.pl5-pill { position: absolute; left: 72px; right: 16px; bottom: 19px; height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 0 23px; border-radius: 26px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.07); }
.pl5-ask { overflow: hidden; font-size: 15.5px; line-height: 1.2; color: hsl(240 2% 52%); white-space: nowrap; text-overflow: ellipsis; transition: opacity 170ms ease; }
.pl5-ask.is-swap { opacity: 0; }
.pl5-pill svg { flex: none; width: 18px; height: 18px; fill: none; stroke: hsl(240 2% 52%); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* a finger on the glass: a tap, and (.pl5-drag) one that stays down to drag */
.pl5-tap, .pl5-drag { position: absolute; z-index: 30; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgb(23 23 23 / 0.13); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.85), 0 0 0 1px rgb(23 23 23 / 0.05); opacity: 0; pointer-events: none; }
.pl5-tap.is-go { animation: pl5-tap 640ms ease-out both; }
@keyframes pl5-tap { 0% { opacity: 0; transform: scale(0.5); } 22% { opacity: 1; transform: scale(0.82); } 100% { opacity: 0; transform: scale(1.5); } }

/* ── a chat with Basil, in the lab's own chat (kit.css .lchat) ────────── */
.pl5-chat { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6px 14px 100px; }
/* the chat's head, as the lab draws a one-to-one: the Fig's face over its name */
.pl5-chat > .pl5-ct { flex: none; display: grid; justify-items: center; gap: 1px; margin: 0; font-family: var(--sans); text-align: center; transition: opacity 300ms ease; }
.pl5 .pl5-ct .figav { --s: 34px; margin-bottom: 4px; }
.pl5 .pl5-ct b { font-size: 15px; line-height: 20px; font-weight: 500; color: hsl(0 0% 5%); }
.pl5-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.pl5-when { margin: 16px 0 10px; font-size: 12px; line-height: 1; color: hsl(240 2% 56%); text-align: center; }
.pl5-when:first-child { margin-top: 0; }
/* offload's chat half as large again, the face and the name with it, so it
   reads without effort (John, 17 Oct: "150% the size") */
.pl5 .is-offload .pl5-hist, .pl5 .is-offload .pl5-eve { --k: 1.5; }
.pl5 .is-offload .pl5-ct .figav { --s: 46px; }
.pl5 .is-offload .pl5-ct b { font-size: 20px; line-height: 26px; }
.pl5 .is-offload .pl5-when { margin: 20px 0 12px; font-size: 15px; }
/* at that size the evening is longer than the screen, so the chat keeps to
   its newest message, as a chat does: the thread scrolls what came before up
   and away under the head, fading it as it goes (kit/pillars.js follow) */
.pl5 .is-offload .pl5-thread { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 var(--fade, 0px)); mask-image: linear-gradient(transparent, #000 var(--fade, 0px)); }
.pl5 .is-offload .pl5-thread > * { flex: none; }
/* what the Fig read between the lines, marked in the letter's highlighter
   (kit.css .mark--hl) once its words have landed, as a pen would go */
.pl5-hl { color: inherit; background: linear-gradient(rgb(255 214 64 / 0.62), rgb(255 214 64 / 0.62)) no-repeat 0 70% / 0% 52%; }
.lrow:not(.is-wait):not(.is-typing) .pl5-hl { animation: pl5-hl 820ms cubic-bezier(0.55, 0.05, 0.35, 1) 560ms both; }
@keyframes pl5-hl { to { background-size: 100% 52%; } }
/* the run card: the width of the chat, all of it in view */
.pl5 .lrow:has(.pl5-run) { padding-right: 0; }
.pl5 .lrow:has(.pl5-run) .lcol, .pl5 .lrow:has(.pl5-run) .lcard { width: 100%; }
.pl5-run { --cw: 100%; margin: -6px 0 0; }

/* ── explore: the Mind Rooms, and two rooms gone into and come back from,
   as a phone pushes a screen: the room comes in from the right edge over the
   list, the list easing a third of the way off under it and dimming a
   little, the room's edge casting a soft shade on it; back, the same path
   the other way. The screen's own full height (the rooms run up under the
   status bar, as the lab's do) ───────────────────────────────────────── */
.pl5-app.pl5-ex { top: 0; overflow: hidden; }
.pl5-rl, .pl5-room { position: absolute; inset: 0; will-change: transform; transition: transform 560ms var(--ios); }
.pl5-rl { background: hsl(300 8% 97.5%); }
.pl5-rl::after { content: ''; position: absolute; inset: 0; background: rgb(23 21 15 / 0.07); opacity: 0; pointer-events: none; transition: opacity 560ms var(--ios); }
.pl5-ex.is-under .pl5-rl { transform: translateX(-30%); }
.pl5-ex.is-under .pl5-rl::after { opacity: 1; }
/* the lab's top bar over the rooms (your monogram and its stones, the view
   switch), cut from the capture of the screen */
.pl5-rl-top { position: absolute; left: 0; top: 48px; width: 360px; height: 78px; background: 0 0 / 360px auto no-repeat; }
/* the rooms: white pills hugging their names, down the middle, 12px apart;
   the one on the reading line a little raised (ArrivalRooms .is-screen) */
.pl5-rooms { position: absolute; left: 0; right: 0; top: 126px; bottom: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.pl5-rp { display: block; max-width: 100%; padding: 28px 34px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px hsl(0 0% 0% / 0.03), 0 8px 20px hsl(0 0% 0% / 0.05); font-size: 20px; line-height: 20px; font-weight: 400; letter-spacing: -0.02em; color: hsl(0 0% 5%); white-space: nowrap; transition: transform 160ms ease; }
.pl5-rp.is-line { scale: 1.05; box-shadow: 0 1px 2px hsl(0 0% 0% / 0.03), 0 8px 20px hsl(0 0% 0% / 0.05), 0 2px 6px hsl(0 0% 0% / 0.03), 0 14px 32px hsl(0 0% 0% / 0.08); }
.pl5-rp.is-press { transform: scale(0.975); }
/* a room: white, its name and its close at the top */
.pl5-room { padding-top: 48px; background: #fff; transform: translateX(100%); }
.pl5-room.is-in { transform: none; }
.pl5-room::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 22px; background: linear-gradient(to left, rgb(23 21 15 / 0.07), rgb(23 21 15 / 0)); opacity: 0; pointer-events: none; transition: opacity 560ms var(--ios); }
.pl5-room.is-in::before { opacity: 1; }
.pl5-rh { position: relative; z-index: 2; height: 58px; display: grid; place-items: center; background: #fff; }
.pl5-rh b { font-size: 15.5px; line-height: 1; font-weight: 500; color: hsl(0 0% 5%); }
.pl5-x { position: absolute; right: 11px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgb(0 0 0 / 0.09); }
.pl5-x svg { width: 13px; height: 13px; fill: none; stroke: hsl(0 0% 8%); stroke-width: 1.8; stroke-linecap: round; }
/* Paris day: its reflections, the lab's own, cut to their pictures and set
   square (kit/pillars.js), one under the next with air between: a picture on
   its own, a pair a little out of step, a band the room's width, and the
   Fig's line under two of them in the lab's own thought bubble (.say). The
   feed is scrolled by moving the roll inside its window */
.pl5-feed { position: absolute; left: 0; right: 0; top: 106px; bottom: 0; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 18px); mask: linear-gradient(transparent, #000 18px); }
.pl5-roll { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 0 16px 216px; will-change: transform; }
.pl5-rel { align-self: stretch; margin: 18px 0 -10px; font-size: 13.5px; line-height: 1; color: hsl(240 2% 50%); text-align: center; }
.pl5-fb { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.pl5-fb.is-r { align-self: flex-end; }
.pl5-fb.is-w, .pl5-two { align-self: stretch; }
/* a pair: two pictures side by side, the second set a little lower (the
   first, .is-flip) */
.pl5-two { flex-direction: row; justify-content: space-between; }
.pl5-two > :last-child, .pl5-two.is-flip > :first-child { margin-top: 34px; }
.pl5-two.is-flip > :last-child { margin-top: 0; }
/* a picture: a print with a soft shadow, short enough to stay inside the
   air under it, the unit inside turned back square (its place and turn set
   inline) */
.pl5-pic { position: relative; flex: none; display: block; overflow: hidden; border-radius: 5px; background: hsl(30 8% 92%); box-shadow: 0 1px 2px rgb(23 21 15 / 0.07), 0 10px 20px -10px rgb(23 21 15 / 0.32); }
.pl5-pic img { position: absolute; display: block; max-width: none; height: auto; }
/* the song: the card's own grey and corners; where the Fig's thought dot
   sits on its foot, the card's grey instead */
.pl5-song { border-radius: 15px; background: #525252; }
.pl5-song > span { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 44px 100%, 44px 118px, 0 118px); }
/* the Fig's line: under the picture, its two thought circles on the
   picture's foot, as the lab draws a reflection */
.pl5-fb .say { max-width: 100%; margin-top: 13px; font-size: 15px; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.04), 0 5px 14px rgb(23 21 15 / 0.08); }
/* London life, on Timur's muted map, his marks on it (kit.css .rb-*) */
.pl5-mapbox { position: absolute; left: 0; right: 0; top: 106px; bottom: 0; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 26px); mask: linear-gradient(transparent, #000 26px); }
.pl5-map { position: absolute; left: 0; top: 0; width: 360px; height: 675px; }
.pl5-map > img { display: block; width: 100%; height: 100%; max-width: none; }
.pl5-mk { position: absolute; width: 0; height: 0; }
.pl5-mk > * { position: absolute; left: 0; top: 0; opacity: 0; scale: 0.4; transition: opacity 240ms ease var(--dl, 0ms), scale 560ms var(--pop) var(--dl, 0ms); }
.pl5-mk.is-on > * { opacity: 1; scale: 1; }
.pl5-mk--stop > * { translate: -18px -18px; transform-origin: 18px 18px; }
.pl5-mk--home > * { translate: -50% -50%; transform-origin: 50% 50%; }
.pl5-mk--pin > * { translate: calc(-100% + 22px) calc(-100% + 5px); transform-origin: calc(100% - 22px) calc(100% - 5px); }

/* ── create: the lab's own app-building loader, under Basil's reply
   (components/apps/BlueprintSheet.tsx and app-objects.css, the owner's B1):
   the app object's footprint, 270 by 300, at the lab's scale for this
   screen. A cyanotype sheet on its printed grid; the head says what is
   happening and to what; the outline of the app's own screen is drawn once,
   and the plan's first screen is sketched inside it part by part, top to
   bottom, held, rubbed out in the same order and drawn again for as long as
   the build takes (the lab's own loop, 9s with its parts 4s apart, here a
   little quicker, 5s and 2.2s, to fit the story). Built, the sheet lifts off
   (the lab's lift: a turn of 4 degrees, up 14px, gone) as the app opens out
   of it. Its colours are the lab's materials, the same in either mode ── */
.pl5-ao { --k: 0.93; position: relative; isolation: isolate; display: block; width: calc(270px * var(--k)); aspect-ratio: 270 / 300; margin: 8px 0 0; border-radius: calc(9px * var(--k)); overflow: hidden; box-shadow: 0 1px 2px #332b2014, 0 18px 30px -20px #35291baa; transition: box-shadow 340ms var(--expo); }
.pl5-ao-sheet { position: absolute; inset: 0; color: #e8f0ff; background-color: #1c3d78; background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px); background-size: calc(18px * var(--k)) calc(18px * var(--k)); background-position: -1px -1px; box-shadow: inset 0 0 0 1px #ffffff1f; transform-origin: 12% 8%; transition: opacity 340ms var(--expo), transform 340ms var(--expo); }
.pl5-ao-sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl5-ao-head { position: absolute; left: calc(14px * var(--k)); right: calc(14px * var(--k)); top: calc(12px * var(--k)); display: flex; flex-direction: column; gap: 1px; font-family: var(--sans); text-align: left; }
.pl5-ao-kicker { font-size: calc(14px * var(--k)); line-height: 1.2; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.pl5-ao-name { overflow: hidden; font-size: calc(20px * var(--k)); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
/* the screen, drawn once as the sheet arrives; a dash a hair longer than
   its outline, so the outline closes without a seam */
.pl5-ao-scr { fill: #ffffff0a; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1.02 1; stroke-dashoffset: 1.02; }
.pl5-ao.is-go .pl5-ao-scr { animation: pl5-ao-draw 900ms var(--expo) forwards; }
@keyframes pl5-ao-draw { to { stroke-dashoffset: 0; } }
/* the sketch; butt caps, so a part not drawn yet is not a dot */
.pl5-ao-ln { fill: none; stroke: currentColor; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1.02 1; stroke-dashoffset: 1.02; }
.pl5-ao.is-go .pl5-ao-ln { animation: pl5-ao-sketch 5s linear infinite; animation-delay: calc(2.2s * var(--at, 0)); }
@keyframes pl5-ao-sketch { 0% { stroke-dashoffset: 1.02; opacity: 1; } 12% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.pl5-ao.is-lift { box-shadow: 0 1px 2px #332b2000, 0 18px 30px -20px #35291b00; }
.pl5-ao.is-lift .pl5-ao-sheet { opacity: 0; transform: rotate(-4deg) translateY(-14px); }

/* ── London Firsts, a bingo card on paper, opened as a sheet (John, 17
   Oct: "visual and fun", and personal: the firsts in what you saved) ──── */
/* the chat behind steps back while the app is open */
.pl5-app.is-deep .pl5-chat { filter: brightness(0.93); transition: filter 500ms ease; }
.pl5-app.is-deep .pl5-chat > .pl5-ct { opacity: 0; }
.pl5-bingo { position: absolute; z-index: 5; left: 0; right: 0; top: 10px; bottom: 0; display: flex; flex-direction: column; padding: 30px 20px 28px; border-radius: 28px 28px 0 0; background: #fbf6ea; color: hsl(0 0% 9%); font-family: var(--apple); visibility: hidden; opacity: 0; transform-origin: 0 0; box-shadow: 0 -10px 40px rgb(23 21 15 / 0.16); }
.pl5-bingo.is-open { visibility: visible; opacity: 1; transform: none; clip-path: inset(0 round 28px 28px 0 0); transition: transform 700ms var(--expo), clip-path 700ms var(--expo), opacity 220ms ease; }
.pl5-grab { position: absolute; left: 50%; top: 9px; width: 38px; height: 5px; translate: -50% 0; border-radius: 3px; background: rgb(23 23 23 / 0.16); }
.pl5-bingo-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl5-bingo-h b { font-size: 27px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: #e8431f; }
.pl5-bingo-n { font-size: 14px; font-weight: 600; color: rgb(23 23 23 / 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl5-bingo-s { margin: 6px 0 0; font-size: 15px; line-height: 1.3; color: rgb(23 23 23 / 0.6); }
.pl5-card { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 18px; }
.pl5-sq { position: relative; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #ebe4d3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pl5-sq img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl5-sq::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.64)); pointer-events: none; }
.pl5-sq-l { position: absolute; z-index: 1; left: 7px; right: 6px; bottom: 6px; font-size: 11.5px; line-height: 1.15; font-weight: 600; color: #fff; text-align: left; text-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
.pl5-sq:focus-visible { outline: 2px solid #0000b8; outline-offset: 2px; }
/* the dauber's dab: red ink that lets the photograph through, landing with
   a thud */
.pl5-dab { position: absolute; z-index: 2; left: 50%; top: 38%; width: 64%; aspect-ratio: 1; translate: -50% -50%; border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%; background: radial-gradient(circle at 40% 36%, rgb(240 84 46 / 0.86), rgb(222 52 22 / 0.92) 72%, rgb(200 38 12 / 0.96)); mix-blend-mode: multiply; opacity: 0; scale: 1.6; rotate: -9deg; pointer-events: none; }
.pl5-sq.is-dab .pl5-dab { opacity: 1; scale: 1; transition: opacity 110ms ease, scale 360ms var(--pop); }
.pl5-sq.is-thud { animation: pl5-thud 320ms ease-out; }
@keyframes pl5-thud { 0% { scale: 1; } 30% { scale: 0.95; translate: 0 2px; } 100% { scale: 1; translate: 0 0; } }
/* a line done: struck through in the Fig's pen, then "bingo!" */
.pl5-strike { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pl5-strike path { fill: none; stroke: #0000b8; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1.02 1; stroke-dashoffset: 1.02; }
.pl5-card.is-bingo .pl5-strike path { stroke-dashoffset: 0; transition: stroke-dashoffset 520ms cubic-bezier(0.6, 0.05, 0.3, 1) 200ms; }
.pl5-bingo-w { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; padding: 2px 18px 8px; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgb(23 21 15 / 0.24); font-family: 'Nanum Pen Script', 'Bradley Hand', cursive; font-size: 52px; line-height: 1; color: #0000b8; white-space: nowrap; rotate: -7deg; opacity: 0; scale: 0.4; pointer-events: none; }
.pl5-card.is-bingo .pl5-bingo-w { opacity: 1; scale: 1; transition: opacity 160ms ease 560ms, scale 560ms var(--pop) 560ms; }
.pl5-card.is-now .pl5-strike path, .pl5-card.is-now .pl5-bingo-w, .pl5-card.is-now .pl5-dab { transition: none; }
.pl5-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin: auto 0 0; font-family: var(--sans); font-size: 13.5px; line-height: 1; color: rgb(23 23 23 / 0.55); }
.pl5-by .figav { --s: 24px; box-shadow: 0 0 0 1.5px #fff; }

/* ── a phone: the words two to a row, a little narrower than the screen
   (the balance, kit/pillars-marks.css, sets them in one row instead, and
   that row keeps the screen's whole width) ── */
@media (max-width: 640px) {
  .pl5-k { margin-bottom: 10px; }
  .pl5-tabs { --g: 14px; flex-wrap: wrap; row-gap: 6px; }
  #pillars:not(.mk-balance) .pl5-tabs { width: min(100%, 300px); }
  .pl5-w { --s: calc((100cqw - 15px) / 872); }
  .pl5-line { max-width: 22em; margin-top: 10px; font-size: 18px; }
  .pl5-stage { margin-top: 16px; }
}

/* the screens not on show hold their animations still (typing dots, the
   app's sketch), as a section out of sight does */
.pl5-view:not(.is-on) *, .pl5-view:not(.is-on) *::before, .pl5-view:not(.is-on) *::after { animation-play-state: paused; }

/* ── a phone held upright: the section pins (kit/pillars.js sets .is-pin).
   Its stage, the words, the line and the phone, stays on the screen while
   the page scrolls four short screens, one for each word, so scrolling on
   is how the reader goes from Offload to Meet; a word tapped scrolls to its
   own, and a swipe on the phone goes to the next or the one before. The
   phone takes the screen's whole width where the height allows, and is a
   little shorter rather than smaller where it does not (--dh, 700 to 800
   of its own pixels, the script's) ── */
#pillars.is-pin { height: calc(100svh * 4); padding: 0 var(--gutter); }
#pillars.is-pin .pl5 { position: sticky; top: 0; height: 100svh; box-sizing: border-box; align-content: start; padding-top: max(20px, env(safe-area-inset-top)); }
#pillars.is-pin .pl5-k { font-size: 14px; }
#pillars.is-pin .pl5-line { max-width: 24em; font-size: 17px; line-height: 1.38; }
#pillars.is-pin .pl5-stage { margin-top: 12px; }
/* a word is a finger's size to tap, though it looks no bigger */
#pillars.is-pin .pl5-w::after { content: ''; position: absolute; inset: -14px -6px; }
#pillars.is-pin .pl5-phone { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  .pl5-view, .pl5-view.is-on, .pl5-view.is-out { transform: none; transition: opacity 1ms; }
  .pl5-rl, .pl5-rl::after, .pl5-room, .pl5-room::before, .pl5-rp, .pl5-bingo.is-open, .pl5-sq.is-dab .pl5-dab, .pl5-card.is-bingo .pl5-strike path, .pl5-card.is-bingo .pl5-bingo-w, .pl5-mk > *, .pl5-comp, .pl5-sb, .pl5-ln, .pl5-lk-pad .pl5-shk, .pl5-lock.is-gone, .pl5-ao, .pl5-ao-sheet { transition: none; }
  .pl5-tap.is-go, .pl5-sq.is-thud, .pl5-ao.is-go .pl5-ao-scr, .pl5-ao.is-go .pl5-ao-ln { animation: none; }
  .lrow .pl5-hl, .lrow:not(.is-wait):not(.is-typing) .pl5-hl { animation: none; background-size: 100% 52%; }
  .pl5-ao-scr, .pl5-ao-ln { stroke-dashoffset: 0; }
}