/* Mazemind — "Live edit". The view reads like mazemind.ai's facts feed: a wiki agents edit while you watch.
   Type, hairlines and one orange; facts slide in, a caret types the value, the source stamp fades in after it,
   the newest row carries an orange wash that fades. Every value lives in a token below; components only read tokens. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/source-serif-4-300.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 300; font-display: swap; src: url(/fonts/source-serif-4-300-italic.woff2) format("woff2"); }
:root {
  color-scheme: light dark;
  /* colour: the host's variables win when present (Claude), light-dark() fallbacks otherwise (ChatGPT) */
  --mm-ink: var(--color-text-primary, light-dark(#191919, #f1efe7));
  --mm-ink-2: var(--color-text-secondary, light-dark(#5f5b53, #b8b5aa));
  --mm-paper: light-dark(#faf9f5, #1b1b1a);                 /* text on ink buttons */
  --mm-hair: color-mix(in srgb, var(--mm-ink) 10%, transparent);
  --mm-rule: color-mix(in srgb, var(--mm-ink) 17%, transparent);
  --mm-faint: color-mix(in srgb, var(--mm-ink) 30%, transparent);
  --mm-orange: #ff6601;                                      /* marks: dot, strike, caret, wash; never small text */
  --mm-orange-ink: light-dark(#b34200, #ff8b40);             /* orange for small text, AA on both */
  --mm-wash: light-dark(rgb(255 102 1 / .1), rgb(255 102 1 / .16));
  --mm-wash-live: light-dark(rgb(255 102 1 / .07), rgb(255 102 1 / .1));
  /* type */
  --mm-serif: "Source Serif 4", "Source Serif Pro", ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mm-sans: var(--font-sans, -apple-system, system-ui, sans-serif);
  --mm-fs-h2: 28px; --mm-fs-h2-sm: 24px; --mm-fs-h3: 21px; --mm-fs-lead: 18px; --mm-fs-body: 13.5px;
  --mm-fs-fact: 13.5px; --mm-fs-note: 14.5px; --mm-fs-det: 12.5px; --mm-fs-cite: 11.5px; --mm-fs-count: 27px; --mm-fs-tag: 10px;
  --mm-lh: 1.5; --mm-lh-tight: 1.18; --mm-track-h2: -.02em;
  /* space */
  --mm-gap: 16px; --mm-col-gap: 32px; --mm-pad-y: 18px; --mm-row-y: 10px; --mm-bleed: 8px; --mm-row: 8px;
  /* shape */
  --mm-r: 3px; --mm-r-btn: 2px; --mm-btn-h: 40px; --mm-btn-h-2: 38px; --mm-hit-h: 36px; --mm-caret-w: 1.5px;
  /* motion */
  --mm-ease-out: cubic-bezier(.23, 1, .32, 1);
  --mm-ease-io: cubic-bezier(.77, 0, .175, 1);
  --mm-dur-row: 460ms; --mm-dur-head: 520ms; --mm-dur-line: 640ms; --mm-dur-strike: 340ms; --mm-dur-stamp: 360ms;
  --mm-dur-wash: 2200ms; --mm-dur-blink: 900ms; --mm-dur-live: 1400ms; --mm-dur-press: 160ms; --mm-dur-hover: 180ms;
  font: var(--mm-fs-body)/var(--mm-lh) var(--mm-sans);
}
html, body, #root { background: transparent; }
html, body { margin: 0; color: var(--mm-ink); -webkit-font-smoothing: antialiased; }
#root { padding: 6px 4px 12px; display: grid; gap: var(--mm-gap); }
.mut { color: var(--mm-ink-2); margin: 0; }
#root > p.mut { font-size: var(--mm-fs-note); max-width: 46em; }
#root > p:not(.mut) { margin: 0; font: 300 var(--mm-fs-lead)/1.45 var(--mm-serif); max-width: 36em; text-wrap: pretty; }

/* ---------- entrance: everything arrives the way a row arrives in the site's feed ---------- */
/* VIEW_SCRIPT gives each arriving block .mm-in and its moment, --mm-at; the order is the reading order. */
.mm-in { animation: mm-row var(--mm-dur-row) var(--mm-ease-out) var(--mm-at, 0ms) both; }
.mm-new { animation: mm-row var(--mm-dur-row) var(--mm-ease-out) calc(var(--mm-j, 0) * 60ms) both; }
@keyframes mm-row { from { opacity: 0; transform: translateY(-8px); } }
@keyframes mm-fade { from { opacity: 0; } }
@keyframes mm-line { from { transform: scaleX(0); } }
@keyframes mm-blink { 50% { opacity: 0; } }

/* ---------- headline and the brand's line: the mouse at the end of a hairline ---------- */
h1, h2 { margin: 4px 0 0; font: 300 var(--mm-fs-h2)/1.15 var(--mm-serif); letter-spacing: var(--mm-track-h2); text-wrap: balance; max-width: 30em; }
h1 em, h2 em { font-style: italic; }
/* the headline arrives word by word, each coming into focus */
h1 .mm-w, h2 .mm-w { animation: mm-head var(--mm-dur-head) var(--mm-ease-out) calc(var(--mm-w, 0) * 34ms) both; }
.head > .hide { animation: mm-fade 400ms ease-out 300ms both; }
@keyframes mm-head { from { opacity: 0; filter: blur(5px); } }
/* the mouse trots in from the left over 1.8 s, slow enough to follow, writing the hairline behind it; it sniffs once
   it is there, and keeps sniffing while the view waits for the agent (Milan, 2026-10-15: "too fast and ends too quickly") */
.mm-rule { position: relative; height: 17px; margin: -8px 0 -4px; overflow: hidden; pointer-events: none; }
.mm-ride { position: absolute; inset: 0; animation: mm-ride 1800ms cubic-bezier(.45, 0, .25, 1) 250ms both; }
.mm-ride::before { content: ""; position: absolute; left: 0; right: 33px; bottom: 2px; height: 1px; background: var(--mm-rule); }
.mm-mouse { position: absolute; right: 0; bottom: 0; width: 34px; height: 15.3px; color: var(--mm-ink); overflow: visible; animation: mm-trot 225ms ease-in-out 250ms 8; }
@keyframes mm-trot { 50% { transform: translateY(-1.2px); } }
@keyframes mm-ride { from { transform: translateX(calc(-100% + 34px)); } }
.mm-eye { fill: var(--mm-orange); }
.mm-whisk { transform-box: fill-box; transform-origin: 0 50%; animation: mm-sniff 1000ms ease-in-out 2050ms 1; }
#root:has(.mm-wait) .mm-whisk { animation: mm-sniff 1000ms ease-in-out 2050ms 1, mm-sniff-wait 2800ms ease-in-out 3000ms infinite; }
@keyframes mm-sniff { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-12deg); } 36% { transform: rotate(7deg); } 54% { transform: rotate(-9deg); } 72% { transform: rotate(0); } }
@keyframes mm-sniff-wait { 0%, 36%, 100% { transform: rotate(0); } 6.5% { transform: rotate(-12deg); } 13% { transform: rotate(7deg); } 19.5% { transform: rotate(-9deg); } 26% { transform: rotate(0); } }

/* ---------- cards: sections of the feed, each opened by a hairline that draws ---------- */
#list { display: grid; column-gap: var(--mm-col-gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#list.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
#list.cards .wide { grid-column: 1 / -1; }
.card { position: relative; display: grid; gap: 10px; align-content: start; padding: var(--mm-pad-y) 0 calc(var(--mm-pad-y) + 6px); container-type: inline-size; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mm-rule); transform-origin: left;
  animation: mm-line var(--mm-dur-line) var(--mm-ease-io) var(--mm-at, 0ms) both; }
#list > .card:first-child { padding-top: 10px; }
#list > .card:first-child::before { display: none; }
.card:not(.pc) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .card:not(.pc):hover h3 { text-decoration: underline 1px var(--mm-orange); text-underline-offset: 4px; } }
.card:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--mm-orange); outline-offset: 3px; }
.card h3 { margin: 0; font: 300 var(--mm-fs-h3)/var(--mm-lh-tight) var(--mm-serif); letter-spacing: -.012em; text-wrap: pretty; }
.card p { margin: 0; }
.card > p:not(.why) { color: var(--mm-ink-2); }
.why { color: var(--mm-ink-2); font-size: 13px; max-width: 52em; }
/* the card to start with: the site's small bordered tag */
.start { justify-self: start; padding: 2px 6px 1px; border: 1px solid currentColor; border-radius: var(--mm-r); color: var(--mm-orange-ink);
  font: 500 var(--mm-fs-tag)/1.4 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- "in Mazemind now": the site's count line, a live dot and a count that ticks up ---------- */
.now { display: flex; gap: 9px; align-items: baseline; font: 13px/1.45 var(--mm-sans); color: var(--mm-ink-2); }
.now::before { content: ""; flex: none; position: relative; top: -1px; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--mm-faint); }
.now.warm::before { border: 0; background: var(--mm-orange); animation: mm-live var(--mm-dur-live) ease-in-out calc(var(--mm-at, 0ms) + 200ms) 2; }
.mm-num { display: inline-block; font: 600 15px/1 var(--mm-sans); color: var(--mm-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.now .mm-num.mm-lead { font: 300 var(--mm-fs-count)/1 var(--mm-serif); letter-spacing: -.01em; margin-right: 1px; }
.now.mm-inline { display: block; }
.now.mm-inline::before { display: inline-block; margin-right: 9px; vertical-align: 1px; }
.now.mm-inline .mm-num { font-size: 15px; margin: 0 .1em; }
@keyframes mm-live { 50% { transform: scale(.55); opacity: .45; } }

/* ---------- facts: feed rows ---------- */
.items { margin: 0; padding: 0; list-style: none; display: grid; font-size: var(--mm-fs-fact); }
/* rows bleed 8 px each side, so the wash has room; their hairline stays on the text's edges */
.items > li, .hit { position: relative; isolation: isolate; padding: var(--mm-row-y) var(--mm-bleed); margin: 0 calc(var(--mm-bleed) * -1); border-radius: var(--mm-r); }
.items > li::before, .hit::before { content: ""; position: absolute; left: var(--mm-bleed); right: var(--mm-bleed); top: 0; height: 1px; background: var(--mm-hair); }
.out > .hit:first-of-type::before { display: none; }
.items b { font-weight: 600; color: var(--mm-ink); margin-right: .35em; }
:is(.items li, .mm-body) > span:not(.det):not(.src) { color: var(--mm-ink); }
.items li.lead { font-size: 14.5px; }
/* the user's own company: an orange dot before its name, no fill */
.items li.you > b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--mm-orange); vertical-align: .14em; }
.det { display: block; font: var(--mm-fs-det)/1.45 var(--mm-sans); color: var(--mm-ink-2); margin-top: 3px; }
:is(li, .hit, .mm-body) > :is(.det, .src) { display: inline; margin: 0; }
:is(li, .hit, .mm-body) > :is(.det, .src)::before { content: "\A"; white-space: pre; }
/* a wide feed reads like the site's: the name in its own column, what changed and its stamp beside it */
.mm-body { display: inline; }
@container (min-width: 540px) {
  .mm-named { display: grid; grid-template-columns: minmax(0, 136px) minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
  .mm-named > b { margin: 0; overflow-wrap: break-word; }
  .mm-named > .mm-body { display: block; text-indent: -.28em; }   /* the value's leading space, out of the column's edge */
}
.items > li, .hit { line-height: 1.6; }
/* the stamp: where a fact comes from, and when */
.src { display: inline-block; margin-top: 4px; font: var(--mm-fs-cite)/1.6 var(--mm-sans); font-variant-numeric: tabular-nums;
  color: var(--mm-ink-2); white-space: nowrap; }
a.src { text-decoration: underline 1px var(--mm-faint); text-underline-offset: 2.5px; transition: color var(--mm-dur-hover) ease, text-decoration-color var(--mm-dur-hover) ease; }
a.src::after { content: "↗"; margin-left: 3px; font-size: .9em; opacity: .7; }
@media (hover: hover) and (pointer: fine) { a.src:hover { color: var(--mm-ink); text-decoration-color: var(--mm-orange); } }

/* ---------- live edit: the newest row is being written ---------- */
/* the wash: on the row an agent just wrote, then gone */
.mm-fresh { position: relative; isolation: isolate; }
/* the wash: a highlighter pass over the row an agent just wrote, left to right, then it fades */
.mm-fresh::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--mm-r); background: var(--mm-wash-live); pointer-events: none;
  opacity: 0; animation: mm-wash var(--mm-dur-wash) var(--mm-ease-out) var(--mm-at, 0ms) both; }
td.mm-fresh::after { border-radius: 0; }
@keyframes mm-wash { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 24% { opacity: 1; clip-path: inset(0 0 0 0); } 44% { opacity: 1; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
/* the caret types the value; what is not typed yet keeps its place, so nothing moves */
.mm-caret { border-left: var(--mm-caret-w) solid var(--mm-orange); margin-right: calc(var(--mm-caret-w) * -1); animation: mm-blink var(--mm-dur-blink) steps(1) infinite; }
.mm-rest { visibility: hidden; }
/* the stamp fades in once the value is written */
.mm-stamp { animation: mm-fade var(--mm-dur-stamp) ease-out both; }
/* a replaced value: an orange strike draws across it */
.mm-was { position: relative; color: var(--mm-ink-2); }
.mm-was::after { content: ""; position: absolute; left: -1px; right: -1px; top: 52%; height: 1.5px; background: var(--mm-orange); transform-origin: left;
  animation: mm-line var(--mm-dur-strike) var(--mm-ease-out) var(--mm-at, 0ms) both; }
/* the value that replaced it: bold on an orange chip */
.mm-is { font-weight: 600; color: var(--mm-ink); background: var(--mm-wash); padding: 0 3px; border-radius: var(--mm-r);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- the comparison: where you are missing ---------- */
table.gap { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; line-height: 1.4; margin: 2px 0; }
table.gap th { font: italic 300 15px/1.2 var(--mm-serif); padding: 6px 8px 8px; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--mm-rule); }
table.gap th:first-child { width: 24%; }
table.gap th.me { width: 19%; font: 600 13px/1.2 var(--mm-sans); border-bottom: 2px solid var(--mm-orange); }
table.gap td { position: relative; padding: 7px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mm-hair); color: var(--mm-ink);
  overflow-wrap: break-word; hyphens: auto; }
table.gap td:first-child { color: var(--mm-ink-2); }
table.gap td.no { color: var(--mm-ink-2); }
table.gap td.no.me { color: var(--mm-orange-ink); font: italic 300 14px/1.3 var(--mm-serif); }
table.gap td.yes.me { font-weight: 600; }
table.gap tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { table.gap tr > :nth-child(n+5) { display: none; } }

.note { font: italic 300 var(--mm-fs-note)/1.4 var(--mm-serif); color: var(--mm-ink-2); }
/* what other agents will get: set as the entry itself, between two rules; nothing painted behind it */
.quote { margin: 0; padding: 12px 0 13px; font: 300 18px/1.42 var(--mm-serif); color: var(--mm-ink);
  border-top: 1px solid var(--mm-rule); border-bottom: 1px solid var(--mm-rule); }
ul.quote { display: grid; gap: 0; padding-block: 4px; }
ul.quote > li { border-top: 1px solid var(--mm-hair); padding-block: 8px; }
ul.quote > li:first-child { border-top: 0; }
ul.quote label { cursor: pointer; }
input[type=checkbox] { accent-color: var(--mm-orange); }

/* ---------- buttons ---------- */
button { font: 500 13px/1.2 var(--mm-sans); color: var(--mm-ink); background: transparent; cursor: pointer;
  border: 1px solid var(--mm-faint); border-radius: var(--mm-r-btn); padding: 8px 14px; min-height: var(--mm-btn-h-2);
  transition: border-color var(--mm-dur-hover) ease, background-color var(--mm-dur-hover) ease, transform var(--mm-dur-press) var(--mm-ease-out); }
button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { button:hover { border-color: var(--mm-ink); } }
.row { display: flex; gap: var(--mm-row); flex-wrap: wrap; }
/* primary: the card's action, and the first button of a view's own row (Copy, Another scenario): the site's ink block.
   Its caret says the button writes: it shows on hover, and blinks while the button works. */
.go, #root > .row > button:first-child { position: relative; justify-self: start; min-height: var(--mm-btn-h); padding: 10px 16px 10px 18px;
  background: var(--mm-ink); color: var(--mm-paper); border-color: var(--mm-ink); font-weight: 600; }
.go { margin-top: 6px; }
.go::after, #root > .row > button:first-child::after { content: ""; display: inline-block; width: 0; height: 1.05em; margin-left: 6px; vertical-align: -.17em;
  border-left: var(--mm-caret-w) solid var(--mm-orange); opacity: 0; transition: opacity 120ms ease; }
@media (hover: hover) and (pointer: fine) {
  .go:hover, #root > .row > button:first-child:hover { background: color-mix(in srgb, var(--mm-ink) 88%, var(--mm-orange)); }
  .go:hover::after, #root > .row > button:first-child:hover::after { opacity: 1; }
}
.go[disabled] { cursor: progress; }
.go[disabled]::after { opacity: 1; animation: mm-blink var(--mm-dur-blink) steps(1) infinite; }
/* follow-ups (What it means for us, Draft a message to ..., Research the ones with nothing recorded, Add data coverage from a page of yours): light, inline, one line; 36 px hit area, small footprint */
.more { display: inline-flex; align-items: center; min-height: var(--mm-hit-h); margin: -9px 0; padding: 0 1px;
  border: 0; font: 500 12.5px/1 var(--mm-sans); white-space: nowrap; color: var(--mm-ink);
  text-decoration: underline 1px var(--mm-faint); text-underline-offset: 3.5px; transition: text-decoration-color var(--mm-dur-hover) ease; }
summary.more { white-space: normal; line-height: 1.35; }
.more::after { content: ""; width: 0; height: 1.05em; margin-left: 3px; border-left: var(--mm-caret-w) solid var(--mm-orange); opacity: 0; transition: opacity 120ms ease; }
@media (hover: hover) and (pointer: fine) { .more:hover { text-decoration-color: var(--mm-orange); } .more:hover::after { opacity: 1; } }
:is(li, .hit, .mm-body) > :is(.det, .src) { margin-right: 16px; }
:is(.items li, .hit, .mm-body) > .row { display: flex; gap: 0 18px; margin-top: 4px; }
:is(.items li, .hit, .mm-body) > .row .more { margin-left: 0; }

/* ---------- what a button brought back: new rows in the feed ---------- */
.out { display: grid; font-size: var(--mm-fs-fact); padding-top: 4px; position: relative; }
.out[hidden] { display: none; }
.out::before { content: ""; height: 1px; margin-bottom: 4px; background: var(--mm-rule); transform-origin: left; animation: mm-line 420ms var(--mm-ease-out) both; }
.out > .mut, .out > span:not(.mut):not(.mm-fetch):not(.det), .out > b { padding: 5px 0; }
.out > .mut { font: italic 300 var(--mm-fs-note)/1.4 var(--mm-serif); }
.out > b { font: 300 19px/1.3 var(--mm-serif); }
.out > b .mm-num { font: inherit; font-variant-numeric: tabular-nums; }
.out > .det { padding-left: 0; }
.out > button { justify-self: start; margin-top: 4px; }
.hit { --mm-row-y: 9px; }
.hit b { font: 600 var(--mm-fs-body)/1.4 var(--mm-sans); margin-right: .35em; }
:is(.hit, .hit > .mm-body) > span:not(.src):not(.det) { color: var(--mm-ink); }
/* a lookup's fact rows (no name): the source rides on the same line */
.hit > span:first-child + .src::before { content: none; }
.hit > span:first-child { margin-right: 10px; }

/* ---------- waiting: a live dot, and a caret after what is happening ---------- */
.mm-fetch { display: none; }
.mm-busy .out { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
.mm-busy .out::before { grid-column: 1 / -1; }
.mm-busy .mm-fetch, .mm-wait .mm-fetch { display: block; }
/* while a button works, an orange stroke sweeps the rule where its rows will land */
.mm-busy .out > .mm-fetch::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--mm-orange);
  animation: mm-sweep 1300ms var(--mm-ease-io) infinite; }
@keyframes mm-sweep { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.mm-live { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--mm-orange); transform: translateY(-1px);
  animation: mm-live var(--mm-dur-live) ease-in-out infinite; }
.mm-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--mm-orange); animation: mm-ring var(--mm-dur-live) var(--mm-ease-out) infinite; }
@keyframes mm-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.mm-busy .out > .mut::after, .mm-wait .note::after, #root > p.mut:only-child::after { content: ""; display: inline-block; width: 0; height: 1.05em;
  margin-left: 2px; vertical-align: -.18em; border-left: var(--mm-caret-w) solid var(--mm-orange); animation: mm-blink var(--mm-dur-blink) steps(1) infinite; }
#root > p.mut:only-child { display: flex; align-items: baseline; gap: 10px; }
#root > p.mut:only-child::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mm-orange); transform: translateY(-1px);
  animation: mm-live var(--mm-dur-live) ease-in-out infinite; }

/* ---------- the tour's own controls ---------- */
/* a headline that shares its row with the control that hides the tour */
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hide { flex: none; min-height: var(--mm-hit-h); padding: 0 1px; border: 0; font: 500 12.5px/1 var(--mm-sans); color: var(--mm-ink-2);
  text-decoration: underline 1px var(--mm-faint); text-underline-offset: 3.5px; }
@media (hover: hover) and (pointer: fine) { .hide:hover { color: var(--mm-ink); text-decoration-color: var(--mm-orange); } }
/* while the agent writes the user's cards: a live dot, then what it is doing, and the caret */
.mm-wait { display: flex; align-items: baseline; gap: 10px; }
/* a choice among a few: one pressed, the others one tap away */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips > .note { margin-right: 4px; }
.chip { min-height: 34px; padding: 6px 12px; font-weight: 500; border-radius: var(--mm-r); }
.chip.on { border-color: var(--mm-ink); }
.chip.on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--mm-orange); vertical-align: .1em; }
#list > .line.keep { grid-column: 1 / -1; margin: 6px 0 4px; }
/* the user's listing, drafted by their agent, edited in place */
textarea.quote { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 6.5em; padding: 12px 14px; background: transparent; color: var(--mm-ink);
  border: 1px solid var(--mm-faint); border-radius: var(--mm-r); transition: border-color var(--mm-dur-hover) ease; }
input.page { width: 100%; box-sizing: border-box; padding: 9px 2px; font: var(--mm-fs-fact)/1.3 var(--mm-sans); color: var(--mm-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--mm-faint); border-radius: 0; transition: border-color var(--mm-dur-hover) ease; }
textarea.quote:focus, input.page:focus { outline: none; border-color: var(--mm-orange); caret-color: var(--mm-orange); }
/* a block to read or copy: a translucent sheet */
/* a block to read or copy: a hairline box, nothing painted inside */
.line { position: relative; padding: 14px 16px; border: 1px solid var(--mm-rule); border-radius: var(--mm-r);
  font-size: var(--mm-fs-note); line-height: 1.55; }
.line.keep .row { margin-top: 10px; }
/* under a button that wrote to the chat: "Sent: your agent is on it", with the live dot */
.note.sent { display: inline-flex; align-items: baseline; gap: 8px; justify-self: start; animation: mm-row var(--mm-dur-row) var(--mm-ease-out) both; }
.note.sent::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mm-orange); transform: translateY(-1px);
  animation: mm-live var(--mm-dur-live) ease-in-out 2; }

/* the morning routine: what each step writes, then the exact prompt, one tap away */
.routine-after { display: grid; gap: 8px; }
.routine-after > .row.links { gap: 0 18px; }
.line.prompt { white-space: pre-wrap; font: var(--mm-fs-det)/1.55 var(--mm-sans); color: var(--mm-ink-2); max-height: 22em; overflow: auto; }
.line.prompt[hidden] { display: none; }
.routine-after > .stop { font-size: var(--mm-fs-det); }
.det > a.src { margin-left: 4px; }

#status { color: var(--mm-ink-2); font: italic 300 13.5px/1.4 var(--mm-serif); min-height: 1em; padding: 0 4px; }
#status.mm-say { animation: mm-row var(--mm-dur-row) var(--mm-ease-out) both; }

@media (max-width: 560px) {
  #list.cards, #list { grid-template-columns: 1fr; }
  h1, h2 { font-size: var(--mm-fs-h2-sm); }
  .card h3 { font-size: 20px; }
}
/* Drawn again (the answer after the agent's arguments, the same answer twice, a host drawing the view anew later): what
   the user already saw stays as it is, and the mouse waits at the end of its line. Only what is new arrives. */
.mm-kept, .mm-kept::before, .mm-kept > .hide, .mm-still .mm-ride, .mm-still .mm-mouse { animation: none !important; }
/* "Loading the tour..." shows only if the answer takes a moment: a host that draws an answered view never shows it */
#loading.mm-in { animation-delay: 600ms; }
/* A host draws a view before it shows it, and may draw it out of sight: the entrance waits until it is on screen (VIEW_SCRIPT sets .mm-play) */
html:not(.mm-play) #root *, html:not(.mm-play) #root *::before, html:not(.mm-play) #root *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mm-fresh::after { opacity: 0; }
  .mm-caret { display: none; }
}
/* ---------- Mazemind People: classes its views add, from the tokens only ---------- */
/* who a line is for: "Private · only you see it", "Public · agents using Mazemind can read it". The stamp's size, with a
   mark the words repeat: a hairline ring for private, an orange dot for public (never colour alone). */
.vis { display: inline-flex; align-items: baseline; gap: 7px; font: var(--mm-fs-cite)/1.6 var(--mm-sans); color: var(--mm-ink-2); justify-self: start; }
.vis::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--mm-faint); transform: translateY(-1px); }
.vis.pub::before { border: 0; background: var(--mm-orange); }
/* an item the owner marked "Not true": struck in orange on every line it wraps to (.mm-was strikes one line only) */
.struck { color: var(--mm-ink-2); text-decoration: line-through 1.5px var(--mm-orange); text-decoration-skip-ink: none; }
/* a line that needs a second look before a send ("Your note mentions Series A", "Weaker match"): orange ink, never orange paint */
.flag, .card > p.flag { color: var(--mm-orange-ink); }
/* Report and Block, kept together when a row of actions wraps on a phone */
.row > .pair { display: inline-flex; flex-wrap: nowrap; gap: 0 18px; }
:is(.items li, .hit, .mm-body, .card) > .row:has(> .pair) { row-gap: 20px; align-items: center; }
/* a primary action that waits for a choice (a declaration's consent): quiet, not busy; a disabled .go reads as working */
.go[aria-disabled="true"] { background: transparent; color: var(--mm-ink-2); border-color: var(--mm-faint); cursor: default; }
.go[aria-disabled="true"]::after { display: none; }
/* a stretch of a view the user is not shown yet (a declaration's card before its chip is tapped) */
[hidden] { display: none !important; }
/* ---------- People v2 (PRODUCT-v2 §2): read vs inferred, the page's status, small tags ---------- */
/* the line above the headline: whose page this is */
.eyebrow { margin: 0 0 -10px; font: 500 var(--mm-fs-tag)/1.4 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-ink-2); }
/* the page's status: does it exist, who reads it, is it claimed; two lines between hairlines, nothing painted */
.status { display: grid; gap: 6px; padding: 10px 0 11px; border-top: 1px solid var(--mm-rule); border-bottom: 1px solid var(--mm-rule); font: var(--mm-fs-fact)/1.55 var(--mm-sans); color: var(--mm-ink-2); }
.status b { color: var(--mm-ink); font-weight: 600; margin-right: .3em; }
.status a.src, .status .src { margin: 0; }
/* a read row: stated on a public page (solid rule); an inferred row: not stated anywhere (dashed rule, serif italic) */
.items > li.rd, .items > li.inf { padding-left: calc(var(--mm-bleed) + 12px); }
.items > li .rule { position: absolute; left: var(--mm-bleed); top: var(--mm-row-y); bottom: var(--mm-row-y); border-left: 2px solid var(--mm-faint); }
.items > li .rule.dash { border-left-style: dashed; }
.items > li.inf > .txt { font: italic 300 16px/1.4 var(--mm-serif); color: var(--mm-ink); margin-right: 8px; }
/* how likely: the % in a hairline pill, and its band in words beside it */
.pct { display: inline-block; padding: 0 6px; border: 1px solid var(--mm-faint); border-radius: var(--mm-r); font: 600 var(--mm-fs-cite)/1.6 var(--mm-sans); font-variant-numeric: tabular-nums; color: var(--mm-ink); margin-right: 6px; white-space: nowrap; }
/* a small tag beside a row: Inferred, New today, On Mazemind */
.tag { display: inline-block; padding: 0 5px; border: 1px solid var(--mm-faint); border-radius: var(--mm-r); font: 500 var(--mm-fs-tag)/1.6 var(--mm-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mm-ink-2); margin: 0 6px 0 8px; white-space: nowrap; vertical-align: 1px; }
.tag.new { color: var(--mm-orange-ink); border-color: currentColor; }
/* the legend: what the two rules mean */
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font: var(--mm-fs-det)/1.5 var(--mm-sans); color: var(--mm-ink-2); }
.legend > span { padding-left: 10px; border-left: 2px solid var(--mm-faint); }
.legend > span + span { border-left-style: dashed; }
/* a group inside a card (People to meet on the conclude card): one step down from the card's title */
.card .cards > .card h3 { font-size: var(--mm-fs-lead); }
/* the last group closes its card: no second bottom padding */
.card .cards > .card:last-child { padding-bottom: 0; }
/* a group's purpose: what the user gets, with its bold "To" */
.purpose { margin: 0; font: var(--mm-fs-fact)/1.5 var(--mm-sans); color: var(--mm-ink); }
.purpose b { font-weight: 600; }
/* an identity row its owner hid here: still counted, readers don't see it, so it reads in the secondary ink */
.id-off, .id-off a.src { color: var(--mm-ink-2); }
/* ---------- People v3 (.context/ux/SPEC.md) ---------- */
/* the after-tap strip (loops.md §2.5): what the tap did, and the one next step, where the tap was; an orange dot */
.strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 6px 0 0; padding: 8px 0 0; border-top: 1px solid var(--mm-hair); font: var(--mm-fs-fact)/1.5 var(--mm-sans); color: var(--mm-ink); }
.strip > span:first-child { position: relative; padding-left: 14px; }
.strip > span:first-child::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--mm-orange); }
/* "Still true?" on a fact: a question, never a verdict, in the orange ink */
.ask-q { color: var(--mm-orange-ink); }
/* creating the profile: a step waiting for the user's answer keeps the steps after it back */
.pf-wait { font: italic 300 var(--mm-fs-note)/1.5 var(--mm-serif); color: var(--mm-ink-2); }
/* the brand mouse fetching the linked accounts into their rows, once, then it rests */
.pf-mouse { display: block; height: 18px; position: relative; overflow: visible; }
.pf-mouse svg { position: absolute; left: 0; top: 0; width: 38px; height: 18px; color: var(--mm-ink); animation: pf-fetch var(--pf-dur, 1200ms) cubic-bezier(.45, 0, .25, 1) both; }
@keyframes pf-fetch { from { transform: translateX(-24px); opacity: 0; } 12% { opacity: 1; } to { transform: translateX(calc(var(--pf-w, 240px) - 40px)); opacity: 1; } }
/* the before and after of creating the profile */
table.ba { width: 100%; border-collapse: collapse; table-layout: fixed; font: var(--mm-fs-fact)/1.45 var(--mm-sans); }
table.ba th, table.ba td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--mm-hair); }
table.ba th { font: 500 var(--mm-fs-tag)/1.4 var(--mm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mm-ink-2); }
table.ba th.me { border-bottom: 2px solid var(--mm-orange); }
table.ba td:first-child { color: var(--mm-ink-2); width: 28%; }
@media (prefers-reduced-motion: reduce) { .pf-mouse svg { animation: none; transform: translateX(calc(var(--pf-w, 240px) - 40px)); } }
/* creating the profile: the progress line (step 2 of 5, the live dot while the job runs) over a 2 px track that the
   orange fills as the steps land */
.pf-progress { display: grid; gap: 8px; font: var(--mm-fs-det)/1.4 var(--mm-sans); color: var(--mm-ink-2); }
.pf-progress > span { display: flex; align-items: baseline; gap: 9px; }
.pf-progress.pf-run > span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mm-orange); transform: translateY(-1px);
  animation: mm-live var(--mm-dur-live) ease-in-out infinite; }
.pf-bar { display: block; position: relative; height: 2px; background: var(--mm-hair); overflow: hidden; }
.pf-bar::after { content: ""; position: absolute; inset: 0; background: var(--mm-orange); transform-origin: left; transform: scaleX(var(--pf-p, 0));
  transition: transform var(--mm-dur-row) var(--mm-ease-out); }
/* a finished step folded to one line: a check, its name, what it holds, and the tap that opens it again */
.pf-sum > li.pf-done { display: grid; grid-template-columns: 14px minmax(0, 150px) minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.pf-sum > li.pf-done > b { margin: 0; font-weight: 500; color: var(--mm-ink-2); }
.pf-sum > li.pf-done > .more, .pf-sum > li.pf-done > details:not([open]) { justify-self: end; }
.pf-sum > li.pf-done > .det, .pf-sum > li.pf-done > details[open] { grid-column: 3 / -1; }
.pf-sum > li.pf-done > .det::before { content: none; }
.pf-check { display: inline-block; width: 9px; height: 4.5px; border-left: 1.5px solid var(--mm-orange); border-bottom: 1.5px solid var(--mm-orange); transform: translateY(-3px) rotate(-45deg); }
.pf-open { grid-column: 1 / -1; display: grid; gap: 10px; padding: 10px 0 2px 26px; }
@media (max-width: 560px) {
  .pf-sum > li.pf-done { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .pf-sum > li.pf-done > b { grid-row: 1; grid-column: 2; }
  .pf-sum > li.pf-done > span { grid-row: 2; grid-column: 2 / -1; }
  .pf-sum > li.pf-done > .more, .pf-sum > li.pf-done > details:not([open]) { grid-row: 1; grid-column: 3; }
  .pf-sum > li.pf-done > .det, .pf-sum > li.pf-done > details[open] { grid-row: 3; grid-column: 2 / -1; }
  .pf-open { padding-left: 0; }
}
/* the accounts land one by one as the mouse fetches them */
.pf-acc > li.mm-in { animation-delay: calc(var(--pf-k, 0) * 170ms + 160ms) !important; }
/* the handle: the reward, in the headline's serif; the caret types it */
.pf-handle { font: 300 var(--mm-fs-h3)/1.25 var(--mm-serif); letter-spacing: -.01em; }
/* what agents heard before, and what Mazemind tells them now, from the person: one row each, the old value struck */
.pf-ba { display: grid; border-top: 1px solid var(--mm-hair); }
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1.2fr); column-gap: 10px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--mm-hair); font: var(--mm-fs-fact)/1.45 var(--mm-sans); }
.pf-b { color: var(--mm-ink-2); }
.pf-to::before { content: "→"; font-style: normal; color: var(--mm-ink-2); }
.pf-n { justify-self: start; }
@media (max-width: 560px) { .pf-row { grid-template-columns: minmax(0, 1fr); row-gap: 3px; } .pf-to { display: none; } }
/* the columns' heads: Before · Now (words review #10); on a phone, one line "Before → Now" */
.pf-head { padding: 6px 0 4px; }
.pf-head .det { margin: 0; }
@media (max-width: 560px) { .pf-head { grid-template-columns: auto 16px auto; justify-content: start; } .pf-head .pf-to { display: inline; } }

html, body { background: var(--mm-paper); }
/* the site's paper has a fine grain: a data: SVG noise, faint enough to keep every contrast */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); }
.site { max-width: 640px; margin: 0 auto; padding: 22px 20px 40px; }
.site > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 26px; }
.site > header a { color: var(--mm-ink); display: inline-flex; }
.mm-logo { width: 148px; height: auto; }
.site > header .tag { font: var(--mm-fs-cite)/1.4 var(--mm-sans); color: var(--mm-ink-2); }
#root { padding: 0 4px 8px; }
#root > p:not(.mut) { font-size: var(--mm-fs-lead); }
.site > footer { display: grid; gap: 10px; margin-top: 40px; padding: 18px 4px 0; border-top: 1px solid var(--mm-hair); font: var(--mm-fs-det)/1.5 var(--mm-sans); color: var(--mm-ink-2); }
.site > footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site > footer a { color: var(--mm-ink-2); text-decoration: underline 1px var(--mm-faint); text-underline-offset: 3px; }
form { margin: 0; display: contents; }
/* "How Mazemind knows", "Every source": a native details whose summary reads like .more (design §2b) */
details.id > summary { list-style: none; cursor: pointer; justify-self: start; display: inline-flex; }
details.id > summary::-webkit-details-marker { display: none; }
details.id[open] > summary { margin-bottom: 6px; }
details.id > p { margin: 6px 0; }
.id-off > b, .id-off > a.src, .id-off > span:not(.det) { color: var(--mm-ink-2); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; float: left; margin-right: 4px; }
fieldset.chips > legend + * { clear: none; }
/* a link that does what a button does (claim, continue with Google): the button's look */
a.btn { display: inline-flex; align-items: center; box-sizing: border-box; font: 500 13px/1.2 var(--mm-sans); color: var(--mm-ink); text-decoration: none;
  border: 1px solid var(--mm-faint); border-radius: var(--mm-r-btn); padding: 8px 14px; min-height: var(--mm-btn-h-2); transition: border-color var(--mm-dur-hover) ease, background-color var(--mm-dur-hover) ease; }
a.btn.go { background: var(--mm-ink); color: var(--mm-paper); border-color: var(--mm-ink); font-weight: 600; min-height: var(--mm-btn-h); padding: 10px 16px 10px 18px; margin-top: 0; }
@media (hover: hover) and (pointer: fine) { a.btn:hover { border-color: var(--mm-ink); } a.btn.go:hover { background: color-mix(in srgb, var(--mm-ink) 88%, var(--mm-orange)); } }
.go { margin-top: 0; }
/* a chip that is a radio or a checkbox: the input stays for the keyboard and screen readers, the label is the chip */
label.chip { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 34px; padding: 6px 12px; font: 500 13px/1.2 var(--mm-sans); color: var(--mm-ink);
  border: 1px solid var(--mm-faint); border-radius: var(--mm-r); cursor: pointer; transition: border-color var(--mm-dur-hover) ease; }
label.chip > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
label.chip:has(input:checked) { border-color: var(--mm-ink); }
label.chip:has(input:checked)::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--mm-orange); }
label.chip:has(input:focus-visible) { outline: 2px solid var(--mm-orange); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { label.chip:hover { border-color: var(--mm-ink); } }
input.page[type=email], input.page[type=text] { font-size: 15px; }
/* the controls every landing and page carries: as easy to reach as the answer */
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.ctl .more { margin: 0; }
.notice, #root > p.notice { font: var(--mm-fs-det)/1.55 var(--mm-sans); color: var(--mm-ink-2); max-width: 48em; }
.flash { justify-self: start; }
.card .lead-q { color: var(--mm-ink); font-size: var(--mm-fs-note); }
.band-you { display: grid; gap: 8px; margin: 28px 0 8px; padding: 16px 18px; border: 1px solid var(--mm-rule); border-radius: var(--mm-r); }
.mirror-item { display: grid; gap: 6px; padding: 10px 0 4px; border-top: 1px solid var(--mm-hair); }
#root > form > .card, #root > form > .row { margin: 0; }
/* a web page on a phone is tapped with a thumb: every control reaches 44 px, as the platforms ask */
@media (max-width: 560px) {
  #root button, #root a.btn, #root label.chip { min-height: 44px; }
  #root .more { min-height: 44px; margin: -12px 0; }
  .site > header a { min-height: 44px; align-items: center; }
  .site > footer a { display: inline-block; padding: 12px 0; }
  .site > footer nav { gap: 0 20px; }
}
@media (max-width: 420px) {
  .site { padding: 16px 16px 32px; }
  .row > .go, .row > a.btn.go { flex: 1 1 100%; justify-content: center; }
}