/* MCP explainer: this page's figures only. The façade with two doors, the hatch before and after
   the agreed shape, the vendor slide, the request form beside the job it was for, the job card with
   its routes, the chain through two doors, and the window by the ninth door. Shared chrome is in
   explainer.css, which loads first. Every finished state exists in HTML; motion is additive, runs
   once and rests visible. There is no page script: every figure here is HTML and CSS on the shared
   reveal.
   The page's running object is the door. It is a façade in the hero, a hatch in 02, one of four
   routes on the card in 05, two doorways in 06, and nine of them in 08. Grey means a product
   somebody sold you, ink on white means the work you own, and the two tools are never named or
   badged: the logo exception on the data page was granted for named systems holding records, and
   there is no record on this page.
   COLOUR GRAMMAR, written down on 2026-09-21 so anything added later can be coloured by asking
   what it IS rather than what would look good. Cream plus the #8a8a8a dots: a product somebody
   sold you. Ink on white: the work you own. #b9b9b9 bars and dashed #8a8a8a edges: text you are
   not meant to read, and a thing not yet placed. Blue-light: the AI, and every door, because the
   agreed shape is this page's subject (the matched holes in the hero, the port on the tool, the
   keys in the margin of section 08, the two door chips on the chain). Blue: the work travelling.
   Yellow: a person; yellow-bg: a surface a person owns. Green: done, answered, cleared. Salmon:
   the thing that does not work, which this page used to draw in cream. Pink: the vendor, in the
   main figures. Reserved rather than exclusive: two of the small aria-hidden drawings already
   use #ffdff4, once as a second person's tint in rule 02 and once as an OUT pill in step one, so
   do not give pink a third job. Do not spend a colour that is already spoken for. */

.mcp-page .ex-head .h-display{text-wrap:balance}
/* Chrome gives up on text-wrap:balance in any block that holds a forced break, and every headline
   here has one, set where the colour changes. So on a narrow screen the halves wrapped on their own
   and stranded "there.", "to." and "decision." alone on a line. The fix is in the markup rather than
   here: the last two words of every half are tied with a non-breaking space, which no width can
   separate, so a half either fits or breaks a word earlier. Dropping the breaks below a width was
   tried first and is worse: balance then re-strands the blue "A" of A door that was already there,
   which is the break Bruno asked for in the first place. */
/* The line after each figure is the story's next beat, as on buy-vs-build: a dashed stem drops from
   the figure into it, and its second sentence hands over to the section that follows. */
.mcp-page .ex-punch{position:relative;margin-top:0;padding-top:64px}
.mcp-page .ex-punch::before{content:"";position:absolute;left:50%;top:0;width:1.5px;height:44px;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
.mcp-page .ex-punch::after{content:"";position:absolute;left:50%;top:44px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#000}
.mcp-page .ex-punch__sub a{color:var(--blue);font-weight:500;text-decoration:none}
.mcp-page .ex-punch__sub a:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:4px}
.mcp-page .ex-myth p a,.mcp-page .ex-rules__body p a{color:var(--blue);font-weight:500;text-decoration:none}
.mcp-page .ex-myth p a:hover,.mcp-page .ex-rules__body p a:hover{text-decoration:underline;text-underline-offset:3px}

/* HERO: the plug and the hole. The page's first job is to say what MCP IS, and it is a shape:
   an agreed way in that every tool now exposes. So the hero draws the shape and nothing else — no
   job, no morning, no people, no money. Left, one AI with one plug and three tools whose ways in are
   three different shapes, so the cable stops short. Right, the same AI and the same three tools with
   every hole the same, and the cable reaches all three. The tools did not change and neither did the
   AI: the plug did, and that is the whole definition.
   Five heroes were cut to get here and the reasons are the useful part. (1) A façade with two
   literal doors: a drawn door is a tautology for the word door, and nothing was happening. (2) One
   tool with a person's four screens against the AI's one sentence: it drew ONE tool while the page
   is about a job that crosses two, and set up an opposition the page does not argue. (3) A two-half
   compare on `.ex-compare`: it read as Multiplayer's little brother and borrowed that page's
   salmon-and-green semantics. (4) A wire diagram with the acronym in a blue circle: a convention
   cannot be drawn, so a labelled blob asserts instead of showing — swap the word for MAGIC and the
   picture argues as well. (5) The same morning drawn twice, by hand and by one sentence: it fixed
   the missing before, but it explained an automated workflow in a business, which is not what the
   word means, and a reader who arrived not knowing what MCP is still left not knowing.
   **The rule the sixth is built on: the reader arrives holding a word, so draw the thing the word
   names.** Everything about the job, the person and the approval belongs to sections 05 and 06.
   Mechanics: each half keeps a 500 by 360 stage with `container-type:inline-size`, the cables are an
   SVG stretched over it, and everything inside is sized in `cqw`, so each half scales as one object
   and nothing is measured. */
.mcp-plug{width:100%;max-width:1080px;margin:72px auto 0;display:grid;grid-template-columns:1fr 1fr;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden;text-align:left}
.mcp-plug__half{position:relative;padding:58px 26px 24px}
.mcp-plug__half--before{border-right:1.5px solid #000;background:var(--cream)}
.mcp-plug__half .ex-compare__tag{top:18px;left:26px}
.mcp-plug__half--after .ex-compare__tag{background:var(--blue-light)}
/* Life pass, 2026-09-18, Bruno: the hero and its thumbnail read grey and empty beside the two live
   pages, whose figures are full of people and colour. Three things, and no new subject: the "with"
   half sits on the page's blue tint, the agreed shape is filled in the page's blue once it has
   arrived, and a person stands at each tool. The h1 says every tool has a door for people; the
   drawing now shows them, on the side the AI does not use. */
.mcp-plug__half--after{background:var(--ex-tint)}
.mcp-plug__half p{margin:20px 0 0;font:400 15px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.mcp-plug__stage{position:relative;width:100%;aspect-ratio:500/360;container-type:inline-size}
.mcp-plug__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* The AI is one mark and stays one mark in both halves: it is not what changed. */
.mcp-plug__ai{position:absolute;left:2%;top:51%;translate:0 -50%;display:inline-grid;place-items:center;width:11cqw;height:11cqw;border:1.5px solid #000;border-radius:50%;background:var(--blue-light)}
.mcp-plug__ai i{font:500 3.4cqw/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
/* The plug the AI carries, and the holes it is trying to enter. Ink on white is the shape itself. */
/* The plug carries its own cable, so the two move together when it tries the hole and does not fit. */
/* Salmon, not pink: salmon is this page's colour for the thing that does not work, and a plug
   stopping short of three holes it cannot fit is the page's first picture of exactly that. It
   also separates the plug from the two blue-light chips it sits between, and frees pink for the
   vendor's slide in section 03. This element appears once, in the before half only. */
.mcp-plug__plug{position:absolute;left:38.6%;top:51%;translate:0 -50%;width:9cqw;height:9cqw;border:1.5px solid #000;border-radius:9px;background:var(--salmon)}
.mcp-plug__mark{position:absolute;left:22%;top:51%;translate:0 -50%;z-index:2;display:inline-grid;place-items:center;width:13cqw;height:13cqw;border:1.5px solid #000;border-radius:9px;background:var(--blue-light)}
.mcp-plug__mark i{font:500 3.6cqw/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;letter-spacing:.04em}
/* The tools. Grey, because on these pages grey is a product somebody sold you. */
/* The tools are cards, not empty rectangles. The relay on `/multiplayer-ai` is the standard and
   the standard is content: an object drawn in line art with flat colour fills, a name, and one
   line of what the thing holds. Three grey boxes with a label taught nothing about what is on
   the other side of the hole, which was Bruno’s note on 2026-09-18. */
.mcp-plug__tool{position:absolute;left:54%;width:44%;height:26%;top:calc(6% + var(--r) * 32%);display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw 1.6cqw 1.2cqw 6.6cqw;background:var(--cream);border:1.5px solid #000;border-radius:12px;box-shadow:var(--ex-shadow)}
.mcp-obj{flex:0 0 11cqw;width:11cqw;height:auto}
.mcp-plug__t{display:flex;flex-direction:column;gap:.35cqw;min-width:0}
.mcp-plug__t b{font:500 max(14px,3cqw)/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em;color:#333}
.mcp-plug__tools-lbl{position:absolute;left:54%;top:0;translate:0 -118%;font:500 max(10.5px,2.9cqw)/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* The hole is placed by its own edges, not by a percentage translate of itself. It used to sit at
   left:0 with translate:-50% -50%, which centres it on the card's edge at any size — correct as
   layout, and wrong as paint: the slot is the one hole whose box changes size on the way to the
   square, and while a transform-ish property (rotate) is transitioning on it the engine holds the
   translate it resolved against the starting 12cqw box. So the slot drifted left through the whole
   morph and snapped right when the transition ended. Bruno saw it twice, 2026-09-18. Written as
   left and top the position is pure layout, so it can never disagree with where the box actually is. */
.mcp-plug__hole{position:absolute;left:-4.5cqw;top:calc(50% - 4.5cqw);width:9cqw;height:9cqw;background:#fff;border:1.5px solid #000}
.mcp-plug__hole--round{border-radius:50%}
.mcp-plug__hole--tri{border-radius:5px;rotate:45deg}
/* The slot's radius is written as half its own height, not as 999px. Both draw the same pill at
   rest, but 999px does not morph: the browser interpolates the specified value, so a radius running
   999px to 9px stays above half the box's height until the last few milliseconds and the shape snaps
   square at the end of the transition instead of rounding down through it. Bruno's note, 2026-09-18. */
.mcp-plug__hole--slot{left:-6cqw;top:calc(50% - 3cqw);width:12cqw;height:6cqw;border-radius:3cqw}
.mcp-plug__hole--same{border-radius:9px;background:var(--blue-light)}
.mcp-plug>figcaption:not(.ex-sr-only){grid-column:1/-1;padding:14px 26px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center}

/* HOW IT WORKS: one tool, and the two ways into it. The hero says MCP is a shape; this says what
   the shape is a way into, which is the mechanism the page rests on and was only ever in prose.
   The two routes are drawn as equals: the person's way in is not mocked and not the enemy, because
   the page never argues that clicking through screens is wrong. What it argues is that the records
   are the same either way, which is why nothing has to move and nothing has to be rebuilt.
   This replaced the nine-wires-to-one-bar figure (`.mcp-tangle`), cut on 2026-09-18: odd shapes
   becoming one agreed shape is the hero's whole argument, and running it again two screens later
   was the same claim at a smaller size. Its count survives as a clause in this section's lead.
   A figure like this was also cut as a HERO (one tool with a person's screens against the AI's one
   sentence) and neither reason applies here: that one drew ONE tool while the page is about a job
   crossing two, and section 02 is explicitly the mechanism on one tool; and it set up an opposition
   the page does not argue, which this one is drawn to avoid. */
.mcp-ways{position:relative;width:100%;max-width:1080px;margin:72px auto 0;padding:58px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);text-align:left}
/* Salmon on these pages means the state the page argues against; green or blue means the
   state it argues for. The shared tag defaults to salmon, so neutral labels were wearing the
   alarm colour by accident. A label that is neither takes cream. */
.mcp-ways__tag{top:18px;left:28px;background:var(--cream)}
.mcp-ways__stage{position:relative;width:100%;aspect-ratio:1040/420;container-type:inline-size;margin-bottom:26px}
.mcp-ways__wires{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible}
.mcp-ways__w--in{stroke:#000;stroke-width:1.5}
/* Who is at each way in. Yellow is a person on this page, blue is the AI: the page's own grammar. */
.mcp-ways__who{position:absolute;z-index:2;left:2%;display:flex;flex-direction:column;align-items:center;gap:.5cqw}
.mcp-ways__who--person{top:30.5%;translate:0 -1.7cqw}
.mcp-ways__who--ai{top:71.4%;translate:0 -1.7cqw}
.mcp-ways__who .ex-avatar{width:3.4cqw;height:3.4cqw;flex-basis:3.4cqw}
.mcp-ways__who .ex-avatar--ai::after{font-size:1.15cqw}
.mcp-ways__who b{font:500 max(12px,1.25cqw)/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
/* The tool. Grey, because on these pages grey is a product somebody sold you. */
.mcp-ways__tool{position:absolute;left:41%;right:0;top:2%;bottom:2%;padding:4.6cqw 2cqw 2cqw;background:var(--cream);border:1.5px solid #000;border-radius:12px;box-shadow:var(--ex-shadow)}
.mcp-ways__bar{position:absolute;left:0;right:0;top:0;height:3.2cqw;border-bottom:1.5px solid #000;border-radius:12px 12px 0 0;background:var(--cream)}
.mcp-ways__bar::before{content:"";position:absolute;left:1.1cqw;top:1.3cqw;width:.6cqw;height:.6cqw;border-radius:50%;background:#8a8a8a;box-shadow:1cqw 0 0 #8a8a8a,2cqw 0 0 #8a8a8a}
/* The tool's name lives in its title bar, as every window in the series does: `.ad-sheet__bar`
   carries the filename. It used to sit on the face at top:4.4cqw, which is where the screen card
   is pinned, and between 901 and about 970 the card covered 65 of its 104 pixels, so "The support
   desk" rendered as "esk". Above 980 the two cleared each other, which is why this was easy to
   miss. The bar grew from 2.2 to 3.2cqw to hold the name, and the name is centred in it by flex
   rather than by a guessed top, so it stays centred at every width. */
.mcp-ways__name{position:absolute;left:5cqw;top:0;height:3.2cqw;display:flex;align-items:center;font:500 max(11px,1.45cqw)/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;color:#333}
/* The two ways in, sitting on the tool's left edge. Same border weight, same ink: equals. */
.mcp-ways__in{position:absolute;z-index:2;left:0;translate:-50% -50%;width:25cqw;display:flex;flex-direction:column;gap:.3cqw;padding:1.2cqw 1.5cqw;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow)}
.mcp-ways__in--screen{top:30.5%;background:var(--yellow-bg)}
.mcp-ways__in--port{top:71.4%}
.mcp-ways__in b{font:500 max(14px,1.6cqw)/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.mcp-ways__in i{font-style:normal;font-size:max(12px,1.3cqw);line-height:1.3;color:#333}
.mcp-ways__in--port{background:var(--blue-light)}
/* The door holds the agreed shape itself, one line asking and one line answering: the only place
   on the page the protocol is drawn rather than defined. A label plus a sentence is a labelled
   container, which is what `/ai-and-your-data` never ships. The screen deliberately does NOT get a
   matching block: a drawn menu strip was tried and cut, because it added about 30px to the taller
   of the two cards and left them 8.8px apart at 901, one wrapped line from colliding, in exchange
   for a picture the descriptor beside it already gives in words. */
.mcp-ways__call{display:flex;flex-direction:column;gap:.4cqw;margin-top:.7cqw;padding:.7cqw .8cqw;border:1.5px solid #000;border-radius:6px;background:#fff}
.mcp-ways__cl{display:flex;align-items:baseline;gap:.55cqw;min-width:0;font:400 max(9.5px,.98cqw)/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcp-ways__cl em{flex:none;padding:.1cqw .5cqw;border-radius:3px;background:var(--blue-light);font:500 max(8.5px,.88cqw)/1.35 "Neue Montreal",system-ui,sans-serif;font-style:normal;letter-spacing:.07em;text-transform:uppercase}
.mcp-ways__cl--back em{background:var(--green-bg)}
/* The two marks. The percentages here are the wire SVG's own viewBox over 1040 by 420: the stage
   is `aspect-ratio:1040/420` and the SVG is `preserveAspectRatio="none"` across it, so a viewBox
   unit IS a percent and nothing needs measuring. Wire 0 runs x 60 to 296 at y 128; the screen card
   spans x 296 to 556, which is why the mark goes out at 28.46 and comes back at 53.46, the trick
   `.ad-wire`'s mark uses to pass behind a window. Both rest on the records card's left edge
   (right:2.4cqw plus width:38cqw leaves it at 59.6), stacked, because that is the figure's claim:
   two routes, one destination. Under reduced motion the picture is finished, one dot on the
   junction and the record already lit. */
.mcp-ways__mark{position:absolute;z-index:3;left:59.62%;top:50%;translate:-50% -50%;width:1.15cqw;height:1.15cqw;min-width:10px;min-height:10px;border:1.5px solid #000;border-radius:50%;background:var(--yellow)}
.mcp-ways__mark--ai{z-index:4;background:var(--blue)}
/* The one record both routes reach. It rests lit, because by then both have got there. */
.mcp-ways__recs li.mcp-ways__hit{border:1.5px solid #000;background:var(--yellow);box-shadow:3px 3px 0 -1px rgba(0,0,0,.1)}
/* Between 900 and 1180 the two cards are floor-bound: the 14px title and 12px descriptor stop
   scaling with the stage while the stage keeps shrinking, so the cards grow as a share of it. This
   tightening is what holds the gap between them at 24px at 901 and 28.8px at 940 rather than 8.
   Measured at 901, the first width above the restack. */
@media(max-width:1180px){
  .mcp-ways__in{padding:1cqw 1.2cqw}
  .mcp-ways__in b{font-size:max(13px,1.6cqw)}
  .mcp-ways__in i{font-size:max(11px,1.3cqw);line-height:1.25}
  .mcp-ways__call{margin-top:.5cqw;padding:.5cqw .6cqw}
  .mcp-ways__cl{gap:.4cqw;font-size:max(8.5px,.98cqw)}
  .mcp-ways__cl em{font-size:max(8px,.88cqw);padding:.1cqw .4cqw}
}
/* The records, whole. Both ways in arrive here, which is the figure's one idea. */
.mcp-ways__recs{position:absolute;z-index:2;right:2.4cqw;top:50%;translate:0 -50%;width:38cqw;padding:1.4cqw 1.6cqw;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow)}
.mcp-ways__recs__t{display:block;margin-bottom:.9cqw;font:500 max(10.5px,1.25cqw)/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#333}
.mcp-ways__recs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6cqw}
.mcp-ways__recs li{display:flex;align-items:center;gap:.8cqw;padding:.7cqw .9cqw;background:var(--cream);border:1px solid #b9b9b9;border-radius:5px;font:400 max(12px,1.3cqw)/1.25 "Neue Montreal",system-ui,sans-serif}
.mcp-ways__recs li>span:not(.ex-avatar){flex:1 1 auto;min-width:0}
.mcp-ways__cust{width:2.2cqw;height:2.2cqw;flex-basis:2.2cqw;border-color:#000;background-color:#fff}
.mcp-ways__recs em{flex:0 0 auto;padding:.3cqw .7cqw;border:1px solid #000;border-radius:999px;background:var(--green-bg);color:#2f5a1f;font:500 max(9.5px,.95cqw)/1.2 "Neue Montreal",system-ui,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.mcp-ways__recs li:last-child em{background:#fff}
.mcp-ways>figcaption:not(.ex-sr-only){margin:0 -28px;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 18px 18px}

/* The letters, set as type rather than as a figure, because the section already has one. The block
   was styled in a5f0b38 and silently deleted by 4fbf045, a hero rebuild that spliced the stylesheet
   on the string "mcp-door" and took every rule whose name merely starts with it. It shipped as bare
   browser bullets from 2026-09-17 to 2026-09-18. `check.js` does not lint CSS and nobody had
   screenshotted this part of the page. */
/* The container carries no fill: the three cards are the legend and the colour belongs to them.
   On cream the middle card (Context, cream, a product somebody sold you) was the same value as
   its own container, so two of the three words read as coloured and one read as a hole. This is
   also the page's largest single cream slab. */
.mcp-letters{max-width:1000px;margin:72px auto 0;padding:28px 30px 28px;border:1.5px solid #000;border-radius:16px;background:var(--ex-card)}
.mcp-letters__words{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mcp-letters__words li{padding:18px 18px 18px;border:1.5px solid #000;border-radius:12px;background:#fff}
/* The three cards are the page's legend, not decoration. Each word is painted in the colour this
   page already uses for the thing it names, and the reader has just seen all three in the hero: the
   AI's tint, the grey of a product somebody sold you, and the blue of the mark on the cable. It was
   the only element on the page carrying no colour at all, measured at 0.17 percent painted against
   the chain's 30 and the job card's 10. */
.mcp-letters__words li.mcp-letters__w--ai{background:var(--ex-tint)}
.mcp-letters__words li.mcp-letters__w--bought{background:var(--cream);border-color:#000}
.mcp-letters__words li.mcp-letters__w--shape{background:var(--blue-light)}

.mcp-letters__words b{display:block;margin-bottom:8px;font:500 23px/1.1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.025em}
/* The description sits on three different fills now, and --muted on --blue-light is 3.9:1. The
   page's own colour for secondary text on a tinted or grey surface is #333, which is what the
   tool cards use; on the three legend fills it is 8.9, 8.9 and 7.3:1. */
.mcp-letters__words span{display:block;font-size:15px;line-height:1.45;color:#333}
/* OVER TIME: the same chat window read as a table, two years apart. The section's claim is growth
   nobody decided on, so the figure has to travel: it starts at the top on the day the prompt was one
   sentence and two doors, and ends at the bottom on today, eight lines and nine doors, with every
   line and every door that arrived in between on its own row. The previous version drew the finished
   state only, nine doors set around a window and a block of grey lines labelled "the prompt, now",
   which was a photograph of the end and never showed the accretion that is the argument. Bruno's
   note on 2026-09-18: it does not leave anywhere and does not arrive anywhere.
   The doors are counted, not scattered: nine marks per row, filled up to that row's count, so the
   last column fills like a gauge. The seven tools named here are common nouns and stay unbranded,
   as everywhere else on this page. The empty slot under the table is the payoff and is unchanged. */
.mcp-doors{max-width:1000px;margin:72px auto 0;padding:58px 28px 0;position:relative;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.mcp-doors__tag{top:18px;left:28px}
.mcp-doors__window{position:relative;padding:44px 22px 22px;border:1.5px solid #000;border-radius:14px;background:#fff;box-shadow:var(--ex-shadow)}
.mcp-doors__bar{position:absolute;left:0;right:0;top:0;height:26px;border-bottom:1.5px solid #000;border-radius:13px 13px 0 0;background:var(--cream);display:flex;align-items:center;gap:6px;padding-left:12px}
.mcp-doors__bar i{width:6px;height:6px;border-radius:50%;background:#000}
/* One grid shared by the header and every row, so the four columns line up down the whole table. */
/* OVER TIME. This was an eight-row four-column table: a When column, the prompt line, the tool it
   needed, and a count drawn three ways at once (nine door pips, a printed number, and the row's own
   position). One number encoded three times, and the tool column only repeated the tool the prompt
   line already names. It is one column now: the prompt grows a line at a time, and each line carries
   in the margin the door it needed. The margin filling from two to nine IS the count, so the pips,
   the numbers and the whole third column are gone. */
.mcp-doors__hd,.mcp-doors__rows li{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:18px}
.mcp-doors__hd{padding:0 10px 8px;border-bottom:1.5px solid #000;font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mcp-doors__rows{list-style:none;margin:0;padding:0}
.mcp-doors__rows li{position:relative;padding:11px 10px}
/* The doors stack in the margin, so the column of them is the count. */
.mcp-doors__keys{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px;padding-top:2px}
.mcp-doors__keys i{width:10px;height:15px;border:1.5px solid #000;border-radius:3px 3px 0 0;background:var(--blue-light)}
.mcp-doors__rows li.is-first .mcp-doors__keys i{background:var(--green-bg)}
.mcp-doors__sent{margin:0;padding:9px 12px;border:1.5px solid #000;border-radius:9px;background:var(--green-bg);font:400 13.5px/1.4 "Neue Montreal",system-ui,sans-serif}
.mcp-doors__l{display:block;min-width:0}
.mcp-doors__line{display:block;font:400 13px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
/* A line the reader is not meant to read: the tool it opened, then bars for the rest of the
   instruction. Six of the seven added lines are drawn this way, because the point of the run is
   the margin filling with doors, not seven more sentences. min-height holds a barred row to the
   same height as the one added line that kept its words. */
.mcp-doors__line--part{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:17.55px}
.mcp-doors__tool{font:500 13px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.mcp-doors__now{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;padding:14px 10px 0;border-top:1.5px solid #000}
.mcp-doors__now span{font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:right}
.mcp-doors__now b{font:500 15px/1.1 "Neue Montreal",system-ui,sans-serif}
/* The payoff of the whole section, and it was the quietest thing in the figure. Salmon, because
   nothing being recorded is the thing that does not work; the dashed #b9b9b9 edge stays, because
   the slot is also genuinely empty and that is the vocabulary for it. #7a3a14 is the matched ink
   (6.53:1 on salmon-bg); --muted would have been 4.42:1. */
.mcp-doors__slot{margin-top:22px;padding:16px 18px 18px;border:1.5px dashed #b9b9b9;border-radius:12px;background:var(--salmon-bg);text-align:center}
.mcp-doors__empty{display:block;margin-top:8px;font:500 16px/1.3 "Neue Montreal",system-ui,sans-serif;color:#7a3a14}
.mcp-doors>figcaption:not(.ex-sr-only){margin:26px -28px 0;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}

/* WHY IT HAPPENS: the vendor slide, and the question it was never going to answer. The question is
   deliberately not on the slide: it sits below it in ink on the page, because it is the reader's. */
/* Pink is the vendor: this slide is the one object on the page that belongs to somebody selling
   to you, and drawing it in the page's own cream let it pass as the reader's. --pink, not
   --pink-bg: site.css redefines --pink-bg near the stat tiles to the dustier #f5d2d6, where
   --muted at 11px is only 4.17:1. On --pink it is 4.74:1 and the kicker needs no ink change. */

/* The three tiles whose sales line is bars instead of words. min-height matches one line of the
   small copy above (12.5px at 1.3), so all four tiles keep the same two rows and the same height. */

/* The reader's own note, in the person colour's light tier, against the vendor's pink above it.
   That opposition is the figure's argument and it was being carried by the words alone. */

/* WHAT IT COSTS: the request form beside the job it would have been for. The idea is an asymmetry
   between two objects, not a count: buy-vs-build already counts things in blocks, and two tallies
   in one series is the collision that gets caught. */
.mcp-case{max-width:1000px;margin:72px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:30px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.mcp-case__form{position:relative;padding:22px 22px 26px;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow)}
.mcp-case__head{display:block;margin-bottom:18px;padding-bottom:12px;border-bottom:1.5px solid #000;font:500 15px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.mcp-case__fields{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.mcp-case__fields li{display:flex;flex-direction:column;gap:6px}
.mcp-case__fields b{font:500 11px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mcp-case__fields i{display:block;height:1.5px;background:#b9b9b9}
.mcp-case__fields i:nth-of-type(2){width:64%}
/* The stamp is the series' stamp: an outline in the salmon ink rather than a filled salmon block,
   which is how `.ad-stamp` marks WRONG NUMBER and ONE NUMBER on `/ai-and-your-data` (2px #b4531d
   on white, .14em tracking). A filled block was the only place on this page where salmon carried
   weight rather than marking a state. */
.mcp-case__stamp{position:absolute;right:-16px;bottom:-16px;padding:6px 13px;border:2px solid #b4531d;border-radius:6px;background:#fff;color:#b4531d;font:500 12px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-7deg)}
.mcp-case__job{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mcp-case__arrow{display:block;width:100%;height:1.5px;background:repeating-linear-gradient(to right,rgba(0,0,0,.4) 0 4px,transparent 4px 9px)}
.mcp-case__chip{width:100%;padding:18px 20px 20px;border:1.5px solid #000;border-radius:12px;background:var(--yellow);box-shadow:var(--ex-shadow)}
.mcp-case__chip b{display:block;margin:8px 0 12px;font:500 21px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.mcp-case__time{display:flex;align-items:baseline;gap:8px;font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif}
.mcp-case__time i{font-style:normal;font-size:13px;color:#333}
/* The arithmetic, on a receipt line, in the mono the series uses for anything the reader is meant
   to be able to check, under the dashed rule `.ad-look__answer small` uses for the same job. It is
   two parts rather than one string because one string cannot fit the chip on a phone: as a wrapping
   flex row it is one line at 1100 and above and breaks cleanly into sum-then-total below, instead
   of breaking in the middle of the multiplication. */
.mcp-case__sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin-top:12px;padding-top:11px;border-top:1.5px dashed rgba(0,0,0,.35);font:400 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#333;font-variant-numeric:tabular-nums}
.mcp-case__sum i{font-style:normal;white-space:nowrap}
.mcp-case__sum em{margin-left:auto;font-style:normal;color:#000;white-space:nowrap}
.mcp-case>figcaption:not(.ex-sr-only){grid-column:1/-1;margin:30px -28px 0;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}

/* The line between the two figures in What it is for. Section 05 was absorbed here on
   2026-09-18, so the section carries two drawings: why the job never became a project, then
   how you write one down. This is the hinge between them and it is set as a lead, not as a
   punch, because the section has not finished its argument yet. */

/* THE FIX, PART ONE: one job written as two sides, with the routes underneath it. The routes are
   last on purpose, and three of the four are greyed, because the figure's argument is that the
   route is the smallest decision on the card. Nothing here is typeable. */
.mcp-job{position:relative;max-width:1000px;margin:72px auto 0;padding:58px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.mcp-job__tag{top:18px;left:28px;background:var(--green-bg)}
.mcp-job__card{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid #000;border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--ex-shadow)}
.mcp-job__side{padding:20px 22px 24px}
.mcp-job__side--in{border-right:1.5px solid #000;background:var(--yellow-bg)}
.mcp-job__side ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mcp-job__side li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.45}
.mcp-job__side li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:#000}
.mcp-job__side--out li::before{background:var(--blue)}
.mcp-job__who{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1.5px solid #000;background:var(--yellow)}
.mcp-job__who b{font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif}
.mcp-job__who span:last-child{font-size:13.5px;color:#333}
.mcp-job__routes{margin-top:26px;padding:18px 20px 20px;border:1.5px solid #000;border-radius:14px;background:var(--cream)}
.mcp-job__routes ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.mcp-job__routes li{padding:8px 15px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 14.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.mcp-job__routes li.is-off{border-color:#b9b9b9;background:var(--cream);color:var(--muted)}
.mcp-job__routes li.is-on{background:var(--blue-light)}
.mcp-job>figcaption:not(.ex-sr-only){margin:26px -28px 0;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}

/* THE FIX, PART TWO: the chain. The centre of this picture is a held list with somebody reading it,
   which is what keeps it off multiplayer's relay and its six-step belt: no rail, no numbered steps,
   nothing travelling. */
.mcp-chain{max-width:1080px;margin:72px auto 0;padding:28px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.mcp-chain__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:.8fr 1.25fr .8fr;gap:22px;align-items:stretch}
.mcp-chain__stop{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;border:1.5px solid #000;border-radius:14px;background:#fff}
.mcp-chain__stop--ai{background:var(--ex-tint)}
.mcp-chain__stop--out{background:var(--green-bg)}
.mcp-chain__stop--out .mcp-chain__jobs li{background:#fff}
.mcp-chain__stop--out .mcp-chain__left{color:#2f5a1f}
.mcp-chain__stop b{font:500 17px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.mcp-chain__stop:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:22px;height:1.5px;background:repeating-linear-gradient(to right,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
/* The messages are the raw input, drawn as the customers sent them: grey, because they arrive through
   a product somebody sold you, and each with the person who wrote it. The AI's list in the middle is
   what the reader should recognise as those five, read and drafted. */
.mcp-chain__msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mcp-chain__msgs li{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1.5px solid #000;border-radius:9px;background:var(--cream);font-size:12.5px;line-height:1.3;color:#333}
.mcp-chain__cust{width:20px;height:20px;flex-basis:20px;border-color:#000;background-color:#fff}
/* Every door on this page is blue-light: the matched holes in the hero, the port on the tool,
   the nine keys in the margin of section 08, MCP lit on the routes card. These two were cream,
   which is the colour of the product the door is cut into, so the one running object on the page
   changed colour every time it appeared. */
.mcp-chain__door{display:inline-block;align-self:flex-start;padding:6px 12px;border:1.5px solid #000;border-radius:999px;background:var(--blue-light);font:500 11.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.mcp-chain__list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mcp-chain__list li{position:relative;display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1.5px solid #000;border-radius:9px;background:#fff;font-size:14.5px;line-height:1.35}
.mcp-chain__list i{position:relative;flex:0 0 18px;width:18px;height:18px;margin-top:1px;border:1.5px solid #000;border-radius:5px;background:#fff}
.mcp-chain__list li.is-yes i{background:var(--green-bg)}
.mcp-chain__list li.is-yes i::after{content:"";position:absolute;left:4px;top:6px;width:7px;height:3.5px;border-left:1.5px solid #000;border-bottom:1.5px solid #000;transform:rotate(-45deg)}
.mcp-chain__list li.is-no{border-color:#b9b9b9;background:var(--cream);color:var(--muted)}
.mcp-chain__list li.is-no i{border-color:#b9b9b9}
.mcp-chain__who{display:flex;align-items:center;gap:9px;margin-top:2px;font-size:13.5px;color:var(--muted)}
/* The three jobs, named: the same three the lead ticked, now as tickets in the tracker. */
.mcp-chain__jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mcp-chain__jobs li{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1.5px solid #000;border-radius:9px;font:500 12.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.005em}
.mcp-chain__jobs i{flex:0 0 14px;width:14px;height:14px;border:1.5px solid #000;border-radius:4px;background:var(--green-bg)}
.mcp-chain__left{font-size:13.5px;line-height:1.4;color:var(--muted)}
/* The mark that carries the work from one stop to the next, riding the dashed connector the stop
   already draws with its ::after. It rests at the far end, on the next stop's edge, so the rest
   state and the reduced-motion state both read as arrived rather than as a dot that vanished. */
.mcp-chain__mark{position:absolute;z-index:2;left:calc(100% + 22px);top:50%;translate:-50% -50%;width:11px;height:11px;border:1.5px solid #000;border-radius:50%;background:var(--blue)}
.mcp-chain__stop:last-child .mcp-chain__mark{display:none}
.mcp-chain>figcaption:not(.ex-sr-only){margin:26px -28px 0;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 16px 16px}


/* WHAT YOU GOT: the hub. One person and their AI drawn together, and around them the tools their
   AI can now reach, each through its own door. Justin's brief (2026-09-21): as you add more tools you
   get more context, so a hub of human and AI with tools switching on and off around it, context
   lighting up as the connector. The ring around the hub is the context: one segment per tool, lit in
   that tool's colour while its door is open, so the ring filling and emptying is the count. This
   replaced the before/now boundary figure, which said the same sentence in grey.
   Geometry: a fixed-aspect stage (1080 by 560) so the connector SVG and the HTML tools share one
   coordinate frame; tools sit on an ellipse (a 400, b 205) at 45-degree steps offset by 22.5, which
   leaves the top clear for the context label. Each tool is positioned by its tile's centre via --x/--y,
   with its name on the side away from the hub so the connector never crosses it. The hub circle is
   fixed px and the ring is in stage units, so between 900 and 1080 the ring closes on the hub by a
   few px; measured clear down to 900. Below 900 the connectors hide, a second copy of the ring sits
   inside the core, and the tools drop into a two-column grid. */
.mcp-hub{position:relative;width:100%;max-width:1080px;margin:72px auto 0;padding:58px 0 0;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden;text-align:left}
.mcp-hub__tag{top:18px;left:28px;background:var(--cream)}
.mcp-hub__stage{position:relative;aspect-ratio:1080/560;border-top:1.5px solid #000}
.mcp-hub__wires{position:absolute;inset:0;width:100%;height:100%;display:block}
.mcp-hub__off{stroke:rgba(0,0,0,.3);stroke-dasharray:3 5}
.mcp-hub__on{stroke:#000;stroke-dasharray:1;stroke-dashoffset:0}
.mcp-hub__arc{opacity:1}
.mcp-hub__rider{stroke:#000;stroke-width:1.5;offset-distance:100%;offset-rotate:0deg}
.mcp-hub__kicker{position:absolute;left:50%;top:26px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;white-space:nowrap}
.mcp-hub__kicker .ex-kicker{color:#000}
.mcp-hub__kicker small{font-size:11.5px;line-height:1.3;color:#333}
.mcp-hub__core{position:absolute;left:50%;top:50%;width:12.963%;aspect-ratio:1;translate:-50% -50%}
.mcp-hub__ringm{display:none}
.mcp-hub__me{position:relative;z-index:1;width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1.5px solid #000;border-radius:50%;background:var(--ex-card);box-shadow:var(--ex-shadow);text-align:center;isolation:isolate}
/* The hub greens with context: eight translucent green layers, one per tool, each on its tool's clock. Eight at .2 over the card fill is 83% green, so a full ring is a green hub and an empty one is cream. */
.mcp-hub__ctx{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:-1}
.mcp-hub__ctx i{position:absolute;inset:0;background:var(--green-bg);opacity:.2}
.mcp-hub__pair{display:flex;gap:6px}
.mcp-hub__me b{font:500 12.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
/* A tool is positioned by its tile's centre. The transform moves the wrapper so that centre lands
   on (--x, --y) whichever side the name sits. */
.mcp-hub__tool{position:absolute;left:calc(var(--x) / 1080 * 100%);top:calc(var(--y) / 560 * 100%);display:flex;align-items:center;gap:9px}
.mcp-hub__tool--e{flex-direction:row;transform:translate(-25px,-50%)}
.mcp-hub__tool--w{flex-direction:row-reverse;transform:translate(calc(-100% + 25px),-50%)}
.mcp-hub__tool--n{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 25px))}
.mcp-hub__tool--s{flex-direction:column;transform:translate(-50%,-25px)}
.mcp-hub__tool--n .mcp-hub__name,.mcp-hub__tool--s .mcp-hub__name{text-align:center}
.mcp-hub__tile{position:relative;display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;border:1.5px solid #000;border-radius:12px;background:#fff;box-shadow:3px 3px 0 -1px rgba(0,0,0,.08);overflow:hidden}
.mcp-hub__tile i{position:absolute;inset:0;background:var(--c)}
.mcp-hub__tile svg{position:relative;width:26px;height:26px}
.mcp-hub__name{font:500 12.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.mcp-hub__tool--e .mcp-hub__name,.mcp-hub__tool--w .mcp-hub__name{white-space:normal;max-width:96px}
@media(max-width:1000px){.mcp-hub__kicker small{display:none}}
.mcp-hub>figcaption:not(.ex-sr-only){padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center}

/* OVER TIME: one window by the ninth door. Deliberately not the same window twice: the section's
   one idea is what nine doors looks like, and the two-door version lives in the lead. */

@keyframes mcp-draw{to{stroke-dashoffset:0}}
@keyframes mcp-plug-in{0%{opacity:0;scale:.6;background:#fff}40%{opacity:1;scale:1;background:#fff}70%{opacity:1;scale:1;background:#fff}100%{opacity:1;scale:1;background:var(--salmon)}}
@keyframes mcp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes mcp-stamp{from{opacity:0;transform:rotate(-7deg) scale(1.3)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
@keyframes mcp-slot-ask{0%,100%{border-color:#b9b9b9;background:var(--salmon-bg)}40%{border-color:#000;background:#fff}}
/* The two rides on How it works. Each one goes out along its wire, passes behind the card that is
   its way in, comes out the far side and lands on the records. Identical but for the y it starts
   at, which is the figure's whole argument. The three keyframes inside the last leg are the
   in-wire's own cubic sampled at t = .33, .5 and .67, because a straight chord from 53.46 to 59.62
   cuts that corner; with them the mark stays within 4.6 viewBox units of the drawn wire at every
   sampled instant while it is visible, which is inside the mark's own radius. Verified by driving
   the timeline and sampling the paths with getPointAtLength, not by eye. */
@keyframes mcp-ways-ride-p{0%{left:5.77%;top:30.48%;opacity:0}7%{opacity:1}38%{left:28.46%;top:30.48%;opacity:1}44%{left:28.46%;top:30.48%;opacity:0}56%{left:53.46%;top:30.48%;opacity:0}62%{left:53.46%;top:30.48%;opacity:1}74.5%{left:55.98%;top:35.45%}81%{left:56.9%;top:40.24%}87.5%{left:57.74%;top:45.03%}100%{left:59.62%;top:50%;opacity:1}}
@keyframes mcp-ways-ride-a{0%{left:5.77%;top:71.43%;opacity:0}7%{opacity:1}38%{left:28.46%;top:71.43%;opacity:1}44%{left:28.46%;top:71.43%;opacity:0}56%{left:53.46%;top:71.43%;opacity:0}62%{left:53.46%;top:71.43%;opacity:1}74.5%{left:55.98%;top:65.97%}81%{left:56.9%;top:60.71%}87.5%{left:57.74%;top:55.46%}100%{left:59.62%;top:50%;opacity:1}}
@keyframes mcp-ways-hit{from{border:1px solid #b9b9b9;background:var(--cream);box-shadow:none}to{border:1.5px solid #000;background:var(--yellow);box-shadow:3px 3px 0 -1px rgba(0,0,0,.1)}}
/* The chain. The mark leaves the stop it has finished with and arrives at the next one. */
@keyframes mcp-chain-ride{0%{left:100%;opacity:0}14%{opacity:1}100%{left:calc(100% + 22px);opacity:1}}
@keyframes mcp-chain-ride-v{0%{top:100%;opacity:0}14%{opacity:1}100%{top:calc(100% + 34px);opacity:1}}
/* The tick is the figure's hinge: three of five are chosen, by a person, and only then does
   anything open. It was drawn and never happened. */
@keyframes mcp-tick-box{from{background:#fff}to{background:var(--green-bg)}}
@keyframes mcp-tick{from{opacity:0;transform:rotate(-45deg) scale(.3)}to{opacity:1;transform:rotate(-45deg) scale(1)}}
@keyframes mcp-hub-line{0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.5,0,.25,1)}9%,68%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.25,1)}75%,100%{stroke-dashoffset:1}}
@keyframes mcp-hub-fill{0%,8%{opacity:0;animation-timing-function:cubic-bezier(.2,0,.2,1)}12%,68%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}74%,100%{opacity:0}}
@keyframes mcp-hub-ctx{0%,8%{opacity:0;animation-timing-function:cubic-bezier(.2,0,.2,1)}12%,68%{opacity:.2;animation-timing-function:cubic-bezier(.4,0,.6,1)}74%,100%{opacity:0}}
@keyframes mcp-hub-arc{0%,8%{opacity:.28;animation-timing-function:cubic-bezier(.2,0,.2,1)}12%,68%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}74%,100%{opacity:.28}}
@keyframes mcp-hub-ride{0%{offset-distance:0%;opacity:0;animation-timing-function:cubic-bezier(.5,0,.25,1)}1.5%{opacity:1}9%,68%{offset-distance:100%;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}74%,100%{offset-distance:100%;opacity:0}}

@media(prefers-reduced-motion:no-preference){
  /* Hero. Left, the three odd holes land one at a time, because each one was its own shape and its
     own project. Right, the mark arrives and the three cables draw into holes that already match. */
  .ex-js .mcp-plug .mcp-plug__hole{opacity:0}
  .ex-js .mcp-plug .mcp-plug__mark{opacity:0;transition:opacity .5s var(--ease)}
  .ex-js .mcp-plug .mcp-plug__plug{opacity:0}
  .ex-js .mcp-plug .mcp-plug__w{stroke-dasharray:1;stroke-dashoffset:1}
  .mcp-plug.is-seen .mcp-plug__hole{animation:ex-arrive .42s var(--ease) calc(.3s + var(--r) * .3s) both}
  /* The plug arrives from the AI’s side, travels toward the hole, and stops short. Once. The
     stillness after that is the point; a loop here read as the square bumping into things. */
  /* Left: the cable draws from the AI toward the hole, the plug appears at its tip, tries, and
     turns the cost colour. Three things in order, not one object sliding. */
  .mcp-plug.is-seen .mcp-plug__w--cable{animation:mcp-draw .7s var(--ease) 1.2s both}
  .mcp-plug.is-seen .mcp-plug__plug{animation:mcp-plug-in 1.4s cubic-bezier(.2,.7,.2,1) 1.9s both}
  .mcp-plug.is-seen .mcp-plug__w--in{animation:mcp-draw .6s var(--ease) 1.2s both}
  .mcp-plug.is-seen .mcp-plug__mark{opacity:1;transition-delay:1.7s}
  /* The three ways in start as the left panel's shapes. The mark pulses once, and they become its shape. */
  .ex-js .mcp-plug .from-round,.ex-js .mcp-plug .from-tri,.ex-js .mcp-plug .from-slot{background:#fff}
  .ex-js .mcp-plug .from-round{border-radius:50%}
  .ex-js .mcp-plug .from-tri{border-radius:5px;rotate:45deg}
  .ex-js .mcp-plug .from-slot{left:-6cqw;top:calc(50% - 3cqw);width:12cqw;height:6cqw;border-radius:3cqw}
  .mcp-plug.is-seen .from-round,.mcp-plug.is-seen .from-tri,.mcp-plug.is-seen .from-slot{left:-4.5cqw;top:calc(50% - 4.5cqw);width:9cqw;height:9cqw;border-radius:9px;rotate:0deg;background:var(--blue-light);transition:left .5s var(--ease) 2.2s,top .5s var(--ease) 2.2s,width .5s var(--ease) 2.2s,height .5s var(--ease) 2.2s,border-radius .5s var(--ease) 2.2s,rotate .5s var(--ease) 2.2s,background .5s var(--ease) 2.2s}
  .mcp-plug.is-seen .mcp-plug__w:not(.mcp-plug__w--in):not(.mcp-plug__w--cable){animation:mcp-draw .55s var(--ease) calc(2.85s + (var(--i) - 1) * .24s) both}
  .mcp-plug.is-seen .mcp-plug__mark{animation:mcp-pulse .7s var(--ease) 2.3s 1,ex-breathe 4.6s ease-in-out 3.8s infinite}
  /* How it works, rebuilt as one sequence rather than four reveals, on the model of `.ad-look`:
     a route is drawn, a mark travels it, and something at the far end changes because the mark got
     there. The person's route runs to completion before the AI's begins, so the reader reads two
     journeys rather than one diagram assembling. The payoff is the middle record, which both
     routes reach and which rests lit. Ends at 5.0s, inside the series' range. */
  .ex-js .mcp-ways .mcp-ways__who,.ex-js .mcp-ways .mcp-ways__in,.ex-js .mcp-ways .mcp-ways__recs{opacity:0;transition:opacity .5s var(--ease)}
  .ex-js .mcp-ways .mcp-ways__w{stroke-dasharray:1;stroke-dashoffset:1}
  .ex-js .mcp-ways .mcp-ways__mark{opacity:0}
  .ex-js .mcp-ways .mcp-ways__recs li.mcp-ways__hit{border:1px solid #b9b9b9;background:var(--cream);box-shadow:none}
  .mcp-ways.is-seen .mcp-ways__who--person,.mcp-ways.is-seen .mcp-ways__in--screen{opacity:1;transition-delay:.25s}
  .mcp-ways.is-seen .mcp-ways__recs{opacity:1;transition-delay:.55s}
  .mcp-ways.is-seen .mcp-ways__w{animation:mcp-draw .5s var(--ease) .85s both}
  .mcp-ways.is-seen .mcp-ways__w--in{animation-delay:1.45s}
  .mcp-ways.is-seen .mcp-ways__mark--person{animation:mcp-ways-ride-p 1.4s cubic-bezier(.45,0,.55,1) 1.25s both}
  .mcp-ways.is-seen .mcp-ways__recs li.mcp-ways__hit{animation:mcp-ways-hit .45s var(--ease) 2.6s both}
  .mcp-ways.is-seen .mcp-ways__who--ai,.mcp-ways.is-seen .mcp-ways__in--port{opacity:1;transition-delay:2.8s}
  .mcp-ways.is-seen .mcp-ways__w[style*="--i:1"]{animation-delay:3.2s}
  .mcp-ways.is-seen .mcp-ways__w[style*="--i:3"]{animation-delay:3.8s}
  .mcp-ways.is-seen .mcp-ways__mark--ai{animation:mcp-ways-ride-a 1.4s cubic-bezier(.45,0,.55,1) 3.6s both}
  /* Why: the ticks land, then the question arrives under the slide. */
  /* What it costs: the form fills field by field, then the job lands beside it. */
  .ex-js .mcp-case .mcp-case__fields li{opacity:0}
  .ex-js .mcp-case .mcp-case__chip{opacity:0;transition:opacity .55s var(--ease)}
  .ex-js .mcp-case .mcp-case__stamp{opacity:0;transform:rotate(-7deg) scale(1.3)}
  .ex-js .mcp-case .mcp-case__sum{opacity:0}
  .mcp-case.is-seen .mcp-case__fields li{animation:ex-arrive .4s var(--ease) calc(.2s + var(--i) * .13s) both}
  /* The stamp lands, it does not fade in: it is a stamp. Same pop as `.ad-stamp`. */
  .mcp-case.is-seen .mcp-case__stamp{animation:mcp-stamp .45s cubic-bezier(.2,.9,.3,1.2) 1.2s both}
  .mcp-case.is-seen .mcp-case__chip{opacity:1;transition-delay:1.5s}
  .mcp-case.is-seen .mcp-case__sum{animation:ex-arrive .45s var(--ease) 2.15s both}
  /* The fix, part one: both sides fill, then the routes appear and three of them grey out. */
  .ex-js .mcp-job .mcp-job__side li{opacity:0}
  .ex-js .mcp-job .mcp-job__routes{opacity:0;transition:opacity .6s var(--ease)}
  .mcp-job.is-seen .mcp-job__side li{animation:ex-arrive .4s var(--ease) calc(.2s + var(--i) * .16s) both}
  .mcp-job.is-seen .mcp-job__routes{opacity:1;transition-delay:1.2s}
  /* The fix, part two. This is the page's centrepiece and the one figure whose idea IS a sequence:
     five come in, a person picks three, and only then does anything open. It used to be three
     staggered fades, which showed the finished state arriving rather than the work happening. Now
     the mark carries the work across each connector, the three ticks land one at a time AFTER the
     support lead turns up, and the jobs open only once the second mark has arrived. The gap between
     the last tick and the first job opening is the figure's whole argument. Ends at 5.42s. */
  .ex-js .mcp-chain .mcp-chain__msgs li,.ex-js .mcp-chain .mcp-chain__list li,.ex-js .mcp-chain .mcp-chain__jobs li{opacity:0}
  .ex-js .mcp-chain .mcp-chain__who{opacity:0}
  .ex-js .mcp-chain .mcp-chain__mark{opacity:0}
  .ex-js .mcp-chain .mcp-chain__list li.is-yes i{background:#fff}
  .ex-js .mcp-chain .mcp-chain__list li.is-yes i::after{opacity:0}
  .mcp-chain.is-seen .mcp-chain__msgs li{animation:ex-arrive .4s var(--ease) calc(.15s + var(--d) * .12s) both}
  .mcp-chain.is-seen .mcp-chain__stop:first-child .mcp-chain__mark{animation:mcp-chain-ride .85s cubic-bezier(.45,0,.55,1) 1.05s both}
  .mcp-chain.is-seen .mcp-chain__list li{animation:ex-arrive .4s var(--ease) calc(1.7s + var(--d) * .16s) both}
  .mcp-chain.is-seen .mcp-chain__who{animation:ex-arrive .45s var(--ease) 2.6s both}
  .mcp-chain.is-seen .mcp-chain__list li.is-yes i{animation:mcp-tick-box .3s var(--ease) both}
  .mcp-chain.is-seen .mcp-chain__list li.is-yes i::after{animation:mcp-tick .3s cubic-bezier(.2,.9,.3,1.4) both}
  .mcp-chain.is-seen .mcp-chain__list li:nth-child(1) i,.mcp-chain.is-seen .mcp-chain__list li:nth-child(1) i::after{animation-delay:3s}
  .mcp-chain.is-seen .mcp-chain__list li:nth-child(2) i,.mcp-chain.is-seen .mcp-chain__list li:nth-child(2) i::after{animation-delay:3.25s}
  .mcp-chain.is-seen .mcp-chain__list li:nth-child(4) i,.mcp-chain.is-seen .mcp-chain__list li:nth-child(4) i::after{animation-delay:3.5s}
  .mcp-chain.is-seen .mcp-chain__stop--ai .mcp-chain__mark{animation:mcp-chain-ride .85s cubic-bezier(.45,0,.55,1) 3.95s both}
  .mcp-chain.is-seen .mcp-chain__jobs li{animation:ex-arrive .4s var(--ease) calc(4.7s + var(--d) * .16s) both}
  /* What you got: eight doors on one 20s clock, 1.6s apart, so they open in order round the circle,
     close in order, and two or three are shut at any moment. Each tool's five parts share the clock
     and ease rather than step: the rider leaves the tile as the connector draws toward the hub over
     1.8s, the fill, the ring segment and the hub's green layer breathe in over 0.8s as it arrives,
     and on closing they breathe out while the connector retracts toward the tool. Reduced motion, and
     the page before the reveal, show every door open. */
  .ex-js .mcp-hub:not(.is-seen) .mcp-hub__on{stroke-dashoffset:1}
  .ex-js .mcp-hub:not(.is-seen) .mcp-hub__tile i,.ex-js .mcp-hub:not(.is-seen) .mcp-hub__rider,.ex-js .mcp-hub:not(.is-seen) .mcp-hub__ctx i{opacity:0}
  .ex-js .mcp-hub:not(.is-seen) .mcp-hub__arc{opacity:.28}
  .mcp-hub.is-seen .mcp-hub__on{animation:mcp-hub-line 20s linear calc(.4s + var(--i) * 1.6s) infinite both}
  .mcp-hub.is-seen .mcp-hub__tile i{animation:mcp-hub-fill 20s linear calc(.4s + var(--i) * 1.6s) infinite both}
  .mcp-hub.is-seen .mcp-hub__ctx i{animation:mcp-hub-ctx 20s linear calc(.4s + var(--i) * 1.6s) infinite both}
  .mcp-hub.is-seen .mcp-hub__arc{animation:mcp-hub-arc 20s linear calc(.4s + var(--i) * 1.6s) infinite both}
  .mcp-hub.is-seen .mcp-hub__rider{animation:mcp-hub-ride 20s linear calc(.4s + var(--i) * 1.6s) infinite both}
  /* Over time: doors three to nine turn up on a stagger, and the slot stays empty. */
  .ex-js .mcp-letters .mcp-letters__words li{opacity:0}
  .mcp-letters.is-seen .mcp-letters__words li{animation:ex-arrive .42s var(--ease) calc(.15s + var(--i) * .16s) both}
  /* Over time. The table fills a row at a time, top to bottom, so the eye travels from the day the
     prompt was one line to today. Then the slot where the decisions would be kept is asked, once,
     and stays empty. */
  .ex-js .mcp-doors .mcp-doors__rows li:not(.is-first){opacity:0}
  .mcp-doors.is-seen .mcp-doors__rows li:not(.is-first){animation:ex-arrive .38s var(--ease) calc(.5s + (var(--i) - 1) * .26s) both}
  .mcp-doors.is-seen .mcp-doors__slot{animation:mcp-slot-ask 1.4s var(--ease) 2.9s 1}
  /* The closing drawing keeps one quiet loop, as on the other explainers. */
}

/* NEXT STEP: the closing drawing is Multiplayer's rail and tiles, brought over as built and given
   this page's subjects: the person, their window with the AI in it, the two tools with a door each,
   and the person who approves. The rail carries a rider, the chip lands and breathes, the cursor
   nudges. Rules and keyframes are the ones in multiplayer.css, scoped to this page's figure. */
.mcp-cta__art .ex-cta__tile{fill:var(--ex-tint);stroke:#000;transition:fill .6s var(--ease) .5s}
.mcp-cta__art .ex-cta__chip,.mcp-cta__art .ex-cta__cursor{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.34,1.4,.64,1) .4s,opacity .4s var(--ease) .4s}
.mcp-cta__art .ex-cta__rider{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .mcp-cta__art:not(.is-seen) .ex-cta__tile{fill:#fff}
  .mcp-cta__art:not(.is-seen) .ex-cta__chip{transform:translateY(-30px) scale(.7);opacity:0}
  .mcp-cta__art:not(.is-seen) .ex-cta__cursor{transform:translate(26px,-30px);opacity:0}
  .mcp-cta__art.is-seen .ex-cta__rider{animation:ex-cta-ride 7s cubic-bezier(.45,0,.55,1) 1.4s infinite}
  .mcp-cta__art.is-seen .ex-cta__chip{animation:ex-breathe 4.5s ease-in-out 1.4s infinite}
  .mcp-cta__art.is-seen .ex-cta__cursor{animation:ex-cta-nudge 7s ease-in-out 1.4s infinite}
}
@keyframes ex-cta-ride{0%{transform:translateX(0);opacity:0}6%{opacity:1}80%{transform:translateX(414px);opacity:1}88%,100%{transform:translateX(414px);opacity:0}}
@keyframes ex-cta-nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-2px,2px)}}

@media(max-width:900px){
  .mcp-plug{grid-template-columns:1fr}
  .mcp-plug__half{padding:52px 18px 20px}
  .mcp-plug__half .ex-compare__tag{left:18px}
  .mcp-plug__half--before{border-right:none;border-bottom:1.5px solid #000}
  .mcp-plug__half p{margin-top:16px;font-size:14.5px}
  /* On a phone each tool card is about 127px wide and 54px tall. The title's 14px floor wrapped to
     three lines and spilled out of the card top and bottom; the card keeps its name only here. */
  .mcp-plug__t b{font-size:12px}
  .mcp-plug>figcaption:not(.ex-sr-only){padding:12px 18px 14px}
  .mcp-ways{margin-top:48px;padding:52px 18px 0}
  .mcp-ways__tag{left:18px}
  .mcp-ways__stage{aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
  .mcp-ways__wires,.mcp-ways__mark{display:none}
  .mcp-ways__who,.mcp-ways__in,.mcp-ways__recs{position:static;translate:none;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .mcp-ways__tool{position:relative;translate:none;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .mcp-ways__name{position:static;display:block;height:auto;font-size:15px}
  .mcp-ways__who{flex-direction:row;align-items:center;gap:10px}
  .mcp-ways__who .ex-avatar{width:30px;height:30px;flex-basis:30px}
  .mcp-ways__who .ex-avatar--ai::after{font-size:9.5px}
  .mcp-ways__who b{font-size:14px}
  .mcp-ways__tool{display:flex;flex-direction:column;gap:12px;padding:30px 14px 14px;border-radius:12px}
  .mcp-ways__bar{height:20px;border-radius:11px 11px 0 0}
  .mcp-ways__bar::before{left:11px;top:7px;width:5px;height:5px;box-shadow:9px 0 0 #8a8a8a,18px 0 0 #8a8a8a}
  .mcp-ways__in{padding:11px 13px;border-radius:10px;gap:3px}
  .mcp-ways__in b{font-size:14px}
  .mcp-ways__in i{font-size:12.5px}
  .mcp-ways__recs{padding:13px 14px;border-radius:10px}
  .mcp-ways__recs__t{margin-bottom:9px;font-size:10.5px}
  .mcp-ways__recs ul{gap:6px}
  .mcp-ways__recs li{padding:8px 10px;border-radius:7px;font-size:12.5px;gap:8px}
  .mcp-ways__cust{width:20px;height:20px;flex-basis:20px}
  .mcp-ways__recs em{padding:3px 7px;font-size:9.5px}
  .mcp-ways>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .mcp-hub{margin-top:48px;padding-top:52px}
  .mcp-hub__tag{left:18px}
  .mcp-hub__stage{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:18px 18px 22px}
  .mcp-hub__wires{display:none}
  .mcp-hub__kicker{position:static;translate:none;grid-column:1/-1;white-space:normal}
  .mcp-hub__core{position:relative;left:auto;top:auto;translate:none;grid-column:1/-1;justify-self:center;width:200px;height:200px;aspect-ratio:auto;margin:2px 0 8px}
  .mcp-hub__ringm{display:block;position:absolute;inset:0;width:100%;height:100%}
  .mcp-hub__me{position:absolute;left:30px;top:30px;width:140px;height:140px}
  .mcp-hub__tool{position:static;transform:none;flex-direction:row;gap:9px;min-width:0}
  .mcp-hub__tool--n .mcp-hub__name,.mcp-hub__tool--s .mcp-hub__name{text-align:left}
  .mcp-hub__name{white-space:normal}
  .mcp-hub>figcaption:not(.ex-sr-only){padding:12px 18px 14px}
  .mcp-letters{margin-top:34px;padding:22px 18px 24px}
  .mcp-letters__words{grid-template-columns:1fr;gap:12px}
  .mcp-letters__words b{font-size:20px}
  .mcp-doors{margin-top:48px;padding:52px 18px 0}
  .mcp-doors__tag{left:18px}
  .mcp-doors__window{padding:40px 14px 16px}
  .mcp-doors__hd,.mcp-doors__rows li,.mcp-doors__now{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .mcp-doors__rows li{padding:10px 4px}
  .mcp-doors__keys i{width:8px;height:12px}
  .mcp-doors__sent{font-size:13px}
  .mcp-doors__empty{font-size:15px}
  .mcp-doors>figcaption:not(.ex-sr-only){margin:22px -18px 0;padding:12px 18px 14px}
  .mcp-case{grid-template-columns:1fr;gap:26px;margin-top:48px;padding:22px 18px 0}
  .mcp-case__stamp{right:6px}
  .mcp-case__arrow{display:none}
  .mcp-case>figcaption:not(.ex-sr-only){margin:26px -18px 0;padding:12px 18px 14px}
  .mcp-job{margin-top:32px;padding:52px 18px 0}
  .mcp-job__tag{left:18px}
  .mcp-job__card{grid-template-columns:1fr}
  .mcp-job__who{flex-wrap:wrap;align-items:flex-start;gap:4px 10px;padding:12px 16px}
  .mcp-job__who span:last-child{flex:1 0 100%;padding-left:34px}
  .mcp-job__side--in{border-right:none;border-bottom:1.5px solid #000}
  .mcp-job>figcaption:not(.ex-sr-only){margin:22px -18px 0;padding:12px 18px 14px}
  .mcp-chain{margin-top:48px;padding:22px 18px 0}
  .mcp-chain__row{grid-template-columns:minmax(0,1fr);gap:34px}
  .mcp-chain__stop:not(:last-child)::after{right:auto;top:auto;left:50%;bottom:-34px;width:1.5px;height:34px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
  /* The connector turns vertical below 900, so the mark rides down it instead of across. */
  .mcp-chain__mark{left:50%;top:calc(100% + 34px)}
  .mcp-case__sum{margin-top:10px;padding-top:9px;font-size:11px}
  .mcp-chain>figcaption:not(.ex-sr-only){margin:26px -18px 0;padding:12px 18px 14px}
}

/* Below 900 the chain stacks and its connector turns vertical, so the two marks ride down it
   rather than across. Written as its own query because the motion block above is sized for the
   wide layout and this only swaps the keyframe name. It has to stay last in the file: its
   selectors tie with the wide ones on specificity and win on source order alone. */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .mcp-chain.is-seen .mcp-chain__stop:first-child .mcp-chain__mark,
  .mcp-chain.is-seen .mcp-chain__stop--ai .mcp-chain__mark{animation-name:mcp-chain-ride-v}
}