/* Variant D2 of the online case: "1806". Black, one regular grotesque, mono labels, Didone for years.
   Third pass after Lev's notes: every section is a slide with one idea — the same centred head, one visual,
   one caption; details come on demand (hover, tabs, steps), not all at once. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..500&family=Geist+Mono:wght@400;500&family=Bodoni+Moda:opsz,wght@6..96,400&display=swap");

:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #f2f2f2;
  --dim: #6f6f6f;
  --text: #b5b5b5;
  --line: rgb(255 255 255 / 0.14);
  --orange: #ff4d17;
  --blue: #5e86ec;
  --font: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --font-date: "Bodoni Moda", "Bodoni 72", Didot, serif;
  --edge: clamp(14px, 1.6vw, 24px);
  --top: calc(var(--edge) + 72px);      /* the full-bleed reading slide starts its head here */
  /* spacing by relatedness: the closer two things belong, the smaller the step */
  --gap-1: 12px;                         /* section label → heading; caption → its note */
  --gap-2: 20px;                         /* heading → its caption or keywords */
  --gap-3: clamp(40px, 6vh, 64px);       /* head → visual → foot */
  --gap-4: clamp(96px, 11vh, 150px);     /* a slide's top and bottom: the space between slides */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-wrap: pretty; }   /* no word left alone on a line */
.slide li, .slide dd, .slide dt, .slide h3, .slide h4, .slide p, .slide span, .slide b, .slide figcaption, .stage li, .stage p, .stage span { text-wrap: balance; }   /* short multi-line text: lines of even length */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--orange); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.micro { font: 400 11px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; }
.dim { color: var(--dim); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 8px; vertical-align: 1px; }

/* ── frame */
.frame { position: fixed; inset: 0; z-index: 30; pointer-events: none; mix-blend-mode: difference; }
.frame > * { position: absolute; pointer-events: auto; }
.frame a:hover { color: var(--orange); }
.f-tl { top: var(--sh-top, var(--edge)); left: var(--sh-pad, var(--edge)); }   /* the name's place, the same on every page (site/shell/top.css) */
.f-tc { top: var(--edge); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.f-tr { top: var(--sh-top, var(--edge)); right: var(--sh-pad, var(--edge)); height: 16px; align-items: center; }
.f-bl { bottom: var(--edge); left: var(--sh-pad, var(--edge)); display: flex; align-items: center; gap: 8px; }
.f-br { bottom: var(--edge); right: var(--sh-pad, var(--edge)); font-variant-numeric: tabular-nums; }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: live 1.6s ease-in-out infinite; flex: none; }
@keyframes live { 50% { opacity: 0.25; } }
@media (max-width: 700px) {
  .f-tc { left: auto; right: var(--edge); transform: none; }
  .f-tr, .f-bl { display: none; }
}

/* ── slide: one idea per screen */
.slide { position: relative; min-height: 100vh; display: grid; grid-auto-rows: auto; align-content: center; justify-items: center; row-gap: var(--gap-3); padding: var(--gap-4) var(--edge); }
.head { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--gap-1); max-width: 980px; text-align: center; }
.head .cap, .head .keys { margin-top: calc(var(--gap-2) - var(--gap-1)); }
.head h1, .head h2 { margin: 0; font: 400 clamp(32px, 4vw, 72px)/1.02 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
.head .ln { display: block; }   /* a two-line heading breaks where the thought does */
.cap { margin: 0; max-width: 60ch; text-align: center; font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: balance; }
.cap .micro { color: var(--orange); margin-right: 6px; }
.body { position: relative; z-index: 1; width: 100%; display: grid; place-items: center; }
.foot { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--gap-1); text-align: center; }
.steps { display: flex; gap: 6px; }
.steps i { position: relative; width: 28px; height: 2px; background: var(--line); overflow: hidden; }
.steps i b { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }

/* ── 01 cover */
.cover { padding-block: calc(var(--edge) + 56px) calc(var(--edge) + 56px); }
#inspect { display: block; width: 100%; height: auto; max-height: calc(100vh - 340px); overflow: visible; }
#inspect .digit { font-family: var(--font-date); fill: var(--fg); }
#inspect .guide { stroke: var(--line); stroke-width: 1; }
#inspect .vguide { stroke: rgb(255 255 255 / 0.1); stroke-width: 1; stroke-dasharray: 3 6; }
#inspect .box { fill: none; stroke: rgb(255 255 255 / 0.5); stroke-width: 1; }
#inspect .handle { fill: var(--bg); stroke: var(--fg); stroke-width: 1; }
#inspect .claim .k { font: 400 13px var(--mono); letter-spacing: 0.03em; text-transform: uppercase; fill: var(--dim); }
#inspect .claim .k.doc { fill: var(--blue); }
#inspect .claim .t { font: 400 22px var(--font); fill: var(--fg); letter-spacing: -0.01em; }
#inspect .claim .lead { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1; }
#inspect .draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 1.4s cubic-bezier(.6, 0, .2, 1); }
#inspect .fade { opacity: 0; transition: opacity 0.6s ease; }
.spec.on #inspect .draw { stroke-dashoffset: 0; }
.spec.on #inspect .fade { opacity: 1; }
.keys { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; color: var(--text); }
.keys i { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
@media (max-width: 860px) { #inspect .claim { display: none; } .slide:not(.cover) { min-height: 0; padding-block: 104px 64px; } }

/* ── shared pieces of the story slides */
.list { width: 100%; max-width: 820px; margin: 0; padding: 0; list-style: none; text-align: left; }
.list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list .g { font: 400 15px/1 var(--mono); color: var(--dim); }
.list b { display: block; font: 400 clamp(19px, 1.7vw, 24px)/1.25 var(--font); letter-spacing: -0.01em; }
.list b + span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--text); }
.list .g.doc { color: var(--blue); } .list .g.idx { color: #a8bdf6; } .list .g.fam { color: var(--fg); } .list .g.hyp { color: var(--dim); } .list .g.gap { color: var(--orange); }
.list.status .g { font-size: 22px; }
.list.path li { grid-template-columns: 36px 120px minmax(0, 1fr); }
.list.path .g { font-size: 20px; }
.list .y { font: 400 22px/1 var(--font-date); color: var(--fg); }
#gens, #routemap, .fan { display: block; width: 100%; max-width: 1100px; height: auto; overflow: visible; }
#routemap, .fan { width: auto; max-width: 100%; height: clamp(300px, calc(100vh - 480px), 600px); }
/* the starting point: the fan is the slide's background, faint, standing on the bottom edge; the heading sits over it */
.context { overflow: hidden; }
.context .body { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
#fan-before { position: absolute; left: 50%; bottom: 0; width: auto; max-width: none; height: min(86vh, 140vw * 0.556); transform: translateX(-50%); opacity: 0.42; }
.context .head::before { content: ""; position: absolute; inset: -48px -96px; z-index: -1; background: radial-gradient(closest-side, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0)); }
@media (max-width: 860px) { .slide.context { min-height: 700px; } #fan-before { height: 111vw; } }   /* on a phone the slide keeps room for the fan, which is wider than the screen */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); width: 100%; max-width: 1000px; text-align: center; }
.trio b { display: block; font: 300 clamp(56px, 6.5vw, 112px)/0.9 var(--font); letter-spacing: -0.05em; }
.trio span { display: block; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--text); }
.under { width: 100%; max-width: 820px; margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); text-align: left; }
.evidence .body { display: block; max-width: 820px; }
/* (04) the goals, each with the rules that follow from it */
.goals { width: 100%; max-width: 1040px; margin: 0; padding: 0; list-style: none; text-align: left; }
.goals > li { display: grid; grid-template-columns: 48px minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.goals > li:last-child { border-bottom: 1px solid var(--line); }
.goals .n { color: var(--orange); }
.goals b { font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--font); letter-spacing: -0.01em; }
.goals ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.goals ul li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; color: var(--text); }
.goals ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--orange); }
/* (19) takeaways: a number, the lesson, the case behind it */
.lessons { width: 100%; max-width: 1100px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); text-align: left; }
.lessons li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 6px; padding: 24px 0 26px; border-top: 1px solid var(--line); }
.lessons b { grid-column: 1; grid-row: 1; font: 400 clamp(32px, 3vw, 46px)/0.95 var(--font-date); white-space: nowrap; }
.lessons .micro { grid-column: 1; grid-row: 2; }
.lessons h3 { grid-column: 2; grid-row: 1; margin: 0; font: 400 clamp(19px, 1.6vw, 23px)/1.25 var(--font); letter-spacing: -0.01em; }
.lessons p { grid-column: 2; grid-row: 2; margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
/* (12) dead ends: the search log as one bar, and where it turns into requests */
.log { width: 100%; max-width: 1000px; text-align: left; }
.log-head { display: flex; justify-content: space-between; margin-bottom: 14px; }
.log-bar { display: flex; gap: 3px; }
.log-bar .seg { flex: var(--n) 1 0; min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.log-bar .seg i { display: block; height: 14px; border-radius: 3px; background: rgb(255 255 255 / 0.25); }
.log-bar .found i { background: var(--blue); }
.log-bar .part i { background: rgb(94 134 236 / 0.45); }
.log-bar .none i { background: rgb(255 255 255 / 0.3); box-shadow: 0 0 0 1px var(--orange); }
.log-bar .block i { background: rgb(255 255 255 / 0.12); }
.log-bar .other i { background: rgb(255 255 255 / 0.06); }
.log-bar .lab { display: grid; gap: 4px; }
.log-bar b { font: 400 clamp(26px, 2.6vw, 40px)/1 var(--font-date); }
.log-bar em { font: 400 11px/1.3 var(--mono); font-style: normal; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dim); }
.log-bar .none em { color: var(--orange); }
.log-next { position: relative; margin: 30px 0 0 calc(var(--from) / var(--total) * 100%); padding: 14px 18px 16px; border: 1px solid rgb(255 77 23 / 0.5); border-radius: 10px; }
.log-next::before { content: ""; position: absolute; left: 24px; top: -31px; height: 30px; border-left: 1px dashed var(--orange); }
.log-next .micro { color: var(--orange); }
.log-next p { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--text); }
.log-next p b { display: block; margin-bottom: 4px; font-weight: 400; font-size: 18px; color: var(--fg); }
/* (17) another family: two families into one system, two separate case files out */
.reuse { position: relative; width: 100%; max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; text-align: left; }
.rwires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rwires path { fill: none; stroke: rgb(255 255 255 / 0.5); stroke-width: 1.5; }
.rwires path.them { stroke: var(--orange); stroke-dasharray: 4 5; }
.rcol { display: grid; gap: 16px; }
.rbox { position: relative; z-index: 1; display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.rbox b { font: 400 clamp(17px, 1.4vw, 20px)/1.25 var(--font); }
.rbox small { font: 400 11px/1.3 var(--mono); text-transform: uppercase; color: var(--orange); }
.rbox.them { border-color: rgb(255 77 23 / 0.45); }
.rcore { position: relative; z-index: 1; padding: 22px 24px; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 12px; background: var(--bg); }
.rcore ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.rcore li { font-size: clamp(16px, 1.3vw, 19px); }
.rcore li { position: relative; padding-left: 19px; }
.rcore li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; background: var(--blue); }
/* (19) what the agents did, next to what I decided */
.split { width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
.split .side { padding: 0 clamp(20px, 3vw, 48px); }
.split .side + .side { border-left: 1px solid var(--line); }
.split .side > .micro { display: block; margin-bottom: 14px; }
.split .me > .micro { color: var(--orange); }
.split ul { margin: 0; padding: 0; list-style: none; }
.split li { padding: 14px 0; border-top: 1px solid var(--line); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.3; }
.split .agents li { color: var(--text); }
.split .me li { position: relative; padding-left: 18px; }
.split .me li::before { content: ""; position: absolute; left: 0; top: calc(14px + 0.5em); width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.request { width: 100%; max-width: 640px; margin: 0; border: 1px solid rgb(255 77 23 / 0.5); text-align: left; }
.request .rq-head { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--orange); }
.request div:not(.rq-head) { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.request div:last-child { border-bottom: 0; }
.request .next-step dt, .request .next-step dd { color: var(--orange); }
.request dd { margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; }
.next { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); text-align: left; }
.next div { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 2px solid var(--fg); }
.next b { font: 400 clamp(19px, 1.7vw, 24px)/1.2 var(--font); letter-spacing: -0.01em; }
.next div > span:last-child { font-size: 15px; line-height: 1.45; color: var(--text); }
.pin { position: relative; height: 220vh; }
.pin .stage { position: sticky; top: 0; height: 100vh; }
#fan .cell { transition: opacity 0.35s; }
#fan-cap { height: 3em; }
.links { display: flex; gap: 24px; margin: 0; font: 400 18px/1 var(--font); }
.links a { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.links a:hover { color: var(--orange); border-color: var(--orange); }
.beyond .head { max-width: 860px; }
@media (max-width: 760px) {
  .split, .reuse, .lessons { grid-template-columns: 1fr; }
  .goals > li { grid-template-columns: 32px minmax(0, 1fr); row-gap: 10px; }
  .goals ul { grid-column: 2; }
  .lessons li { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .reuse { gap: 16px; }
  .rwires { display: none; }
  .log-bar { flex-direction: column; gap: 14px; }
  .log-bar .seg { flex-direction: column; gap: 6px; }
  .log-bar .seg i { width: calc(var(--n) / 249 * 100%); }
  .log-bar .other { display: none; }
  .log-bar .lab { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
  .log-next { margin-left: 0; }
  .log-next::before { display: none; }
  .split .side { padding: 0; }
  .split .side + .side { border-left: 0; margin-top: 28px; }
  .request div:not(.rq-head) { grid-template-columns: 1fr; gap: 4px; }
  .list.path li { grid-template-columns: 28px minmax(0, 1fr); }
  .list.path .y { grid-column: 2; }
  .list.path li > span:last-child { grid-column: 2; }
  #routemap, .fan { width: 100%; height: auto; }
}

/* ── 02 the system: pinned, built up in four steps */
.sys { position: relative; height: 260vh; }
.sys .stage { position: sticky; top: 0; height: 100vh; min-height: 0; }
.map { position: relative; width: 100%; max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke: rgb(255 255 255 / 0.26); stroke-width: 1; transition: opacity 0.5s, stroke 0.2s; }
.wires path.hum { stroke: rgb(255 77 23 / 0.6); }
.wires path.lit { stroke: var(--fg); }
.wires .off { opacity: 0; }
.wires circle { fill: var(--fg); transition: opacity 0.5s; }
.wires circle.hum { fill: var(--orange); }
.col, .core { position: relative; display: grid; gap: 12px; align-content: center; }
.core { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 12px; }
.node { position: relative; z-index: 1; display: grid; gap: 4px; padding: 10px 12px 12px; background: var(--bg); border: 1px solid rgb(255 255 255 / 0.3); transition: opacity 0.5s, transform 0.5s, border-color 0.2s; min-width: 0; cursor: default; }
.node .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.node .k { color: var(--dim); }
.node .n { font: 300 22px/1 var(--font); letter-spacing: -0.03em; white-space: nowrap; }
.node b { font: 400 16px/1.2 var(--font); letter-spacing: -0.01em; }
.node.me { border-color: rgb(255 77 23 / 0.75); } .node.me .k { color: var(--orange); }
.node.main { border-color: rgb(255 255 255 / 0.6); padding: 14px 16px 16px; } .node.main b { font-size: 22px; } .node.main .n { font-size: 32px; }
.node.span2 { grid-column: span 2; } .node.span3 { grid-column: span 3; }
.node:hover { border-color: var(--fg); }
.node.off { opacity: 0; transform: translateY(10px); pointer-events: none; }
#sys-cap { height: 4.5em; }   /* room for three lines, so the map does not jump when the caption changes */
.map-m { display: none; }
@media (max-width: 960px) {
  .sys { height: auto; }
  .sys .stage { position: relative; height: auto; }
  .map, .sys .foot { display: none; }
  .map-m { display: grid; gap: 40px; width: 100%; }
  .mg { display: grid; gap: 10px; }
  .mg .cap { text-align: left; margin-bottom: 4px; }
  .mg .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mg .node.wide { grid-column: 1 / -1; }
}

/* ── 03 reading */
.read { overflow: hidden; cursor: none; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; padding-block: var(--top) calc(var(--edge) + 48px); }
.read canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.legend { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; color: var(--dim); }
.legend > i, .legend .hint i { width: 4px; height: 4px; border-radius: 50%; background: var(--dim); display: inline-block; }
.legend .tr { color: var(--fg); } .legend .ex { color: var(--blue); } .legend .key { color: var(--orange); }
.legend .hint { display: inline-flex; align-items: center; gap: 12px; }
.hint .touch { display: none; }
@media (hover: none) { .hint .pointer { display: none; } .hint .touch { display: inline; } .read { cursor: auto; } }
@media (max-width: 860px) {
  .read { min-height: 0; grid-template-rows: auto auto auto; }
  .read canvas { position: relative; inset: auto; height: 62vh; min-height: 400px; grid-row: 2; }
  .read .body { display: none; }
  .read .legend { grid-row: 3; }
}

/* ── 04 human in the loop */
.term, .skill { width: 100%; max-width: 820px; border: 1px solid var(--line); font: 400 15px/1.5 var(--mono); min-width: 0; }
.term .bar, .skill .bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--dim); }
.term .bar button { background: none; border: 0; color: var(--fg); font: inherit; cursor: pointer; padding: 0; }
.term .bar button:hover { color: var(--orange); }
.term ol { list-style: none; margin: 0; padding: 22px 18px 26px; display: grid; gap: 16px; min-height: 220px; align-content: start; }
.term li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.term li .w { color: var(--dim); }
.term li.me .w, .term li.me .x { color: var(--orange); }
.term li.skill .x { color: var(--blue); }
.term li.gapline { grid-template-columns: 1fr; padding-left: 76px; color: var(--dim); }
.skill { display: grid; grid-template-rows: auto 1fr auto; transition: border-color 0.6s; }
.skill.on { border-color: rgb(94 134 236 / 0.6); }
.skill .ver s { color: var(--dim); } .skill .ver b { font-weight: 400; color: var(--blue); }
.skill ol { list-style: none; margin: 0; padding: 26px 22px; display: grid; gap: 14px; align-content: start; font-size: 16px; }
.skill li { opacity: 0; transition: opacity 0.5s, background 0.5s, transform 0.5s; padding: 4px 8px; margin: 0 -8px; }
.skill li.add { color: var(--blue); transform: translateX(-6px); }
.skill.on li { opacity: 1; transform: none; }
.skill.on li.add { background: rgb(94 134 236 / 0.1); }
.skill li.ctx { color: var(--dim); opacity: 1; }
.skill .used { margin: 0; padding: 0 22px 18px; color: var(--dim); }
.term .cur { display: inline-block; width: 8px; height: 1.1em; background: var(--fg); vertical-align: -2px; animation: live 1s steps(1) infinite; }
@media (max-width: 640px) { .term, .skill { font-size: 13px; } .term li { grid-template-columns: 1fr; gap: 2px; } .term li.gapline { padding-left: 0; } }

/* ── 05 model test */
.chart { width: 100%; max-width: 1000px; }
.tabs { display: flex; justify-content: center; gap: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; padding: 0 0 12px; color: var(--dim); font: 400 11px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--orange); }
.bars { position: relative; display: grid; gap: 2px; padding: 36px 0 4px; }
.brow { display: grid; grid-template-columns: 200px minmax(0, 1fr) 96px; gap: 16px; align-items: center; min-height: 38px; }
.brow .lab { font-size: 15px; line-height: 1.2; }
.brow .lab span { color: var(--dim); }
.brow .trk { position: relative; height: 10px; }
.brow .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 0 2px 2px 0; background: rgb(255 255 255 / 0.4); transition: left 0.5s cubic-bezier(.6, 0, .2, 1), width 0.5s cubic-bezier(.6, 0, .2, 1); }
.brow .ext { position: absolute; top: 0; bottom: 0; background: rgb(255 255 255 / 0.18); transition: left 0.5s cubic-bezier(.6, 0, .2, 1), width 0.5s cubic-bezier(.6, 0, .2, 1); }
.brow .tag { font: 400 10px/1 var(--mono); text-transform: uppercase; font-style: normal; margin-left: 8px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 999px; vertical-align: 2px; }
.brow.sel .tag { color: var(--blue); } .brow.fail .tag { color: var(--orange); }
.brow:not(.sel):not(.fail) .lab { color: var(--text); }
.brow.sel .fill { background: var(--blue); }
.brow.fail .fill { background: var(--orange); }
.brow .val { font: 400 15px/1 var(--font); font-variant-numeric: tabular-nums; text-align: right; }
.brow .val.na { color: var(--dim); font: 400 11px/1.3 var(--mono); text-transform: uppercase; }
.pass { position: absolute; top: 10px; bottom: 0; width: 0; border-left: 1px dashed var(--fg); transition: left 0.5s, opacity 0.3s; pointer-events: none; }
.pass span { position: absolute; top: 0; right: 8px; white-space: nowrap; font: 400 11px/1.3 var(--mono); text-transform: uppercase; }
.plot { padding: 24px 0 0; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot .q { fill: rgb(255 255 255 / 0.025); }
.plot .q.good { fill: rgb(94 134 236 / 0.12); }
.plot .ql { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: 0.02em; fill: var(--dim); }
.plot .ql.good { fill: var(--blue); }
.plot .split { stroke: rgb(255 255 255 / 0.22); stroke-dasharray: 3 5; }
.plot .axis { stroke: rgb(255 255 255 / 0.45); }
.plot .ax { font: 400 12px var(--mono); fill: var(--dim); }
.plot .at { font: 400 12px var(--mono); text-transform: uppercase; fill: var(--fg); }
.plot .pt { fill: rgb(255 255 255 / 0.6); stroke: var(--bg); stroke-width: 2; }
.plot .pt.sel { fill: var(--blue); } .plot .pt.fail { fill: var(--orange); }
.plot .halo { fill: none; stroke: var(--blue); stroke-width: 1; }
.plot .pt.gpt { fill: var(--bg); stroke: rgb(255 255 255 / 0.75); stroke-width: 1.5; }
.plot .gpt .pv { fill: var(--orange); }
.plot .rng { stroke: rgb(255 255 255 / 0.35); stroke-width: 6; stroke-linecap: round; }
.plot .pn { font: 400 15px var(--font); fill: var(--fg); }
.plot .pv { font: 400 12px var(--mono); fill: var(--dim); }
.plot .sel .pv { fill: var(--blue); }
.bkey { display: flex; justify-content: center; gap: 20px; margin: 14px 0 0; color: var(--dim); }
.bkey span { display: inline-flex; align-items: center; gap: 8px; }
.bkey i { width: 14px; height: 6px; } .bkey .b { background: var(--blue); } .bkey .o { background: var(--orange); }
@media (max-width: 760px) { .brow { grid-template-columns: 1fr 72px; gap: 6px 12px; } .brow .lab { grid-column: 1 / -1; } .tabs { justify-content: flex-start; gap: 16px; } }

/* ── 06 scope fly-through */
.fly { position: relative; height: 280vh; }
.fly .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 900px; perspective-origin: 50% 50%; }
.space { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.ev { position: absolute; left: 0; top: 0; width: 220px; padding: 14px 16px 14px; background: #0c0c0c; border: 1px solid var(--line); display: grid; gap: 16px; will-change: transform, opacity; backface-visibility: hidden; }
.ev .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ev .k { font: 400 11px/1.2 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--dim); }
.ev .k.doc { color: var(--blue); } .ev .k.idx { color: #a8bdf6; } .ev .k.fam, .ev .k.agent { color: var(--fg); } .ev .k.gap { color: var(--orange); }
.ev .ic { width: 26px; height: 26px; color: var(--fg); flex: none; }
.ev .ic svg { width: 100%; height: 100%; display: block; }
.ev b { display: block; font: 400 18px/1.2 var(--font); letter-spacing: -0.01em; }
.ev .y { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ev .y em { font: 400 32px/1 var(--font-date); font-style: normal; }
.ev .y span { font: 400 10px/1.3 var(--mono); color: var(--dim); text-transform: uppercase; text-align: right; max-width: 14ch; }   /* 14ch (was 12): with the glued last pair no caption ends on one word (08.11.2026) */
.ev.orange { background: var(--orange); border-color: var(--orange); color: #000; }
.ev.blue { background: var(--blue); border-color: var(--blue); color: #000; }
.ev.white { background: var(--fg); border-color: var(--fg); color: #000; }
.ev.orange .k, .ev.blue .k, .ev.white .k, .ev.orange .y span, .ev.blue .y span, .ev.white .y span, .ev.orange .ic, .ev.blue .ic, .ev.white .ic { color: #000; }
.ev.photo { padding: 0; width: 240px; height: 240px; background: transparent center / contain no-repeat; border: 0; }
.phrase { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; pointer-events: none; z-index: 2; }
.nums { margin: 0; display: grid; }
.num { grid-area: 1 / 1; display: grid; justify-items: center; gap: 12px; opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity 0.5s, filter 0.5s, transform 0.5s; }
.num.on { opacity: 1; filter: none; transform: none; }
.num b { font: 300 clamp(112px, 15vw, 280px)/0.82 var(--font); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.num span { max-width: 26ch; font: 400 clamp(18px, 1.7vw, 26px)/1.2 var(--font); letter-spacing: -0.01em; color: var(--fg); }
.fly .steps { position: absolute; left: 50%; bottom: calc(var(--edge) + 48px); transform: translateX(-50%); z-index: 2; }
@media (max-width: 640px) { .ev { width: 160px; gap: 10px; padding: 12px; } .ev b { font-size: 15px; } .ev .y em { font-size: 24px; } .ev .ic { width: 20px; height: 20px; } .ev.photo { width: 160px; height: 160px; } }
@media (prefers-reduced-motion: reduce) { .num { transition: none; } .node, .wires path, .wires circle { transition: none; } }

/* still frames: ?shot=<section id> */
.shot .fly, .shot .sys { height: 100vh; }
.shot .frame { position: absolute; }

/* ── portfolio shell (04.11.2026): the six stages in the top-right corner; the frame steps aside at the end, where the next case and the footer begin */
.f-stages { display: flex; gap: 14px; }
@media (max-width: 700px) { .f-stages { display: none; } }   /* the top-right corner is hidden on phones; display:flex above must not bring it back */
.f-stages a { color: var(--dim); transition: color .3s; }
.f-stages a.on { color: var(--fg); }
.frame { transition: opacity .3s; }
html.sh-end .frame { opacity: 0; pointer-events: none; }
html.sh-end .frame > * { pointer-events: none; }
html.shot .sh-next, html.shot .sh-foot { display: none; }

/* ── (04) Discover · Sources: the matrix of sources and kinds of records (04.11.2026; from proto-sources-matrix.html) */
.ph, .slide .ph { white-space: nowrap; text-wrap: nowrap; }   /* a phrase never breaks inside; beats d2.css `.slide span { text-wrap: balance }` */
.src-cap { max-width: 72ch; }
.src-cap .ln { display: block; }
.foot.src-cap { display: block; }   /* d2's .foot is a grid with a gap; here the two lines are one paragraph */   /* a phrase never breaks inside; lines break only between phrases */
.mx { width: 100%; max-width: 1180px; text-align: left; display: flex; flex-direction: column; }
.mx-grid { order: 1; } .mx-list { order: 1; } .mx-legend { order: 2; } .mx-detail { order: 3; }   /* the legend sits right under the marks it explains */
.mx-grid { display: grid; grid-template-columns: minmax(250px, 1.7fr) repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.mx-grid > * { border-bottom: 1px solid var(--line); }
.mx-kind { padding: 14px 8px 12px; color: var(--text); text-align: center; cursor: default; transition: color .2s, background .2s; }
.mx-corner { padding: 14px 0 12px; color: var(--dim); }
.mx-src { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; padding: 14px 12px 14px 0; cursor: default; }
.mx-src .ic { width: 24px; height: 24px; color: var(--fg); }
.mx-src .ic svg { width: 100%; height: 100%; display: block; }
.mx-src b { font: 400 16px/1.25 var(--font); }
.mx-src .micro { display: block; margin-top: 3px; color: var(--dim); }
.mx-cell { display: grid; place-items: center; transition: background .2s; }
.smk { width: 18px; height: 18px; }
.smk.f { background: var(--blue); }
.smk.p { border: 1px solid var(--blue); background: repeating-linear-gradient(135deg, var(--blue) 0 1.5px, transparent 1.5px 4px); }
.smk.s { border: 1px solid rgb(255 255 255 / .45); }
.smk.n { width: 3px; height: 3px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.mx-grid .hl { background: rgb(255 255 255 / .06); }
.mx-kind.hl { color: var(--fg); }
.mx-detail { min-height: 112px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(250px, 1.7fr) 3fr 3fr; gap: 24px; }
.mx-detail h3 { margin: 0; font: 400 19px/1.25 var(--font); }
.mx-detail p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.mx-src b, .mx-kind, .mx-detail h3 { text-wrap: balance; }
.mx-detail .micro { display: block; margin-bottom: 6px; }
.mx-detail .g { color: var(--blue); } .mx-detail .s { color: var(--orange); }
.mx-legend { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 22px; margin: 18px 0 0; color: var(--text); }   /* starts at the matrix's left edge, with the rows and the hairlines */
.mx-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mx-legend .smk { width: 12px; height: 12px; }
/* phone: one block per source, its kinds as chips */
.mx-list { display: none; }
@media (max-width: 860px) {
  .mx-grid, .mx-detail { display: none; }
  .mx-list { display: grid; border-top: 1px solid var(--line); }
  .mx-item { position: relative; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; cursor: pointer; }
  .mx-item::after { content: '+'; position: absolute; top: 14px; right: 2px; font: 300 22px/1 var(--font); color: var(--dim); transition: transform .25s; }
  .mx-item.open::after { transform: rotate(45deg); color: var(--fg); }
  .mx-legend { margin-top: 24px; }
  .mx-item .mx-src { padding: 0; }
  .mx-chips { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-left: 38px; }
  .mx-chips span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
  .mx-chips .smk { width: 11px; height: 11px; }
  .mx-item .more { padding-left: 38px; display: none; gap: 10px; }
  .mx-item.open .more { display: grid; }
  .mx-item .more p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
  .mx-item .more .micro { display: block; margin-bottom: 4px; }
  .mx-item .g { color: var(--blue); } .mx-item .s { color: var(--orange); }
}
@media (max-width: 360px) { .sources .head h2 { font-size: 29px; } }   /* "I mapped the sources." keeps the side padding on the narrowest phones */

/* ── frame alignment (04.11.2026): the status text starts on the same line as "Lev Gorelik"; the live dot goes after it */
.f-bl { flex-direction: row-reverse; justify-content: flex-end; }
#inspect .claim .person { fill: var(--bg); stroke: var(--fg); stroke-width: 1; }   /* a person at the end of a branch (cover ?cv=roots) */
.cover .head { max-width: 1320px; }   /* the cover title stays on one line on wide screens */
.cover .spec { margin-bottom: 24px; }   /* room for the lower branches above the title */

/* ── the opening (06.11.2026): the result on the cover, then a question to the reader over the fan, three steps on scroll */
  .cover .result { margin: calc(var(--gap-2) - var(--gap-1)) 0 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; color: var(--fg); text-wrap: balance; }
  .hook { height: 320vh; }
  .hook .stage { overflow: hidden; }
  .hook .body { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
  .hook .fan { position: absolute; left: 50%; bottom: 0; width: auto; max-width: none; height: min(86vh, 140vw * 0.556); transform: translateX(-50%); transition: opacity 0.6s; }
  #hook-before { opacity: 0.45; }
  #hook-after { opacity: 0; }
  .hook.s2 #hook-before { opacity: 0; }
  .hook.s2 #hook-after { opacity: 0.6; }
  .hook .fan .legend { display: none; }
  .hook .head::before { content: ""; position: absolute; inset: -48px -96px; z-index: -1; background: radial-gradient(closest-side, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0)); }
  .hook #h-hook, .hook #hook-cap { transition: opacity 0.25s; }
  .hook.swap #h-hook, .hook.swap #hook-cap { opacity: 0; }
  .hook .em { color: var(--orange); }
  .hook .foot { position: absolute; left: 0; right: 0; bottom: var(--gap-3); z-index: 2; }
  .known { transition: opacity 0.5s; }
  .ring4 path { transition: stroke 0.4s, stroke-width 0.4s; }
  .hook.s0 .ring4 path { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: none; }
  @media (max-width: 860px) { .hook .fan { height: 111vw; } }