/* PersonalAgentEval: the assistants launch post.
   Builds on css/site.css (tokens, nav, footer). Everything here is scoped to the page's own blocks.
   Type scale: 14 caption, 15 small, 17 body, 19 h3, 34 h2, 58 h1. */

.post {
  --surface: #121212;
  --surface-2: #1a1a1a;
  --muted: #9a9a9a;
  --grid: #262626;
  --axis: #3a3a3a;
  --good: #3cc46a;
  --bad: #ef6b6b;
  --amber-ink: #f0b45a;
  --measure: 39rem;
  --who: #6b7280;
  --t-cap: 0.875rem;
  --t-small: 0.9375rem;
  --t-body: 1.0625rem;
  --t-h3: 1.1875rem;
}

.post p, .post li, .post dd { text-wrap: pretty; }
.post a { color: var(--phos); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post a:hover { color: #7fb4dc; }
.sr-only, .msg.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- Head ---------- */

.post-head { padding-block: clamp(36px, 6vw, 80px) 0; }
.dateline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ink-dim); font-size: var(--t-small); }
.dateline .sep { width: 18px; height: 1px; background: var(--line); }
.dateline .prelim { color: var(--amber-ink); }
.dateline .prelim::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #d97706; vertical-align: 1px; }
.dateline .prelim[hidden] { display: none; }

.post-head h1 {
  max-width: 21ch;
  margin-top: 16px;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.dek { max-width: 46rem; margin-top: 18px; color: var(--ink-dim); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.55; }

/* ---------- Figures (shared) ---------- */

.fig { margin: 0; }
.fig figcaption { max-width: 46rem; margin-top: 12px; color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.55; }

.hero-fig { padding-top: clamp(22px, 3vw, 32px); }
.hero-chart { padding: 18px clamp(14px, 2.4vw, 28px) 10px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); }
.chart-title { font-size: var(--t-h3); font-weight: 600; line-height: 1.35; }
.chart-sub { margin-top: 4px; color: var(--ink-dim); font-size: var(--t-cap); }
#heroChart { margin-top: 10px; border-radius: 8px; }

.ivl { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); align-items: center; }
.ivl-row { display: contents; }
.ivl-name { padding: 0 12px 0 0; font-size: var(--t-small); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivl-plot { position: relative; height: 36px; }
.ivl-row.tier-start .ivl-name, .ivl-row.tier-start .ivl-plot { border-top: 1px solid var(--line); }
.ivl-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.ivl-ci { position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--phos); opacity: 0.6; }
.ivl-ci::before, .ivl-ci::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px; border-radius: 1px; background: var(--phos); }
.ivl-ci::before { left: 0; }
.ivl-ci::after { right: 0; }
.ivl-dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 2px solid var(--surface); border-radius: 50%; background: var(--phos); box-sizing: content-box; }
.ivl-val { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.ivl-axis { grid-column: 2; position: relative; height: 26px; color: var(--muted); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.ivl-axis span { position: absolute; top: 6px; transform: translateX(-50%); }
.ivl-axis span.end { transform: translateX(-100%); }
#heroChart:focus-visible { outline-offset: 4px; }

/* ---------- Article layout: content left-aligned with the head, contents rail on the right ---------- */

.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 36px);
}
.toc { position: relative; order: 2; }
.toc-h { color: var(--muted); font-size: var(--t-cap); }
.toc ol { position: sticky; top: 92px; margin: 10px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line-soft); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink-dim); font-size: var(--t-cap); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { border-left-color: var(--phos); color: var(--ink); }

.body { min-width: 0; }
.part { padding-bottom: clamp(40px, 6vw, 72px); scroll-margin-top: 80px; }
.part + .part { border-top: 1px solid var(--line); }
.part > h2 { padding-top: clamp(32px, 5vw, 48px); font-size: clamp(1.75rem, 3vw, 2.125rem); font-weight: 600; letter-spacing: -0.02em; }
.part h3 { max-width: var(--measure); margin: 36px 0 0; font-size: var(--t-h3); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.part > p, .finding > p {
  max-width: var(--measure);
  margin-top: 14px;
  color: #dcdcdc;
  font-size: var(--t-body);
  line-height: 1.7;
}
.part h2 + p { margin-top: 18px; }
.part p b { color: var(--ink); font-weight: 600; }
.tldr-card {
  max-width: var(--measure);
  margin: 22px 0 28px;
  padding: 18px 22px;
  border: 1px solid rgba(74, 143, 194, 0.35);
  border-left: 4px solid var(--phos);
  border-radius: 10px;
  background: rgba(74, 143, 194, 0.06);
}
.tldr-card .tldr-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--phos);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tldr-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.65;
}
.tldr-card p + p { margin-top: 10px; }
.post .aside { color: var(--ink-dim); font-size: var(--t-small); }
.wide { margin-top: 28px; margin-bottom: 8px; }
.fn { display: inline-block; margin-left: 2px; padding: 0 3px; font-size: 0.72em; font-weight: 600; line-height: 1; vertical-align: super; text-decoration: none; }

/* ---------- One request, two assistants ---------- */

.split { padding: clamp(20px, 3.2vw, 36px); border: 1px solid var(--line-soft); border-radius: 14px; background: radial-gradient(120% 140% at 50% 0, rgba(80, 137, 184, 0.07), transparent 60%), var(--surface); }
.split .request { max-width: 26ch; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.split-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 4vw, 44px); margin-top: clamp(22px, 3vw, 32px); }
.side-run { padding-top: 14px; border-top: 1px solid var(--line); }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.side-head strong { font-size: var(--t-body); font-weight: 600; }
.side-score { color: var(--ink-dim); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.side-score b { color: var(--ink); font-size: var(--t-h3); font-weight: 600; }
.side-said { margin-top: 10px; color: #d6d6d6; font-size: var(--t-small); line-height: 1.55; }
.said-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--t-cap); }
.side-checks { margin: 12px 0 0; padding: 0; list-style: none; }
.side-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin-top: 6px; color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.45; }
.split figcaption { max-width: none; }
.mark { width: 16px; height: 16px; margin-top: 2px; }
.mark.ok { color: var(--good); }
.mark.no { color: var(--bad); }

/* ---------- How it works ---------- */

.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.flow-node { position: relative; display: grid; align-content: start; gap: 5px; padding: 16px 18px 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.5; }
.flow-node + .flow-node { border-left: 0; }
.flow-node:first-child { border-radius: 12px 0 0 12px; }
.flow-node:last-child { border-radius: 0 12px 12px 0; }
.flow-node strong { color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.node-kind { color: var(--phos); font-size: var(--t-cap); font-weight: 500; }
.flow-node:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 24px; right: -7px; width: 12px; height: 12px; border-top: 1px solid var(--phos); border-right: 1px solid var(--phos); background: var(--surface); transform: rotate(45deg); }

.defs { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0 24px; max-width: 52rem; margin: 26px 0 0; }
.defs dt { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.defs dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); color: #d6d6d6; font-size: var(--t-small); line-height: 1.6; }

.cast-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 20px; }
.cast-face { display: grid; justify-items: center; gap: 4px; color: var(--ink-dim); font-size: var(--t-cap); }
.head { display: block; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: #171c22; }
.head svg { width: 100%; height: 100%; }
.head.sm { width: 34px; height: 34px; }
.cast-more { margin-top: 14px; }
.cast-more summary, .as-table summary { color: var(--phos); font-size: var(--t-small); cursor: pointer; }
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.cast li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.4; }
.cast li b { color: var(--ink); font-weight: 600; }

.hard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 44px); max-width: 52rem; margin: 14px 0 0; padding: 0; list-style: none; }
.hard li { padding: 12px 0 14px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: var(--t-small); line-height: 1.55; }
.hard strong { color: var(--ink); font-weight: 600; }

.story-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.story-node { position: relative; padding-top: 28px; }
.story-node::before { content: ""; position: absolute; top: 9px; left: 0; right: -16px; height: 1px; background: var(--line); }
.story-node:last-child::before { right: 0; }
.story-dot { position: absolute; top: 3px; left: 0; width: 13px; height: 13px; border: 2px solid var(--phos); border-radius: 50%; background: var(--bg); }
.story-node.carries .story-dot { background: var(--phos); }
.story-node .sn { color: var(--muted); font-size: var(--t-cap); }
.story-node .so { display: block; margin-top: 6px; color: #d6d6d6; font-size: var(--t-cap); line-height: 1.5; }
.story-links { margin: 16px 0 0; padding: 0; list-style: none; }
.story-links li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.5; }
.mtype { display: inline-block; padding: 1px 9px; border: 1px solid rgba(217, 119, 6, 0.45); border-radius: 999px; color: var(--amber-ink); font-size: var(--t-cap); white-space: nowrap; }

/* ---------- Results ---------- */

.prelim-block { max-width: 46rem !important; padding: 10px 14px; border-left: 2px solid #d97706; background: rgba(217, 119, 6, 0.06); color: var(--amber-ink) !important; font-size: var(--t-small) !important; }
.prelim-block[hidden] { display: none; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.scroll-x { overflow-x: auto; }
.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lb th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-dim); font-size: var(--t-cap); font-weight: 500; text-align: left; white-space: nowrap; }
.lb td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: var(--t-small); }
.lb tbody tr:last-child td { border-bottom: 0; }
.lb th:first-child, .lb td:first-child { padding-left: 4px; }
.lb .num { text-align: right; }
.lb td.rank { width: 3rem; color: var(--ink-dim); }
.lb .pname { font-weight: 600; white-space: nowrap; }
.lb .score-cell { display: flex; align-items: center; gap: 14px; }
.lb .score-val { flex: none; min-width: 2.6rem; font-weight: 600; text-align: right; }
.lb .score-ci { display: none; color: var(--muted); font-size: var(--t-cap); white-space: nowrap; }
.mini { position: relative; flex: 1 1 auto; min-width: 7rem; max-width: 22rem; height: 18px; }
.mini .tr { position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--grid); }
.mini .ci { position: absolute; top: 8px; height: 2px; background: var(--phos); opacity: 0.6; }
.mini .pt { position: absolute; top: 9px; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--surface); border-radius: 50%; background: var(--phos); box-sizing: content-box; }
.lb .sorter { appearance: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.lb .sorter::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; border-inline: 4px solid transparent; vertical-align: 2px; }
.lb [aria-sort] .sorter { color: var(--phos); }
.lb [aria-sort="descending"] .sorter::after { border-top: 5px solid currentColor; }
.lb [aria-sort="ascending"] .sorter::after { border-bottom: 5px solid currentColor; }
.as-table { margin-top: 14px; }
.common-list { columns: 2 22rem; column-gap: 32px; margin: 10px 0 0; padding: 0; list-style: none; }
.common-list li { padding: 5px 0; break-inside: avoid; color: #d6d6d6; font-size: var(--t-cap); }
.common-list small { color: var(--muted); }

.seg { display: inline-flex; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { appearance: none; padding: 8px 16px; border: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: var(--t-cap); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--phos); }
.seg button:focus-visible { outline-offset: -2px; }

.hm { display: grid; grid-template-columns: minmax(9rem, 15rem) 3rem repeat(var(--cols), minmax(2.4rem, 1fr)); gap: 3px; }
.hm-row { display: contents; }
.hm .hh { display: flex; align-items: flex-end; padding: 0 2px 8px; color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.25; }
.hm .hh.p { justify-content: center; text-align: center; }
.hm .hh.n { justify-content: flex-end; }
.hm .rl { display: flex; align-items: center; padding-right: 10px; color: var(--ink); font-size: var(--t-cap); line-height: 1.3; }
.hm .rn { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; color: var(--muted); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.hm .c { display: flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 4px; font-size: var(--t-cap); font-weight: 500; font-variant-numeric: tabular-nums; }
.hm .few .rl, .hm .few .rn { color: var(--muted); }
.hm .few .c { border: 1px solid var(--axis); background: transparent; color: var(--muted); font-weight: 400; }
.hm .c.na { border: 1px solid var(--grid); color: var(--muted); }
.legend-ramp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; color: var(--muted); font-size: var(--t-cap); }
.legend-ramp .ramp { display: flex; width: 150px; height: 8px; border-radius: 4px; overflow: hidden; }
.legend-ramp .ramp i { flex: 1; }
.few-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.few-key i { width: 16px; height: 12px; border: 1px solid var(--axis); border-radius: 3px; }
.grid-note { margin-top: 8px; color: var(--ink-dim); font-size: var(--t-cap); }

/* ---------- Score against time ---------- */

.scatter { max-width: 46rem; }
.scatter svg { display: block; width: 100%; height: auto; overflow: visible; }
.scatter .gl { stroke: var(--grid); stroke-width: 1; }
.scatter .ax { stroke: var(--axis); stroke-width: 1; }
.scatter .tk { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.scatter .al { fill: var(--ink-dim); font-size: 13px; }
.scatter .dot { fill: var(--phos); stroke: var(--surface); stroke-width: 2; }
.scatter .lab { fill: var(--ink); font-size: 14px; font-weight: 500; }
.scatter .hit { fill: transparent; }

/* ---------- Separating tasks ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { appearance: none; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-dim); font: inherit; font-size: var(--t-cap); cursor: pointer; }
.chip:hover { color: var(--ink); border-color: rgba(74, 143, 194, 0.5); }
.chip[aria-pressed="true"] { border-color: var(--phos); background: rgba(74, 143, 194, 0.14); color: var(--ink); }
.sep-list { margin: 0; padding: 0; list-style: none; }
.sep-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem); gap: 8px 32px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.sep-axis { padding: 0 0 2px; border-top: 0; }
.sep-t { font-size: var(--t-small); line-height: 1.45; }
.sep-t small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-cap); }
.strip, .strip-axis { position: relative; margin-inline: 12px; }
.strip { height: 36px; }
.strip-axis { height: 16px; color: var(--muted); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.strip-axis span { position: absolute; transform: translateX(-50%); }
.strip .ax { position: absolute; top: 17px; left: 0; right: 0; height: 1px; background: var(--grid); }
.strip .tk { position: absolute; top: 13px; width: 1px; height: 9px; background: var(--axis); }
.strip .d { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid var(--surface); border-radius: 50%; background: #6a6a6a; box-sizing: content-box; }
.strip .d.on { z-index: 2; background: var(--phos); }
.strip .lab { position: absolute; z-index: 3; padding: 0 3px; border-radius: 3px; background: var(--bg); color: var(--ink); font-size: 0.8rem; font-weight: 600; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Findings and the replay player ---------- */

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; max-width: none !important; color: var(--ink-dim) !important; font-size: var(--t-cap) !important; }
.lg { display: inline-flex; align-items: center; gap: 7px; }
.lg i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; }
.lg-user { border: 1px solid color-mix(in srgb, #d9622b 50%, transparent); background: color-mix(in srgb, #d9622b 18%, #141414); }
.lg-bot { border: 1px solid #2f3a46; background: #161b20; }
.lg-app { border: 1px solid #c9d0d8; background: #f6f7f9; }
.lg-decide { border: 2px solid #d97706; background: #161b20; }

.finding { padding-top: 6px; scroll-margin-top: 80px; }
.finding + .finding { margin-top: 26px; }
.finding h3 { font-size: var(--t-h3); }

.player { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.p-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
.p-tab { appearance: none; display: grid; gap: 2px; padding: 11px 18px; border: 0; border-right: 1px solid var(--line-soft); background: transparent; color: var(--ink-dim); font: inherit; text-align: left; cursor: pointer; }
.p-tab b { color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.p-tab span { font-size: var(--t-cap); }
.p-tab[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--phos); }
.p-tab:focus-visible { outline-offset: -3px; }
.p-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 14px 20px 10px; }
.p-who { max-width: 48rem; color: var(--ink-dim); font-size: var(--t-small); line-height: 1.45; }
.p-who b { color: var(--ink); font-weight: 600; }
.p-score { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink-dim); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.p-score > span { white-space: nowrap; }
.p-score .ps-sep { color: var(--muted); }
.p-verdict { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; }
.p-verdict .mark { width: 12px; height: 12px; }
.p-verdict.ok { border: 1px solid rgba(60, 196, 106, 0.6); background: rgba(60, 196, 106, 0.14); color: #8fe0a9; }
.p-verdict.ok .mark { color: #8fe0a9; }
.p-verdict.no { border: 1px solid rgba(239, 107, 107, 0.65); background: rgba(239, 107, 107, 0.14); color: #f6b4b4; }
.p-verdict.no .mark { color: #f6b4b4; }
.p-score b { color: var(--ink); font-size: var(--t-h3); font-weight: 600; line-height: 1; }
/* a storyline's sessions across the top of the player: where it was said, and the session this replay plays */
.p-story { --said: #a855f7; margin: 0 20px 14px; }
.ps-h { margin: 0 0 8px; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ps-track { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ps-s { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 0 12px 2px 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.ps-s::before { content: ""; position: absolute; top: 12px; left: 30px; right: 4px; height: 2px; border-radius: 1px; background: var(--axis); }
.ps-s:last-child::before { display: none; }
.ps-s.past::before { background: linear-gradient(90deg, var(--said), var(--phos)); opacity: 0.55; }
.ps-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--axis); border-radius: 50%; background: var(--surface); color: var(--ink-dim); font: 650 0.78rem/1 Inter, system-ui, sans-serif; transition: background-color .35s, border-color .35s, color .35s, box-shadow .35s; }
.ps-n { color: var(--ink-dim); font-weight: 600; font-size: 0.78rem; }
.ps-t { overflow-wrap: anywhere; }
.ps-m { min-height: 1.3em; }
.ps-m i { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font: 600 0.7rem/1.5 Inter, system-ui, sans-serif; font-style: normal; white-space: nowrap; }
.ps-m i .mark { width: 11px; height: 11px; }
.ps-m .said { color: #d8b4fe; background: rgba(168, 85, 247, 0.14); border: 1px solid rgba(168, 85, 247, 0.45); }
.ps-m .play { color: #a9cdea; background: rgba(74, 143, 194, 0.12); border: 1px solid rgba(74, 143, 194, 0.4); }
.ps-m .ok { color: var(--good); background: rgba(60, 196, 106, 0.1); border: 1px solid rgba(60, 196, 106, 0.45); }
.ps-m .miss { color: #f3a9a9; background: rgba(239, 107, 107, 0.1); border: 1px solid rgba(239, 107, 107, 0.55); }
.ps-s.past .ps-dot { border-color: rgba(168, 85, 247, 0.5); background: #241a33; color: var(--ink); }
.ps-s.now .ps-dot { border-color: var(--phos); background: var(--phos); color: #fff; box-shadow: 0 0 0 5px rgba(74, 143, 194, 0.18); }
.ps-s.plant.now .ps-dot { border-color: var(--said); background: var(--said); box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.2); }
.ps-s.plant.past .ps-dot { border-color: var(--said); background: #3a2357; }
.ps-s.now .ps-n, .ps-s.now .ps-t { color: var(--ink); }
.ps-s.now .ps-t { font-weight: 500; }
/* what was said: opens in the planting session and stays, dimmer, while the later session plays */
.ps-said { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .45s ease, margin-top .45s ease; }
.p-story:not([data-at=""]) .ps-said { grid-template-rows: 1fr; margin-top: 10px; }
.ps-in { min-height: 0; overflow: hidden; border-left: 2px solid var(--said); border-radius: 0 8px 8px 0; background: rgba(168, 85, 247, 0.07); color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.5; transition: background-color .4s, border-color .4s; }
.ps-in p { margin: 0; padding: 9px 13px; }
.ps-in p b { color: #d8b4fe; font-weight: 600; }
.p-story[data-at="plant"] .ps-in { background: rgba(168, 85, 247, 0.14); color: var(--ink); }
.p-story[data-at="now"] .ps-in, .p-story[data-at="done"] .ps-in { border-left-color: rgba(168, 85, 247, 0.55); background: rgba(168, 85, 247, 0.05); }
.ps-nw { color: var(--muted); }
.ps-res { display: grid; gap: 4px; margin: 0; padding: 8px 13px 10px; border-top: 1px solid rgba(168, 85, 247, 0.2); list-style: none; }
.ps-res[hidden] { display: none; }
.ps-res li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: start; color: var(--ink-dim); }
.ps-res li .mark { width: 14px; height: 14px; margin-top: 3px; }
.ps-res li b { font-weight: 600; }
.ps-res li.ok b { color: var(--good); }
.ps-res li.miss b { color: #f3a9a9; }
.ps-res li.ps-rh { display: block; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.player.still .ps-dot, .player.still .ps-said, .player.still .ps-in { transition: none; }
@media (prefers-reduced-motion: reduce) { .ps-dot, .ps-said, .ps-in { transition: none; } }
.p-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); border-top: 1px solid var(--line-soft); }

.figure .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes shake { 0%, 100% { transform: translateX(-50%); } 20% { transform: translateX(calc(-50% - 6px)); } 40% { transform: translateX(calc(-50% + 5px)); } 60% { transform: translateX(calc(-50% - 3px)); } 80% { transform: translateX(calc(-50% + 2px)); } }
@keyframes shake-m { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.dots span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--muted); animation: dot 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* Record cards: one neutral look; the app is named in words. Colour is kept for what the assistant did. */
@keyframes arrive { from { opacity: 0; transform: translateX(60px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes arrive-l { from { opacity: 0; transform: translateX(-60px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.badge.new { background: #3a2a10; color: var(--amber-ink); border: 1px solid rgba(217, 119, 6, 0.6); }
.badge.write { background: var(--phos); color: #06121c; }
.badge.readb { background: #0f1a24; color: #9fc9ea; border: 1px solid var(--phos); }
.badge.decide { background: #2a1d08; color: var(--amber-ink); border: 1px solid #d97706; }
.badge.unread { background: #2a0f0f; color: #f3a9a9; border: 1px solid var(--bad); }
@keyframes ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }

.log { display: flex; flex: 1 1 0; flex-direction: column; gap: 9px; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.msg { max-width: 94%; padding: 8px 12px; border-radius: 14px; font-size: var(--t-cap); line-height: 1.45; animation: pop 0.3s ease; overflow-wrap: anywhere; }
.msg.assistant { align-self: flex-start; border: 1px solid var(--grid); background: #181818; }
.msg .said { margin: 0; white-space: pre-line; }
.msg .said + .said, .msg .ui + .said, .msg .said + .ui, .msg .ui + .ui { margin-top: 8px; }
.msg.user { align-self: flex-end; border: 1px solid color-mix(in srgb, var(--who) 40%, transparent); background: color-mix(in srgb, var(--who) 18%, #141414); }
.msg.event { align-self: center; max-width: 100%; padding: 3px 11px; border-radius: 999px; background: rgba(74, 143, 194, 0.12); color: #a9d0ee; font-size: 0.8125rem; }
.msg.event.read { background: rgba(74, 143, 194, 0.06); border: 1px solid rgba(74, 143, 194, 0.4); }
.msg.event.remove { background: rgba(239, 107, 107, 0.1); color: #f3a9a9; }
.msg.timeout { align-self: flex-start; border: 1px dashed var(--bad); background: transparent; color: #f3a9a9; }
.msg .by { display: block; margin-bottom: 3px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.ui { padding: 8px 10px; border: 1px solid #2c3640; border-radius: 9px; background: #12171c; }
.ui-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { padding: 2px 9px; border: 1px solid #3a4652; border-radius: 7px; color: #d6d6d6; font-size: 0.8125rem; }
.status { color: var(--ink-dim); }
.approval dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 0.8125rem; }
.approval dt { color: var(--muted); }
.approval dd { margin: 0; color: #d6d6d6; font-family: var(--mono); font-size: 0.75rem; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kind { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 0.6875rem; font-weight: 600; vertical-align: 1px; }
.kind.answer { background: rgba(74, 143, 194, 0.18); color: #8ec3ea; }
.kind.deflect, .kind.other, .kind.reminder, .kind.nudge { background: rgba(255, 255, 255, 0.07); color: var(--ink-dim); }
.kind.correction { background: rgba(239, 107, 107, 0.16); color: #f3a9a9; }
.kind.approval { background: rgba(255, 255, 255, 0.1); color: #e2e2e2; }

.p-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: var(--t-cap); }
.p-ctrl button { appearance: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--t-cap); cursor: pointer; }
.p-ctrl button:hover { border-color: rgba(74, 143, 194, 0.55); }
.p-ctrl button[hidden] { display: none; }
.p-ctrl .p-steps { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.p-ctrl .prog { font-variant-numeric: tabular-nums; }
.p-ctrl button.p-step { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 1.05rem; line-height: 1; }
.p-ctrl button.p-step:disabled { opacity: 0.35; cursor: default; }
button.p-jump { appearance: none; padding: 6px 13px; border: 1px solid; font: inherit; font-size: var(--t-cap); cursor: pointer; border-color: rgba(168, 85, 247, 0.6); border-radius: 999px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(74, 143, 194, 0.32)); color: #fff; font-weight: 600; }
button.p-jump:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(74, 143, 194, 0.5)); border-color: rgba(168, 85, 247, 0.85); }
button.p-jump-top { display: none; }
button.p-jump:focus-visible, .p-ctrl button:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.p-grade { padding: 14px 20px 16px; border-top: 1px solid var(--line-soft); }
.p-grade summary { color: var(--ink); font-size: var(--t-small); font-weight: 600; cursor: pointer; }
.p-grade summary span { color: var(--muted); font-weight: 400; }
.p-grade ul { margin: 10px 0 0; padding: 0; list-style: none; columns: 2 22rem; column-gap: 32px; }
.p-grade ul[hidden] { display: none; }
.p-grade li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; break-inside: avoid; padding: 5px 0; color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.45; }
.p-grade li small { color: var(--muted); }

/* ---------- Methods ---------- */

.plain { width: 100%; max-width: 56rem; margin-top: 16px; border-collapse: collapse; font-size: var(--t-cap); }
.plain th { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-dim); font-weight: 500; text-align: left; vertical-align: bottom; }
.plain td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); color: #d6d6d6; vertical-align: top; }
.plain.num td:not(:first-child), .plain.num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.plain td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.plain.narrow { max-width: 42rem; }
.plain .sub { color: var(--muted); }
.quote { max-width: var(--measure); margin: 14px 0 0; padding: 10px 16px; border-left: 2px solid var(--line); color: #cfcfcf; font-size: var(--t-small); line-height: 1.6; }
.bullets { max-width: var(--measure); margin: 14px 0 0; padding-left: 18px; color: #dcdcdc; font-size: var(--t-small); line-height: 1.6; }
.bullets li + li { margin-top: 6px; }

.cite { position: relative; max-width: 46rem; margin-top: 20px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.cite pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: #d6d6d6; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; }
.copy { position: absolute; top: 10px; right: 10px; appearance: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink-dim); font: inherit; font-size: var(--t-cap); cursor: pointer; }
.copy:hover { color: var(--ink); }
.notes { max-width: var(--measure); margin: 32px 0 0; padding: 16px 0 0 18px; border-top: 1px solid var(--line-soft); color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.6; }
.notes li + li { margin-top: 10px; }
.notes li:target { color: var(--ink); }
.notes a { text-decoration: none; }
.post .generated { margin-top: 22px; color: var(--muted); font-size: var(--t-cap); }

/* ---------- Tooltip ---------- */

.tip { position: fixed; z-index: 40; max-width: 260px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: #1c1c1c; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.45; pointer-events: none; }
.tip b { display: block; color: var(--ink); font-weight: 600; }
.tip[hidden] { display: none; }

/* ---------- Narrow screens ---------- */

@media (max-width: 64rem) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 60rem) {
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-node:first-child { border-radius: 12px 0 0 0; }
  .flow-node:nth-child(2) { border-radius: 0 12px 0 0; }
  .flow-node:nth-child(3) { border-left: 1px solid var(--line); border-top: 0; border-radius: 0 0 0 12px; }
  .flow-node:last-child { border-top: 0; border-radius: 0 0 12px 0; }
  .flow-node:nth-child(2)::after { display: none; }
  .p-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.5rem) {
  .split-cols, .hard { grid-template-columns: minmax(0, 1fr); }
  .defs { grid-template-columns: minmax(0, 1fr); }
  .defs dd { padding-top: 0; border-top: 0; }
  .story-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-node { padding: 0 0 16px 28px; }
  .story-node::before { top: 8px; bottom: -8px; left: 6px; right: auto; width: 1px; height: auto; }
  .story-node:last-child::before { display: none; }
  .story-dot { top: 2px; }
  .sep-item { grid-template-columns: minmax(0, 1fr); }
  .sep-axis > div:first-child { display: none; }
  .hm { grid-template-columns: minmax(5.2rem, 1fr) 1.6rem repeat(var(--cols), 1.95rem); gap: 2px; }
  .hm .hh.p { writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-start; align-items: center; padding: 0 0 6px; height: 6.8rem; }
  .hm .rl { font-size: 0.8125rem; }
  .hm .c { min-height: 34px; font-size: 0.8125rem; }
  .few-key { margin-left: 0; }
  .lb .hide-s, .plain .hide-s, figcaption .hide-s { display: none; }
  .lb td, .lb th { padding-left: 6px; padding-right: 6px; }
  .mini { display: none; }
  .lb .score-cell { display: block; }
  .lb .score-val { text-align: left; }
  .lb .score-ci { display: block; }

  /* hero: the name sits over a full-width interval */
  .ivl { grid-template-columns: minmax(0, 1fr); }
  .ivl-name { padding: 8px 0 0; font-size: var(--t-cap); }
  .ivl-row.tier-start .ivl-plot { border-top: 0; }
  .ivl-plot { height: 28px; }
  .ivl-axis { grid-column: 1; }

  /* replay: the figure beside the bubble, the records in one scrolling row, then the log */
  .p-tab { flex: 1 1 50%; padding: 10px 12px; }
  .p-head { padding: 12px 14px 8px; }
  .p-story { margin: 0 14px 12px; }
  button.p-jump-top { display: inline-block; }
  .ps-track { grid-template-columns: repeat(var(--n, 4), minmax(8.6rem, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
  .ps-s { scroll-snap-align: start; }
  .log { padding: 14px 12px; }
  .p-grade { padding: 12px 14px; }
}

@media (max-width: 30rem) {
  .flow-steps { grid-template-columns: minmax(0, 1fr); }
  .flow-node, .flow-node:nth-child(n) { border: 1px solid var(--line); border-radius: 0; }
  .flow-node + .flow-node { border-top: 0; }
  .flow-node:first-child { border-radius: 12px 12px 0 0; }
  .flow-node:last-child { border-radius: 0 0 12px 12px; }
  .flow-node:not(:last-child)::after { display: block; top: auto; bottom: -7px; right: auto; left: 28px; transform: rotate(135deg); }
  .flow-node:nth-child(2)::after { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .figure .eyes, .dots span, .msg { animation: none !important; }
}

/* ---------- Round 3 (REVIEW_2) ---------- */

.split-gloss { max-width: 46rem; margin-bottom: 10px; color: var(--ink-dim); font-size: var(--t-cap); }
.hm .rl { flex-direction: column; align-items: flex-start; justify-content: center; }
.hm .rl small { margin-top: 2px; color: var(--muted); font-size: 0.75rem; }
.sep-plot { min-width: 0; }
.sep-who { margin: 2px 12px 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.sep-who b { color: var(--ink-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.sep-who .on { color: var(--ink); font-weight: 600; }
.table-note { max-width: 46rem; margin-top: 10px; color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.55; }
.lb caption + thead th, .lb th { vertical-align: bottom; }
#boardCap .fn { margin-right: 2px; }

@media (max-width: 47.5rem) {
  /* The site's header stays at the top of the page here, so it never covers a figure or a table being read. */
  body[data-page="post"] .nav { position: static; }

  /* The products table as one block per product, every field labelled. */
  #products thead { display: none; }
  #products, #products tbody, #products tr, #products td { display: block; width: auto; }
  #products tr { padding: 12px 0; border-top: 1px solid var(--line-soft); }
  #products td { padding: 2px 0; border: 0; white-space: normal; text-align: left; }
  #products td.pc-name { padding-bottom: 4px; color: var(--ink); font-weight: 600; }
  #products td[data-h]::before { content: attr(data-h) ": "; color: var(--muted); }

  /* A row of record cards that scrolls sideways fades out at its right edge, so it reads as "more this way". */
  .sep-who { margin-inline: 0; }

  /* The leaderboard fits 390 px: heads wrap, names wrap, tighter cells. */
  .lb th { white-space: normal; line-height: 1.25; }
  .lb td, .lb th { padding-left: 4px; padding-right: 4px; }
  .lb td.rank { width: 1.6rem; }
  .lb .pname { white-space: normal; }
}
.ivl-axis span.start { transform: none; }

/* ---------- Request against hard part (finding 1): one row per product, two marks joined by a line ---------- */

.dumb-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; color: var(--ink-dim); font-size: var(--t-cap); }
.dumb-key span { display: inline-flex; align-items: center; gap: 8px; }
.dumb-key i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; }
.dumb-key .k-req i { border: 2px solid var(--ink-dim); }
.dumb-key .k-hard i { background: var(--phos); }
#dumbChart { margin-top: 12px; }
.dumb .db-link { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--axis); }
.dumb .db-req, .dumb .db-hard { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-sizing: border-box; }
.dumb .db-req { border: 2px solid var(--ink-dim); background: var(--surface); }
.dumb .db-hard { background: var(--phos); box-shadow: 0 0 0 2px var(--surface); }
.dumb .db-val { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--t-cap); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dumb .db-val.vh { margin-right: 10px; color: var(--ink); font-weight: 600; }
.dumb .db-val.vr { margin-left: 10px; color: var(--ink-dim); }
.dumb { padding-right: 28px; }

/* ---------- Round 5: post head under the shared title block ---------- */
.post-head { padding-block: clamp(40px, 6vw, 72px) 0; }
.post-title { max-width: 26ch; margin: 0; font-size: clamp(1.9rem, 3.8vw, 2.75rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.post-head .dek { max-width: 42rem; margin-top: 20px; color: #d6d6d6; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.65; }
.opening { display: grid; gap: 16px; margin-top: 22px; }
.opening p { max-width: 64ch; margin: 0; color: var(--ink-dim); font-size: var(--t-body); line-height: 1.6; }
.fig figcaption b { color: var(--ink); font-weight: 600; }
.part h3 { margin-top: 48px; font-size: clamp(1.3125rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; }
.part > h2 { font-size: clamp(1.6rem, 2.8vw, 2rem); }
.legend { margin-top: 18px !important; }

/* ---------- Round 6: no early wrapping. Headings, the head, captions and notes use the full column; body
   paragraphs keep a reading measure of about 75 characters. ---------- */
.post p, .post li, .post dd, .post h1, .post h2, .post h3 { text-wrap: wrap; }
.post { --measure: 46rem; }
.post-title, .part h3, .part > h2 { max-width: none; }
.post-head .dek, .opening { max-width: 60rem; }
.fig figcaption, .table-note, .p-who, .cite, .legend { max-width: none; }

/* ---------- Round 7: prose runs the full content column (no reading measure, no contents rail) ---------- */
.post { --measure: none; }
.post-head .dek, .opening, .part > p, .finding > p, .bullets, .quote { max-width: none; }

/* ---------- Round 9: the contents rail is back (right of the full-width column); on narrow screens a disclosure ---------- */
.article { grid-template-columns: minmax(0, 1fr) 12rem; gap: clamp(28px, 3.5vw, 56px); }
.toc ol { top: 96px; }
.toc a { font-size: 0.9rem; padding: 6px 0 6px 14px; }
.toc-m { display: none; margin: 0 0 8px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.toc-m summary { padding: 12px 16px; color: var(--ink); font-size: var(--t-small); font-weight: 500; cursor: pointer; }
.toc-m ol { margin: 0; padding: 0 16px 12px 34px; color: var(--ink-dim); font-size: var(--t-small); line-height: 1.9; }
.toc-m a { color: var(--ink-dim); text-decoration: none; }
@media (max-width: 64rem) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .toc-m { display: block; }
}

/* ---------- Round 10: the pipeline figure (Figure 1) ---------- */
.pipeline {
  --pl-cols: minmax(0, 1.1fr) 44px minmax(0, 1.15fr) 44px minmax(0, 0.9fr) 44px minmax(0, 1.05fr) 44px minmax(0, 1.1fr);
  position: relative;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(74, 143, 194, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(74, 143, 194, 0.09), transparent 70%),
    radial-gradient(40% 60% at 50% 55%, rgba(168, 85, 247, 0.06), transparent 70%),
    #0d0f13;
  overflow: hidden;
}
.pipeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(150, 180, 210, 0.16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}
.pl-lanes, .pl-grid, .pl-grade { position: relative; display: grid; grid-template-columns: var(--pl-cols); }
.pl-lanes { margin-bottom: 14px; }
.pl-lane { position: relative; padding-top: 10px; color: var(--ink-dim); font-size: 0.8125rem; text-align: center; }
.pl-lane::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 6px; border: 1px solid rgba(74, 143, 194, 0.45); border-bottom: 0; border-radius: 6px 6px 0 0; }
.pl-lane.ctl { grid-column: 1 / 5; }
.pl-lane.data { grid-column: 6 / 10; }
.pl-lane.data::before { border-color: rgba(168, 85, 247, 0.5); }
.pl-grid { align-items: center; }
.pl-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-kicker { margin: 0 0 2px; color: var(--phos); font-size: 0.8125rem; font-weight: 500; }
.pl-card {
  display: grid;
  gap: 4px;
  padding: 11px 13px 12px;
  border: 1px solid rgba(74, 143, 194, 0.2);
  border-radius: 12px;
  background: rgba(18, 20, 24, 0.92);
  color: var(--ink-dim);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.pl-card strong { color: var(--ink); font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.pl-agent {
  padding: 18px 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(#111419, #111419) padding-box,
    linear-gradient(135deg, #a855f7, #4a8fc2 55%, #22b3c7) border-box;
  box-shadow: 0 0 40px rgba(110, 120, 240, 0.16);
}
.pl-agent strong { font-size: 1rem; }
.pl-logos { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 5px; }
.pl-logo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--ink); font-size: 0.75rem; white-space: nowrap; }
.pl-logo img { width: 18px; height: 18px; border-radius: 5px; background: #fff; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pl-chips i { padding: 1px 7px; border: 1px solid rgba(74, 143, 194, 0.25); border-radius: 999px; color: var(--ink-dim); font-size: 0.6875rem; font-style: normal; }
.pl-step { padding: 8px 13px; }
.pl-world { border-color: rgba(217, 119, 6, 0.35); }
.pl-world strong { color: var(--amber-ink); }
.pl-arrow { align-self: center; height: 14px; }
.pl-arrow svg { display: block; width: 100%; height: 14px; overflow: visible; }
.pl-track { fill: none; stroke: rgba(74, 143, 194, 0.28); stroke-width: 1.5; }
.pl-flow { fill: none; stroke: #8fb6ff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3 9; opacity: 0.9; }
.pl-head { fill: none; stroke: #8fb6ff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-grade { margin-top: 18px; row-gap: 0; }
.pl-grade-line { grid-column: 1 / 10; height: 20px; margin: 0 9% 0; border: 1px dashed rgba(168, 85, 247, 0.45); border-bottom: 0; border-radius: 12px 12px 0 0; }
.pl-grader { grid-column: 3 / 8; text-align: center; border-color: rgba(168, 85, 247, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  .pl-flow { animation: pl-run 1.4s linear infinite; }
  .pipeline:hover .pl-flow { animation-duration: .8s; }
  @keyframes pl-run { to { stroke-dashoffset: -24; } }
}
@media (max-width: 56rem) {
  .pl-lanes, .pl-grade-line { display: none; }
  .pl-grid, .pl-grade { grid-template-columns: minmax(0, 1fr); }
  .pl-arrow { justify-self: center; width: 40px; height: 36px; transform: rotate(90deg); }
  .pl-arrow svg { margin-top: 11px; }
  .pl-grade { margin-top: 0; }
  .pl-grade::before { content: ""; justify-self: center; width: 1px; height: 26px; background: rgba(74, 143, 194, 0.45); }
  .pl-grader { grid-column: 1; }
}

/* ---------- Round 11: key findings label and the people's digital worlds ---------- */
.kf-h { margin: 26px 0 0; color: var(--phos); font-size: var(--t-small); font-weight: 500; }
.post-head .summary-list { margin-top: 12px; }
.worlds { padding-top: clamp(40px, 5vw, 64px); }
.worlds > h2 { font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight: 300; letter-spacing: -0.02em; }
.worlds > p { margin-top: 16px; color: #dcdcdc; font-size: var(--t-body); line-height: 1.7; }
.w-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 26px; border: 1px solid rgba(74, 143, 194, 0.22); border-radius: 14px; overflow: hidden; background: rgba(74, 143, 194, 0.22); }
.w-stat { display: grid; gap: 4px; padding: 18px 20px; background: #0e1014; }
.w-stat b { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(90deg, #c8b4ff, #8fb6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.w-stat span { color: var(--ink-dim); font-size: var(--t-cap); }
.w-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: 22px; align-items: start; }
.w-apps-fig, .w-card { margin: 0; padding: 18px 20px; border: 1px solid rgba(74, 143, 194, 0.18); border-radius: 14px; background: var(--surface); }
.w-app { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 3.4rem; gap: 10px; align-items: center; padding: 5px 0; font-size: var(--t-small); }
.w-app-n { color: var(--ink); }
.w-app-bar { height: 8px; border-radius: 4px; background: #1b1f26; overflow: hidden; }
.w-app-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #a855f7, #4a8fc2); }
.w-app-v { color: var(--ink-dim); font-variant-numeric: tabular-nums; text-align: right; }
.w-apps-fig figcaption, .w-card figcaption { margin-top: 12px; color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.5; }
.w-card-h { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.w-card-h b { display: block; color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.w-card-h span { color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.45; }
.w-card-n { margin: 12px 0 0; color: var(--ink-dim); font-size: var(--t-cap); }
.w-snips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.w-snips li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; background: #0f1216; font-size: var(--t-cap); line-height: 1.4; }
.w-snip-app { color: var(--phos); font-size: 0.75rem; }
.w-snips b { color: var(--ink); font-weight: 600; }
.w-snip-t { color: var(--ink-dim); }
.w-snips small { color: var(--muted); }
@media (max-width: 60rem) {
  .w-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .w-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-app { grid-template-columns: 8.5rem minmax(0, 1fr) 3rem; }
  .w-snips { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Round 12: the two channels as enclosing modules in Figure 1 ---------- */
.pipeline .pl-grid { grid-template-columns: minmax(0, 2.3fr) 40px minmax(0, 0.95fr) 40px minmax(0, 2.2fr); margin-top: 14px; }
.pl-mod {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  padding: 30px 14px 14px;
  border: 1px solid rgba(110, 160, 220, 0.32);
  border-radius: 16px;
  background: rgba(74, 143, 194, 0.045);
}
.pl-mod.data { border-color: rgba(168, 130, 250, 0.36); background: rgba(150, 110, 250, 0.045); }
.pl-mod-h {
  position: absolute;
  top: -10px;
  left: 16px;
  max-width: calc(100% - 32px);
  padding: 2px 10px;
  border: 1px solid rgba(110, 160, 220, 0.32);
  border-radius: 999px;
  background: #0d0f13;
  color: #b8d3f0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}
.pl-mod.data .pl-mod-h { border-color: rgba(168, 130, 250, 0.36); color: #d4c4ff; }
@media (max-width: 56rem) {
  .pipeline .pl-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-mod { grid-template-columns: minmax(0, 1fr); padding: 34px 12px 14px; }
  .pl-mod-h { white-space: normal; }
}
.pl-mod-h { white-space: nowrap; }
.contrib { margin: 14px 0 0; padding-left: 1.4em; color: #dcdcdc; font-size: var(--t-body); line-height: 1.65; }
.contrib li { margin-top: 12px; padding-left: 4px; }
.contrib li::marker { color: var(--phos); font-weight: 500; }
.contrib .c-lead { color: var(--ink); font-weight: 500; }

/* ---------- Round 12b: plain channel titles above the modules; no graders box ---------- */
.pl-modwrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pl-mod-t { margin: 0; line-height: 1.3; }
.pl-mod-t b { display: block; color: var(--ink); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.pl-mod-t span { display: block; margin-top: 3px; color: var(--ink-dim); font-size: 0.875rem; }
.pl-modwrap.ctl .pl-mod-t b { color: #cfe2f6; }
.pl-modwrap.data .pl-mod-t b { color: #e2d8ff; }
.pl-mod { padding: 16px 14px 14px; }
.pipeline .pl-grid { margin-top: 0; }
@media (min-width: 56.01rem) {
  .pipeline .pl-grid > .pl-arrow, .pipeline .pl-grid > .pl-mid { margin-top: 4.1rem; }
}
@media (max-width: 56rem) {
  .pl-modwrap { gap: 10px; }
}

/* ---------- Round 12c: the rail expands the active section into its subsections ---------- */
.toc .toc-sub-wrap { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s; }
.toc .toc-sec.open .toc-sub-wrap { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.28s ease, visibility 0s; }
.toc .toc-sub { min-height: 0; overflow: hidden; margin: 0 0 4px; padding: 0; list-style: none; border: 0; position: static; }
.toc .toc-sub a { padding: 5px 0 5px 26px; font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.toc .toc-sub a:hover { color: var(--ink); }
.toc .toc-sub a[aria-current="true"] { color: var(--ink); border-left-color: rgba(74, 143, 194, 0.6); }
.toc .toc-sec.open > a { color: var(--ink); }
.toc-m ol ol { margin: 2px 0 6px; padding-left: 16px; font-size: 0.875rem; line-height: 1.7; list-style: none; }
@media (prefers-reduced-motion: reduce) { .toc .toc-sub-wrap, .toc .toc-sec.open .toc-sub-wrap { transition: none; } }
.pipeline .pl-grid { align-items: stretch; }
.pipeline .pl-grid > .pl-arrow, .pipeline .pl-grid > .pl-mid { align-self: center; }
.pl-modwrap .pl-mod { flex: 1; }

/* The first section starts right under the tabs: no extra gap above "Introduction". */
.body > .part:first-of-type > h2 { padding-top: 0; }

/* Figure 4: efficiency scatter */
.eff-wrap { position: relative; padding: 30px 8px 46px 44px; }
.eff-plot { position: relative; height: clamp(260px, 38vw, 380px); border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.eff-gy, .eff-gx { position: absolute; background: var(--grid); }
.eff-gy { left: 0; right: 0; height: 1px; }
.eff-gx { top: 0; bottom: 0; width: 1px; }
.eff-gy b, .eff-gx b { position: absolute; font-weight: 400; font-size: var(--t-cap); color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eff-gy b { right: calc(100% + 8px); transform: translateY(-50%); }
.eff-gx b { top: calc(100% + 6px); transform: translateX(-50%); }
.eff-dot { position: absolute; width: var(--s); height: var(--s); transform: translate(-50%, 50%); display: block; cursor: default; z-index: 1; }
.eff-dot img { width: 100%; height: 100%; border-radius: 24%; display: block; box-shadow: 0 0 0 2px var(--surface), 0 2px 10px rgba(0, 0, 0, .35); background: #fff; }
.eff-dot:hover, .eff-dot.tip-on { z-index: 2; }
.eff-dot:hover img, .eff-dot.tip-on img { box-shadow: 0 0 0 2px var(--phos), 0 2px 12px rgba(0, 0, 0, .45); }
.eff-dot:focus-visible { outline: none; }
.eff-dot:focus-visible img { box-shadow: 0 0 0 2px var(--phos), 0 0 0 4px var(--surface), 0 0 0 6px var(--phos); }
.eff-name { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-size: var(--t-cap); color: var(--ink); white-space: nowrap; }
.eff-dot.flip .eff-name { left: auto; right: calc(100% + 8px); }
.eff-ylab, .eff-xlab { position: absolute; font-size: var(--t-cap); color: var(--ink-dim); }
.eff-ylab { left: 0; top: 4px; }
.eff-xlab { left: 50%; transform: translateX(-50%); bottom: 4px; }
.eff-key { margin-top: 4px; color: var(--ink-dim); font-size: var(--t-cap); }
@media (max-width: 560px) { .eff-name { display: none; } .eff-wrap { padding-left: 38px; } }

/* ---------- Where today's personal agents fail: an animated scene per domain ---------- */
.fx { overflow: hidden; margin: 22px 0 0; padding: 18px 20px 14px; border: 1px solid var(--grid); border-radius: 14px; background: var(--surface); }
.fx-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-tabs button { position: relative; overflow: hidden; padding: 7px 14px 9px; border: 1px solid var(--axis); border-radius: 999px; background: none; color: var(--ink-dim); font: 500 0.84rem/1 Inter, system-ui, sans-serif; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.fx-tabs button:hover { color: var(--ink); }
.fx-tabs button[aria-selected=true] { color: var(--ink); border-color: var(--bad); background: rgba(239, 107, 107, 0.08); }
.fx-tabs button:focus-visible, .fx-ctrl button:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.fx-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--bad); }
.part h4.fx-title { margin: 18px 0 14px; color: var(--ink); font-size: 1.3rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.fx-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) 22px minmax(0, 1.1fr) 22px minmax(0, 0.85fr); align-items: start; }
.fx-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fx-label { color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.fx-l2 { margin-top: 6px; }
.fx-bubble { padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; }
.fx-user { align-self: flex-start; max-width: 95%; border-bottom-left-radius: 4px; background: #24303b; color: var(--ink); }
.fx-bot { border-bottom-right-radius: 4px; background: var(--surface-2); border: 1px solid var(--grid); color: #dcdcdc; }
.fx-who { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.fx-arrow { align-self: center; height: 2px; margin: 0 4px; background: linear-gradient(90deg, transparent, var(--axis)); }
.fx-doc { position: relative; padding: 12px 14px 14px; border: 1px solid var(--axis); border-radius: 10px; background: #f4f1ea; color: #222; }
.fx-doc-h { display: flex; align-items: center; gap: 6px; color: #6b6b6b; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fx-doc-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fx-doc-h em { margin-left: auto; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.fx-doc-from { margin-top: 8px; font-size: 0.82rem; font-weight: 600; }
.fx-doc-subj { font-size: 0.86rem; font-weight: 600; color: #111; }
.part .fx-doc-body { margin: 6px 0 0; max-width: none; color: #333; font-size: 0.86rem; line-height: 1.5; }
.fx-doc mark { color: inherit; background: linear-gradient(90deg, rgba(239, 107, 107, 0.38), rgba(239, 107, 107, 0.38)) no-repeat 0 100% / 0 100%; transition: background-size .5s ease; padding: 0 1px; }
.fx-stamp { position: absolute; top: -12px; right: -8px; padding: 3px 10px; border: 2px solid var(--bad); border-radius: 6px; background: var(--surface); color: var(--bad); font: 700 0.8rem/1.2 Inter, system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(8deg) scale(2.2); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .2s; }
.fx-count { display: flex; align-items: baseline; gap: 6px; }
.fx-count b { color: var(--bad); font: 700 3.2rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fx-count span { color: var(--ink-dim); font-size: 1rem; }
.fx-logos { display: grid; grid-template-columns: repeat(7, 28px); gap: 7px; padding-right: 6px; }
.fx-logo { position: relative; display: inline-flex; width: 28px; height: 28px; transition: filter .3s, opacity .3s, transform .3s; }
.fx-logo img { width: 100%; height: 100%; border-radius: 8px; background: #fff; outline: 1px solid rgba(255, 255, 255, 0.12); outline-offset: -1px; }
.fx-logo.sm { width: 18px; height: 18px; }
.fx-logo.sm img { border-radius: 5px; }
.fx-logo.x { transform: scale(0.94); }
.fx-logo.x img { filter: grayscale(0.85) brightness(0.7); outline: 2px solid var(--bad); outline-offset: 1px; }
.fx-logo.x::after { content: "\2715"; position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--bad); color: #fff; font: 700 9px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 2px var(--surface); animation: fxX .25s ease-out; }
.fx-logo.ok img { outline: 2px solid var(--good); outline-offset: 1px; }
@keyframes fxX { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.part .fx-also { margin: 4px 0 0; max-width: none; color: var(--ink-dim); font-size: 0.84rem; line-height: 1.5; }
.fx-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 0.8rem; }
.fx-ctrl button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 1px solid var(--axis); border-radius: 999px; background: none; color: var(--ink-dim); font: inherit; cursor: pointer; }
.fx-ctrl button:hover { color: var(--ink); }
/* the beats: each part waits hidden until its beat */
.fx-user, .fx-l2, .fx-bot, .fx-rec, .fx-verdict, .fx-arrow, .fx-also { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.fx-stage.b1 .fx-user, .fx-stage.b2 .fx-l2, .fx-stage.b2 .fx-bot, .fx-stage.b3 .fx-rec, .fx-stage.b3 .fx-arrow:nth-of-type(2), .fx-stage.b5 .fx-verdict, .fx-stage.b5 .fx-arrow:nth-of-type(4), .fx-stage.b6 .fx-also { opacity: 1; transform: none; }
.fx-stage .fx-rec { transform: translateX(24px); }
.fx-stage.b3 .fx-rec { transform: none; }
.fx-stage.b4 .fx-doc mark { background-size: 100% 100%; }
.fx-stage.b4 .fx-stamp { opacity: 1; transform: rotate(8deg) scale(1); }
@media (max-width: 47.5rem) {
  .fx { padding: 14px 14px 12px; }
  .fx-stage { grid-template-columns: 1fr; gap: 16px; min-height: 0; }
  .fx-arrow { display: none; }
  .fx-stage .fx-rec { transform: translateY(8px); }
  .fx-stamp { right: 6px; }
  .fx-logos { grid-template-columns: repeat(7, 28px); }
  .fx-logo { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-user, .fx-l2, .fx-bot, .fx-rec, .fx-verdict, .fx-arrow, .fx-also, .fx-stamp, .fx-doc mark, .fx-logo { transition: none !important; animation: none !important; }
}
.tldr-contrib { margin: 10px 0 12px; padding-left: 1.2em; color: var(--ink); font-size: 0.95rem; line-height: 1.6; }
.tldr-contrib li { margin-top: 6px; }
.tldr-contrib li::marker { color: var(--phos); }
.tldr-contrib b { font-weight: 600; }


/* the scene's story: shown in full the moment the scene starts */
.fx-story { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--grid); border-left: 3px solid var(--amber-ink); border-radius: 0 10px 10px 0; background: var(--surface-2); }
.part .fx-story p { margin: 0; max-width: none; color: #dcdcdc; font-size: var(--t-small); line-height: 1.65; }
.part .fx-story p b { color: var(--amber-ink); font-weight: 600; }
.part p.fx-mode { max-width: none; margin: 18px 0 0; padding: 14px 18px; border: 1px solid rgba(240, 180, 90, 0.35); border-radius: 10px; background: rgba(240, 180, 90, 0.08); opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.part p.fx-mode.on { opacity: 1; transform: none; }
.fx-mode .fx-label { display: block; margin-bottom: 6px; color: var(--amber-ink); font-size: 0.78rem; }
.fx-fm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fx-fm-tags .fx-ttag { margin: 0; padding: 4px 10px; font-size: 0.84rem; font-weight: 600; border-radius: 6px; }
.fx-fm-h { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.fx-fm { display: block; color: #dcdcdc; font-size: 0.95rem; line-height: 1.6; }
.fx-story { border-left-color: var(--axis); }
/* a paused scene jumps to its end without transitions */
.fx-stage.fx-instant *, .fx-mode.fx-instant { transition: none !important; animation: none !important; }

/* the replays no longer show "How it was graded" */
.p-grade { display: none !important; }

/* the animation switch, shared by the failure player and the replays: on plays, off shows the finished version */
button.anim-switch.anim-switch { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--axis); border-radius: 999px; background: none; color: var(--ink-dim); font: 500 0.8rem/1 Inter, system-ui, sans-serif; cursor: pointer; }
button.anim-switch.anim-switch:hover { color: var(--ink); }
.anim-switch:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.sw-track { position: relative; width: 30px; height: 17px; border-radius: 999px; background: var(--axis); transition: background-color .2s; }
.sw-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #e9e9e9; transition: transform .2s; }
.anim-switch[aria-checked=true] .sw-track { background: var(--phos); }
.anim-switch[aria-checked=true] .sw-knob { transform: translateX(13px); background: #fff; }
.sw-state { min-width: 1.6em; color: var(--ink); font-weight: 600; }

/* the replays keep only the Animation switch */
.p-ctrl [data-act="restart"], .p-ctrl [data-act="speed"] { display: none !important; }
.fx-story .fx-label { display: block; margin-bottom: 6px; color: var(--ink-dim); }

/* failure types and domain icons in the failure player */
.part .fx-types-h { margin: 26px 0 8px; }
.part ol.fx-types { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.part ol.fx-types li { margin: 0; padding: 6px 12px; border-left: 3px solid var(--grid); color: var(--ink-dim); font-size: var(--t-small); line-height: 1.5; transition: border-color .3s, color .3s, background-color .3s; }
.part ol.fx-types li b { color: var(--ink); font-weight: 600; }
.part ol.fx-types li.on { border-left-color: var(--bad); color: var(--ink); background: rgba(239, 107, 107, 0.06); }
.fx-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.fx-dom-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* who failed, grouped by failure type */
.fx-rows { display: grid; gap: 10px; margin-top: 8px; }
.fx-row { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.part .fx-row p { margin: 0 0 4px; max-width: none; font-size: var(--t-cap); line-height: 1.4; color: var(--ink); }
.fx-tchip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(239, 107, 107, 0.16); color: var(--bad); font: 700 0.78rem/1 Inter, system-ui, sans-serif; }
.fx-row .fx-logos { display: flex; flex-wrap: wrap; gap: 4px; }
.part p.fx-ok { margin: 4px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--ink-dim); font-size: var(--t-cap); }

/* efficiency chart: a wash that brightens toward the top right, where an assistant is both fast and right */
.eff-plot { background: linear-gradient(to top left, rgba(239, 107, 107, 0.20) 0%, rgba(239, 107, 107, 0) 40%, rgba(110, 200, 140, 0) 52%, rgba(110, 200, 140, 0.36) 100%); border-radius: 6px 0 0 0; }
.eff-better { position: absolute; top: 8px; left: 10px; color: #6ec88c; font: 600 0.72rem/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.fx-bubble mark { background: rgba(240, 180, 90, 0.22); color: inherit; padding: 0 2px; border-radius: 3px; }
.fx-user mark { background: rgba(140, 170, 255, 0.28); }
.fx-row .fx-logo.x::after { display: none; }
.fx-row .fx-logo { width: 24px; height: 24px; transform: none; }

/* the wrong action is the point of each case: it lights up in the reply, then the record shows why, then the right move */
.fx-bot mark.bad { background: none; color: inherit; padding: 0 1px; border-radius: 3px; transition: background-color .35s, color .35s, box-shadow .35s; }
.fx-stage.bw .fx-bot mark.bad { background: rgba(239, 107, 107, 0.22); color: #ffd9d9; box-shadow: inset 0 -2px 0 var(--bad); }
.fx-wrong { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(239, 107, 107, 0.35); color: var(--bad); font-size: var(--t-cap); font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.fx-wrong::before { content: "\2715  "; }
.fx-stage.bw .fx-wrong { opacity: 1; transform: none; }
.part p.fx-should { max-width: none; margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--good); border-radius: 0 8px 8px 0; background: rgba(60, 196, 106, 0.08); color: var(--ink); font-size: var(--t-cap); line-height: 1.5; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.part p.fx-should b { color: var(--good); }
.fx-stage.bs .fx-should { opacity: 1; transform: none; }
.fx-user mark { background: rgba(140, 170, 255, 0.28); color: inherit; padding: 0 2px; border-radius: 3px; }
.fx-cap { display: inline-block; margin: 0 4px 0 2px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--axis); color: var(--ink-dim); font-size: 0.72rem; font-weight: 500; letter-spacing: .02em; vertical-align: 1px; }

/* failure modes as five cards in a row */
.fx { scroll-margin-top: 80px; }
.part ol.fx-type-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.part ol.fx-type-cards li { display: flex; padding: 0; border: 1px solid var(--grid); border-left: 1px solid var(--grid); border-top: 3px solid var(--axis); border-radius: 10px; background: var(--surface); transition: border-color .2s, background-color .2s; }
.part ol.fx-type-cards li.on { border-top-color: var(--bad); background: rgba(239, 107, 107, 0.07); }
.part ol.fx-type-cards li:hover { border-color: #3a3f45; border-top-color: var(--bad); }
.fx-tbtn { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin: 0; padding: 12px 12px 14px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fx-tbtn:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.fx-tex { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.fx-tex i { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: var(--muted); font-size: 0.72rem; font-style: normal; transition: background-color .2s, color .2s; }
.fx-tex i:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.fx-tex i.cur { background: rgba(239, 107, 107, 0.18); color: var(--bad); }
.fx-tex i::after { content: " \203A"; opacity: .6; }
.part ol.fx-type-cards li b { font-size: var(--t-small); line-height: 1.3; }
.fx-tn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(239, 107, 107, 0.16); color: var(--bad); font: 700 0.78rem/1 Inter, system-ui, sans-serif; }
.part ol.fx-type-cards .fx-cap { margin: 0; }
.fx-td { color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.45; }
@media (max-width: 900px) { .part ol.fx-type-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .part ol.fx-type-cards { gap: 8px; } .part ol.fx-type-cards li { padding: 10px; } }
.fx-rec { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fx-act .fx-l2 { margin-top: 0; }

/* ---------- Run player: the person and the assistant face each other; the app window shows each action ---------- */
.duet { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0 26px; height: 840px; padding: 16px 18px 0; overflow: hidden;
  background: radial-gradient(circle at 20% 96%, color-mix(in srgb, var(--who) 24%, transparent), transparent 40%), radial-gradient(circle at 78% 96%, rgba(74, 143, 194, 0.18), transparent 38%), #0d0d0d; }
.d-col { display: grid; grid-template-rows: 132px minmax(0, 1fr) 156px; gap: 14px; min-width: 0; min-height: 0; }
.thought, .d-think { position: relative; min-height: 0; overflow-y: auto; padding: 10px 14px; border: 1px dashed #4a525b; border-radius: 18px; background: rgba(26, 26, 26, 0.92); font-size: var(--t-cap); line-height: 1.45; transition: border-color 0.3s, opacity 0.3s; }
.thought .label, .d-think .label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.d-think .label .dots { margin-left: 4px; }
.d-think .label .dots span { width: 4px; height: 4px; margin-right: 3px; }
.thought { display: flex; flex-direction: column; overflow: hidden; }
.thought .label { flex: none; }
.thought .text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; transition: opacity 0.35s; }
.thought.fade .text { opacity: 0; }
.thought.stale { opacity: 0.55; }
.thought.correction { border: 1px solid var(--bad); }
.thought.correction .label { color: var(--bad); }
.thought.news { border: 1px solid rgba(217, 119, 6, 0.7); }
.thought.news .label { color: var(--amber-ink); }
.thought.shake { animation: shake-m 0.5s; }
.d-think ul { position: relative; display: grid; flex: 1 1 auto; align-content: start; gap: 4px; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.d-think li { position: relative; padding-left: 16px; color: var(--ink-dim); font-size: 0.8125rem; line-height: 1.4; animation: pop 0.3s ease; }
.d-think li::before { content: ""; position: absolute; left: 1px; top: 0.42em; width: 8px; height: 8px; border-radius: 50%; background: #56606b; }
.d-think li.read::before { background: var(--phos); }
.d-think li.write { color: var(--ink); }
.d-think li.write::before { background: var(--good); }
.d-think li.idle { padding-left: 0; color: var(--muted); }
.d-think li.idle::before { display: none; }
.d-think { display: flex; flex-direction: column; overflow: hidden; }
.d-think .label { flex: none; }
.duet[data-turn="u"] .d-think { opacity: 0.55; }

.d-say { position: relative; display: flex; flex-direction: column; min-height: 0; max-height: 100%; padding: 10px 14px 12px; border-radius: 16px; transition: opacity 0.35s, transform 0.35s; }
.d-u .d-say { align-self: end; border: 1px solid color-mix(in srgb, var(--who) 50%, transparent); background: color-mix(in srgb, var(--who) 16%, #141414); }
.d-a .d-say { border: 1px solid #2f3a46; background: #161b20; }
.d-say::after { content: ""; position: absolute; bottom: -8px; width: 14px; height: 14px; border: inherit; border-top: 0; border-left: 0; background: inherit; transform: rotate(45deg); }
.d-u .d-say::after { left: 52px; }
.d-a .d-say::after { right: 62px; }
.d-say .by { flex: none; margin-bottom: 4px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.d-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: var(--t-cap); line-height: 1.5; overflow-wrap: anywhere; }
.d-text .said { margin: 0; white-space: pre-line; }
.d-text > * + * { margin-top: 8px; }
.d-text .d-timeout { margin: 8px 0 0; padding: 6px 9px; border: 1px dashed var(--bad); border-radius: 8px; color: #f3a9a9; font-size: 0.8125rem; }
.d-say.empty { opacity: 0; transform: translateY(8px); }
.d-say.correction { border-color: var(--bad); }
.duet[data-turn="u"] .d-a .d-say:not(.empty), .duet[data-turn="a"] .d-u .d-say:not(.empty) { opacity: 0.45; }
.d-say.pop { animation: say 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes say { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

.d-who { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; }
.d-u .d-who { align-items: flex-start; padding-left: 4px; }
.d-a .d-who { align-items: flex-end; padding-right: 40px; }
.figure { width: 122px; }
.figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-name { position: absolute; bottom: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: var(--ink); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.d-u .d-name { left: 34px; }
.d-a .d-name { right: 18px; bottom: 6px; min-width: 104px; text-align: center; }
.d-bot { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 40px; }
.d-bot img { width: 60px; height: 60px; border-radius: 15px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); }
.d-bot::before { content: ""; position: absolute; inset: -7px; border: 2px solid #8fb6ff; border-radius: 20px; opacity: 0; }
.d-bot.busy::before { animation: busy 1.3s ease-in-out infinite; }
@keyframes busy { 0%, 100% { opacity: 0.15; transform: scale(0.97); } 50% { opacity: 0.95; transform: scale(1.04); } }
.d-wire { position: absolute; left: 170px; right: 150px; bottom: 92px; height: 2px; background: repeating-linear-gradient(90deg, rgba(143, 182, 255, 0.35) 0 6px, transparent 6px 12px); }
.d-wire i { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; opacity: 0; }
.d-wire.go.ua i { background: var(--who); box-shadow: 0 0 12px var(--who); animation: wire-r 0.9s ease-in-out; }
.d-wire.go.au i { background: #8fb6ff; box-shadow: 0 0 12px #8fb6ff; animation: wire-l 0.9s ease-in-out; }
@keyframes wire-r { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes wire-l { 0% { left: calc(100% - 12px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }

.side { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 840px; border-left: 1px solid var(--line-soft); }
.app { position: relative; flex: none; height: 290px; margin: 16px 16px 0; overflow: hidden; border: 1px solid #2b333b; border-radius: 14px; background: #f3f4f6; color: #1d2330; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.app-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-bottom: 1px solid #e1e4e8; background: #fff; font-size: 0.8125rem; }
.app-ic { display: grid; color: #4a5565; }
.app-ic svg { width: 16px; height: 16px; }
.app-bar b { font-weight: 700; }
.app-acct { margin-left: auto; color: #7a8494; font-size: 0.75rem; }
.app-view { position: absolute; inset: 38px 0 0; overflow: hidden; }
.app-toast { position: absolute; z-index: 3; top: 8px; left: 12px; right: 12px; display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); color: #1d2330; font-size: 0.8125rem; opacity: 0; transform: translateY(-130%); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s; }
.app-toast b { color: #7a8494; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.app-toast.show { opacity: 1; transform: none; }
.v { position: relative; height: 100%; padding: 12px 14px; overflow: hidden; animation: vin 0.3s ease; }
@keyframes vin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.v.decides { box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.6); }
.v.m-read::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; background: linear-gradient(to bottom, transparent, rgba(74, 143, 194, 0.25), transparent); pointer-events: none; animation: scan 1s ease-in-out both; }
@keyframes scan { from { transform: translateY(-46px); } to { transform: translateY(300px); opacity: 0; } }
.v-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; }
.v-tag { padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; }
.v-tag.read { border: 1px solid #9cc5e6; background: #e3f0fb; color: #1f5f8f; }
.v-tag.write { background: #1f6feb; color: #fff; }
.v-tag.new { border: 1px solid #f0c36d; background: #fff3dc; color: #8a5300; }
.v-tag.decide { border: 1px solid #d97706; background: #fff3dc; color: #8a5300; }
.v-tag.unread { border: 1px solid #ef6b6b; background: #fde8e8; color: #a12020; }

.v-home { display: grid; align-content: start; gap: 8px; }
.v-note { display: flex; gap: 10px; padding: 9px 11px; border: 1px solid #e1e4e8; border-radius: 12px; background: #fff; font-size: 0.8125rem; line-height: 1.35; animation: pop 0.4s both; }
.v-note:nth-child(2) { animation-delay: 0.12s; }
.v-note:nth-child(3) { animation-delay: 0.24s; }
.v-note:nth-child(4) { animation-delay: 0.36s; }
.v-nt { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.v-nt small { display: block; color: #8a93a0; font-size: 0.6875rem; }
.v-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef1f5; color: #4a5565; }
.v-ic svg { width: 16px; height: 16px; }

.v-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #e1e4e8; font-size: 0.8125rem; }
.v-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #aab4c2; color: #fff; font-size: 0.75rem; font-weight: 700; }
.v-thread { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.v-b { max-width: 84%; padding: 7px 11px; border-radius: 17px; font-size: 0.8125rem; line-height: 1.4; }
.v-b small { display: block; margin-top: 3px; font-size: 0.6875rem; opacity: 0.65; }
.v-b.in { align-self: flex-start; border-bottom-left-radius: 5px; background: #e5e5ea; color: #111; }
.v-b.out { align-self: flex-end; border-bottom-right-radius: 5px; background: #1f8bff; color: #fff; }
.v-b.sending { animation: send 0.5s 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes send { from { opacity: 0; transform: translateY(150px) scale(0.85); } to { opacity: 1; transform: none; } }
.v-deliv { align-self: flex-end; color: #8a93a0; font-size: 0.6875rem; animation: fade 0.3s 1.7s both; }
.v-compose { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border: 1px solid #d5dae1; border-radius: 18px; background: #fff; color: #9aa3af; font-size: 0.8125rem; }
.v-field { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v-typed { color: #111; animation: typed 0.9s steps(24) both, fade 0.2s 1.05s reverse forwards; }
@keyframes typed { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.v-send { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1f8bff; color: #fff; }
.v-send svg { width: 14px; height: 14px; }
.typing .v-send { animation: press 0.3s 0.95s; }
@keyframes press { 50% { transform: scale(0.8); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.v-mail { font-size: 0.8125rem; }
.v-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e6e8eb; }
.v-row > span { flex: none; width: 54px; color: #8a93a0; }
.v-row em { margin-left: auto; color: #8a93a0; font-size: 0.75rem; font-style: normal; white-space: nowrap; }
.v-mail h4 { margin: 10px 0 4px; color: #111; font-size: 0.95rem; line-height: 1.3; }
.v-body { display: grid; gap: 8px; padding-top: 10px; }
.v-body i { display: block; height: 8px; border-radius: 4px; background: #dde1e6; }
.v-body i.s { width: 58%; }
.compose .v-row { animation: fade 0.3s both; }
.compose .v-row + .v-row { animation-delay: 0.15s; }
.compose .v-body i { transform-origin: left; animation: grow 0.35s both; }
.compose .v-body i:nth-child(1) { animation-delay: 0.3s; }
.compose .v-body i:nth-child(2) { animation-delay: 0.45s; }
.compose .v-body i:nth-child(3) { animation-delay: 0.6s; }
.compose .v-body i:nth-child(4) { animation-delay: 0.75s; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
.v-mail-f { margin-top: 14px; }
.v-btn { display: inline-block; padding: 5px 16px; border-radius: 8px; background: #1f6feb; color: #fff; font-weight: 600; animation: press 0.3s 1.1s; }
.v-mail.compose { animation: fly 0.6s 1.45s ease-in forwards; }
@keyframes fly { to { opacity: 0; transform: translate(140px, -170px) rotate(-10deg) scale(0.5); } }
.v-sent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #1d7a46; font-weight: 700; opacity: 0; animation: fade 0.35s 1.95s forwards; pointer-events: none; }
.v-sent .mark { width: 42px; height: 42px; padding: 8px; border-radius: 50%; background: #dcf5e6; color: #1d7a46; }

.v-cal-h { margin-bottom: 8px; font-size: 0.875rem; font-weight: 700; }
.v-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; height: calc(100% - 30px); }
.v-tags + .v-cal .v-week { height: 200px; }
.v-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 3px; border: 1px solid #e1e4e8; border-radius: 8px; background: #fff; }
.v-day.hit { border-color: #9cc5e6; background: #f2f8fd; }
.v-day > span { color: #8a93a0; font-size: 0.6875rem; text-align: center; }
.v-day > span b { display: block; color: #1d2330; font-size: 0.95rem; }
.v-ev { display: -webkit-box; overflow: hidden; padding: 5px 7px; border-left: 3px solid #8b5cf6; border-radius: 4px; background: #efe9ff; color: #2b1a5c; font-size: 0.6875rem; line-height: 1.25; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.v-ev small { display: block; font-weight: 700; }
.v-ev.hit { border-left-color: #1f6feb; background: #e3efff; color: #0d2a5c; box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.35); }
.v-ev.drop { animation: drop 0.75s 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-100px) scale(1.2); } to { opacity: 1; transform: none; } }

.v-res { position: relative; max-width: 320px; margin: 4px auto 0; padding: 14px 16px 16px; border: 1px solid #e1e4e8; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.v-res-top { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px dashed #e1e4e8; font-size: 1rem; }
.v-res-top svg { flex: none; width: 20px; height: 20px; color: #c2410c; }
.v-res dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 0.8125rem; }
.v-res dt { color: #8a93a0; }
.v-res dd { margin: 0; font-weight: 600; }
.v-stamp { position: absolute; right: 14px; bottom: 14px; padding: 3px 10px; border: 3px solid #1d7a46; border-radius: 8px; color: #1d7a46; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(-12deg); animation: stamp 0.45s 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
.v-stamp.red { border-color: #c02626; color: #c02626; }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
.v-notepad { padding: 12px 14px; border-radius: 10px; background: #fff8d6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.v-notepad h4 { margin: 0 0 6px; font-size: 0.95rem; }
.v-notepad p { margin: 0; color: #4b5260; font-size: 0.8125rem; line-height: 1.5; }
.v-rx, .v-card { position: relative; padding: 14px 16px; border: 1px solid #e1e4e8; border-radius: 14px; background: #fff; }
.v-rx-top { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.v-pill { flex: none; width: 26px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f97316 50%, #fde68a 50%); }
.v-rx p { margin: 8px 0 0; color: #5b6472; font-size: 0.8125rem; }
.v-prog { height: 6px; margin-top: 16px; overflow: hidden; border-radius: 3px; background: #e1e4e8; }
.v-prog i { display: block; height: 100%; background: #1f6feb; transform-origin: left; animation: grow 1s 0.3s both; }
.v-done { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #1d7a46; font-size: 0.8125rem; font-weight: 700; animation: fade 0.3s 1.35s both; }
.v-done .mark { width: 16px; height: 16px; color: #1d7a46; }
.v-card { display: grid; gap: 4px; font-size: 0.8125rem; }
.v-app { display: flex; align-items: center; gap: 6px; color: #7a8494; font-size: 0.75rem; font-weight: 600; }
.v-app svg { width: 14px; height: 14px; }
.v-card b { font-size: 0.95rem; }
.v-card small { color: #5b6472; }
.v-was { margin: 4px 0 0; color: #a12020; font-size: 0.75rem; }
.m-remove .v-card b, .m-remove .v-card small { color: #8a93a0; text-decoration: line-through; }

.trail { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; padding: 12px 16px 8px; }
.trail-h { margin: 0 0 6px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.trail ol { position: relative; display: grid; flex: 1 1 0; align-content: start; gap: 5px; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.trail li { animation: pop 0.3s ease; }
.tr { appearance: none; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; width: 100%; padding: 6px 9px; border: 1px solid var(--line-soft); border-radius: 9px; background: #141414; color: var(--ink); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.tr:hover { border-color: rgba(74, 143, 194, 0.55); }
.trail li.decides .tr { border-color: rgba(217, 119, 6, 0.65); }
.tr-ic { color: var(--ink-dim); }
.tr-ic svg { display: block; width: 15px; height: 15px; }
.tr-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-t small { margin-right: 6px; color: var(--muted); font-size: 0.75rem; }
.tr .badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tr .badges:empty { display: none; }
.tr .badge { padding: 0 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }

.p-log { padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.p-log summary { color: var(--ink); font-size: var(--t-small); font-weight: 600; cursor: pointer; }
.p-log .log { display: flex; flex-direction: column; gap: 9px; max-height: 420px; margin-top: 10px; padding: 4px 2px; overflow-y: auto; }

/* animation off, or reduced motion: everything in its final place */
.player.still .duet *, .player.still .app *, .player.still .trail li, .player.still .v::after { animation: none !important; transition: none !important; }
.player.still .v-typed, .player.still .v-sent, .player.still .app-toast { display: none; }
.player.still .duet .d-say:not(.empty), .player.still .duet .d-think { opacity: 1; }

@media (max-width: 60rem) {
  .side { height: auto; border-left: 0; border-top: 1px solid var(--line-soft); }
  .trail { flex: none; }
  .trail ol { flex: none; max-height: 240px; }
}
@media (max-width: 47.5rem) {
  .duet { grid-template-columns: minmax(0, 1fr); gap: 14px; height: auto; padding: 12px; }
  .d-col { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "who top" "say say"; gap: 10px; }
  .thought, .d-think { grid-area: top; height: 118px; }
  .d-say { grid-area: say; max-height: 280px; }
  .d-u .d-say { align-self: start; }
  .d-say::after { display: none; }
  .d-who { grid-area: who; align-items: center !important; justify-content: flex-start; padding: 0 !important; }
  .figure { width: 64px; }
  .d-bot { width: 46px; height: 46px; margin: 6px 0 0; }
  .d-bot img { width: 46px; height: 46px; border-radius: 12px; }
  .d-bot::before { inset: -5px; border-radius: 16px; }
  .d-name { position: static; margin-top: 4px; min-width: 0 !important; padding: 1px 6px; font-size: 0.6875rem; }
  .d-wire { display: none; }
  .app { height: 300px; margin: 12px 12px 0; }
  .trail { padding: 10px 12px 6px; }
  .p-log { padding: 12px 14px; }
}


/* failure player: no autoplay; things pop out on hover */
.fx-bubble, .fx-doc, .fx-should, .fx-row, .fx-mode, .fx-tabs button { transition: scale .18s ease, box-shadow .18s ease, opacity .3s ease, transform .3s ease, color .2s, border-color .2s; }
.fx-bubble:hover, .fx-doc:hover { scale: 1.03; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); position: relative; z-index: 2; }
.fx-should:hover, .fx-row:hover { scale: 1.02; }
.fx-tabs button:hover { scale: 1.06; border-color: var(--ink-dim); }
.fx-logo:hover { transform: scale(1.25); z-index: 2; }
.fx-types li { transition: scale .18s ease; }
.fx-types li:hover { scale: 1.015; }
@media (prefers-reduced-motion: reduce) { .fx *:hover, .fx-types li:hover { scale: none; transform: none; } }

/* hover: every figure in the post responds to the pointer (no autoplay anywhere) */
.w-stat, .w-app, .w-app-bar i, .w-snips li, .w-apps-fig, .w-card, .pl-card, .ivl-plot, .ivl-name, .ivl-dot, .ivl-ci,
.dumb .db-req, .dumb .db-hard, .eff-dot, .rcard, .msg, .fig .hero-chart {
  transition: scale .18s ease, background-color .18s, border-color .18s, box-shadow .18s, opacity .18s, color .18s, height .18s;
}
.w-stat:hover { background: #141820; }
.w-stat:hover b { display: inline-block; scale: 1.08; transform-origin: left; transition: scale .18s ease; }
.w-apps-fig:hover, .w-card:hover { border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.w-app:hover .w-app-n { color: #c8b4ff; }
.w-app:hover .w-app-bar i { filter: brightness(1.35); }
.w-app:hover .w-app-bar { height: 11px; }
.w-snips li:hover { scale: 1.04; border-color: rgba(74, 143, 194, 0.45); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.pl-card:hover { scale: 1.04; border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 10px 26px rgba(0, 0, 0, 0.45); position: relative; z-index: 2; }
/* interval and dumbbell charts: the row under the pointer lights, the rest fade */
.ivl:has(.ivl-row:hover) .ivl-row:not(:hover) .ivl-plot, .ivl:has(.ivl-row:hover) .ivl-row:not(:hover) .ivl-name { opacity: 0.4; }
.ivl-row:hover .ivl-name { color: var(--ink); }
.ivl-row:hover .ivl-plot { background: rgba(74, 143, 194, 0.07); border-radius: 6px; }
.ivl-row:hover .ivl-dot, .ivl-row:hover .db-req, .ivl-row:hover .db-hard { scale: 1.5; }
.ivl-row:hover .ivl-ci { opacity: 1; }
/* efficiency scatter: the logo under the pointer grows, the others fade */
.eff-dot:hover, .eff-dot.tip-on { scale: 1.25; }
.eff-plot:has(.eff-dot:hover) .eff-dot:not(:hover), .eff-plot:has(.eff-dot.tip-on) .eff-dot:not(.tip-on):not(:hover) { opacity: 0.45; }
/* trace players */
.rcard:hover { scale: 1.05; z-index: 3; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
.msg:hover { scale: 1.02; }
@media (prefers-reduced-motion: reduce) { .post *:hover { scale: none !important; } }

/* Figure 1, visual: an icon and a short name per box; the long text comes up under the diagram on hover */
.pl-card { cursor: default; }
.pl-card strong { display: flex; align-items: center; gap: 8px; }
.pl-ic { flex: none; width: 20px; height: 20px; fill: none; stroke: #8fb6ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-mod.data .pl-ic { stroke: #c8b4ff; }
.pl-world .pl-ic { stroke: var(--amber-ink); }
.pl-agent { text-align: center; }
.pl-agent strong { flex-direction: column; gap: 10px; }
.pl-agent .pl-ic { width: 34px; height: 34px; stroke: #c8b4ff; }
.pl-logos { gap: 6px; margin-top: 8px; }
.pl-logo { padding: 0; border: 0; background: none; }
.pl-logo img { width: 22px; height: 22px; border-radius: 6px; transition: scale .15s ease; }
.pl-logo:hover img { scale: 1.3; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pl-chips i { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 7px; transition: scale .15s ease, border-color .15s; }
.pl-chips i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-chips i:hover { scale: 1.25; border-color: #8fb6ff; color: var(--ink); }
.pl-card:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.pipeline .pl-grid:has(.pl-card:hover) .pl-card:not(:hover) { opacity: 0.55; }
.pl-detail { position: relative; min-height: 2.9em; margin: 18px 0 0; padding: 10px 14px; border: 1px dashed rgba(74, 143, 194, 0.3); border-radius: 10px; color: var(--muted); font-size: var(--t-small); line-height: 1.45; transition: border-color .18s, background-color .18s, color .18s; }
.pl-detail.on { border-style: solid; border-color: rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.06); color: var(--ink-dim); }
.pl-detail b { margin-right: 8px; color: var(--ink); font-weight: 600; }
.w-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Wei's world: one full-width profile (people, records per app, the week ahead, a few records) */
.w-grid { grid-template-columns: minmax(0, 1fr); }
.w-card { padding: clamp(18px, 2.4vw, 26px); }
.w-card .w-card-h { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
.w-card .w-card-h .head { width: 56px; height: 56px; }
.w-card .w-card-h b { font-size: 1.15rem; }
.w-sec { margin-top: 22px; }
.w-sec h4 { margin: 0 0 10px; color: var(--phos); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.w-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.w-fam { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.w-fam-g { padding: 12px 12px 10px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: #0f1216; transition: border-color .18s, box-shadow .18s, scale .18s; }
.w-fam-g:hover { scale: 1.03; border-color: rgba(168, 85, 247, 0.45); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.w-fam-h { margin: 0 0 8px; display: grid; gap: 1px; }
.w-fam-h b { color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.w-fam-h span { color: var(--muted); font-size: 0.75rem; }
.w-fam ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.w-fam li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; font-size: var(--t-cap); line-height: 1.3; }
.w-fam li i { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(74, 143, 194, 0.35)); color: var(--ink); font-size: 0.72rem; font-style: normal; font-weight: 600; transition: scale .15s; }
.w-fam li:hover i { scale: 1.2; }
.w-fam li b { color: var(--ink); font-weight: 600; }
.w-fam li span { color: var(--ink-dim); font-size: 0.75rem; }
.w-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.w-tile { display: grid; justify-items: center; gap: 3px; padding: 10px 6px 9px; border: 1px solid rgba(74, 143, 194, 0.18); border-radius: 10px; background: #0f1216; color: #8fb6ff; transition: scale .18s, border-color .18s, background-color .18s; }
.w-tile .w-ic { width: 18px; height: 18px; }
.w-tile b { color: var(--ink); font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.w-tile small { color: var(--ink-dim); font-size: 0.72rem; }
.w-tile:hover { scale: 1.08; border-color: #8fb6ff; background: #121823; }
.w-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.w-day { min-height: 92px; padding: 8px 6px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; background: #0f1216; display: flex; flex-direction: column; gap: 5px; }
.w-day-h { margin: 0 0 2px; color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.w-ev { display: grid; gap: 1px; padding: 5px 7px; border-left: 3px solid #8fb6ff; border-radius: 6px; background: rgba(74, 143, 194, 0.12); font-size: 0.72rem; line-height: 1.25; transition: scale .15s, background-color .15s; }
.w-ev small { color: var(--muted); font-size: 0.68rem; }
.w-ev span { color: var(--ink); }
.w-ev.aide { border-left-color: #6ec88c; background: rgba(110, 200, 140, 0.1); }
.w-ev.lin { border-left-color: #c8b4ff; background: rgba(168, 85, 247, 0.12); }
.w-ev:hover { scale: 1.06; background: rgba(74, 143, 194, 0.22); }
.w-card .w-snips { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.w-snip-app { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 60rem) { .w-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w-card .w-snips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .w-fam, .w-card .w-snips { grid-template-columns: minmax(0, 1fr); }
  .w-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Wei's world: people and apps open real examples */
.w-fam li { display: block; }
.w-fam li button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 3px 4px; margin: -3px -4px; border-radius: 8px; cursor: pointer; font-size: var(--t-cap); line-height: 1.3; transition: background-color .15s; }
.w-fam li button i { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(74, 143, 194, 0.35)); color: var(--ink); font-size: 0.72rem; font-style: normal; font-weight: 600; transition: scale .15s; }
.w-fam li button b { color: var(--ink); font-weight: 600; }
.w-fam li button span { color: var(--ink-dim); font-size: 0.75rem; }
.w-fam li button:hover { background: rgba(74, 143, 194, 0.1); }
.w-fam li button:hover i { scale: 1.2; }
.w-fam li button[aria-expanded=true] { background: rgba(168, 85, 247, 0.16); }
.w-fam li button:focus-visible, .w-tile:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
button.w-tile { font: inherit; cursor: pointer; }
button.w-tile:disabled { cursor: default; }
.w-tile[aria-expanded=true] { border-color: #c8b4ff; background: rgba(168, 85, 247, 0.12); }
.w-x { margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 12px; background: rgba(168, 85, 247, 0.05); animation: w-x-in .18s ease; }
@keyframes w-x-in { from { opacity: 0; transform: translateY(-4px); } }
.w-x-h { margin: 0 0 10px; color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.w-x-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; font-size: var(--t-cap); }
.w-x-card dt { color: var(--muted); }
.w-x-card dd { margin: 0; color: var(--ink-dim); }
.w-x .w-snips { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.w-x-meta { color: var(--muted); font-size: 0.75rem; }
@media (max-width: 40rem) { .w-x .w-snips { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .w-x { animation: none; } }

/* failure player: red marks the error, green what is right (who got it right, what should have happened);
   everything else is the site's blue-purple */
.fx, .fx-types { --amber-ink: #c8b4ff; --pp: #b07cff; }
.fx-tabs button[aria-selected=true] { border-color: var(--pp); background: rgba(168, 85, 247, 0.12); }
.part ol.fx-types li.on { border-left-color: var(--pp); background: rgba(168, 85, 247, 0.08); }
.part ol.fx-type-cards li.on { border-top-color: var(--pp); background: rgba(168, 85, 247, 0.08); }
.part ol.fx-type-cards li:hover { border-top-color: var(--pp); }
.fx-tbtn:focus-visible { outline-color: var(--pp); }
.fx-tchip, .fx-tn { background: rgba(168, 85, 247, 0.18); color: var(--pp); }
.fx-tex i.cur { background: rgba(168, 85, 247, 0.18); color: var(--pp); }
.part p.fx-mode { border-color: rgba(140, 130, 250, 0.4); background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(74, 143, 194, 0.08)); }
.fx-bubble mark { background: rgba(110, 168, 255, 0.22); }

/* the domains on each failure-mode card, as real buttons */
.fx-tex { gap: 6px; padding-top: 8px; }
.fx-tex i { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--ink-dim); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, scale .15s; }
.fx-tex i .fx-dom-ic { width: 14px; height: 14px; }
.fx-tex i::after { content: none; }
.fx-tex i:hover { scale: 1.06; color: var(--ink); border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.12); }
.fx-tex i.cur { border-color: var(--pp); background: rgba(168, 85, 247, 0.2); color: var(--ink); }
.fx-tex { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.fx-tex i { justify-content: flex-start; }

/* failure modes as a switch above the domain tabs */
.fx-modes { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--grid); }
.fx-modes::-webkit-scrollbar { display: none; }
.fx-modes button { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; gap: 5px; padding: 5px 8px; border: 1px solid var(--axis); border-radius: 8px; background: none; color: var(--ink-dim); font: 500 0.76rem/1 Inter, system-ui, sans-serif; cursor: pointer; transition: scale .15s, color .15s, border-color .15s, background-color .15s; }
.fx-modes button .fx-tn { width: 16px; height: 16px; font-size: 0.65rem; }
.fx-modes button:hover { scale: 1.02; color: var(--ink); border-color: rgba(168, 85, 247, 0.5); }
.fx-modes button[aria-pressed=true] { color: var(--ink); border-color: var(--pp, #b07cff); background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(74, 143, 194, 0.14)); font-weight: 600; }
.fx-modes button:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.fx-tabs button[hidden] { display: none; }

/* ---------- One person's world, app by app: the card in the post and the app windows ---------- */
.wa-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.wa-head .head { width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: #1b2230; }
.wa-head .head svg { display: block; width: 100%; height: 100%; }
.wa-id b { display: block; color: var(--ink); font-size: 1.25rem; font-weight: 600; }
.wa-id span { color: var(--ink-dim); font-size: var(--t-small); }
.wa-stats { display: flex; gap: 22px; }
.wa-stat { display: grid; gap: 2px; text-align: left; }
.wa-stat b { color: var(--ink); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wa-stat span { color: var(--muted); font-size: 0.75rem; }
.wa-sec { margin-top: 22px; }
.wa-sec h4 { margin: 0 0 10px; color: var(--phos); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.wa-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wa-pp { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: #0f1216; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s, background-color .18s, scale .18s; }
.wa-pp i { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(74, 143, 194, 0.4)); color: var(--ink); font-size: 0.8rem; font-style: normal; font-weight: 600; }
.wa-pp b { overflow: hidden; color: var(--ink); font-size: var(--t-cap); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.wa-pp span { overflow: hidden; color: var(--muted); font-size: 0.75rem; white-space: nowrap; text-overflow: ellipsis; }
.wa-pp:hover { scale: 1.03; border-color: rgba(168, 85, 247, 0.45); background: #131820; }
.wa-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wa-tile { display: grid; justify-items: start; gap: 2px; padding: 14px 14px 12px; border: 1px solid rgba(74, 143, 194, 0.2); border-radius: 14px; background: #0f1216; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: scale .18s, border-color .18s, background-color .18s; }
.wa-tile-ic { color: #8fb6ff; }
.wa-tile-ic .wa-ic { width: 22px; height: 22px; }
.wa-tile b { margin-top: 6px; color: var(--ink); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wa-tile strong { color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.wa-tile small { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
.wa-tile em { margin-top: 6px; color: #8fb6ff; font-size: 0.8125rem; font-style: normal; }
.wa-tile:hover { scale: 1.04; border-color: #8fb6ff; background: #121823; }
.wa-tile:focus-visible, .wa-pp:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
#worldCard > figcaption { margin-top: 18px; }

body.wa-lock { overflow: hidden; }
.wa-ov { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity .2s; }
.wa-ov.on { opacity: 1; }
.wa-dlg { display: flex; flex-direction: column; width: min(1180px, 100%); height: min(780px, 100%); overflow: hidden; border-radius: 16px; background: #f6f7f9; color: #1d2330; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: translateY(10px) scale(0.98); transition: transform .2s; font-size: 0.9rem; }
.wa-ov.on .wa-dlg { transform: none; }
.wa-bar { display: flex; flex: none; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e1e4e8; background: #fff; }
.wa-bar-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #eef2fb; color: #2a5bd7; }
.wa-bar-ic .wa-ic { width: 22px; height: 22px; }
.wa-bar-t { display: grid; min-width: 0; }
.wa-bar-t b { font-size: 1.15rem; }
.wa-bar-t span { color: #6b7483; font-size: 0.8125rem; }
.wa-sbox { display: flex; align-items: center; gap: 8px; width: min(340px, 40%); margin-left: auto; padding: 0 12px; border: 1px solid #d5dae1; border-radius: 10px; background: #fff; color: #8a93a0; }
.wa-sbox:focus-within { border-color: #2a5bd7; box-shadow: 0 0 0 3px rgba(42, 91, 215, 0.15); }
.wa-search { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: none; color: #1d2330; font: inherit; }
.wa-x { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d5dae1; border-radius: 10px; background: #fff; color: #4a5565; cursor: pointer; }
.wa-x:hover { background: #f0f2f5; }
.wa-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wa-col { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wa-empty { padding: 18px; color: #8a93a0; }
.wa-muted { color: #8a93a0; font-size: 0.8125rem; }
.wa-h { margin: 0 0 10px; color: #111; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.wa-tabs { display: flex; flex: none; gap: 6px; padding: 10px 16px; border-bottom: 1px solid #e1e4e8; background: #fff; }
.wa-tabs button { padding: 5px 12px; border: 1px solid #d5dae1; border-radius: 999px; background: #fff; color: #4a5565; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.wa-tabs button.on { border-color: #2a5bd7; background: #eef2fb; color: #2a5bd7; font-weight: 600; }

.wa-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
.wa-list { min-height: 0; overflow-y: auto; border-right: 1px solid #e1e4e8; background: #fff; }
.wa-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid #eef0f3; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wa-row:has(.wa-av) { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.wa-row:hover { background: #f5f7fa; }
.wa-row.on { background: #eef2fb; box-shadow: inset 3px 0 0 #2a5bd7; }
.wa-rt { display: grid; gap: 2px; min-width: 0; }
.wa-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.wa-r1 b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.wa-r1 small { flex: none; color: #8a93a0; font-size: 0.75rem; }
.wa-r2 { overflow: hidden; color: #1d2330; font-size: 0.8125rem; white-space: nowrap; text-overflow: ellipsis; }
.wa-r3 { display: -webkit-box; overflow: hidden; color: #6b7483; font-size: 0.8125rem; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wa-pane { min-height: 0; overflow-y: auto; padding: 22px 26px; }
.wa-back { display: none; }
.wa-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid #e1e4e8; font-size: 0.8125rem; }
.wa-meta dt { color: #8a93a0; }
.wa-meta dd { margin: 0; overflow-wrap: anywhere; }
.wa-text { max-width: 44rem; color: #1d2330; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.wa-text.paper { padding: 18px 20px; border-radius: 10px; background: #fff8d6; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.wa-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #aab4c2; color: #fff; font-weight: 700; }
.wa-chat-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e1e4e8; font-size: 1rem; }
.wa-chat-h.big { margin-bottom: 16px; font-size: 1.2rem; }
.wa-chat-h.big .wa-av { width: 52px; height: 52px; font-size: 1.2rem; }
.wa-messages .wa-pane { display: flex; flex-direction: column; padding: 16px 22px 0; overflow: hidden; }
.wa-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 0 20px; overflow-y: auto; }
.wa-day { align-self: center; margin: 10px 0 4px; color: #8a93a0; font-size: 0.75rem; }
.wa-b { max-width: 70%; padding: 8px 12px; border-radius: 18px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.wa-b small { display: block; margin-top: 3px; font-size: 0.6875rem; opacity: 0.65; }
.wa-b.in { align-self: flex-start; border-bottom-left-radius: 5px; background: #e5e5ea; color: #111; }
.wa-b.out { align-self: flex-end; border-bottom-right-radius: 5px; background: #1f8bff; color: #fff; }
.wa-b.hit { box-shadow: 0 0 0 3px rgba(240, 180, 90, 0.8); }

.wa-cal { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.wa-calmain { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px 18px; }
.wa-calnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.wa-calnav .wa-h { margin: 0 10px 0 0; font-size: 1.35rem; }
.wa-calnav button { padding: 6px 12px; border: 1px solid #d5dae1; border-radius: 9px; background: #fff; color: #1d2330; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.wa-calnav button:hover { background: #f0f2f5; }
.wa-weekwrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid #e1e4e8; border-radius: 12px; background: #fff; }
.wa-week { display: grid; grid-template-columns: 56px repeat(7, minmax(84px, 1fr)); grid-template-rows: auto auto; min-width: 640px; }
.wa-wh { position: sticky; top: 0; z-index: 2; display: grid; justify-items: center; padding: 8px 0; border-bottom: 1px solid #e1e4e8; background: #fff; color: #6b7483; font-size: 0.75rem; }
.wa-wh b { color: #1d2330; font-size: 1.25rem; font-weight: 600; }
.wa-wh.today b { color: #2a5bd7; }
.wa-hours { display: grid; grid-template-rows: repeat(var(--rows), var(--h)); }
.wa-hours span { padding: 2px 8px 0; color: #8a93a0; font-family: var(--mono); font-size: 0.6875rem; text-align: right; }
.wa-day { position: relative; height: calc(var(--rows) * var(--h)); border-left: 1px solid #eef0f3; background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--h) - 1px), #eef0f3 calc(var(--h) - 1px) var(--h)); }
.wa-day.today { background-color: #f7f9fe; }
.wa-allday { position: relative; z-index: 1; margin: 2px; padding: 2px 6px; overflow: hidden; border-radius: 5px; background: #fde7c8; color: #6b3d00; font-size: 0.6875rem; white-space: nowrap; text-overflow: ellipsis; }
.wa-ev { position: absolute; display: grid; align-content: start; gap: 1px; padding: 3px 6px; overflow: hidden; border-left: 3px solid #2a5bd7; border-radius: 6px; background: #dfe6fb; color: #13235a; font-size: 0.6875rem; line-height: 1.25; box-sizing: border-box; }
.wa-ev.work { border-left-color: #c2410c; background: #fde8dc; color: #5a2309; }
.wa-ev b { font-weight: 600; }
.wa-ev small { color: inherit; opacity: 0.75; }
.wa-calside { min-height: 0; overflow-y: auto; padding: 16px 18px; border-left: 1px solid #e1e4e8; background: #fff; }
.wa-calside h4, .wa-bank h4 { margin: 0 0 10px; color: #6b7483; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.wa-evrow { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid #eef0f3; }
.wa-evd { color: #6b7483; font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.wa-txsub { display: none; color: #8a93a0; font-size: 0.75rem; }
.wa-agenda { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 22px; background: #fff; }

.wa-bank { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.wa-accts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.wa-acct { display: grid; gap: 2px; min-width: 200px; padding: 14px 18px; border: 1px solid #e1e4e8; border-radius: 14px; background: #fff; }
.wa-acct span { color: #6b7483; font-size: 0.8125rem; }
.wa-acct b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.wa-acct small { color: #8a93a0; text-transform: capitalize; }
.wa-tx { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e1e4e8; border-radius: 12px; font-size: 0.8125rem; }
.wa-tx th { padding: 9px 12px; border-bottom: 1px solid #e1e4e8; color: #6b7483; font-weight: 600; text-align: left; }
.wa-tx td { padding: 9px 12px; border-bottom: 1px solid #eef0f3; }
.wa-tx td:last-child, .wa-tx th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.wa-tx td.pos { color: #1d7a46; font-weight: 600; }

@media (max-width: 60rem) {
  .wa-head { grid-template-columns: 56px minmax(0, 1fr); }
  .wa-stats { grid-column: 1 / -1; }
  .wa-cal { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 42%); }
  .wa-calside { border-top: 1px solid #e1e4e8; border-left: 0; }
}
@media (max-width: 700px) {
  .wa-ov { padding: 0; }
  .wa-dlg { width: 100%; height: 100%; border-radius: 0; }
  .wa-bar { flex-wrap: wrap; padding: 10px 12px; }
  .wa-sbox { order: 3; width: 100%; }
  .wa-x { margin-left: auto; }
  .wa-split { grid-template-columns: minmax(0, 1fr); }
  .wa-split .wa-pane { display: none; padding: 14px 16px; }
  .wa-split.open .wa-list { display: none; }
  .wa-split.open .wa-pane { display: flex; flex-direction: column; }
  .wa-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-bottom: 10px; padding: 4px 10px 4px 4px; border: 1px solid #d5dae1; border-radius: 8px; background: #fff; color: #2a5bd7; font: inherit; font-size: 0.8125rem; cursor: pointer; }
  .wa-messages .wa-split.open .wa-pane { padding: 12px 14px 0; }
  .wa-b { max-width: 85%; }
  .wa-calmain { padding: 12px; }
  .wa-calnav .wa-h { width: 100%; font-size: 1.15rem; }
  .wa-bank { padding: 14px; }
  .wa-tx th:nth-child(3), .wa-tx td:nth-child(3), .wa-tx th:nth-child(4), .wa-tx td:nth-child(4) { display: none; }
  .wa-txsub { display: block; margin-top: 2px; }
  .wa-stats { gap: 16px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .wa-ov, .wa-dlg { transition: none; } .wa-pp:hover, .wa-tile:hover { scale: none; } }

/* connections graph */
.wa-gwrap { padding: 6px 0 0; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08), transparent 60%), #0d1014; }
.wa-graph { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.wa-gl { stroke: rgba(143, 182, 255, 0.35); stroke-linecap: round; transition: stroke .18s, opacity .18s; }
.wa-gl.g-Family { stroke: rgba(240, 180, 90, 0.5); }
.wa-gl.g-Home { stroke: rgba(110, 200, 140, 0.45); }
.wa-gl.g-Work { stroke: rgba(239, 140, 107, 0.45); }
.wa-gl.g-School { stroke: rgba(143, 182, 255, 0.5); }
.wa-gme circle { fill: url(#none); fill: #2a2140; stroke: #b07cff; stroke-width: 2; }
.wa-gme text { fill: #f5f5f5; font-size: 15px; font-weight: 600; }
.wa-gn circle { fill: #161b24; stroke: rgba(143, 182, 255, 0.55); stroke-width: 1.5; transition: r .18s; }
.wa-gn.g-Family circle { stroke: #f0b45a; }
.wa-gn.g-Home circle { stroke: #6ec88c; }
.wa-gn.g-Work circle { stroke: #ef8c6b; }
.wa-gn.g-School circle { stroke: #8fb6ff; }
.wa-gn .i { fill: #f5f5f5; font-size: 13px; font-weight: 600; pointer-events: none; }
.wa-gn .n { fill: #f5f5f5; font-size: 13px; font-weight: 600; }
.wa-gn .r { fill: #8a8a8a; font-size: 11px; }
.wa-gg { fill: #8a93a0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wa-gn { cursor: default; }
.wa-gn:hover circle { r: 21; }
.wa-graph:has(.wa-gn:hover) .wa-gn:not(:hover) { opacity: 0.45; }
.wa-glegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 4px 16px 12px; color: var(--ink-dim); font-size: 0.8125rem; }
.wa-glegend span { display: inline-flex; align-items: center; gap: 6px; }
.wa-glegend i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #8fb6ff; }
.wa-glegend .g-Family i { border-color: #f0b45a; }
.wa-glegend .g-Home i { border-color: #6ec88c; }
.wa-glegend .g-Work i { border-color: #ef8c6b; }
.wa-glegend .wa-gnote { margin-left: auto; color: var(--muted); }

/* connections graph: one color, compact */
.wa-gwrap { max-width: 860px; }
.wa-gl, .wa-gl[class*="g-"] { stroke: rgba(143, 182, 255, 0.4); }
.wa-gn circle, .wa-gn[class*="g-"] circle { stroke: #8fb6ff; }
.wa-gme circle { fill: #18233a; stroke: #8fb6ff; }
.wa-gme text { font-size: 13px; }
.wa-gn .i { font-size: 11px; }
.wa-gn .n { font-size: 12px; }
.wa-gn .r { font-size: 10px; }
.wa-gn:hover circle { r: 15; }
/* health window */
.wa-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 22px; }
.wa-hc { padding: 14px 16px 4px; border: 1px solid #e1e4e8; border-radius: 14px; background: #fff; }
.wa-hc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wa-hc-h b { font-size: 0.95rem; line-height: 1.35; }
.wa-hc-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: #e3f0fb; color: #1f5f8f; font-size: 0.6875rem; font-weight: 700; }
.wa-hc .wa-meta { border-bottom: 0; }
/* apps in one row */
.wa-tiles { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; }
.wa-tile { padding: 12px 12px 10px; }
.wa-tile b { font-size: 1.3rem; }
@media (max-width: 60rem) { .wa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .wa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wa-gwrap { max-width: none; }
.wa-tile { align-content: start; }
@media (max-width: 30rem) {
  .wa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wa-tile { padding: 10px 9px 8px; }
  .wa-tile b { margin-top: 4px; font-size: 1.1rem; }
  .wa-tile small { display: none; }
  .wa-tile em { margin-top: 2px; }
}

/* records per month and who they are in touch with, side by side */
.wa-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.wa-panel { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; background: #0d1014; }
.wa-panel h4 { margin: 0 0 10px; color: var(--ink); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; text-transform: none; }
.wa-panel .wa-gwrap { flex: 1; display: grid; place-items: center; padding: 0; border: 0; background: none; }
.s-mail { --c: #6f9cff; }
.s-texts { --c: #a98bff; }
.s-money { --c: #4fc3a1; }
.s-else { --c: #5d6878; }
.wa-mo-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; color: var(--ink-dim); font-size: 0.8125rem; }
.wa-mo-key span { display: inline-flex; align-items: center; gap: 6px; }
.wa-mo-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.wa-mo { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; height: 270px; margin-bottom: 24px; }
.wa-mo-y { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 0.6875rem; text-align: right; font-variant-numeric: tabular-nums; }
.wa-mo-y span { line-height: 0; }
.wa-mo-plot { position: relative; }
.wa-mo-g { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.wa-mo-bars { position: absolute; inset: 0; display: flex; gap: 6px; }
.wa-mo-col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.wa-mo-bar { display: flex; flex-direction: column; gap: 2px; width: 70%; max-width: 30px; transition: filter .18s; }
.wa-mo-bar span { min-height: 2px; border-radius: 3px; background: var(--c); }
.wa-mo-col small { position: absolute; top: 100%; margin-top: 6px; color: var(--muted); font-size: 0.6875rem; }
.wa-mo-col:hover .wa-mo-bar { filter: brightness(1.25); }
.wa-mo:has(.wa-mo-col:hover) .wa-mo-col:not(:hover) .wa-mo-bar { opacity: 0.5; }
.wa-gl { stroke: rgba(111, 156, 255, 0.35); }
.wa-gn circle { fill: #6f9cff; stroke: none; }
.wa-gme circle { fill: #3d63d6; stroke: none; }
.wa-gme text { fill: #fff; font-size: 13px; font-weight: 700; }
.wa-gn .n { fill: var(--ink); font-size: 11.5px; font-weight: 600; }
.wa-gn .r { fill: var(--muted); font-size: 10px; }
.wa-gn:hover circle { fill: #a98bff; }
@media (max-width: 60rem) { .wa-panels { grid-template-columns: minmax(0, 1fr); } }

/* the worlds in numbers, and the apps they live in */
.w-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-stat span { line-height: 1.45; }
.w-apps-row { grid-column: 1 / -1; gap: 10px; }
.w-apps-row .w-apps-h { color: var(--ink-dim); font-size: var(--t-cap); }
.w-appchips { display: flex; flex-wrap: wrap; gap: 8px; }
.w-appchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1px solid rgba(143, 182, 255, 0.22); border-radius: 999px; background: rgba(111, 156, 255, 0.06); font-size: 0.8125rem; transition: border-color .18s, background-color .18s; }
.w-appchip i { display: grid; color: #8fb6ff; }
.w-appchip i .wa-ic { width: 15px; height: 15px; }
.w-appchip em { color: var(--ink); font-style: normal; font-weight: 500; }
.w-stat { align-content: start; }
.w-appchip small { color: var(--muted); font-variant-numeric: tabular-nums; }
.w-appchip:hover { border-color: rgba(169, 139, 255, 0.55); background: rgba(169, 139, 255, 0.1); }
.w-apps-row:hover { background: #0e1014; }
@media (max-width: 40rem) { .w-stats { grid-template-columns: minmax(0, 1fr); } }
/* the two switches, labelled: failure mode, then domain */
.fx-filter { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 12px; }
.fx-filter-modes { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--grid); }
.fx-filter .fx-modes { margin: 0; padding: 0; border: 0; }
.fx-rowlab { color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.fx-row { grid-template-columns: minmax(0, 1fr); }
.fx-ttag { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(168, 85, 247, 0.16); color: #c8b4ff; font-size: 0.72rem; font-weight: 600; }
.fx-ttag.fx-terr { background: rgba(148, 163, 184, 0.18); color: var(--ink-dim); }
@media (max-width: 40rem) { .fx-filter { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Figure 1: the whole frame is MatrAIx Eval Infra; the assistant in the middle is the outside product under test */
.pipeline { border: 1.5px solid transparent; background:
  radial-gradient(70% 90% at 50% 0%, rgba(74, 143, 194, 0.09), transparent 70%) padding-box,
  radial-gradient(40% 60% at 50% 55%, rgba(168, 85, 247, 0.06), transparent 70%) padding-box,
  linear-gradient(#0d0f13, #0d0f13) padding-box,
  linear-gradient(135deg, #a855f7, #4a8fc2 55%, #22b3c7) border-box; }
.pl-infra-h { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 18px; }
.pl-infra-name { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; background: linear-gradient(90deg, #c8b4ff, #8fb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-infra-sub { color: var(--muted); font-size: var(--t-cap); }
.pl-kicker.pl-ext { color: var(--ink-dim); }
.pl-card.pl-agent { border: 1.5px dashed rgba(255, 255, 255, 0.35); background: #090a0d; box-shadow: 0 0 0 6px rgba(13, 15, 19, 1), 0 0 30px rgba(0, 0, 0, 0.6); }
.pl-agent .pl-ic { stroke: var(--ink); }
.pl-agent .pl-logos { justify-content: center; }
.pl-agent .pl-logo img { width: 20px; height: 20px; }
.pipeline .pl-grid { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); }
@media (max-width: 56rem) { .pipeline .pl-grid { grid-template-columns: minmax(0, 1fr); } }

/* Figures 2 and 3 as bars in the site's purple-blue, with logos */
.ivl.hb { grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr); row-gap: 6px; }
.ivl.hb .ivl-name { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.hb-logo { width: 22px; height: 22px; flex: none; border-radius: 6px; background: #fff; }
.ivl.hb .ivl-plot { height: 30px; }
.ivl.hb .ivl-gl { background: rgba(255, 255, 255, 0.05); }
.hb-bar { position: absolute; left: 0; top: 5px; bottom: 5px; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, rgba(168, 85, 247, 0.55), rgba(74, 143, 194, 0.75)); transition: filter .18s; }
.hb-bar.lead { background: linear-gradient(90deg, #a855f7, #4a8fc2); box-shadow: 0 0 18px rgba(130, 110, 250, 0.35); }
.hb-ci { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, 0.55); }
.hb-ci::before, .hb-ci::after { content: ""; position: absolute; top: -5px; width: 2px; height: 12px; background: rgba(255, 255, 255, 0.55); }
.hb-ci::before { left: 0; } .hb-ci::after { right: 0; }
.hb-val { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 10px; color: var(--ink); font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-val.dim { color: var(--muted); font-weight: 500; }
.hb-ghost { position: absolute; left: 0; top: 5px; bottom: 5px; border-radius: 0 6px 6px 0; background: rgba(143, 182, 255, 0.10); border: 1px dashed rgba(143, 182, 255, 0.35); border-left: 0; }
.dumb .hb-bar { display: flex; align-items: center; justify-content: flex-end; }
.hb-in { padding-right: 8px; color: #fff; font-size: var(--t-cap); font-weight: 700; font-variant-numeric: tabular-nums; }
.ivl-row:hover .hb-bar { filter: brightness(1.25); }
.ivl.hb .ivl-row:hover .ivl-plot { background: none; }
.dumb-key .k-req i { border-radius: 3px !important; background: rgba(143, 182, 255, 0.10) !important; border: 1px dashed rgba(143, 182, 255, 0.5) !important; }
.dumb-key .k-hard i { border-radius: 3px !important; background: linear-gradient(90deg, rgba(168, 85, 247, 0.7), rgba(74, 143, 194, 0.85)) !important; border: 0 !important; }
@media (max-width: 40rem) { .ivl.hb { grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr); } .ivl.hb .ivl-name { font-size: var(--t-cap); gap: 6px; } .hb-logo { width: 18px; height: 18px; } }
.dumb-key i { width: 16px !important; height: 10px !important; }
.ivl.hb .ivl-axis { grid-column: 2; }
.ivl.hb .ivl-name { padding: 0 10px 0 0; }
.hb-in, .hb-bar, .hb-ghost { font-style: normal; }
@media (max-width: 40rem) { .ivl.hb .ivl-axis span:nth-child(even) { display: none; } }

/* one figure at a time, picked with a segmented switch */
.fig-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border: 1px solid var(--axis); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.fig-switch button { padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: var(--ink-dim); font: 500 0.88rem/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background-color .15s, color .15s, scale .15s; }
.fig-switch button:hover:hover { color: var(--ink); background: rgba(168, 85, 247, 0.08); }
.fig-switch button[aria-selected=true][aria-selected=true] { color: #fff; background: linear-gradient(135deg, rgba(168, 85, 247, 0.55), rgba(74, 143, 194, 0.55)); }
.fig-switch button:focus-visible:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.switch-fig .fig-panel > .hero-chart { margin-top: 0; }
@media (max-width: 40rem) { .fig-switch, .case-switch { display: flex; } .fig-switch button, .case-switch button { flex: 1; padding: 8px 8px; font-size: 0.8rem; } }

/* Figure 2: evaluation dimensions, the discovery rule and the task set */
.ed-fig { padding: clamp(18px, 2.4vw, 26px); border: 1px solid rgba(74, 143, 194, 0.22); border-radius: 16px; background: #0d0f13; }
.ed-h { margin: 0 0 12px; color: var(--phos); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ed-dims { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.ed-dims li { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: #11141a; transition: scale .18s, border-color .18s, box-shadow .18s; }
.ed-dims li:hover, .ed-dims li:focus-visible { scale: 1.04; border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); outline: none; }
.ed-ic { width: 26px; height: 26px; fill: none; stroke: #b9a8ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ed-dims b { color: var(--ink); font-size: 0.95rem; }
.ed-dims span { color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.4; }
.ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ed-panel { padding: 16px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: #0f1216; }
.ed-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ed-list li { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.025); }
.ed-list li b { color: var(--ink); font-size: 0.9rem; }
.ed-list li span { color: var(--ink-dim); font-size: 0.82rem; line-height: 1.45; }
.ed-run { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); transition: background-color .15s; }
.ed-run:hover { background: rgba(168, 85, 247, 0.08); }
.ed-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ed-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); font-size: var(--t-cap); }
.ed-step i { font-style: normal; color: var(--ink-dim); }
.ed-step.hit { background: rgba(60, 196, 106, 0.12); } .ed-step.hit i { color: #bdf0cd; }
.ed-step.miss { background: rgba(239, 107, 107, 0.12); } .ed-step.miss i { color: #ffd0d0; }
.ed-arr { color: var(--muted); font-size: 0.8rem; }
.ed-who { padding: 1px 6px; border-radius: 5px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.ed-who.u { background: rgba(143, 182, 255, 0.18); color: #b9d0ff; }
.ed-who.a { background: rgba(168, 85, 247, 0.22); color: #d9c8ff; }
.ed-verdict { flex: none; font-size: var(--t-cap); font-weight: 700; }
.ed-run.ok .ed-verdict { color: var(--good); } .ed-run.no .ed-verdict { color: var(--bad); }
.part p.ed-note { margin: 10px 0 0; color: var(--muted); font-size: var(--t-cap); }
.ed-block + .ed-block { margin-top: 14px; }
.part p.ed-k { margin: 0 0 8px; color: var(--ink-dim); font-size: var(--t-cap); }
.ed-k b { margin-right: 4px; color: var(--ink); font-size: 1.2rem; font-weight: 600; }
.ed-k span { display: block; color: var(--muted); }
.ed-dots { display: grid; grid-template-columns: repeat(auto-fill, 9px); gap: 4px; }
.ed-dots i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #a855f7, #4a8fc2); opacity: .8; transition: scale .15s, opacity .15s; }
.ed-dots i:hover { scale: 1.6; opacity: 1; }
.ed-chains { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ed-chain { display: inline-flex; align-items: center; padding: 3px 4px; border-radius: 8px; transition: background-color .15s, scale .15s; }
.ed-chain:hover { background: rgba(168, 85, 247, 0.14); scale: 1.08; }
.ed-chain i { width: 10px; height: 10px; border-radius: 50%; background: #8fb6ff; }
.ed-chain b { width: 7px; height: 2px; background: rgba(143, 182, 255, 0.55); }
@media (max-width: 60rem) { .ed-dims { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ed-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .ed-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ed-run { flex-direction: column; align-items: flex-start; } }

/* Devon's world, tighter: shorter chart and graph, compact app tiles in one row */
.wa-panels { gap: 10px; margin-top: 16px; }
.wa-panel { padding: 14px 16px 12px; }
.wa-mo { height: 200px; margin-bottom: 20px; }
.wa-mo-key { margin-bottom: 8px; }
.wa-sec { margin-top: 16px; }
.wa-tiles { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; }
.wa-tile { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; padding: 10px 12px; border-radius: 12px; position: relative; }
.wa-tile-ic { grid-row: span 2; }
.wa-tile b { margin: 0; font-size: 1.2rem; }
.wa-tile strong { grid-column: 2; font-size: 0.8125rem; }
.wa-tile small { grid-column: 1 / -1; margin-top: 4px; font-size: 0.7rem; }
.wa-tile em { position: absolute; top: 8px; right: 10px; margin: 0; font-size: 0.72rem; opacity: 0; transition: opacity .15s; }
.wa-tile:hover em, .wa-tile:focus-visible em { opacity: 1; }
#worldCard > figcaption { margin-top: 14px; }
@media (max-width: 60rem) { .wa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .wa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* app tiles read as buttons: an open arrow, a lift on hover */
.wa-tile { --wa-bg: #0f1216; border-color: rgba(74, 143, 194, 0.28); background: var(--wa-bg); transition: translate .18s, box-shadow .18s, border-color .18s, background-color .18s; }
.wa-tile-go { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: #8fb6ff; opacity: 0.7; transition: opacity .18s, color .18s, background-color .18s, translate .18s; }
.wa-tile-go svg { width: 14px; height: 14px; }
.wa-tile:hover, .wa-tile:focus-visible { --wa-bg: #151b27; scale: none; translate: 0 -2px; border-color: transparent; background: linear-gradient(var(--wa-bg), var(--wa-bg)) padding-box, linear-gradient(135deg, #a855f7, #4a8fc2) border-box; box-shadow: 0 8px 20px -8px rgba(110, 100, 230, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); }
.wa-tile:hover .wa-tile-go, .wa-tile:focus-visible .wa-tile-go { opacity: 1; color: #fff; background: rgba(140, 120, 240, 0.28); translate: 1px -1px; }
.wa-tile:focus-visible { outline: 2px solid #8fb6ff; outline-offset: 3px; }
.wa-tile:active { translate: 0 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); --wa-bg: #10151e; transition-duration: .06s; }
@media (prefers-reduced-motion: no-preference) {
  .wa-tile.wa-hello { animation: wa-hello 1.6s ease-in-out 0.3s 1; }
  .wa-tile.wa-hello .wa-tile-go { animation: wa-hello-go 1.6s ease-in-out 0.3s 1; }
}
@keyframes wa-hello { 0%, 100% { box-shadow: 0 0 0 0 rgba(140, 120, 240, 0); } 35% { box-shadow: 0 0 0 4px rgba(140, 120, 240, 0.35); border-color: rgba(168, 85, 247, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(140, 120, 240, 0); } }
@keyframes wa-hello-go { 0%, 100% { opacity: 0.7; } 35% { opacity: 1; color: #fff; } }
@media (prefers-reduced-motion: reduce) { .wa-tile, .wa-tile-go { transition: none; } .wa-tile:hover, .wa-tile:focus-visible { translate: none; } }

/* home-screen app icons: a rounded colored tile, a white glyph; --s sets the size (tiles, window title bar, stat chips) */
.wa-app { --s: 42px; position: relative; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); overflow: hidden; border-radius: calc(var(--s) * 0.26); background: linear-gradient(180deg, var(--a1), var(--a2)); color: var(--a2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.35); }
.wa-app svg { display: block; width: 62%; height: 62%; }
.wa-app-mail { --a1: #5cbcff; --a2: #1c6ce6; }
.wa-app-chat { --a1: #72e46c; --a2: #1db53b; }
.wa-app-bank { --a1: #23a690; --a2: #0b5a4f; }
.wa-app-note { --a1: #ffe36e; --a2: #f2ad00; }
.wa-app-person { --a1: #c3c8d0; --a2: #7a8290; }
.wa-app-health { --a1: #ff7d98; --a2: #e5305a; }
.wa-app-bag { --a1: #ffb550; --a2: #f06c18; }
.wa-app-plane { --a1: #86d8ff; --a2: #2795e6; }
.wa-app-bill { --a1: #bd92ff; --a2: #7639de; }
.wa-app-dining { --a1: #ffd055; --a2: #e58e14; }
.wa-app-cal { --a1: #fff; --a2: #f1f2f4; grid-template-rows: 30% 1fr; place-items: stretch; color: #a3aab5; }
.wa-app-cal::before { content: ""; position: absolute; inset: 0 0 auto; height: 30%; background: linear-gradient(180deg, #ff5a4f, #e5302a); }
.wa-cal-m { position: relative; display: grid; place-items: center; color: #fff; font-size: calc(var(--s) * 0.2); font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.wa-cal-d { display: grid; place-items: center; color: #1d2330; font-size: calc(var(--s) * 0.44); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.wa-app-cal svg { width: 100%; height: 100%; }
.wa-bar-ic { flex: none; width: auto; height: auto; background: none; }
.wa-bar-ic .wa-app { --s: 40px; }

/* no heading over the tiles: they sit under the panels with the panels' own gap */
.wa-sec.wa-apps { margin-top: 10px; }
/* app tiles as a launcher: the icon first, the name under it, the count as a quiet line; on hover a lift and a glow in the app's colour */
.wa-tile[data-ic] { --g: 140, 120, 240; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; row-gap: 0; padding: 18px 8px 14px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), #0e1116; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.wa-tile[data-ic="mail"] { --g: 60, 150, 255; }
.wa-tile[data-ic="chat"] { --g: 70, 210, 95; }
.wa-tile[data-ic="cal"] { --g: 255, 95, 85; }
.wa-tile[data-ic="bank"] { --g: 40, 180, 155; }
.wa-tile[data-ic="note"] { --g: 255, 200, 50; }
.wa-tile[data-ic="person"] { --g: 175, 182, 195; }
.wa-tile[data-ic="health"] { --g: 255, 95, 135; }
.wa-tile[data-ic="bag"] { --g: 255, 150, 60; }
.wa-tile[data-ic="plane"] { --g: 110, 200, 255; }
.wa-tile[data-ic="bill"] { --g: 175, 125, 255; }
.wa-tile[data-ic="dining"] { --g: 255, 190, 70; }
.wa-tile[data-ic] .wa-tile-ic { display: grid; grid-row: auto; margin-bottom: 10px; }
.wa-tile-ic .wa-app { --s: 54px; transition: scale .18s; }
.wa-tile-n { max-width: 100%; color: var(--ink); font-size: 0.875rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.005em; }
.wa-tile-c { max-width: 100%; margin-top: 3px; color: var(--muted); font-size: 0.75rem; line-height: 1.3; font-variant-numeric: tabular-nums; text-wrap: balance; }
.wa-tile[data-ic] .wa-tile-go { top: 8px; right: 8px; color: rgb(var(--g)); opacity: 0; }
.wa-tile[data-ic]:hover, .wa-tile[data-ic]:focus-visible { translate: 0 -3px; border-color: rgba(var(--g), 0.32); background: linear-gradient(180deg, rgba(var(--g), 0.13), rgba(var(--g), 0.02)), #10141a; box-shadow: 0 16px 32px -14px rgba(var(--g), 0.6), 0 0 22px -6px rgba(var(--g), 0.25); }
.wa-tile[data-ic]:hover .wa-tile-go, .wa-tile[data-ic]:focus-visible .wa-tile-go { opacity: 0.9; color: #fff; background: rgba(var(--g), 0.3); }
.wa-tile[data-ic]:hover .wa-app, .wa-tile[data-ic]:focus-visible .wa-app { scale: 1.05; }
.wa-tile[data-ic]:active { translate: 0 -1px; box-shadow: 0 6px 14px -8px rgba(var(--g), 0.6); }
@media (hover: none) { .wa-tile[data-ic] .wa-tile-go { opacity: 0.4; } }
@media (max-width: 40rem) {
  .wa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wa-tile[data-ic] { padding: 14px 4px 11px; border-radius: 18px; }
  .wa-tile[data-ic] .wa-tile-ic { margin-bottom: 8px; }
  .wa-tile-ic .wa-app { --s: 50px; }
  .wa-tile-n { font-size: 0.8125rem; }
  .wa-tile-c { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) { .wa-tile-ic .wa-app { transition: none; } .wa-tile[data-ic]:hover .wa-app, .wa-tile[data-ic]:focus-visible .wa-app { scale: none; } }

/* Figure 5: memory across sessions */
.mem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mem-fig .hero-chart { margin: 0; }
.mem-k.ivl.hb { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); }
.mem-k .ivl-name { color: var(--ink-dim) !important; font-size: var(--t-cap); white-space: normal; line-height: 1.25; }
.hb-bar.weak { background: linear-gradient(90deg, rgba(239, 107, 107, 0.55), rgba(239, 107, 107, 0.8)); }
@media (max-width: 60rem) { .mem-grid { grid-template-columns: minmax(0, 1fr); } }

/* each case drawn for its failure mode */
.fx-stage.fx-has-view { grid-template-columns: minmax(0, 2.4fr) 28px minmax(0, 0.9fr); }
.fx-stage.fx-has-view > .fx-chat, .fx-stage.fx-has-view > .fx-act, .fx-stage.fx-has-view > .fx-arrow:not(:last-of-type) { display: none; }
.fx-stage:not(.fx-has-view) > .fx-view { display: none; }
.fx-stage.fx-has-view > .fx-view { grid-column: 1; }
.fx-stage.fx-has-view > .fx-arrow:last-of-type { grid-column: 2; }
.fx-stage.fx-has-view > .fx-verdict { grid-column: 3; }
.fx-view { gap: 12px; }
.fv-ask { display: grid; gap: 6px; }
.fv-user { opacity: 1 !important; transform: none !important; }
.fv-should { margin: 2px 0 0 !important; }
.fv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fv-two > div { display: grid; gap: 6px; align-content: start; }
.fv-calls { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 4px; }
.fv-calls li { counter-increment: c; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.035); font-size: var(--t-cap); transition: background-color .15s; }
.fv-calls li::before { content: counter(c); min-width: 14px; color: var(--muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.fv-calls li:hover { background: rgba(168, 85, 247, 0.1); }
.fv-calls code { color: #c8b4ff; font: 500 0.78rem/1.3 "JetBrains Mono", ui-monospace, monospace; }
.fv-calls span { color: var(--ink-dim); }
.fv-calls li.bad { background: rgba(239, 107, 107, 0.12); box-shadow: inset 3px 0 0 var(--bad); }
.fv-calls li.bad code { color: #ffb4b4; }
.fv-calls li em { flex-basis: 100%; padding-left: 22px; color: var(--bad); font-style: normal; font-weight: 600; }
.fv-doc { position: relative; filter: saturate(.85); }
.fv-stamp { opacity: 1 !important; transform: rotate(8deg) !important; }
.part p.fv-gap { margin: 6px 0 0; color: var(--ink-dim); font-size: var(--t-cap); line-height: 1.45; }
.fv-chain { display: grid; gap: 0; }
.fv-node { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; font-size: var(--t-small); line-height: 1.4; }
.fv-node b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.85rem; }
.fv-node.ok { background: rgba(60, 196, 106, 0.1); } .fv-node.ok b { background: rgba(60, 196, 106, 0.25); color: #bdf0cd; }
.fv-node.bad { background: rgba(239, 107, 107, 0.09); } .fv-node.bad b { background: rgba(239, 107, 107, 0.25); color: #ffd0d0; }
.fv-node small { display: block; margin-top: 3px; color: var(--ink-dim); font-size: var(--t-cap); }
.fv-link { width: 2px; height: 16px; margin-left: 23px; background: repeating-linear-gradient(var(--bad) 0 4px, transparent 4px 7px); }
.fv-time { display: grid; grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 1fr); gap: 10px; align-items: start; }
.fv-sess { display: grid; gap: 6px; align-content: start; }
.fv-sess > em { color: var(--muted); font-size: 0.72rem; font-style: normal; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.fv-sess .fx-bubble { opacity: 1 !important; transform: none !important; font-size: var(--t-cap); }
.fv-asks { margin: 0; padding-left: 18px; color: var(--ink-dim); font-size: var(--t-cap); display: grid; gap: 3px; }
.fv-mid { align-self: stretch; justify-items: center; text-align: center; }
.fv-dots { flex: 1; width: 2px; min-height: 60px; background: repeating-linear-gradient(var(--axis) 0 4px, transparent 4px 9px); }
.fv-trigger { padding: 8px 10px; border-radius: 10px; background: rgba(143, 182, 255, 0.1); font-size: var(--t-cap); color: var(--ink); }
.fv-out { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.fv-out li { display: flex; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 8px; font-size: var(--t-cap); }
.fv-out li.ok { background: rgba(60, 196, 106, 0.1); color: #bdf0cd; } .fv-out li.bad { background: rgba(239, 107, 107, 0.1); color: #ffd0d0; }
.fv-vs { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: center; }
.fv-clash { display: grid; place-items: center; }
.fv-clash span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(239, 107, 107, 0.2); color: #ffb4b4; font-weight: 700; }
.fv-bot { opacity: 1 !important; transform: none !important; }
.fv-vs .fx-doc mark { background-size: 100% 100% !important; }
.part p.fv-clashline { margin: 0; color: var(--bad); font-size: var(--t-cap); font-weight: 600; text-align: center; }
.fv-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fv-day { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: #11141a; }
.fv-day em { color: var(--muted); font-size: 0.72rem; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fv-day span { color: var(--ink-dim); font-size: var(--t-cap); }
.fv-day b { color: var(--ink); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.fv-concl { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; font-size: var(--t-small); }
.fv-concl b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.fv-concl small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fv-concl.bad { background: rgba(239, 107, 107, 0.09); } .fv-concl.bad b { background: rgba(239, 107, 107, 0.25); color: #ffd0d0; }
.fv-concl.ok { background: rgba(60, 196, 106, 0.1); } .fv-concl.ok b { background: rgba(60, 196, 106, 0.25); color: #bdf0cd; }
@media (max-width: 60rem) {
  .fx-stage.fx-has-view { grid-template-columns: minmax(0, 1fr); }
  .fx-stage.fx-has-view > .fx-view, .fx-stage.fx-has-view > .fx-verdict { grid-column: 1; }
  .fx-stage.fx-has-view > .fx-arrow:last-of-type { display: none; }
  .fv-two, .fv-time, .fv-vs { grid-template-columns: minmax(0, 1fr); }
  .fv-mid { display: none; }
}

/* human-verified note */
.hv-note { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; margin: 4px 0 22px; padding: 14px 16px; border: 1px solid rgba(60, 196, 106, 0.35); border-radius: 12px; background: linear-gradient(135deg, rgba(60, 196, 106, 0.08), rgba(74, 143, 194, 0.06)); color: var(--ink-dim); font-size: var(--t-small); line-height: 1.5; }
.hv-note b { color: var(--ink); }
.hv-ic { width: 28px; height: 28px; fill: none; stroke: #6fdb94; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.part p.ed-hv { margin: 12px 0 0; color: #8fe0aa; font-size: var(--t-cap); font-weight: 600; }

/* failure-mode tags beside their text, never on a line of their own */
.fx-row-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.fx-row-h p { margin: 0; }
.fx-row-h .fx-ttag { margin: 1px 0 0; white-space: nowrap; }
.fx-fm-top { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; margin-bottom: 6px; }
.fx-fm-top .fx-label { margin: 0 !important; display: inline !important; }
.fx-fm-top .fx-fm-tags { display: inline-flex; gap: 6px; margin: 0; }
.fx-fm-top .fx-ttag { margin: 0; white-space: nowrap; }

/* failure-mode buttons: same size and shape as the domain tabs, with an icon */
.fx-modes { gap: 6px; }
.fx-modes button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 9px; border: 1px solid var(--axis); border-radius: 999px; font: 500 0.84rem/1 Inter, system-ui, sans-serif; }
.fx-modes button .fx-dom-ic { width: 15px; height: 15px; }
.fx-modes button[aria-pressed=true] { color: var(--ink); border-color: var(--pp, #b07cff); background: rgba(168, 85, 247, 0.12); }

/* grading checks beside the replay: pending (grey), then passed (green) or failed (red) at the step that decided them */
.p-checks { display: flex; flex: 1.25 1 0; flex-direction: column; min-height: 0; margin: 0 16px 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
.pc-h { appearance: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px 6px; border: 0; background: none; color: var(--ink); font: 600 0.8125rem/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.pc-h::after { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.p-checks.shut .pc-h::after { transform: rotate(-45deg); }
.pc-h:focus-visible { outline: 2px solid var(--phos); outline-offset: -2px; border-radius: 12px; }
.pc-h { flex-wrap: wrap; row-gap: 2px; }
.pc-t { flex: 1 1 auto; white-space: nowrap; }
.pc-s { order: 3; flex: 1 0 100%; color: var(--muted); font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pc-bar { display: flex; height: 4px; margin: 0 12px 6px; overflow: hidden; border-radius: 2px; background: var(--grid); }
.pc-bar i { display: block; width: 0; height: 100%; transition: width .5s ease; }
.pc-ok { background: var(--good); }
.pc-no { background: var(--bad); opacity: 0.85; }
.pc-list { position: relative; display: grid; flex: 1 1 0; align-content: start; gap: 2px; min-height: 0; margin: 0; padding: 0 6px 8px; overflow-y: auto; list-style: none; }
.p-checks.shut .pc-list { display: none; }
.pc { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 1px 8px; padding: 5px 6px; border-radius: 8px; color: var(--ink-dim); font-size: 0.78rem; line-height: 1.35; }
.pc-ic { grid-row: span 2; display: grid; place-items: start center; padding-top: 2px; }
.pc-ic .mark { width: 14px; height: 14px; }
.pc.pend .pc-ic::before { content: ""; width: 10px; height: 10px; margin-top: 1px; border: 1.5px solid #5a5f66; border-radius: 50%; }
.pc.pend .pc-n { color: var(--muted); }
.pc-w { color: var(--muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-why { grid-column: 2 / 4; color: var(--muted); font-size: 0.72rem; }
.pc.ok .pc-n { color: var(--ink); }
.pc.no .pc-n { color: #f6c4c4; }
.pc.no .pc-why { color: #e9a3a3; }
.pc.ok .pc-why { color: #8fd3a6; }
.pc.hit { background: rgba(239, 107, 107, 0.12); box-shadow: inset 2px 0 0 var(--bad); }
.pc.flash { animation: pcflash 1.2s ease; }
@keyframes pcflash { 0% { background: rgba(255, 255, 255, 0.1); } 100% { background: transparent; } }
.player.still .pc.flash { animation: none; }
.player.still .pc-bar i { transition: none; }
.tr .badge.cno { background: rgba(239, 107, 107, 0.16); color: #f6b4b4; border: 1px solid var(--bad); }
.tr .badge.cok { background: rgba(60, 196, 106, 0.12); color: #8fe0a9; border: 1px solid rgba(60, 196, 106, 0.6); }
.trail li.cfail .tr { border-color: rgba(239, 107, 107, 0.7); }
.tr .badges { flex-wrap: wrap; justify-content: flex-end; }
.v-tag.cno { border: 1px solid #ef6b6b; background: #fde8e8; color: #a12020; }
.v-tag.cok { border: 1px solid #3cc46a; background: #e3f7ea; color: #17652f; }
.d-think li.chk-ok { color: #8fe0a9; }
.d-think li.chk-ok::before { background: var(--good); }
.d-think li.chk-no { color: #f6b4b4; }
.d-think li.chk-no::before { background: var(--bad); }
.msg.event.chk.ok { background: rgba(60, 196, 106, 0.1); color: #8fe0a9; }
.msg.event.chk.no { background: rgba(239, 107, 107, 0.1); color: #f3a9a9; }
.lg-check { border: 2px solid var(--good); border-right-color: var(--bad); border-bottom-color: var(--bad); background: #161b20; }
@media (prefers-reduced-motion: reduce) { .pc.flash { animation: none; } .pc-bar i { transition: none; } }
.tr:has(.chk) .badges { grid-column: 2 / 4; justify-content: flex-start; }
@media (max-width: 60rem) {
  .app { order: 0; } .p-checks { order: 1; flex: none; margin-top: 12px; } .trail { order: 2; } .p-ctrl { order: 3; }
  .pc-list { flex: none; max-height: 340px; }
}

/* the final result line in the checklist, and faded edges where a list has more rows beyond it */
.pc-end[hidden] { display: none; }
.pc-end { display: flex; align-items: flex-start; gap: 7px; margin: 0 10px 6px; padding: 6px 9px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; line-height: 1.35; }
.pc-end .mark { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.pc-end.ok { border: 1px solid rgba(60, 196, 106, 0.55); background: rgba(60, 196, 106, 0.12); color: #8fe0a9; }
.pc-end.no { border: 1px solid rgba(239, 107, 107, 0.55); background: rgba(239, 107, 107, 0.1); color: #f6b4b4; }
.pc-end.ok .mark { color: #8fe0a9; }
.pc-end.no .mark { color: #f6b4b4; }
.d-think ul.more-up, .trail ol.more-up, .pc-list.more-up { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7px); mask-image: linear-gradient(to bottom, transparent 0, #000 7px); }
.d-think ul.more-down, .trail ol.more-down, .pc-list.more-down { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22px); mask-image: linear-gradient(to top, transparent 0, #000 22px); }
.d-think ul.more-up.more-down, .trail ol.more-up.more-down, .pc-list.more-up.more-down { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 22px), transparent 100%); }
.d-text.more-down { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 26px); mask-image: linear-gradient(to top, transparent 0, #000 26px); }
.d-text.more-up.more-down { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%); }
.d-text.more-up:not(.more-down) { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px); mask-image: linear-gradient(to bottom, transparent 0, #000 10px); }

/* ---------- Figure 1: what a run looks like (two runs played in the case-study player) ---------- */
.tj-h { margin: 28px 0 8px; color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.tj { --said: #a855f7; }
.tj-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; }
.tj-stats div { min-width: 0; }
.tj-stats dt { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
.tj-stats dd { margin: 2px 0 0; color: var(--ink); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kind.opening { background: rgba(255, 255, 255, 0.07); color: #c9d4e3; }
.thought.ournote { border: 1px solid rgba(168, 85, 247, 0.55); }
.thought.ournote .label { color: #d8b4fe; }
@media (min-width: 47.5625rem) { .tj .d-col { grid-template-rows: 150px minmax(0, 1fr) 156px; } }
@media (max-width: 47.5rem) { .tj .thought { height: 140px; } }
mark.tj-plant { padding: 0 2px; border-radius: 3px; background: rgba(168, 85, 247, 0.25); box-shadow: inset 0 -1px 0 var(--said, #a855f7); color: inherit; }
/* the storyline strip: each session is a button that loads it */
.ps-pick .ps-s { padding: 0; }
.ps-go { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-width: 0; padding: 0 12px 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ps-go:hover .ps-t { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ps-go:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; border-radius: 6px; }
.ps-pick .ps-m { display: flex; flex-wrap: wrap; gap: 4px; }
/* Full conversation: every turn, the person's tag and our note, the tool calls between turns */
.tj-log { max-height: 520px; margin-top: 10px; padding: 4px 2px; overflow-y: auto; }
.tj-log[hidden], .p-log .log[hidden] { display: none; }
.tj-convo { display: flex; flex-direction: column; gap: 10px; }
.tj-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 6px 18px; align-items: start; }
.tj-row .msg { max-width: 88%; animation: none; }
.tj-u .msg { justify-self: end; }
.tj-a .msg, .tj-c > * { justify-self: start; grid-column: 1; }
.tj-who { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.tj-tag { display: inline-block; margin-bottom: 5px; padding: 1px 8px; border-radius: 999px; font: 600 0.7rem/1.55 Inter, system-ui, sans-serif; letter-spacing: 0.02em; color: #d6dae0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.tj-tag.k-answer { color: #a9cdea; background: rgba(74, 143, 194, 0.14); border-color: rgba(74, 143, 194, 0.5); }
.tj-tag.k-correction { color: #f3a9a9; background: rgba(239, 107, 107, 0.12); border-color: rgba(239, 107, 107, 0.5); }
.tj-tag.k-approval { color: #e2e2e2; background: rgba(255, 255, 255, 0.1); }
.tj-note { margin: 4px 0 0; padding-left: 10px; border-left: 2px solid rgba(168, 85, 247, 0.55); color: var(--ink-dim); font-size: 0.8125rem; line-height: 1.5; }
.tj-status { margin: 0; color: var(--muted); font-size: 0.8rem; }
.tj-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tj-opts .ui-label { margin: 0 4px 0 0; }
.tj-opt { padding: 2px 9px; border: 1px solid #2c3640; border-radius: 7px; background: #12171c; color: var(--ink-dim); font-size: 0.78rem; }
.tj-calls { max-width: 88%; border: 1px solid rgba(74, 143, 194, 0.3); border-radius: 9px; background: rgba(74, 143, 194, 0.06); font-size: 0.8rem; }
.tj-calls summary { display: flex; gap: 8px; align-items: baseline; padding: 4px 10px; color: #a9d0ee; cursor: pointer; list-style: none; }
.tj-calls summary::-webkit-details-marker { display: none; }
.tj-calls summary::before { content: "\25B8"; color: var(--muted); }
.tj-calls[open] summary::before { content: "\25BE"; }
.tj-cn { flex: none; font-weight: 600; }
.tj-cl { min-width: 0; color: var(--ink-dim); overflow-wrap: anywhere; }
.tj-calllist { margin: 0; padding: 4px 10px 8px 30px; color: var(--ink-dim); line-height: 1.55; }
.tj-calllist li { overflow-wrap: anywhere; }
.tj-calllist li.w span { color: var(--ink); font-weight: 500; }
.tj-calllist code { margin-right: 8px; color: var(--muted); font: 400 0.74rem/1.4 "JetBrains Mono", ui-monospace, monospace; }
@media (max-width: 40rem) {
  .tj-row { grid-template-columns: minmax(0, 1fr); }
  .tj-row .msg, .tj-calls { max-width: 94%; }
  .tj-u .tj-note { justify-self: end; max-width: 94%; }
  .tj-stats { gap: 6px 16px; }
  .tj-stats dd { font-size: 1.02rem; }
}

/* ---------- Run players fit one laptop screen: a fixed stage, every long box scrolls inside itself ---------- */
.player { --stage-h: 480px; }
.player .p-tab { display: flex; align-items: baseline; gap: 8px; padding: 7px 16px; }
.player .p-head { gap: 4px 18px; padding: 10px 18px 7px; }
.player .p-who { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.84rem; line-height: 1.4; }
.player .p-score { gap: 2px 7px; font-size: 0.8rem; }
.player .p-score b { font-size: 0.95rem; }
.player .p-verdict { padding: 1px 8px 1px 6px; font-size: 0.72rem; }
/* the session strip: one row of sessions, a short line on what this one plants or uses */
.player .p-story { margin: 0 18px 8px; }
.player .ps-h { margin: 0 0 5px; font-size: 0.7rem; }
.player .ps-track { column-gap: 6px; }
.player .ps-s { flex-direction: row; align-items: center; gap: 6px; padding: 0 8px 0 0; }
.player .ps-s::before, .player .ps-n { display: none; }
.player .ps-dot { flex: none; width: 22px; height: 22px; font-size: 0.72rem; }
.player .ps-s.now .ps-dot { box-shadow: 0 0 0 3px rgba(74, 143, 194, 0.2); }
.player .ps-s.plant.now .ps-dot { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22); }
.player .ps-t { display: -webkit-box; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.76rem; line-height: 1.25; }
.player .p-story:not(:has(.ps-pick)) .ps-h { display: none; }
.player .p-story .ps-said { grid-template-rows: 1fr; margin-top: 6px; }
.player .p-story:not(:has(.ps-pick)) .ps-in { height: 48px; }
.player .by .kind { display: inline-block; }
/* the app window: a thread scrolls under its header; the empty compose bar only shows while a message is typed */
.player .v:has(> .v-thread) { display: flex; flex-direction: column; }
.player .v:has(> .v-thread) > :not(.v-thread):not(.v-compose) { flex: none; }
.player .v-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.player .v-compose:not(.typing), .player.still .v-compose { display: none; }
.player:not(.still) .v:has(.v-compose.typing) .v-thread { margin-bottom: 40px; }
.player .ps-m { flex: none; min-height: 0; }
.player .ps-pick .ps-s { padding: 0; }
.player .ps-go { flex-direction: row; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; }
.player .ps-s.now .ps-go { background: rgba(74, 143, 194, 0.1); }
.player .ps-s.plant.now .ps-go { background: rgba(168, 85, 247, 0.1); }
.player .ps-pick .ps-m { flex-wrap: nowrap; }
.player .p-story:not([data-at=""]) .ps-said { margin-top: 6px; }
.player .ps-in { max-height: 48px; overflow-y: auto; font-size: 0.78rem; line-height: 1.4; }
.player .ps-in p { padding: 4px 10px; }
.player .ps-in p + p { padding-top: 0; }
.player .ps-res { gap: 2px; padding: 5px 10px 6px; }
/* the stage: smaller boxes and figures, so the bottom band is lower */
.player .thought, .player .d-think { padding: 8px 12px; }
.player .thought .label, .player .d-think .label { margin-bottom: 3px; }
.player .thought .text { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.thought .text.more-down { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 18px); mask-image: linear-gradient(to top, transparent 0, #000 18px); }
.thought .text.more-up.more-down { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 18px), transparent 100%); }
.thought .text.more-up:not(.more-down) { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px); mask-image: linear-gradient(to bottom, transparent 0, #000 8px); }
.player .d-say { padding: 8px 12px 10px; }
.player .d-say .by { margin-bottom: 3px; }
.player .d-text { padding-right: 4px; }
@media (min-width: 47.5625rem) {
  .player .duet { gap: 0 22px; height: var(--stage-h); padding: 12px 16px 0; }
  .player .d-col { grid-template-rows: 120px minmax(0, 1fr) 88px; gap: 10px; }
  /* the person's column: the thought box is taller on its own (about six lines) and gives way first to a long bubble */
  .player .d-u { display: flex; flex-direction: column; gap: 10px; }
  .player .d-u .thought { flex: 0 1000 auto; min-height: 98px; max-height: 168px; }
  .player .d-u .d-say { flex: 0 1 auto; align-self: stretch; margin-top: auto; max-height: none; }
  .player .d-u .d-who { flex: 0 0 88px; }
  .player .d-a .d-say { align-self: end; }
  .player .figure { width: 68px; }
  .player .d-u .d-name { left: 10px; bottom: 4px; }
  .player .d-a .d-who { padding-right: 34px; }
  .player .d-a .d-name { right: 8px; bottom: 2px; min-width: 96px; }
  .player .d-bot { width: 46px; height: 46px; margin-bottom: 30px; }
  .player .d-bot img { width: 46px; height: 46px; border-radius: 12px; }
  .player .d-bot::before { inset: -6px; border-radius: 16px; }
  .player .d-wire { left: 104px; right: 104px; bottom: 52px; }
  .player .d-u .d-say::after { left: 30px; }
  .player .d-a .d-say::after { right: 50px; }
}
/* beside the stage: a shorter app window, then what was opened and the grading checks as two tabs in one box */
.player .app { height: 200px; margin: 12px 14px 0; }
/* the status pills ride in the app's title bar beside its name; the account line gives way while they need the room */
.app-bar { overflow: hidden; }
.app-bar > b.app-title { flex: none; }
.app-tags.v-tags { display: flex; flex: 0 1 auto; flex-wrap: nowrap; gap: 4px; min-width: 0; margin: 0 0 0 auto; }
.app-tags:empty { display: none; }
.app-tags .v-tag { flex: 0 1 auto; min-width: 2.5em; overflow: hidden; padding: 2px 7px; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; }
.app-tags .v-tag:not(.cno):not(.cok) { flex-shrink: 0; max-width: 100%; }
.app-tags:not(:empty) + .app-acct { flex: none; margin-left: 4px; }
.app-bar.tight .app-acct { display: none; }
.app-bar.measure .app-tags, .app-bar.measure .app-tags .v-tag { flex: none; }
.player .v:has(> .v-cal) { display: flex; flex-direction: column; }
.player .v-cal { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.player .v-cal .v-week { flex: 1 1 auto; height: auto; min-height: 0; }
.p-stabs { display: flex; flex: none; gap: 2px; margin: 10px 14px 0; border: 1px solid var(--line-soft); border-bottom: 0; border-radius: 12px 12px 0 0; background: rgba(255, 255, 255, 0.02); }
.p-stabs button { appearance: none; display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 7px 8px 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 600 0.78rem/1.2 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.p-stabs button:hover { color: var(--ink); }
.p-stabs button[aria-selected="true"] { border-bottom-color: var(--phos); color: var(--ink); }
.p-stabs button:focus-visible { outline: 2px solid var(--phos); outline-offset: -2px; border-radius: 10px 10px 0 0; }
.st-n { padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--ink-dim); font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-n:empty { display: none; }
.p-stabs button.ping .st-n { animation: stping 1.2s ease; }
@keyframes stping { 0%, 60% { background: rgba(74, 143, 194, 0.55); color: #fff; } 100% { background: rgba(255, 255, 255, 0.07); } }
.p-body[data-tab="trail"] .p-checks, .p-body[data-tab="checks"] .trail { display: none; }
.player .p-stabs { margin-top: 8px; }
.player .trail, .player .p-checks { margin: 0 14px 10px; border: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px; background: rgba(255, 255, 255, 0.015); }
.player .trail { padding: 8px 8px 6px; }
.player .trail-h { display: none; }
.player .pc-h { padding: 7px 10px 4px; cursor: default; }
.player .pc-h::after, .player .pc-t { display: none; }
.player .pc-bar { margin: 0 10px 6px; }
.player .pc { padding: 4px 6px; line-height: 1.3; }
.player .pc-why { line-height: 1.3; }
.player .p-checks:has(.pc-end:not([hidden])) .pc-s { display: none; }
.player .p-checks:has(.pc-end:not([hidden])) .pc-h { padding-top: 4px; }
@media (min-width: 60.0625rem) {
  .player .side { height: var(--stage-h); }
  .player .trail, .player .p-checks { flex: 1 1 0; min-height: 0; }
}
@media (max-width: 60rem) {
  .player .trail, .player .p-checks { flex: none; }
  .player .trail ol, .player .pc-list { flex: none; max-height: 220px; }
}
/* the controls: one compact row under the stage and the side */
.player .p-ctrl { grid-column: 1 / -1; flex-wrap: nowrap; gap: 8px; padding: 7px 16px; }
.player .p-ctrl button { padding: 4px 11px; }
.player .p-ctrl button.p-step { width: 26px; height: 26px; }
.player button.anim-switch.anim-switch { padding: 4px 10px 4px 5px; }
.player .p-log { padding: 8px 18px; }
.player .p-log summary { font-size: 0.84rem; }
/* thin scrollbars that stay visible on every box that scrolls inside the player */
.player :is(.d-text, .thought .text, .d-think ul, .trail ol, .pc-list, .ps-in, .ps-track, .log, .tj-log, .v-thread) { scrollbar-width: auto; scrollbar-color: auto; }
.player :is(.d-text, .thought .text, .d-think ul, .trail ol, .pc-list, .ps-in, .ps-track, .log, .tj-log, .v-thread)::-webkit-scrollbar { width: 6px; height: 6px; }
.player :is(.d-text, .thought .text, .d-think ul, .trail ol, .pc-list, .ps-in, .ps-track, .log, .tj-log, .v-thread)::-webkit-scrollbar-track { background: transparent; }
.player :is(.d-text, .thought .text, .d-think ul, .trail ol, .pc-list, .ps-in, .ps-track, .log, .tj-log, .v-thread)::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, 0.24); }
.player :is(.d-text, .thought .text, .d-think ul, .trail ol, .pc-list, .ps-in, .ps-track, .log, .tj-log, .v-thread)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
@supports not selector(::-webkit-scrollbar) {
  .player :is(.d-text, .thought .text, .d-think ul, .trail ol, .pc-list, .ps-in, .ps-track, .log, .tj-log, .v-thread) { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
}
@media (max-width: 47.5rem) {
  .player .app { height: 240px; margin: 12px 12px 0; }
  .player .p-stabs, .player .trail, .player .p-checks { margin-left: 12px; margin-right: 12px; }
  .player .d-say { max-height: 240px; }
  .player .p-ctrl { flex-wrap: wrap; padding: 8px 12px; }
  .player .p-head { padding: 10px 14px 7px; }
  .player .p-story { margin: 0 14px 8px; }
  .player .p-log { padding: 8px 14px; }
  .player .ps-track { grid-template-columns: repeat(var(--n, 4), minmax(11rem, 1fr)); }
  .player .p-who { -webkit-line-clamp: 4; }
  .player .ps-in, .player .p-story:not(:has(.ps-pick)) .ps-in { height: auto; max-height: 72px; }
}

/* ---------- Failure player as a story flow: 1 the ask, 2 the catch, 3 what happened (a fork), 4 the right move ----------
   Left to right on a wide card, a vertical timeline on a narrow one. Red is only failure, green only success,
   amber only the hidden record; purple and blue carry the flow itself. */
.fx { container-type: inline-size; --fs-amber: #f0b45a; --fs-line: rgba(176, 124, 255, 0.45); padding: 18px 22px 18px; }
.fs-head { margin: 22px 0 22px; }
.part .fs-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: none; margin: 0 0 8px; color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.fs-kick > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.fs-kick .fx-dom-ic { width: 15px; height: 15px; color: var(--pp); }
.fs-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fs-tag { padding: 2px 9px; border: 1px solid rgba(176, 124, 255, 0.4); border-radius: 999px; background: rgba(168, 85, 247, 0.1); color: #d6c6ff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; cursor: help; }
.part .fs-head h4.fx-title { margin: 0; max-width: none; font-size: 1.45rem; line-height: 1.3; text-wrap: balance; }

.part ol.fs-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1.22fr) minmax(0, 0.92fr); column-gap: 26px; align-items: start; }
.part ol.fs-flow > li { margin: 0; padding: 0; }
.fs-step { position: relative; min-width: 0; }
.fs-sh { display: flex; align-items: center; gap: 9px; height: 28px; margin-bottom: 14px; }
.fs-n { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--pp); background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(74, 143, 194, 0.22)); color: var(--ink); font: 700 0.82rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--surface); }
.fs-lab { flex: none; color: var(--ink); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
/* the connector runs from this step's label to the next step's number, with an arrowhead */
.fs-arw { position: relative; flex: 1; min-width: 14px; height: 2px; margin-right: -24px; background: linear-gradient(90deg, rgba(176, 124, 255, 0.15), var(--fs-line)); }
.fs-arw::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--fs-line); border-right: 2px solid var(--fs-line); transform: translate(-1px, -50%) rotate(45deg); }
.fs-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.part .fs-body p { max-width: none; margin: 0; }

/* 1 the ask */
.fs-person { display: flex; align-items: center; gap: 10px; }
.fs-av { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #6d5bd0, #3f6fa8); color: #fff; font: 700 0.95rem/1 Inter, system-ui, sans-serif; }
.fs-person b { display: block; color: var(--ink); font-size: 0.98rem; font-weight: 600; line-height: 1.2; }
.fs-person div span { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.part .fs-stake { color: #dcdcdc; font-size: 0.84rem; line-height: 1.45; }
.fs-bubble { align-self: flex-start; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: #23303d; color: var(--ink); font-size: 0.9rem; line-height: 1.5; }
.fs-bubble mark { padding: 0 3px; border-radius: 4px; background: rgba(110, 168, 255, 0.28); color: #fff; box-shadow: inset 0 -2px 0 rgba(110, 168, 255, 0.75); }
.part .fs-note { color: var(--ink-dim); font-size: 0.82rem; line-height: 1.45; }
.fs-note b { display: block; margin-bottom: 2px; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

/* 2 the catch: the one record that decides it */
.part .fs-where { display: flex; align-items: center; gap: 6px; color: var(--fs-amber); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.fs-where svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fs-doc { position: relative; margin-bottom: 6px; padding: 12px 14px 16px; border-radius: 10px; background: #f4f1ea; color: #222; box-shadow: 0 0 0 2px var(--fs-amber), 0 8px 26px rgba(240, 180, 90, 0.14); }
/* a case with more than one record: the cards stack, with room for the stamp that hangs off the one above */
.fs-doc + .fs-doc { margin-top: 18px; }
/* a request that quotes an email address wraps inside its bubble */
.fs-bubble { overflow-wrap: anywhere; }
.fs-doc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #6b6b6b; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.fs-doc-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fs-doc-from { margin-top: 8px; font-size: 0.8rem; font-weight: 600; }
.fs-doc-subj { font-size: 0.84rem; font-weight: 600; color: #111; }
.part .fs-doc-body { margin-top: 6px; color: #333; font-size: 0.84rem; line-height: 1.5; }
.fs-doc mark { padding: 0 1px; border-radius: 2px; background: rgba(240, 180, 90, 0.5); color: #1a1205; box-shadow: inset 0 -2px 0 #d9952c; }
.fs-stamp { position: absolute; right: 10px; bottom: -11px; padding: 1px 8px; border: 2px solid var(--fs-amber); border-radius: 6px; background: var(--surface); color: var(--fs-amber); font: 700 0.68rem/1.25 Inter, system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(4deg); }
.fs-notice b { color: var(--fs-amber); }

/* 3 what happened: two paths out of the catch */
.fs-fork { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 30px; }
.fs-fork::before { content: ""; position: absolute; left: 13px; top: -14px; bottom: 0; width: 2px; background: var(--fs-line); }
.fs-br { position: relative; padding: 11px 12px 12px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-2); }
.fs-br::before { content: ""; position: absolute; left: -16px; top: 22px; width: 10px; height: 2px; background: currentColor; }
.fs-br::after { content: ""; position: absolute; left: -8px; top: 18px; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.fs-mask { position: absolute; left: -19px; top: 24px; bottom: -2px; width: 6px; background: var(--surface); }
.fs-bad { color: var(--bad); border-color: rgba(239, 107, 107, 0.35); background: linear-gradient(180deg, rgba(239, 107, 107, 0.09), rgba(239, 107, 107, 0.03)); }
.fs-ok { color: var(--good); border-color: rgba(60, 196, 106, 0.35); background: linear-gradient(180deg, rgba(60, 196, 106, 0.09), rgba(60, 196, 106, 0.03)); }
.fs-none { color: var(--muted); border-style: dashed; background: none; }
.part .fs-brh { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.fs-brh b { flex: none; color: currentColor; font: 700 1.9rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fs-bad .fs-brh b { color: var(--bad); }
.fs-ok .fs-brh b { color: var(--good); }
.fs-none .fs-brh b { color: var(--muted); }
.fs-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fs-logos .fx-logo { width: 22px; height: 22px; transform: none; }
.fs-logos .fx-logo.x::after { right: -4px; bottom: -4px; width: 13px; height: 13px; font-size: 8px; box-shadow: 0 0 0 2px #1d1515; }
.part ul.fs-why { list-style: none; margin: 10px 0 0; padding: 9px 0 0; border-top: 1px dashed rgba(239, 107, 107, 0.3); display: grid; gap: 8px; }
.part ul.fs-why li { margin: 0; color: #e6e6e6; font-size: 0.82rem; line-height: 1.4; }
.fs-why em { color: var(--muted); font-style: normal; font-size: 0.76rem; white-space: nowrap; }
.fs-rt { display: block; width: fit-content; margin-bottom: 3px; padding: 1px 7px; border-radius: 5px; background: rgba(168, 85, 247, 0.16); color: #c8b4ff; font-size: 0.68rem; font-weight: 600; cursor: help; }
.fs-rt-err { background: rgba(148, 163, 184, 0.18); color: var(--ink-dim); }
.part .fs-foot { margin-top: 8px; padding-left: 22px; color: var(--muted); font-size: 0.76rem; line-height: 1.4; }

/* 4 the right move */
.part ul.fs-fix { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.part ul.fs-fix li { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 9px 11px; border: 1px solid rgba(60, 196, 106, 0.28); border-radius: 9px; background: rgba(60, 196, 106, 0.06); color: var(--ink); font-size: 0.86rem; line-height: 1.4; }
.fs-fix svg { flex: none; width: 18px; height: 18px; margin-top: 0; padding: 2px; border: 1.5px solid var(--good); border-radius: 5px; fill: none; stroke: var(--good); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }

/* the featured assistant's own reply, folded away */
.fs-trace { margin-top: 22px; border-top: 1px solid var(--grid); padding-top: 12px; }
.fs-trace summary { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 0.84rem; font-weight: 600; cursor: pointer; list-style: none; }
.fs-trace summary::-webkit-details-marker { display: none; }
.fs-trace summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.fs-trace[open] summary::before { transform: rotate(45deg); }
.fs-trace summary:hover { color: var(--ink); }
.fs-trace summary:focus-visible { outline: 2px solid var(--phos); outline-offset: 3px; border-radius: 4px; }
.fs-reply { max-width: 40rem; margin-top: 12px; padding: 11px 14px; border: 1px solid var(--grid); border-radius: 14px 14px 4px 14px; background: var(--surface-2); }
.fs-who { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: var(--muted); font-size: 0.76rem; font-weight: 600; }
.part .fs-reply p { max-width: none; margin: 0; color: #dcdcdc; font-size: 0.88rem; line-height: 1.55; }
.fs-reply mark.bad { padding: 0 2px; border-radius: 3px; background: rgba(239, 107, 107, 0.22); color: #ffd9d9; box-shadow: inset 0 -2px 0 var(--bad); }

/* entrance along the flow */
@keyframes fsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fs-flow.fs-in > .fs-step { animation: fsIn .45s ease both; }
.fs-flow.fs-in > .fs-step:nth-child(2) { animation-delay: .09s; }
.fs-flow.fs-in > .fs-step:nth-child(3) { animation-delay: .18s; }
.fs-flow.fs-in > .fs-step:nth-child(4) { animation-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .fs-flow > .fs-step, .fs-trace summary::before { animation: none !important; transition: none !important; } }

/* narrow card: a vertical timeline, numbers on a rail at the left; the fork stacks */
@container (max-width: 820px) {
  .part ol.fs-flow { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .part ol.fs-flow > li.fs-step { padding-left: 42px; }
  .fs-sh { position: absolute; left: 0; top: 0; margin: 0; }
  .fs-sh .fs-lab { position: absolute; left: 42px; top: 50%; transform: translateY(-50%); }
  .fs-body { padding-top: 38px; }
  .fs-arw { display: none; }
  .fs-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 34px; bottom: -22px; width: 2px; background: linear-gradient(180deg, var(--fs-line), rgba(176, 124, 255, 0.15)); }
  .fs-fork::before { top: 0; }
  .fs-bubble { max-width: 34rem; }
  .fs-doc, .fs-fork, .fs-fix { max-width: 34rem; }
}
@container (max-width: 460px) {
  .part ol.fs-flow > li.fs-step { padding-left: 36px; }
  .fs-sh .fs-lab { left: 36px; }
  .fs-n { width: 26px; height: 26px; }
  .fs-step:not(:last-child)::before { left: 12px; }
  .part .fs-head h4.fx-title { font-size: 1.22rem; }
}
@media (max-width: 40rem) { .fx { padding: 14px 14px 14px; } }

/* story flow on the per-mode cases: the sessions in between (memory), the facts in time (reasoning), and the fold */
.fs-tag { display: inline-flex; align-items: center; gap: 5px; }
.fs-tag .fx-dom-ic { width: 12px; height: 12px; color: currentColor; }
.part ol.fs-sess { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px dashed rgba(240, 180, 90, 0.45); display: grid; gap: 12px; }
.part ol.fs-sess > li { position: relative; margin: 0; }
.part ol.fs-sess > li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--fs-amber); }
.fs-sess em { display: block; margin-bottom: 5px; color: var(--fs-amber); font-size: 0.76rem; font-style: normal; font-weight: 600; }
.fs-sess .fs-mid em { color: var(--muted); font-weight: 500; }
.part ol.fs-sess > li.fs-mid::before { border-color: var(--axis); }
.part .fs-sess > li > p { color: var(--ink-dim); font-size: 0.82rem; line-height: 1.45; }
.part ol.fs-days { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.part ol.fs-days li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; margin: 0; padding: 5px 7px; border-radius: 6px; font-size: 0.8rem; line-height: 1.3; color: #333; }
.fs-days em { grid-column: 1 / -1; color: #777; font-size: 0.68rem; font-style: normal; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fs-days b { font-variant-numeric: tabular-nums; color: #111; }
.part ol.fs-days li.hl { background: rgba(240, 180, 90, 0.42); box-shadow: inset 3px 0 0 #d9952c; }
.fs-tbody { display: grid; gap: 12px; margin-top: 12px; max-width: 46rem; }
.part ol.fs-calls { list-style: none; counter-reset: c; margin: 0; padding: 0; display: grid; gap: 4px; }
.part ol.fs-calls li { counter-increment: c; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 6px 10px; border: 1px solid var(--grid); border-radius: 7px; background: var(--surface-2); color: var(--ink-dim); font-size: 0.8rem; line-height: 1.4; }
.fs-calls li::before { content: counter(c); min-width: 1.2em; color: var(--muted); font: 600 0.72rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fs-calls code { color: var(--ink); font: 500 0.78rem/1.4 "JetBrains Mono", ui-monospace, monospace; }
.part ol.fs-calls li.bad { border-color: rgba(239, 107, 107, 0.5); background: rgba(239, 107, 107, 0.08); }
.fs-calls li.bad code { color: #ffb3b3; }
.fs-calls em { flex-basis: 100%; padding-left: calc(1.2em + 10px); color: var(--bad); font-size: 0.78rem; font-style: normal; font-weight: 600; }
.fs-calls em::before { content: "\2715  "; }
.part .fs-gap { max-width: none; margin: 0; padding: 8px 12px; border-left: 3px solid var(--fs-amber); border-radius: 0 8px 8px 0; background: rgba(240, 180, 90, 0.07); color: #dcdcdc; font-size: 0.84rem; line-height: 1.5; }
.fs-gap b { display: block; margin-bottom: 2px; color: var(--fs-amber); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; }
.part .fs-gap-bad { border-left-color: var(--bad); background: rgba(239, 107, 107, 0.07); color: #ffd0d0; font-weight: 600; }
.part ul.fs-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.part ul.fs-chain li { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 8px 11px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); color: var(--ink); font-size: 0.84rem; line-height: 1.4; }
.fs-chain li > b { flex: none; width: 1.1em; text-align: center; }
.fs-chain li.ok > b { color: var(--good); }
.fs-chain li.bad > b { color: var(--bad); }
.part ul.fs-chain li.bad { border-color: rgba(239, 107, 107, 0.35); }
.fs-chain small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.76rem; }
.fs-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.fs-rule { padding: 10px 12px; border-radius: 10px; background: #f4f1ea; color: #222; box-shadow: 0 0 0 2px var(--fs-amber); }
.fs-rule span { display: block; color: #6b6b6b; font-size: 0.72rem; font-weight: 600; }
.part .fs-rule p { max-width: none; margin: 4px 0 0; font-size: 0.82rem; line-height: 1.45; }
.fs-rule mark { padding: 0 1px; background: rgba(240, 180, 90, 0.5); color: #1a1205; }
.fs-x { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(239, 107, 107, 0.16); color: var(--bad); font-weight: 700; }
.fs-vs .fs-reply { margin: 0; }
@container (max-width: 640px) { .fs-vs { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.fs-tbody .fs-reply { margin-top: 0; }
@media (max-width: 40rem) { .mem-fig .ivl.hb { padding-right: 2.75rem; } }
@media (max-width: 40rem) { .fx-filter .fx-modes { flex-wrap: wrap; overflow: visible; } }

/* three steps: user request, background, failure analysis (about half the width, the fork beside what went wrong) */
.fs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.part .fs-head h4.fx-title { font-size: 1.4rem; }
.part ol.fs-flow { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 2.05fr); }
.fs-ana { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fs-detail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.part .fs-dh { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fs-dh .fx-logo { width: 18px; height: 18px; }
.part .fs-dh-ok { color: var(--good); }
.fs-step-bad { padding: 9px 11px; border: 1px solid rgba(239, 107, 107, 0.5); border-radius: 8px; background: rgba(239, 107, 107, 0.08); font-size: 0.8rem; line-height: 1.4; }
.fs-mk { display: block; margin-bottom: 3px; color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fs-step-bad code { color: #ffb3b3; font: 500 0.8rem/1.4 "JetBrains Mono", ui-monospace, monospace; }
.fs-arg { color: var(--ink-dim); }
.part .fs-step-bad p { margin: 4px 0 0; color: var(--bad); font-weight: 600; }
.part .fs-step-bad p::before { content: "\2715  "; }
.fs-detail .fs-reply { margin: 0; padding: 9px 11px; }
.part .fs-detail .fs-reply p { font-size: 0.82rem; }
.fs-should { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; padding-top: 10px; border-top: 1px dashed rgba(60, 196, 106, 0.3); }
.part .fs-should ul.fs-fix { gap: 5px; }
.part .fs-should ul.fs-fix li { padding: 6px 9px; font-size: 0.82rem; }
.fs-should .fs-fix svg { width: 16px; height: 16px; }
.fs-trace[hidden] { display: none; }
@container (max-width: 820px) {
  .part ol.fs-flow { grid-template-columns: minmax(0, 1fr); }
  .fs-ana { max-width: 40rem; }
}
@container (max-width: 560px) { .fs-ana { grid-template-columns: minmax(0, 1fr); } }
.fs-ana { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.fs-ana .fs-logos { gap: 5px; }
.fs-ana .fs-logos .fx-logo { width: 20px; height: 20px; }
@container (max-width: 560px) { .fs-ana { grid-template-columns: minmax(0, 1fr); } }

/* two panels: the task (request and the record it turns on) beside the failure analysis; stacked on a narrow card */
.part .fs-flow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fs-panel { min-width: 0; padding: 16px 16px 18px; border: 1px solid var(--grid); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
.fs-fail { border-color: rgba(176, 124, 255, 0.28); background: linear-gradient(180deg, rgba(168, 85, 247, 0.05), rgba(74, 143, 194, 0.03)); }
.part h5.fs-ph { margin: 0 0 14px; color: var(--ink); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fs-req { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; }
.fs-fig { display: grid; place-items: center; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2b3442, #1a1f27); box-shadow: 0 0 0 2px rgba(176, 124, 255, 0.35); color: var(--ink); font-weight: 700; }
.fs-fig svg { width: 100%; height: 100%; display: block; }
.fs-req-r { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.part .fs-pname { margin: 0; line-height: 1.3; }
.fs-pname b { display: block; color: var(--ink); font-size: 0.98rem; font-weight: 600; }
.fs-pname span { display: block; color: var(--muted); font-size: 0.8rem; }
.fs-req .fs-bubble { position: relative; border-radius: 4px 14px 14px 14px; }
.fs-req .fs-bubble::before { content: ""; position: absolute; left: -7px; top: 0; border-top: 9px solid #23303d; border-left: 8px solid transparent; }
.fs-ctx { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--grid); }
.fs-panel .fs-fork::before { top: 4px; }
.fs-flow.fs-in > .fs-panel { animation: fsIn .45s ease both; }
.fs-flow.fs-in > .fs-panel + .fs-panel { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .fs-flow > .fs-panel { animation: none !important; } }
@container (max-width: 820px) { .part .fs-flow { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 560px) { .fs-ana { grid-template-columns: minmax(0, 1fr); } .fs-panel { padding: 14px 12px 16px; } }
.fs-panel .fs-fork::before { bottom: auto; height: calc(var(--stem, 100%) - 4px); }

/* four numbered steps: 1 context (widest), 2 user request, 3 results (the fork), 4 failure analysis */
.part ol.fs-flow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 1.15fr); column-gap: 24px; }
.fs-arw { margin-right: -22px; }
.fs-step .fs-fork::before { bottom: auto; top: -14px; height: calc(var(--stem, 100%) + 14px); }
.fs-s1 .fs-req { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
.fs-s1 .fs-fig { width: 44px; height: 44px; }
.fs-s1 .fs-req-r { display: contents; }
.fs-s1 .fs-pname { align-self: center; }
.fs-s1 .fs-bubble, .fs-s1 .fs-stake { grid-column: 1 / -1; }
.fs-s1 .fs-bubble { border-radius: 4px 14px 14px 14px; }
.fs-s1 .fs-req .fs-bubble::before { left: 14px; top: -7px; border-top: 0; border-bottom: 8px solid #23303d; border-left: 8px solid transparent; border-right: 0; }
.fs-s3 .fs-logos { gap: 4px; }
.fs-s3 .fs-logos .fx-logo { width: 18px; height: 18px; }
.fs-s3 .fs-logos .fx-logo.x::after { width: 11px; height: 11px; font-size: 7px; right: -3px; bottom: -3px; }
@container (max-width: 820px) {
  .part ol.fs-flow { grid-template-columns: minmax(0, 1fr); }
  .fs-step .fs-fork::before { top: 0; height: var(--stem, 100%); }
  .fs-s1 .fs-req { grid-template-columns: 52px minmax(0, 1fr); }
  .fs-s1 .fs-fig { width: 52px; height: 52px; }
}
.fs-s3 .fs-br { padding: 10px 10px 11px; }
.fs-s3 .fs-logos { gap: 3px; flex-wrap: nowrap; }
@container (max-width: 820px) { .fs-s3 .fs-logos { gap: 5px; flex-wrap: wrap; } .fs-s3 .fs-logos .fx-logo { width: 22px; height: 22px; } }

/* equal-height steps: each step's body is a framed panel that reaches the row height; step 1 shows the whole person */
.part ol.fs-flow { align-items: stretch; }
.fs-step { display: flex; flex-direction: column; }
.fs-step > .fs-body { flex: 1; padding: 12px; border: 1px solid var(--grid); border-radius: 12px; background: rgba(255, 255, 255, 0.018); }
.fs-s4 > .fs-body { border-color: rgba(176, 124, 255, 0.25); background: linear-gradient(180deg, rgba(168, 85, 247, 0.05), rgba(74, 143, 194, 0.025)); }
.fs-step .fs-fork::before { top: 0; height: var(--stem, 100%); }
.fs-s2 .fs-notice { margin-top: auto; }
.fs-who1 { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fs-say { position: relative; border-radius: 14px 14px 14px 4px; }
.fs-say::after { content: ""; position: absolute; left: 30px; bottom: -8px; border-top: 9px solid #23303d; border-right: 10px solid transparent; }
.fs-me { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.fs-body-fig { display: block; width: 92px; height: 116px; margin-left: 4px; }
.fs-body-fig svg { width: 100%; height: 100%; display: block; }
.fs-me .fs-pname b { font-size: 0.96rem; }
.fs-who1 .fs-stake { margin-top: auto !important; padding-top: 8px; border-top: 1px dashed var(--grid); }
/* steps 3 and 4 a little tighter; the fork's stem sits closer in so the results rows get the width */
.fs-s3 .fs-fork { gap: 10px; padding-left: 24px; }
.fs-s3 .fs-fork::before { left: 7px; }
.part .fs-s3 ul.fs-why { gap: 6px; margin-top: 8px; padding-top: 7px; }
.part .fs-s3 ul.fs-why li { font-size: 0.8rem; }
.fs-s4 .fs-detail { gap: 8px; }
.fs-s4 .fs-step-bad { padding: 7px 10px; }
.part .fs-s4 .fs-gap { padding: 6px 10px; font-size: 0.8rem; line-height: 1.45; }
.part .fs-s4 ul.fs-chain li { padding: 6px 9px; font-size: 0.8rem; }
.fs-s4 .fs-should { gap: 5px; padding-top: 8px; }
.part .fs-s4 .fs-should ul.fs-fix { gap: 4px; }
.part .fs-s4 .fs-should ul.fs-fix li { padding: 2px 0; border: 0; background: none; font-size: 0.8rem; line-height: 1.35; }
.fs-s4 .fs-should .fs-fix svg { width: 15px; height: 15px; margin-top: 1px; }
@container (max-width: 820px) {
  .fs-step > .fs-body { padding: 38px 0 0; border: 0; background: none; }
  .fs-me { flex-direction: row; align-items: flex-end; gap: 10px; }
  .fs-body-fig { width: 56px; height: 71px; margin: 0; }
  .fs-s2 .fs-notice { margin-top: 0; }
}
/* the shorter columns spread their content to the row height: the fork's branches, the analysis blocks */
.fs-s3 > .fs-body, .fs-s4 > .fs-body { display: flex; flex-direction: column; }
.fs-s3 .fs-fork { flex: 1; justify-content: space-between; }
.fs-s4 .fs-detail { flex: 1; }
.fs-s4 .fs-should { margin-top: auto; }
.fs-sess .fs-doc-from { display: none; }
.part .fs-sess .fs-doc-body { font-size: 0.8rem; line-height: 1.45; }
@container (max-width: 820px) { .fs-s3 .fs-fork { justify-content: flex-start; } }
.part .fs-s2 .fs-body > .fs-notice { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--grid); }
@container (max-width: 820px) { .part .fs-s2 .fs-body > .fs-notice { margin-top: 0; padding-top: 0; border-top: 0; } }
/* the record that decides, as a dark card that sits in the page: amber is its only accent */
.fs-doc { background: #1a1d24; color: var(--ink); border: 1px solid rgba(240, 180, 90, 0.32); box-shadow: none; }
.fs-doc-h { color: var(--muted); }
.fs-doc-from { color: var(--ink-dim); }
.fs-doc-subj { color: var(--ink); }
.part .fs-doc-body { color: #d4d4d4; }
.fs-doc mark, .fs-rule mark { padding: 0 1px; border-radius: 2px; background: rgba(240, 180, 90, 0.14); color: #f6dcae; box-shadow: inset 0 -1.5px 0 rgba(240, 180, 90, 0.75); }
.fs-stamp { padding: 0 6px; border: 1px solid rgba(240, 180, 90, 0.6); border-radius: 4px; background: #1a1d24; color: #dcae66; font-size: 0.6rem; letter-spacing: 0.09em; transform: rotate(3deg); }
.part ol.fs-days li { color: var(--ink-dim); }
.fs-days em { color: var(--muted); }
.fs-days b { color: var(--ink); }
.part ol.fs-days li.hl { background: rgba(240, 180, 90, 0.1); box-shadow: inset 2px 0 0 rgba(240, 180, 90, 0.8); }
.part ol.fs-days li.hl span, .part ol.fs-days li.hl b { color: #f6dcae; }
/* the money case: a "Money" part and a "Due this week" bills table, one compact row per bill */
.part .fs-doc .fs-sec { margin: 10px 0 0; color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.part ul.fs-bills { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.part ul.fs-bills li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; align-items: center; margin: 0; padding: 4px 7px; border-radius: 6px; font-size: 0.78rem; line-height: 1.3; color: var(--ink-dim); }
.fs-bills b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.fs-bills small { color: var(--muted); font-size: 0.7rem; }
.fs-chip { justify-self: end; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; color: var(--muted); font-size: 0.62rem; font-style: normal; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.part ul.fs-bills li.hold { box-shadow: inset 2px 0 0 rgba(240, 180, 90, 0.8); }
.fs-bills li.hold .fs-chip { border-color: rgba(240, 180, 90, 0.75); background: rgba(240, 180, 90, 0.12); color: #f0c27a; text-transform: uppercase; letter-spacing: 0.08em; }
.part ul.fs-bills li.hl { background: rgba(240, 180, 90, 0.1); }
.fs-bills li.hl span, .fs-bills li.hl b { color: #f6dcae; }
.fs-bills li.hl .fs-chip { border-color: rgba(240, 180, 90, 0.45); color: #dcae66; }
.part .fs-doc .fs-btot { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--ink-dim); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.fs-rule { background: #1a1d24; color: var(--ink); box-shadow: none; border: 1px solid rgba(240, 180, 90, 0.32); }
.fs-rule span { color: var(--muted); }
.part .fs-notice { color: var(--muted); font-size: 0.8rem; }

/* Figures 2 and 3 on the same plain card as the other figures */
.pipeline, .ed-fig { padding: clamp(18px, 2.4vw, 26px); border: 1px solid rgba(74, 143, 194, 0.18); border-radius: 14px; background: var(--surface); }
.pipeline::before { content: none; }
.ed-panel { background: rgba(255, 255, 255, 0.015); }
/* Figure 3: an icon per domain and capability, in the leaderboard's line style */
.ed-list li { flex-direction: row; align-items: flex-start; gap: 11px; }
.ed-list li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-li-ic { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: rgba(168, 85, 247, 0.1); fill: none; stroke: #b9a8ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* failure player: column widths are set by fails.js from each step's content, so the four steps end level with no
   empty space; nothing is spread out to fill a column any more */
.fs-s3 .fs-fork { flex: none; justify-content: flex-start; }
.fs-s4 .fs-detail { flex: none; }
.fs-s4 .fs-should { margin-top: 4px; }
.fs-who1 { flex: none; }
.fs-who1 .fs-stake { margin-top: 4px !important; }
.part .fs-s2 .fs-body > .fs-notice { margin-top: 0; }
.fs-flow.fs-measure { align-items: start; }
.fs-flow.fs-measure > .fs-step > .fs-body { flex: none; }
.fs-flow.fs-measure, .fs-flow.fs-measure * { animation: none !important; transition: none !important; }
/* step 1: name only, the stake as an amber chip */
.fs-me { flex-direction: row; align-items: flex-end; gap: 10px; }
.fs-body-fig { width: 74px; height: 94px; }
.part .fs-who1 .fs-stake { display: flex; gap: 7px; align-items: flex-start; padding: 7px 9px; border: 1px solid rgba(240, 180, 90, 0.35); border-radius: 8px; background: rgba(240, 180, 90, 0.07); color: #f6dcae; font-size: 0.8rem; font-weight: 500; line-height: 1.4; }
.fs-stake svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: var(--fs-amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* step 2: kind and time in the card's header */
.fs-when { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
/* step 4: the run as a strip of tool calls, the bad one red; the record it never opened as an icon card */
.part ol.fs-strip { display: flex; gap: 4px; margin: 0 0 7px; padding: 0; list-style: none; }
.fs-strip li { flex: 1; max-width: 22px; height: 6px; margin: 0; border-radius: 3px; background: rgba(176, 124, 255, 0.35); }
.fs-strip li.bad { background: var(--bad); box-shadow: 0 0 8px rgba(239, 107, 107, 0.6); }
.fs-never { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px dashed rgba(240, 180, 90, 0.5); border-radius: 8px; cursor: help; }
.fs-never svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 6px; background: rgba(240, 180, 90, 0.1); fill: none; stroke: var(--fs-amber); stroke-width: 1.6; stroke-linejoin: round; opacity: .8; }
.fs-never span { color: var(--ink); font-size: 0.82rem; line-height: 1.3; }
.fs-never b { display: block; color: var(--fs-amber); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; }
.fs-doc-h { column-gap: 8px; }
.fs-when { white-space: nowrap; }
.fs-when::before { content: "\00b7"; margin-right: 6px; }
.fs-doc-h .fs-when:first-child::before { content: none; }
.fs-body-fig { max-width: 100%; }
.fs-me { flex-direction: column; align-items: flex-start; gap: 4px; }
.fs-when::before { content: none; }
.fs-when { padding: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); }
@container (max-width: 820px) { .fs-me { flex-direction: row; align-items: flex-end; gap: 10px; } }
/* results branches: a coloured label, then that branch's products on the same line (they wrap under it when narrow) */
.part .fs-brh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 22px; }
.fs-brl { flex: none; font: 700 0.7rem/1 Inter, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.fs-bad .fs-brl { color: var(--bad); }
.fs-ok .fs-brl { color: var(--good); }
.fs-brh .fs-logos { margin-top: 0; }
.fs-s3 .fs-brh .fs-logos { flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
.fs-nil { color: var(--muted); font-size: 0.8rem; font-weight: 500; }
/* Section 2.4 in the green verified box */
.hv-box { align-items: start; margin: 0 0 8px; padding: 16px 18px; }
.hv-box .hv-ic { margin-top: 2px; }
.part .hv-box p { max-width: none; margin: 0; color: var(--ink-dim); }
.part .hv-box p + p { margin-top: 10px; }
/* Figure 3, compact: icon + name chips, the definition on hover */
.ed-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 8fr); gap: 12px; }
.ed-panel { padding: 14px; }
.ed-panel .ed-h { margin-bottom: 10px; }
.ed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 6px; }
.ed-list li { flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; cursor: help; transition: background-color .15s; }
.ed-list li:hover { background: rgba(168, 85, 247, 0.1); }
.ed-list li b { font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.ed-li-ic { width: 26px; height: 26px; padding: 5px; }
@media (max-width: 60rem) { .ed-grid { grid-template-columns: minmax(0, 1fr); } }
/* the world in one compact row: three figures, then the apps as icon chips */
.w-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; padding: 10px 14px; border: 1px solid rgba(74, 143, 194, 0.18); border-radius: 12px; background: var(--surface); }
.w-stats .w-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; background: none; cursor: help; }
.w-stats .w-stat:hover { background: none; }
.w-stats .w-stat b { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.w-stats .w-stat:hover b { scale: 1; }
.w-stats .w-stat span { color: var(--muted); font-size: 0.78rem; line-height: 1; }
.w-stats .w-appchips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.w-stats .w-appchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); cursor: help; }
.w-stats .w-appchip i { display: inline-flex; width: 14px; height: 14px; }
.w-stats .w-appchip i svg { width: 14px; height: 14px; }
.w-stats .w-appchip small { color: var(--ink-dim); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .w-stats .w-appchips { margin-left: 0; } }
.w-stats { gap: 6px 16px; }
.w-stats .w-appchips { gap: 2px; }
.w-stats .w-appchip { gap: 3px; padding: 2px 5px; border: 0; background: none; }
.w-stats .w-appchip:hover { background: rgba(168, 85, 247, 0.12); }
.ed-list li:focus-visible { outline: 2px solid var(--pp); outline-offset: 1px; }
/* player header: the story and its verdict on one line */
.player .p-head { align-items: center; flex-wrap: nowrap; }
.player .p-head .p-who { flex: 1 1 auto; min-width: 0; }
.player .p-score { flex: none; cursor: help; }
@media (max-width: 40rem) { .player .p-head { flex-wrap: wrap; } }
/* details open on click: clickable marks show a pointer, the chosen item stays lit */
.tip-click { cursor: pointer; }
.ed-list li.sel, .ed-list li.tip-on { background: rgba(168, 85, 247, 0.16); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.5); }
.pipeline .pl-card.sel { border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35); }
.pipeline .pl-grid:has(.pl-card.sel) .pl-card:not(.sel) { opacity: 0.55; }
.pipeline .pl-grid:has(.pl-card:hover) .pl-card:not(:hover) { opacity: 1; }
.pipeline .pl-grid:has(.pl-card.sel) .pl-card:not(.sel) { opacity: 0.55; }
/* the verified box stands apart from the Workflow text above it */
.part .hv-box { margin-top: 32px; }
/* the rule between sections is white */
.part + .part, section.part { border-top-color: rgba(255, 255, 255, 0.75); }
#intro.part { border-top-color: transparent; }
/* Figure 2: on a phone each run tab stacks its kind over the product */
@media (max-width: 40rem) { .player .tj-tabs .p-tab { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* ---------- Phones: touch-sized controls, wrapped title bars, readable labels, scroll hints (layout above 47.5rem is untouched) ---------- */
@media (max-width: 64rem) {
  .toc-m ol { padding-left: 16px; list-style: none; }
  .toc-m a { display: block; padding: 6px 0; line-height: 1.45; }
  .toc-m ol ol { padding-left: 14px; }
}
@media (max-width: 47.5rem) {
  /* controls a thumb can hit: 40px or more */
  .player .p-ctrl button.p-step { width: 40px; height: 40px; font-size: 1.25rem; }
  .player .p-ctrl button, .player button.p-jump, .player button.anim-switch.anim-switch { min-height: 40px; }
  .player .p-stabs button { min-height: 42px; }
  .player .p-log summary { padding: 10px 0; }
  .player .p-brief summary { padding: 10px 10px; }
  .fig-switch button { min-height: 42px; }
  .fx-modes button, .fx-tabs button { min-height: 40px; }
  .ed-list li { min-height: 40px; }
  .cite button.copy { min-height: 40px; padding-left: 14px; padding-right: 14px; }
  /* the two runs' tabs: the verdict over the assistant's name, each on one line */
  .player .p-tab { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 48px; padding: 7px 12px; }
  .player .p-tab b, .player .p-tab span { white-space: nowrap; }
  /* an app's title bar: its pills shrink to an ellipsis instead of running off the window */
  .player .app-bar:not(.measure) .app-tags .v-tag { flex-shrink: 1; }
  /* what the assistant opened: the badges take a second line, so the record's name keeps the width */
  .player .tr { grid-template-columns: 18px minmax(0, 1fr); }
  .player .tr .badges { grid-column: 2 / -1; justify-content: flex-start; }
  /* the session strip scrolls sideways: fade its edge while there is more */
  .player .ps-track.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .player .ps-in, .player .p-story:not(:has(.ps-pick)) .ps-in { max-height: 104px; overflow-y: auto; }
  /* small caps labels no smaller than 11px */
  .fs-stamp { font-size: 0.6875rem; }
  .fs-never b { font-size: 0.6875rem; }
  /* the citation wraps instead of scrolling sideways */
  .cite pre { padding-top: 54px; white-space: pre-wrap; overflow-wrap: anywhere; }
  /* the efficiency chart's logos: a larger touch area than the 26px logo */
  .eff-dot::before { content: ""; position: absolute; inset: -9px; }
  /* records per month: every other month named, so the labels do not run together (a tap on a bar still names it) */
  .wa-mo-col:nth-last-child(even) small { visibility: hidden; }
  .wa-mo-col small { font-size: 0.75rem; }
  /* who the persona is in touch with, drawn as a column on phones */
  .wa-graph.sm .wa-gn .n { font-size: 15.5px; }
  .wa-graph.sm .wa-gn .r { font-size: 13.5px; fill: #9a9a9a; }
}
/* who the person is in touch with: each circle of life its own colour, on the dot, its line and the legend */
.wa-panel .wa-gwrap { display: flex; flex-direction: column; align-items: stretch; }
.wa-gn.g-Family circle { fill: #f0b45a; } .wa-gl.g-Family { stroke: rgba(240, 180, 90, 0.45); }
.wa-gn.g-Home circle { fill: #5fcf8f; } .wa-gl.g-Home { stroke: rgba(95, 207, 143, 0.42); }
.wa-gn.g-Work circle { fill: #ef8c6b; } .wa-gl.g-Work { stroke: rgba(239, 140, 107, 0.45); }
.wa-gn.g-School circle { fill: #6f9cff; } .wa-gl.g-School { stroke: rgba(111, 156, 255, 0.4); }
.wa-gn.g-Other circle { fill: #9aa3b2; } .wa-gl.g-Other { stroke: rgba(154, 163, 178, 0.35); }
.wa-gn circle, .wa-gn[class*="g-"] circle { stroke: none; }
.wa-gn:hover circle { fill: #c4a8ff; }
.wa-panel .wa-glegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 0; padding: 0; color: var(--ink-dim); font-size: 0.78rem; }
.wa-panel .wa-glegend span { display: inline-flex; align-items: center; gap: 6px; }
.wa-panel .wa-glegend b { color: var(--muted); font-weight: 500; }
.wa-panel .wa-glegend i { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #9aa3b2; }
.wa-panel .wa-glegend .g-Family i { background: #f0b45a; }
.wa-panel .wa-glegend .g-Home i { background: #5fcf8f; }
.wa-panel .wa-glegend .g-Work i { background: #ef8c6b; }
.wa-panel .wa-glegend .g-School i { background: #6f9cff; }
.wa-panel .wa-glegend .wa-gnote { margin-left: auto; color: var(--muted); }

/* chart text: larger and white, like the radar profiles */
.eff-gy b,.eff-gx b,.eff-ylab,.eff-xlab,.eff-key{color:#fff !important;font-size:14px !important}
.eff-gy b,.eff-gx b{font-style:normal}
.eff-name{color:#fff !important;font-size:14.5px !important;font-weight:500}
.ivl-name{color:#fff !important;font-size:15px !important}
.ivl-val,.hb-val{color:#fff;font-size:15px}
.ivl-axis{color:#e6e8ec;font-size:13.5px}
.legend{color:#fff !important;font-size:14px !important}
.wa-mo-key{color:#fff;font-size:14px}
.wa-mo-y{color:#e6e8ec;font-size:12.5px}
.wa-mo-col small{color:#e6e8ec;font-size:13px}
.wa-panel .wa-glegend{color:#fff;font-size:14px}
.wa-gn .n{fill:#fff;font-size:15px}
.wa-gn .r{fill:#d6dae1;font-size:13px}
/* the failure figure: two lines under the case title on what the task is, the key facts picked out */
.fx-desc { max-width: 62rem; margin: 6px 0 18px; color: #c9ced8; font-size: 1rem; line-height: 1.6; }
.fx-desc b { padding: 0 4px; border-radius: 4px; background: rgba(168, 85, 247, 0.18); color: #fff; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* an email in the Mail app: its body is a short gist, set as a summary */
.wa-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wa-cnt { flex: none; color: #8a93a0; font-size: 0.75rem; }
.wa-thn { margin: -6px 0 14px; }
.wa-msg { max-width: 44rem; margin: 0 0 10px; padding: 12px 14px; border: 1px solid #e1e4e8; border-radius: 10px; background: #fff; }
.wa-msg.me { border-color: #d3ddf3; background: #f4f7fd; }
.wa-msg.hit { box-shadow: 0 0 0 3px rgba(240, 180, 90, 0.8); }
.wa-msg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wa-msg-h b { color: #111; font-weight: 600; }
.wa-msg-h small { flex: none; color: #8a93a0; font-size: 0.75rem; }
.wa-msg-to { margin: 2px 0 8px; color: #8a93a0; font-size: 0.75rem; overflow-wrap: anywhere; }
.wa-msg .wa-text { font-size: 0.875rem; }
/* the counts under the app icons, larger */
.wa-tile-c { margin-top: 4px; color: #e6e8ec; font-size: 0.95rem; font-weight: 500; }
@media (max-width: 40rem) { .wa-tile-c { font-size: 0.8125rem; } }
/* the app window's line under its name: a Preview badge, then how many of the records are shown */
.wa-bar-t .wa-prev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #4b5563; font-size: 0.8125rem; }
.wa-bar-t .wa-prev em { padding: 1px 8px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-size: 0.72rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
/* the disputed bill carries its email's deciding line under the row */
.fs-bills .fs-bnote { grid-column: 1 / -1; margin-top: 3px; color: #f0c27a; font-size: 0.74rem; font-style: italic; quotes: none; }

/* failure player, step 1 as compact record cards; each opens the full record in an app window */
.fs-recs { display: flex; flex-direction: column; gap: 7px; }
.fs-rc { position: relative; display: block; width: 100%; margin: 0; padding: 7px 10px 8px; border: 1px solid rgba(240, 180, 90, 0.32); border-radius: 9px; background: #1a1d24; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.fs-rc:hover { border-color: rgba(240, 180, 90, 0.65); background: #1f232c; }
.fs-rc:focus-visible { outline: 2px solid var(--fs-amber); outline-offset: 2px; }
.fs-rc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: var(--muted); font-size: 0.66rem; line-height: 1.2; }
.fs-rc-h > svg:first-child { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--fs-amber); stroke-width: 1.7; stroke-linejoin: round; }
.fs-rc-k { flex: none; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.fs-rc-tag { padding: 0 5px; border: 1px solid rgba(240, 180, 90, 0.55); border-radius: 4px; color: #dcae66; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; line-height: 1.45; text-transform: uppercase; white-space: nowrap; }
.fs-rc-h { padding-right: 18px; }
.fs-rc-go { position: absolute; top: 8px; right: 9px; width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.fs-rc:hover .fs-rc-go, .fs-rc:focus-visible .fs-rc-go { stroke: var(--fs-amber); }
.part .fs-rc-src { display: block; margin-top: 3px; color: var(--ink); font-size: 0.74rem; font-weight: 600; line-height: 1.3; }
.fs-rc-when { color: var(--muted); font-weight: 500; }
.part .fs-rc-s { display: block; margin-top: 8px; color: #d4d4d4; font-size: 0.78rem; line-height: 1.35; }
.fs-rc-s mark { padding: 0 1px; border-radius: 2px; background: rgba(240, 180, 90, 0.14); color: #f6dcae; box-shadow: inset 0 -1.5px 0 rgba(240, 180, 90, 0.75); }
.fs-sess .fs-rc { margin-top: 2px; }
/* a smaller person in step 2 */
.fs-body-fig { width: 56px; height: 71px; }
/* the app window: the world viewer's, sized to one record */
.fs-win { width: min(720px, 100%); height: auto; max-height: min(720px, 100%); }
.fs-win .wa-body { overflow: hidden; }
.fs-win .wa-bar-t { flex: 1; }
.fs-wbank .wa-accts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fs-wbank .wa-acct { padding: 12px 16px; }
.fs-wbank .wa-acct b { font-size: 1.25rem; }
.fs-wpane { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 26px; }
.fs-wpane:focus-visible, .fs-wbank:focus-visible { outline: 2px solid #2a5bd7; outline-offset: -2px; }
.fs-wsub { margin: -4px 0 12px; color: #8a93a0; font-size: 0.8125rem; }
.fs-win mark { padding: 0 2px; border-radius: 3px; background: #ffe7a6; color: inherit; box-shadow: inset 0 -2px 0 #e0a43a; }
.fs-win .wa-text { font-size: 0.95rem; }
.fs-wchat { display: flex; flex-direction: column; padding-bottom: 18px; }
.fs-wmsgs { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.fs-wday { align-self: center; margin: 10px 0 4px; color: #8a93a0; font-size: 0.75rem; }
.fs-wmsgs .wa-b em { display: block; margin-bottom: 2px; font-size: 0.6875rem; font-style: normal; font-weight: 600; opacity: 0.8; }
.fs-wmsgs .wa-b.out mark { background: rgba(255, 231, 166, 0.95); color: #1d2330; }
.fs-win .wa-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #c9ced6; color: #fff; font-weight: 700; }
.fs-wbank { padding: 20px 24px 24px; }
.fs-wbank .wa-acct { min-width: 0; flex: 1 1 180px; }
.fs-wlist { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid #e1e4e8; border-radius: 12px; background: #fff; }
.fs-wlist li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; border-top: 1px solid #eef0f3; font-size: 0.875rem; }
.fs-wlist li:first-child { border-top: 0; }
.fs-wlist li span { min-width: 0; }
.fs-wlist li i { margin-left: 8px; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-wlist li small { display: block; margin-top: 2px; color: #8a93a0; font-size: 0.75rem; }
.fs-wlist li b { flex: none; color: #6b7483; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.fs-wlist li.hl { background: #fffaf0; }
@media (max-width: 700px) {
  .fs-wov { padding: 0; }
  .fs-win { max-height: 100%; height: 100%; }
  .fs-wpane { padding: 16px; }
  .fs-wbank { padding: 14px; }
  .fs-wbank .wa-accts { grid-template-columns: minmax(0, 1fr); }
}
/* step 2: the name beside the person, on the same row */
.fs-me, .part .fs-me { flex-direction: row; align-items: center; gap: 10px; }
@container (max-width: 820px) { .fs-me { flex-direction: row; align-items: center; } }
/* step 2: the note's warning sign sits inline at the start of its first line, so the text wraps under it */
.part .fs-who1 .fs-stake { display: block; }
.fs-who1 .fs-stake svg { display: inline-block; width: 14px; height: 14px; margin: 0 5px 0 0; vertical-align: -2px; }
.fs-who1 .fs-stake span { display: inline; }
/* failure-teaser logos: a red ring for failed products (as the green ring marks the correct ones), no x badge */
.fs-logos .fx-logo.x::after { display: none; }
.fs-logos .fx-logo.x { border-radius: 9px; box-shadow: 0 0 0 1px #1d1515, 0 0 0 3px var(--bad); }
.fs-logos .fx-logo.x img { outline: none; filter: grayscale(0.6) brightness(0.8); }
/* record cards: kind and date on the first row (open sign at the far right), the sender on one line below, then the summary */
.fs-recs { gap: 10px; }
.fs-rc { padding: 10px 12px 11px; }
.fs-rc-h { flex-wrap: nowrap; padding-right: 0; }
.fs-rc-h .fs-rc-when { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 0.68rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fs-rc-go { position: static; flex: none; }
.fs-rc-from { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; }
.part .fs-rc-from .fs-rc-src { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-rc-from .fs-rc-tag { flex: none; }
.part .fs-rc-s { margin-top: 9px; line-height: 1.4; }
/* desktop: the leftover height goes into a few gaps (sizes from fails.js, capped), the rest stays at the bottom */
@container (min-width: 821px) {
  .fs-s2 .fs-recs { gap: var(--fs-cg, 10px); }
  .part .fs-s2 ol.fs-sess { gap: var(--fs-cg, 12px); }
  .fs-s1 .fs-me { margin-top: calc(6px + var(--fs-rg, 0px)); }
  .fs-s3 .fs-fork { gap: calc(10px + var(--fs-fg, 0px)); }
  .fs-s4 .fs-should { margin-top: calc(4px + var(--fs-ag, 0px)); }
}
/* the cards never spill out of their step: they shrink with it, the memory timeline indents less */
.fs-rc { box-sizing: border-box; min-width: 0; max-width: 100%; }
.part ol.fs-sess { padding-left: 10px; }
.part ol.fs-sess > li { min-width: 0; }
.part ol.fs-sess > li::before { left: -16px; }
.fs-rc-k { min-width: 0; overflow: hidden; text-overflow: clip; }

/* a spent jump button (the player already sits on its step) turns grey */
button.p-jump:disabled, button.p-jump:disabled:hover { cursor: default; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--muted, #8a8f9b); filter: none; }