Add the sparse-feature window browser

Twenty-one precomputed 8,191 bp windows across four annotated genomes, read out
base by base from the report's sparse autoencoder. Every base takes the colour of
the feature that fires hardest on it; the annotation rows are a separate register
and never an input to a number on the page.

Each of the eight windows where a feature marks a splice site the annotation does
not carry states a usage verdict from registers independent of that annotation:
AtRTD3's long-read transcripts, the 2026 TAIR12 reannotation, and PastDB's usage
measurements over 202 RNA-seq samples. Used, untestable and untested are three
different claims and the page keeps them apart. chr1:21,735,155, which no
transcript model carries, is an alternative 3' splice site PastDB measures at up
to 7.5%; chr5:5,427,495 sits in a gene with a median expression of 0.00 cRPKM and
cannot be tested either way.

Interaction help and the lane-selection method sit behind the (?) beside the lane
toggle. Each window's case — kind, headline, reason and usage verdict — is one
island inside the figure.

README.md

@@ -65,6 +65,18 @@ Static landing page for the Botanic1 models (Living Models), linking to the mode
   grid on mobile; `assets/use-case.css` follows the site's light and dark palettes.
 - `corpus.html`: the 320-species pre-training corpus as a treemap, with the genome
   length weighting and deduplication passages.
+- `sae-features.html`: the sparse-feature window browser. Twenty 8,191 bp windows,
+  five in each of the four genomes whose annotations the features were validated
+  against (*A. thaliana*, *O. sativa*, *Z. mays*, *S. lycopersicum*) and one for each
+  of the five positions the sampler anchored on, plus the *AT1G65170* locus the
+  report's annotation-correction result is drawn from. Every base carries the colour
+  of the feature that fires hardest on it, over the shown lanes or over the whole
+  8,192-feature dictionary. `assets/sae-browser.js` draws the tracks and handles
+  hover, pin, drag-pan, zoom and keyboard stepping; `assets/sae-tables.js` renders
+  the named-feature table, the reproduction check and the annotation sources;
+  `assets/sae.css` carries the ten-hue feature palette and the paler annotation
+  register. Data is `data/sae/index.json` plus one file per window, fetched on
+  demand.
 
 ## Identity
 
@@ -100,6 +112,19 @@ refer to the full locus, including when the view is zoomed. The file also contai
 annotation URL, study reference, and source scoring-file SHA-256. Gene annotations
 are displayed for biological context and are not inputs to the model score.
 
+`data/sae/` holds the precomputed feature read-out. Activations come from the sparse
+autoencoder of the report's interpretability section (`full_650m_L035_x8_k64` —
+Botanic1-M, layer 35, x8 expansion, k = 64) applied at the model's native 8,191 bp
+context, which is the context the report's published activations were produced at:
+re-encoding the *AT1G65170* window reproduces the figure's track at Pearson r
+0.999994, giving 14.80 against a published 14.79 at the donor TAIR12 moved to, and
+0.00 at the donor Araport11 annotates. Each feature's non-zero runs are stored as
+255 levels of that feature's own peak in that window; the peak itself is exact and
+zero stays exactly zero. Per-base annotations and gene extents come from the
+interpretability corpus's own label tracks; each window records the annotation
+release and file digest it was built from, and `index.json` carries the annotation
+sources for every species.
+
 Figure PNGs under `assets/figures/` are the report's committed renders.
 `data_pipeline.svg` is a `pdftocairo -svg` conversion of the report's data-pipeline PDF.
 `agentic_orchestration.svg` retains Figure S1's layout, nodes, queues, connections and

assets/sae-browser.js

@@ -0,0 +1,1959 @@
+/* Sparse-feature window browser.
+
+   Activations are stride-1 measurements read out of one SAE over one window.
+   Three rules shape the drawing:
+     - zero means the feature did not fire, so an unfired base is left blank and
+       the lane is labelled silent rather than given a short bar;
+     - several bases under one pixel column collapse to their MAXIMUM, never to a
+       mean, and never by interpolating between measured bases;
+     - annotations live inside a recessed panel, in pale washes and mid-tone
+       ticks, so nothing in the annotation register can be read as a measurement.
+
+   The dashed anchor outline marks where the window sampler looked. It is an
+   outline, never a fill, and it is labelled as its own thing so it cannot pass
+   for an annotated site. Every colour is a CSS custom property; the only value
+   computed in JS is the ink of a base letter, which is chosen from the luminance
+   of the cell it sits on. */
+(async function () {
+  const host = document.getElementById('feat-plot');
+  if (!host) return;
+  const readout = document.getElementById('feat-readout');
+  const region = document.getElementById('feat-region');
+  const picker = document.getElementById('win-picker');
+  const list = document.getElementById('feat-list');
+  const title = document.getElementById('feat-title');
+  const sub = document.getElementById('feat-sub');
+  const caseEl = document.getElementById('feat-case');
+  const modeBtns = Array.from(document.querySelectorAll('#feat-mode button'));
+  const tools = ['feat-in', 'feat-out', 'feat-full'].map(id => document.getElementById(id));
+  tools.forEach(b => { if (b) b.disabled = true; });
+  wireHelp();   /* explains the browser, so it works before a window is chosen */
+
+  /* Window files carry free-form fields whose shapes differ between kinds, so a
+     value is only treated as a list when it actually is one. */
+  const asList = v => Array.isArray(v) ? v.filter(Boolean) : [];
+  const esc = value => String(value ?? '').replace(/[&<>"']/g, ch =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]));
+  const fmt = n => Math.round(n).toLocaleString('en-US');
+  const num = (n, d = 2) => n.toFixed(d);
+  const path = (d, cls, extra = '') => `<path class="${cls}" d="${d}"${extra}/>`;
+  const text = (px, py, s, cls = '', anchor = 'start', extra = '') =>
+    `<text x="${(+px).toFixed(2)}" y="${(+py).toFixed(2)}" class="${cls}" text-anchor="${anchor}"${extra}>${esc(s)}</text>`;
+  const rect = (x, y, w, h, fill, cls = '', extra = '') =>
+    `<rect x="${x.toFixed(2)}" y="${(+y).toFixed(2)}" width="${Math.max(0.4, w).toFixed(2)}" height="${
+      (+h).toFixed(2)}"${fill ? ` fill="${fill}"` : ''}${cls ? ` class="${cls}"` : ''}${extra}/>`;
+
+  const PALETTE = 12;      // one hue per lane, so no two lanes share a colour
+  const GLOBAL_KEYS = 10;  // how many of the 8,192 the whole-dictionary strip names
+  const featColour = slot => slot < 0 ? 'var(--feat-none)' : `var(--feat-${slot % PALETTE + 1})`;
+
+  /* ---- vocabulary -------------------------------------------------------- */
+  const ANCHOR_ORDER = ['tss', 'tis', 'donor', 'acceptor', 'background'];
+  const ANCHOR_COL = {
+    tss: 'TSS', tis: 'Start codon', donor: 'Donor', acceptor: 'Acceptor', background: 'Background'
+  };
+  const ANCHOR_TITLE = {
+    tss: 'Transcription-start', tis: 'Translation-start', donor: 'Splice-donor',
+    acceptor: 'Splice-acceptor', background: 'Unanchored background'
+  };
+  const SITE_LABEL = { tss: 'TSS', tis: 'start codon', donor: 'donor', acceptor: 'acceptor', stop: 'stop', tts: 'TTS' };
+  const SITE_SHORT = { tss: 'TSS', tis: 'start', donor: 'donor', acceptor: 'accept', stop: 'stop', tts: 'TTS' };
+  const REGION_LABEL = {
+    intergenic: 'intergenic', cds: 'CDS', utr5: '5′ UTR', utr3: '3′ UTR',
+    intron: 'intron', ncrna: 'non-coding'
+  };
+  const KIND_GROUP = {
+    site: 'Point sites', range: 'Regions', motif: 'Sequence motifs', pattern: 'Repeat patterns'
+  };
+  const KIND_ORDER = ['site', 'range', 'motif', 'pattern'];
+  /* Why a window earns its place. `agreement` is the quiet case; the other three
+     are the interesting ones and share one accent, but they keep separate names
+     because an alternative isoform, an unannotated site and a moved annotation
+     are three different claims. An unrecognised kind is treated as flagged
+     rather than quietly filed under agreement. */
+  const SEL_KIND = {
+    agreement: { tag: 'Agreement', mark: 'agreement', flag: false },
+    alternative: { tag: 'Alternative isoform', mark: 'alternative site', flag: true },
+    unannotated: { tag: 'Unannotated site', mark: 'unannotated site', flag: true },
+    changed: { tag: 'Annotation moved', mark: 'annotation moved', flag: true }
+  };
+  const selKind = sel => SEL_KIND[sel && sel.kind]
+    || { tag: String((sel && sel.kind) || 'selected'), mark: 'finding', flag: true };
+
+  /* A `selection` says what the annotation carries. A `usage_check` says what
+     independent registers found, which is a different question and is kept as a
+     separate verdict: a feature firing where nothing is annotated is not a
+     discovery until a register says the site is used, and `untested` is not a
+     weaker `used` — it is the absence of a check. An unrecognised verdict falls
+     through to `untested` so a new one can never read as confirmation. */
+  const USAGE_VERDICT = {
+    used: { tag: 'Used', gloss: 'an independent register records the site in use' },
+    untestable: { tag: 'Untestable', gloss: 'the registers cover the locus but no measurement is possible there' },
+    untested: { tag: 'Untested', gloss: 'no usage register was consulted on this assembly' }
+  };
+  const usageVerdict = u => USAGE_VERDICT[u && u.verdict] || USAGE_VERDICT.untested;
+  /* what each register row reported, in the register's own terms */
+  const USAGE_RESULT = {
+    used: 'records it', absent: 'does not carry it',
+    'no data': 'has no data', 'not consulted': 'not consulted'
+  };
+
+  /* Evidence is free-form and differs by kind, so only fields actually present
+     are read, and `score` is only given a name for `agreement`, where its scale
+     is documented. */
+  function selMetric(sel) {
+    const e = (sel && sel.evidence) || {};
+    const bits = [];
+    if (sel.kind === 'agreement') {
+      if (typeof sel.score === 'number') bits.push(`combined score ${sel.score.toFixed(3)}`);
+      return bits.join(' · ');
+    }
+    if (e.dinuc) bits.push(String(e.dinuc));
+    const moved = e.old_coord != null || e.new_coord != null;
+    if (typeof e.shift_bp === 'number') {
+      bits.push(moved ? `moved ${fmt(e.shift_bp)} bp between releases`
+        : `${fmt(e.shift_bp)} bp from the canonical site`);
+    }
+    if (typeof e.nearest_full_bp === 'number') {
+      bits.push(`nearest annotated site ${fmt(e.nearest_full_bp)} bp away`);
+    }
+    if (typeof e.exons_old === 'number' && e.exons_old === e.exons_new) {
+      bits.push(`exon count unchanged at ${fmt(e.exons_old)}`);
+    }
+    if (typeof e.n_cases_in_window === 'number' && e.n_cases_in_window > 1) {
+      bits.push(`${fmt(e.n_cases_in_window)} cases in this window`);
+    }
+    return bits.join(' · ');
+  }
+  /* the base pair a window was chosen for, and for a moved annotation the pair */
+  function findingMarks(sel) {
+    if (!sel || sel.position == null) return [];
+    const e = sel.evidence || {};
+    const marks = [{ base: sel.position, filled: true, tag: selKind(sel).mark }];
+    if (typeof e.window_index_new === 'number' && e.window_index_new !== sel.position) {
+      marks[0].tag = 'was';
+      marks.push({ base: e.window_index_new, filled: false, tag: 'now' });
+    }
+    return marks;
+  }
+  const MAX_LANES = 12;
+  const LIST_UNNAMED = 40;
+
+  /* ---- fonts, read out of the tokens so measuring matches the drawing ---- */
+  const cssVar = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  let FONTS = {};
+  const gauge = document.createElement('canvas').getContext('2d');
+  function readFonts() {
+    const sans = cssVar('--sans') || 'sans-serif';
+    const mono = cssVar('--mono') || 'monospace';
+    FONTS = {
+      name: `600 11px ${sans}`,
+      nameId: `600 11px ${mono}`,
+      meta: `500 10px ${mono}`,
+      strand: `500 10px ${sans}`,
+      reg: `500 9px ${mono}`,
+      site: `9px ${sans}`,
+      band: `500 8.5px ${sans}`,
+      tick: `10px ${mono}`
+    };
+  }
+  const measure = (s, font) => { gauge.font = font; return gauge.measureText(String(s)).width; };
+  /* mono at 9px carries a 0.13em tracking in CSS, which measureText cannot see */
+  const measureTracked = (s, font, em) => measure(s, font) + String(s).length * em;
+
+  /* The lane colours are design tokens, so they are read back out of the
+     stylesheet once per draw; a base letter is then inked near-black or white by
+     the luminance of the cell it sits on. */
+  /* Relative luminance at which white and black ink have equal contrast:
+     (L + 0.05)^2 = 1.05 * 0.05. Above it, ink black; below it, ink white. The
+     base glyphs generalise the same test: each base has a light and a dark
+     variant of its own hue and takes whichever has more contrast on the cell. */
+  const INK_FLIP = 0.1791;
+  const BASE_KEYS = ['a', 'c', 'g', 't', 'n'];
+  const contrastOf = (a, b) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+  const luminance = value => {
+    const m = String(value).trim().match(/^#?([0-9a-f]{6})$/i);
+    if (!m) return 0.5;
+    const n = parseInt(m[1], 16);
+    const ch = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map(v => {
+      const f = v / 255;
+      return f <= 0.03928 ? f / 12.92 : Math.pow((f + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * ch[0] + 0.7152 * ch[1] + 0.0722 * ch[2];
+  };
+  let inks = new Map();       // slot -> plain contrast ink
+  let baseInk = new Map();    // `slot:base` -> that base's hue, in the readable variant
+  function readPalette() {
+    const cs = getComputedStyle(document.documentElement);
+    inks = new Map(); baseInk = new Map();
+    const cellLum = new Map();
+    for (let i = 1; i <= PALETTE; i++) cellLum.set(i - 1, luminance(cs.getPropertyValue(`--feat-${i}`)));
+    cellLum.set(-1, luminance(cs.getPropertyValue('--feat-none')));
+    const variants = new Map();
+    for (const k of BASE_KEYS) {
+      const lit = (cs.getPropertyValue(`--base-${k}-lit`) || '').trim() || '#ffffff';
+      const dim = (cs.getPropertyValue(`--base-${k}-dim`) || '').trim() || '#0c110e';
+      variants.set(k, [lit, luminance(lit), dim, luminance(dim)]);
+    }
+    for (const [slot, cl] of cellLum) {
+      inks.set(slot, cl > INK_FLIP ? '#0c110e' : '#ffffff');
+      for (const k of BASE_KEYS) {
+        const [lit, ll, dim, dl] = variants.get(k);
+        baseInk.set(`${slot}:${k}`, contrastOf(cl, ll) >= contrastOf(cl, dl) ? lit : dim);
+      }
+    }
+  }
+  const inkFor = slot => inks.get(slot) || '#0c110e';
+  const baseInkFor = (slot, letter) => {
+    const c = String(letter || 'n').toLowerCase();
+    return baseInk.get(`${slot}:${BASE_KEYS.includes(c) ? c : 'n'}`) || inkFor(slot);
+  };
+
+  const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+  const LUT = new Uint8Array(256);
+  for (let i = 0; i < B64.length; i++) LUT[B64.charCodeAt(i)] = i;
+
+  /* uint8 run -> activation, undoing the 255-level quantisation of the feature's
+     own peak in this window. */
+  function expand(runs, peak, n) {
+    const out = new Float32Array(n);
+    for (const [start, b64] of runs) {
+      const clean = b64.replace(/=+$/, '');
+      let byte = 0, bits = 0, at = start;
+      for (let i = 0; i < clean.length; i++) {
+        byte = (byte << 6) | LUT[clean.charCodeAt(i)];
+        bits += 6;
+        if (bits >= 8) {
+          bits -= 8;
+          out[at++] = ((byte >> bits) & 0xff) / 255 * peak;
+        }
+      }
+    }
+    return out;
+  }
+
+  /* ---- state ------------------------------------------------------------- */
+  let index = null, doc = null, cache = new Map();
+  let shown = [];            // feature ids with a lane, in slot order
+  let start = 0, end = 0;    // view, in window bases
+  let cursor = 0, pinned = null, mode = 'selected';
+  let W = 0, L = 120, R = 14, H = 400, compact = false;
+  let G = null;              // geometry of the current draw
+  let svg = null, drag = null, pinch = null, vectors = new Map();
+  let restOpen = null;         // whether the unnamed group is unfolded
+  const pointers = new Map();
+
+  let featureIndex = new Map();
+  const featureById = id => featureIndex.get(id);
+  /* This SAE is BatchTopK with k active features, so at any base the features
+     outside that set read exactly zero, not small. A window therefore only has
+     to store a stride-1 track for the features that reach a base's top ranks,
+     and every lane is a complete track. A feature with no stored track never
+     fires hard enough to reach them anywhere in the window. */
+  let tracks = new Map();
+  function trackOf(id) {
+    if (tracks.has(id)) return tracks.get(id);
+    const f = featureById(id);
+    const out = f
+      ? { kind: 'full', v: vectorOf(id), peak: f.peak, label: f.label || null }
+      : null;
+    tracks.set(id, out);
+    return out;
+  }
+
+  /* Reading one base out of every stored track — thousands of them — must not
+     expand every track, so a single quantised byte is decoded in place. */
+  const runIdx = new Map();
+  function runsOf(f) {
+    if (runIdx.has(f.id)) return runIdx.get(f.id);
+    const list = asList(f.runs).map(([at, b64]) => {
+      const clean = String(b64).replace(/=+$/, '');
+      return { at, b64: clean, len: Math.floor(clean.length * 6 / 8) };
+    });
+    runIdx.set(f.id, list);
+    return list;
+  }
+  function byteAt(b64, i) {
+    const bit = i * 8;
+    let at = Math.floor(bit / 6);
+    const skip = bit - at * 6;
+    let acc = 0, bits = 0;
+    while (bits < skip + 8 && at < b64.length) {
+      acc = (acc << 6) | LUT[b64.charCodeAt(at++)];
+      bits += 6;
+    }
+    return (acc >> (bits - skip - 8)) & 0xff;
+  }
+  function valueAt(f, base) {
+    if (vectors.has(f.id)) return vectors.get(f.id)[base];
+    for (const r of runsOf(f)) {
+      if (base >= r.at && base < r.at + r.len) return byteAt(r.b64, base - r.at) / 255 * f.peak;
+    }
+    return 0;
+  }
+  const slotOf = id => shown.indexOf(id);
+  const vectorOf = id => {
+    if (!vectors.has(id)) {
+      const f = featureById(id);
+      vectors.set(id, f ? expand(f.runs, f.peak, doc.n_bases) : new Float32Array(doc.n_bases));
+    }
+    return vectors.get(id);
+  };
+  /* Genomic coordinate of a window base. A minus-strand window's seq is already
+     reverse-complemented, so display order runs against the coordinate. */
+  /* The window's n_bases occupy the 1-based inclusive interval [start+1, end]
+     (verified by refetching the region and matching seq_sha256), so `start` is a
+     half-open left edge and end - start === n_bases. A minus-strand window's seq
+     is already reverse-complemented, so display order runs against the
+     coordinate: base 0 sits at `end` and the last base at `start + 1`. */
+  const coordOf = base => doc.strand < 0 ? doc.end - base : doc.start + 1 + base;
+  const baseOf = coord => doc.strand < 0 ? doc.end - coord : coord - doc.start - 1;
+  const x = base => L + (base - start) / (end - start) * (W - L - R);
+  const nBasesShown = () => end - start;
+  /* the view's end is exclusive too, so the last base on screen is end - 1 */
+  const coordMin = () => Math.min(coordOf(start), coordOf(end - 1));
+  const coordMax = () => Math.max(coordOf(start), coordOf(end - 1));
+
+  /* ---- annotation lookups ------------------------------------------------ */
+  const strandsCovered = () => !doc.annotations ? []
+    : ['sense', 'antisense'].filter(s => doc.annotations[s] && doc.annotations[s].covered);
+  const regionAt = (strand, base) => {
+    const s = doc.annotations && doc.annotations[strand];
+    if (!s || !s.covered || !s.regions) return null;
+    for (const r of s.regions) if (base >= r.from && base <= r.to) return r.class;
+    return null;
+  };
+  const siteAt = (strand, base) => {
+    const s = doc.annotations && doc.annotations[strand];
+    if (!s || !s.covered || !s.sites) return null;
+    const hit = s.sites.find(t => t.base === base);
+    return hit ? hit.class : null;
+  };
+  const genesAt = (strand, base) => {
+    const s = doc.annotations && doc.annotations[strand];
+    if (!s || !s.covered || !s.genes) return [];
+    return s.genes.filter(g => base >= g.from && base <= g.to);
+  };
+
+  /* Per-base winner among the lanes on screen, or the whole dictionary's rank-0
+     feature when the reader asks for it. */
+  let argmaxLut = null;
+  function buildArgmaxLut() {
+    const lut = new Int32Array(doc.n_bases).fill(-1);
+    for (const [s, len, id] of doc.argmax.runs) {
+      if (id < 0) continue;
+      for (let i = s; i < s + len; i++) lut[i] = id;
+    }
+    argmaxLut = lut;
+  }
+  const topGlobal = base => argmaxLut ? argmaxLut[base] : -1;
+
+  function topSelected(base) {
+    let best = -1, bestV = 0;
+    for (const id of shown) {
+      const t = trackOf(id);
+      if (!t) continue;
+      const v = t.v[base];
+      if (v > bestV) { bestV = v; best = id; }
+    }
+    return { id: best, value: bestV };
+  }
+
+  function globalSlotMap() {
+    const ranked = doc.features.slice().sort((a, b) => b.argmax_bases - a.argmax_bases)
+      .filter(f => f.argmax_bases > 0).slice(0, GLOBAL_KEYS);
+    const map = new Map(), used = new Set();
+    for (const f of ranked) {
+      if (!shown.includes(f.id)) continue;
+      const slot = slotOf(f.id) % PALETTE;
+      map.set(f.id, slot); used.add(slot);
+    }
+    let next = 0;
+    for (const f of ranked) {
+      if (map.has(f.id)) continue;
+      while (next < PALETTE && used.has(next)) next++;
+      const slot = Math.min(next, PALETTE - 1);
+      map.set(f.id, slot); used.add(slot);
+    }
+    return map;
+  }
+
+  /* ---- geometry ---------------------------------------------------------- */
+  /* One pass over the tracks, so every y coordinate the renderer uses is decided
+     in one place and the layout never shifts while panning. */
+  function layout() {
+    W = Math.max(240, host.clientWidth || 900);
+    readFonts();
+
+    /* The gutter has to hold whichever is widest: a lane name, a lane's
+       id-and-max line, a strand name, or a register key. Below the point where
+       that leaves too little room for the plot, the labels move onto the plot
+       and the gutter disappears. */
+    let need = 0;
+    for (const id of shown) {
+      const t = trackOf(id);
+      if (!t) continue;
+      const pre = t.label ? `f${id} · ` : '';
+      need = Math.max(need,
+        measure(t.label || `f${id}`, t.label ? FONTS.name : FONTS.nameId),
+        measure(pre + 'max 00.00', FONTS.meta));
+    }
+    need = Math.max(need,
+      measure('top lane here', FONTS.name), measure('top of 8,192', FONTS.name),
+      measure('max in column', FONTS.meta), measure('most bases in column', FONTS.meta),
+      measure('antisense', FONTS.strand), measure('gene model', FONTS.strand),
+      measureTracked('ANNOTATION', FONTS.reg, 1.17));
+    const gutter = Math.min(212, Math.round(need) + 12);
+    compact = (W - gutter - 14) < 430;
+    L = compact ? 3 : gutter;
+    R = compact ? 3 : 14;
+
+    const g = { plotL: L, plotR: W - R, plotW: W - L - R, compact };
+    let y = 2;
+    g.anchorBase = y + 9; g.anchorTop = y; y += 13;
+    g.tickBase = y + 10; g.axisY = y + 15; y += 15;
+    g.findTop = null; g.findBase = null;
+    if (doc.selection && doc.selection.position != null) {
+      g.findTop = y + 1; g.findBase = y + 9; y += 13;
+    }
+    if (compact) { g.stripLabBase = y + 10; y += 13; }
+    g.stripY = y; g.stripH = compact ? 20 : 26; y += g.stripH;
+    if (mode === 'global') { g.gkeyY = y + 5; y += 19; } else g.gkeyY = null;
+    y += compact ? 12 : 15;
+
+    /* annotation panel */
+    g.annTop = y;
+    let py = y + (compact ? 6 : 7);
+    g.annRegBase = py + 7; py += compact ? 13 : 13;
+    g.blocks = [];
+    const blocks = strandsCovered().map(s => ({ kind: 'strand', strand: s }));
+    if (!blocks.length && doc.gene_report) blocks.push({ kind: 'model' });
+    for (const b of blocks) {
+      if (compact) { b.labBase = py + 8; py += 12; }
+      if (!compact) { b.siteLabBase = py + 8; py += 11; }
+      b.siteY = py; b.siteH = 8; py += 8;
+      if (b.kind === 'strand') { b.bandY = py; b.bandH = compact ? 13 : 14; py += b.bandH; }
+      b.geneTop = py; b.geneH = b.kind === 'model' ? 22 : 15;
+      b.geneLabBase = py + 8; b.geneLineY = py + (b.kind === 'model' ? 16 : 12);
+      py += b.geneH;
+      b.centre = (b.siteY + py) / 2;
+      py += compact ? 6 : 8;
+      g.blocks.push(b);
+    }
+    py += compact ? 3 : 4;
+    g.annH = Math.max(20, py - g.annTop);
+    y = g.annTop + g.annH;
+    y += compact ? 15 : 20;
+
+    /* lanes */
+    g.laneRegBase = y + 7; g.laneRuleY = y - 3; y += 13;
+    g.laneTop = y;
+    g.laneH = compact ? 30 : 44;
+    g.laneLab = compact ? 13 : 0;
+    g.laneGap = compact ? 9 : 11;
+    g.lanePitch = g.laneH + g.laneGap + g.laneLab;
+    y += Math.max(g.lanePitch, shown.length * g.lanePitch);
+    g.gridTop = g.annTop;
+    g.gridBottom = y - g.laneGap;
+    H = Math.round(y + 6);
+    G = g;
+    return g;
+  }
+
+  /* ---- drawing ----------------------------------------------------------- */
+  function render() {
+    if (!doc || !svg) return;
+    readPalette();
+    layout();
+    svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+    svg.setAttribute('aria-label', ariaLabel());
+    const pxPerBase = G.plotW / nBasesShown();
+    const cols = Math.max(1, Math.round(G.plotW));
+
+    let out = `<title>${esc(windowTitleText())} — ${esc(doc.chrom)}:${fmt(coordMin())}–${
+      fmt(coordMax())}, ${shown.length} feature lane${shown.length === 1 ? '' : 's'}</title>`;
+    out += `<defs><clipPath id="feat-clip"><rect x="${L}" y="0" width="${
+      G.plotW}" height="${H}"/></clipPath></defs>`;
+
+    out += drawRuler();
+    out += drawScale(pxPerBase);
+    out += drawStrip(cols, pxPerBase);
+    if (mode === 'global') out += drawGlobalKey();
+    out += drawFinding(pxPerBase);
+    out += drawAnnotations(pxPerBase);
+    out += drawLanes(cols, pxPerBase);
+    out += drawAnchor(pxPerBase);
+    out += '<g id="feat-focus"></g>';
+    svg.innerHTML = out;
+    focus(pinned === null ? cursor : pinned, false);
+    paintRegion(pxPerBase);
+  }
+
+  function ticks() {
+    const target = nBasesShown() / Math.max(1, Math.floor(G.plotW / (compact ? 84 : 112)));
+    const step = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000].find(s => s >= target) || 5000;
+    const first = Math.ceil(coordMin() / step) * step;
+    const out = [];
+    for (let c = first; c <= coordMax(); c += step) {
+      const base = baseOf(c);
+      if (base < start || base > end) continue;
+      out.push({ coord: c, base, px: x(base) });
+    }
+    return out;
+  }
+
+  /* A conventional scale bar: a bracket exactly one round number of bases wide,
+     snapped to 1/2/5 x 10^n, relabelled whenever the view changes. It lives in
+     the top row, right-aligned, clear of the ruler and of the gutter. */
+  function drawScale(pxPerBase) {
+    G.scaleLeft = W;
+    const room = Math.min(compact ? 118 : 176, G.plotW * 0.32);
+    let step = 1;
+    for (let e = 0; e <= 6; e++) {
+      for (const m of [1, 2, 5]) {
+        const v = m * Math.pow(10, e);
+        if (v * pxPerBase <= room) step = v;
+      }
+    }
+    const barPx = step * pxPerBase;
+    if (barPx < 16) return '';
+    const label = step >= 1000 ? `${step / 1000} kb` : `${step} bp`;
+    const y = G.anchorTop + 7;
+    const right = W - R, left = right - barPx;
+    let out = path(`M${left.toFixed(2)} ${y - 3.5}v7M${left.toFixed(2)} ${y}H${right}M${right} ${y - 3.5}v7`, 'scalebar');
+    const lw = measure(label, FONTS.reg) + 12;
+    const px = left - 6 - lw;
+    if (px > L + 8) {
+      out += rect(px, y - 6.5, lw, 13, '', 'scale-pill', ' rx="6.5"');
+      out += text(px + lw / 2, y + 3.2, label, 'scale-lab', 'middle');
+      G.scaleLeft = px;
+    } else {
+      G.scaleLeft = left;
+    }
+    return out;
+  }
+
+  function drawRuler() {
+    let out = path(`M${L} ${G.axisY}H${W - R}`, 'axis');
+    let grid = '';
+    for (const t of ticks()) {
+      const anchor = t.px < L + 30 ? 'start' : t.px > W - R - 30 ? 'end' : 'middle';
+      out += path(`M${t.px.toFixed(2)} ${G.axisY}V${G.axisY + 4}`, 'axis');
+      out += text(t.px, G.tickBase, fmt(t.coord), 'ruler-tick', anchor);
+      grid += `M${t.px.toFixed(2)} ${G.gridTop}V${G.gridBottom}`;
+    }
+    out += `<g clip-path="url(#feat-clip)">${path(grid, 'grid')}</g>`;
+    return out;
+  }
+
+  /* The headline device: one mark per pixel column, coloured by whichever
+     feature fires hardest anywhere under that column. Maximum, never a mean. */
+  function drawStrip(cols, pxPerBase) {
+    const globalSlots = mode === 'global' ? globalSlotMap() : null;
+    const colSlot = new Int32Array(cols).fill(-1);
+    let cells = '';
+    for (let c = 0; c < cols; c++) {
+      const from = Math.floor(start + c / pxPerBase);
+      const to = Math.max(from + 1, Math.floor(start + (c + 1) / pxPerBase));
+      let winner = -1;
+      if (mode === 'selected') {
+        let best = 0;
+        for (let b = from; b < to && b < doc.n_bases; b++) {
+          const t = topSelected(b);
+          if (t.value > best) { best = t.value; winner = t.id; }
+        }
+      } else {
+        /* The stored argmax track carries the rank-0 feature per base, not its
+           value, so a column can only report which feature holds the most bases
+           in it. Named as such in the label rather than passed off as a max. */
+        const tally = new Map();
+        let best = 0;
+        for (let b = from; b < to && b < doc.n_bases; b++) {
+          const id = topGlobal(b);
+          if (id < 0) continue;
+          const n = (tally.get(id) || 0) + 1;
+          tally.set(id, n);
+          if (n > best) { best = n; winner = id; }
+        }
+      }
+      const slot = winner < 0 ? -1
+        : (mode === 'selected' ? slotOf(winner) : (globalSlots.get(winner) ?? -1));
+      colSlot[c] = slot;
+      cells += rect(L + c, G.stripY, 1.02, G.stripH,
+        winner < 0 ? 'var(--feat-none)' : featColour(slot), winner < 0 ? 'nofire' : '');
+    }
+    let out = `<g clip-path="url(#feat-clip)">${cells}`;
+    /* letters once there is room for them, inked by base identity in whichever
+       variant of that base's hue has more contrast against the cell */
+    if (pxPerBase >= 7) {
+      for (let b = Math.floor(start); b < Math.ceil(end) && b < doc.n_bases; b++) {
+        if (b < 0) continue;
+        const centre = x(b) + pxPerBase / 2;
+        if (centre - 4 < L || centre + 4 > W - R) continue;
+        const slot = colSlot[Math.max(0, Math.min(cols - 1, Math.round(centre - L)))];
+        /* an inline style, because #feat-plot text { fill } would beat a
+           presentation attribute and every letter would come out ink-2 */
+        out += `<text x="${centre.toFixed(2)}" y="${(G.stripY + G.stripH / 2 + 3.6).toFixed(2)}" class="seqletter" text-anchor="middle" style="fill:${
+          baseInkFor(slot, doc.seq[b])}">${doc.seq[b]}</text>`;
+      }
+    }
+    out += '</g>';
+    out += rect(L, G.stripY, G.plotW, G.stripH, '', 'strip-frame');
+
+    const primary = mode === 'selected' ? 'top lane here' : 'top of 8,192';
+    const secondary = mode === 'selected' ? 'max in column' : 'most bases in column';
+    if (compact) {
+      out += text(L + 2, G.stripLabBase, primary, 'lane-name', 'start');
+      out += text(W - R, G.stripLabBase, secondary, 'lane-max', 'end');
+    } else {
+      out += text(L - 11, G.stripY + 12, primary, 'lane-name', 'end');
+      out += text(L - 11, G.stripY + 24, secondary, 'lane-max', 'end');
+    }
+    return out;
+  }
+
+  /* In global mode the strip reads all 8,192 features, so the ten colours mean
+     something other than the lanes below. Name them. */
+  function drawGlobalKey() {
+    const ranked = Array.from(globalSlotMap().entries());
+    let out = '', cx = L + 1;
+    out += text(cx, G.gkeyY + 8, 'strip keys:', 'lane-max', 'start');
+    cx += measure('strip keys:', FONTS.meta) + 9;
+    for (const [id, slot] of ranked) {
+      const label = `f${id}`;
+      const w = measure(label, FONTS.meta);
+      if (cx + w + 12 > W - R) break;
+      out += rect(cx, G.gkeyY + 1, 8, 8, featColour(slot), '', ' rx="2"');
+      out += text(cx + 11, G.gkeyY + 8, label, 'gkey-id', 'start');
+      cx += w + 20;
+    }
+    return out;
+  }
+
+  /* The annotation register. A recessed plate, pale washes, mid-tone ticks: the
+     point is that no part of this block can be mistaken for a measurement. */
+  function drawAnnotations(pxPerBase) {
+    let out = rect(L, G.annTop, G.plotW, G.annH, '', 'ann-panel', ' rx="4"');
+    out += compact
+      ? text(L + 6, G.annRegBase, 'ANNOTATION', 'reg-lab halo-panel', 'start')
+      : text(L - 11, G.annRegBase, 'ANNOTATION', 'reg-lab', 'end');
+
+    let body = '';
+    for (const b of G.blocks) {
+      const name = b.kind === 'model' ? 'gene model' : b.strand;
+      if (compact) body += text(L + 6, b.labBase, name, 'strand-name halo-panel', 'start');
+      else out += text(L - 11, b.centre + 3, name, 'strand-name', 'end');
+      body += b.kind === 'model' ? drawGeneModel(b, pxPerBase) : drawStrand(b, pxPerBase);
+    }
+    return out + `<g clip-path="url(#feat-clip)">${body}</g>`;
+  }
+
+  function drawStrand(b, pxPerBase) {
+    const s = doc.annotations[b.strand];
+    let out = '';
+    /* regions partition every base, so they are drawn as abutting bands */
+    let bandLabels = '';
+    for (const r of s.regions) {
+      if (r.to < start || r.from > end) continue;
+      const a = x(Math.max(r.from, start)), z = x(Math.min(r.to + 1, end));
+      out += rect(a, b.bandY, z - a, b.bandH, `var(--ann-${r.class})`, 'ann-band');
+      /* The washes are pale on purpose, which makes them close in luminance and
+         useless under greyscale or dichromacy, so each band says what it is
+         wherever there is room for the word. */
+      const label = REGION_LABEL[r.class] || r.class;
+      const lw = measure(label, FONTS.band);
+      if (z - a > lw + 10) {
+        bandLabels += text((a + z) / 2, b.bandY + b.bandH / 2 + 3, label, 'ann-bandlab', 'middle');
+      }
+    }
+    out += bandLabels;
+    out += path(`M${L} ${b.bandY}H${W - R}M${L} ${b.bandY + b.bandH}H${W - R}`, 'ann-band-rule');
+
+    /* gene extents, with a strand chevron and end caps */
+    for (const g of s.genes) {
+      if (g.to < start || g.from > end) continue;
+      const a = Math.max(x(g.from), L), z = Math.min(x(g.to + 1), W - R);
+      out += path(`M${a.toFixed(2)} ${b.geneLineY}H${z.toFixed(2)}` +
+        `M${a.toFixed(2)} ${b.geneLineY - 3}v6M${z.toFixed(2)} ${b.geneLineY - 3}v6`, 'gene-line');
+      const label = `${b.strand === 'sense' ? '▶' : '◀'} ${g.gene_name || g.gene_id}`;
+      if (z - a > measure(label, FONTS.site) + 10) {
+        out += text(b.strand === 'sense' ? a + 4 : z - 4, b.geneLabBase, label, 'gene-label',
+          b.strand === 'sense' ? 'start' : 'end');
+      }
+    }
+
+    /* sites are points, never runs: a tick with a small cap, so the idiom does
+       not resemble an activation stem rising from a baseline */
+    const marks = s.sites.filter(t => t.base >= start && t.base <= end);
+    const tickW = Math.max(1.4, Math.min(pxPerBase, 4));
+    for (const t of marks) {
+      const px = x(t.base);
+      out += rect(px, b.siteY, tickW, b.siteH + (b.bandH || 0), `var(--ann-${t.class})`);
+      out += rect(px - 2 + tickW / 2, b.siteY, 4, 2.5, `var(--ann-${t.class})`);
+    }
+    if (!compact) out += siteLabels(marks.map(t => ({ px: x(t.base), cls: t.class })), b.siteLabBase);
+    return out;
+  }
+
+  /* Site class names, drawn only where they fit without touching each other. */
+  function siteLabels(marks, base) {
+    let out = '', lastRight = -1e9;
+    for (const m of marks.slice().sort((a, b) => a.px - b.px)) {
+      const long = m.label || SITE_LABEL[m.cls] || m.cls;
+      const short = m.label ? m.label.split(' ')[0] : (SITE_SHORT[m.cls] || m.cls);
+      for (const label of [long, short]) {
+        const w = measure(label, FONTS.site);
+        if (m.px - w / 2 < lastRight + 5) continue;
+        if (m.px - w / 2 < L + 1 || m.px + w / 2 > W - R - 1) continue;
+        out += text(m.px, base, label, 'ann-sitelab', 'middle');
+        lastRight = m.px + w / 2;
+        break;
+      }
+    }
+    return out;
+  }
+
+  /* The featured locus carries the report's own gene model instead of a label
+     track, plus the two donor positions the annotation releases disagree on. */
+  function drawGeneModel(b, pxPerBase) {
+    const g = doc.gene_report;
+    let out = '';
+    const a = x(baseOf(g.start)), z = x(baseOf(g.end) + 1);
+    out += path(`M${a.toFixed(2)} ${b.geneLineY}H${z.toFixed(2)}`, 'gene-line');
+    for (const [s0, s1] of g.exons) {
+      const ex = x(baseOf(s0)), ew = x(baseOf(s1) + 1) - ex;
+      out += rect(ex, b.geneLineY - 5, ew, 10, '', 'gene-exon');
+    }
+    out += text(a + 4, b.geneLabBase, `▶ ${g.gene_id}`, 'gene-label', 'start');
+
+    const c = doc.contested;
+    if (c) {
+      const marks = [];
+      if (c.araport11_donor != null) marks.push({ base: c.araport11_donor, cls: 'donor', label: 'Araport11 donor' });
+      if (c.tair12_donor != null) marks.push({ base: c.tair12_donor, cls: 'donor', label: 'TAIR12 donor' });
+      if (c.acceptor != null) marks.push({ base: c.acceptor, cls: 'acceptor', label: 'acceptor' });
+      const tickW = Math.max(1.4, Math.min(pxPerBase, 4));
+      for (const m of marks) {
+        if (m.base < start || m.base > end) continue;
+        const px = x(m.base);
+        out += rect(px, b.siteY, tickW, b.siteH + 5, `var(--ann-${m.cls})`);
+        out += rect(px - 2 + tickW / 2, b.siteY, 4, 2.5, `var(--ann-${m.cls})`);
+      }
+      if (!compact) {
+        out += siteLabels(marks.filter(m => m.base >= start && m.base <= end)
+          .map(m => ({ px: x(m.base), cls: m.cls, label: m.label })), b.siteLabBase, true);
+      }
+    }
+    return out;
+  }
+
+  /* One lane per selected feature. A bar per pixel column, height = the maximum
+     activation measured under that column, scaled to the feature's peak over the
+     whole window so lanes stay comparable as the reader zooms. Columns with no
+     measurement above zero get no bar at all. */
+  /* A lane's published name is a claim the report measured. A lane chosen because it
+     matches an annotated category best in THIS window is a different kind of statement,
+     so it is labelled with the category and drawn in the softer style. */
+  let laneMarks = new Map();
+  function buildLaneMarks() {
+    laneMarks = new Map();
+    for (const r of asList(doc && doc.lane_rationale)) {
+      if (r && r.id != null) laneMarks.set(Number(r.id), r);
+    }
+  }
+  const marksOf = id => laneMarks.get(id) || null;
+
+  function drawLanes(cols, pxPerBase) {
+    if (!shown.length) {
+      return text(L + 4, G.laneTop + 20,
+        'No lanes. Pick a feature below to read it base by base.', 'lane-silent', 'start');
+    }
+    let out = path(`M${L} ${G.laneRuleY}H${W - R}`, 'reg-rule');
+    out += compact
+      ? text(L + 2, G.laneRegBase, 'ACTIVATION', 'reg-lab', 'start')
+      : text(L - 11, G.laneRegBase, 'ACTIVATION', 'reg-lab', 'end');
+
+    let plot = '', gutter = '';
+    shown.forEach((id, slot) => {
+      const t = trackOf(id);
+      if (!t) return;
+      const top = G.laneTop + slot * G.lanePitch + G.laneLab;
+      const bottom = top + G.laneH;
+      const colour = featColour(slot);
+
+      /* A bar per pixel column, its height the MAXIMUM measured under that
+         column, scaled to the feature's peak over the whole window so lanes stay
+         comparable as the reader zooms. A column with nothing above zero gets no
+         bar at all: zero means the feature did not fire. */
+      let localMax = 0;
+      const stems = [];
+      for (let c = 0; c < cols; c++) {
+        const from = Math.floor(start + c / pxPerBase);
+        const to = Math.max(from + 1, Math.floor(start + (c + 1) / pxPerBase));
+        let peak = 0;
+        for (let b = from; b < to && b < doc.n_bases; b++) if (t.v[b] > peak) peak = t.v[b];
+        if (peak > 0) {
+          if (peak > localMax) localMax = peak;
+          const h = Math.max(1, peak / t.peak * (G.laneH - 3));
+          stems.push(`M${(L + c + 0.5).toFixed(2)} ${bottom}V${(bottom - h).toFixed(2)}`);
+        }
+      }
+      const silent = localMax === 0;
+      plot += path(`M${L} ${bottom}H${W - R}`, silent ? 'lane-base silent' : 'lane-base');
+      if (stems.length) {
+        plot += `<path class="lane-stems" d="${stems.join('')}" stroke="${colour}"/>`;
+      }
+
+      const mk = marksOf(id);
+      const inWindow = !t.label && mk && mk.nice && mk.mcc_in_window != null;
+      const name = t.label || (inWindow ? mk.nice : `f${id}`);
+      const pre = (t.label || inWindow) ? `f${id} · ` : '';
+      const meta = pre + (silent ? 'silent here' : `max ${num(localMax)}`);
+      const fit = inWindow ? `marks ${num(mk.mcc_in_window)} here` : null;
+      const tip = `f${id}${t.label ? ' ' + t.label : ''}` +
+        (inWindow ? ` — the feature that marks ${mk.nice} best in this window, Matthews`
+          + ` correlation ${num(mk.mcc_in_window)} at its own ${mk.cut_percentile}th percentile.`
+          + ' Chosen and scored in this window, so it describes this picture rather than'
+          + ' estimating how it behaves elsewhere.' : ' — ') + (silent
+        ? `silent over this view; window peak ${num(t.peak)}.`
+        : `max in view ${num(localMax)}, window peak ${num(t.peak)}.`);
+
+      gutter += `<g><title>${esc(tip)}</title>`;
+      const dim = silent ? ' opacity="0.4"' : '';
+      if (compact) {
+        gutter += rect(L + 1, top - 11, 8, 8, colour, '', ' rx="2"' + dim);
+        gutter += text(L + 13, top - 4, name,
+          'halo ' + (t.label ? 'lane-name' : 'lane-name lane-id-name'), 'start');
+        gutter += text(W - R - 1, top - 4, meta + (fit ? ` · ${num(mk.mcc_in_window)}` : ''),
+          (silent ? 'lane-silent' : 'lane-max') + ' halo', 'end');
+      } else {
+        gutter += rect(L - 7, top, 3, G.laneH, colour, 'lane-key', ' rx="1.5"' + dim);
+        gutter += text(L - 11, top + 12, name,
+          t.label ? 'lane-name' : 'lane-name lane-id-name', 'end');
+        gutter += text(L - 11, top + 25, meta, silent ? 'lane-silent' : 'lane-max', 'end');
+        if (fit) gutter += text(L - 11, top + 37, fit, 'lane-fit', 'end');
+      }
+      gutter += '</g>';
+    });
+
+    return out + `<g clip-path="url(#feat-clip)">${plot}</g>` + gutter;
+  }
+
+  /* The base this window was chosen for: a solid triangle, deliberately paired
+     with the anchor's dashed outline — both say "look here", one from the
+     sampler and one from the selection, and neither is an annotation. For a
+     moved annotation both frames are drawn, filled for the position the
+     selection names and hollow for where the newer release puts it, with the
+     shift bracketed between them once there is room to label it. */
+  function drawFinding(pxPerBase) {
+    if (G.findBase === null) return '';
+    const marks = findingMarks(doc.selection).filter(m => m.base >= start && m.base <= end);
+    if (!marks.length) return '';
+    let out = '';
+    for (const m of marks) {
+      const px = x(m.base) + pxPerBase / 2;
+      out += `<path class="finding${m.filled ? '' : ' open'}" d="M${(px - 4.5).toFixed(2)} ${
+        G.findTop}h9l-4.5 7z"/>`;
+    }
+    const xs = marks.map(m => x(m.base) + pxPerBase / 2);
+    const gap = Math.abs(xs[xs.length - 1] - xs[0]);
+    const e = (doc.selection.evidence) || {};
+    const lim = Math.min(W - R, G.scaleLeft - 8);
+    const wide = txt => measureTracked(txt, FONTS.reg, 0.72);
+    if (marks.length > 1 && gap > 30 && typeof e.shift_bp === 'number') {
+      const a = Math.min(...xs), z = Math.max(...xs);
+      out += path(`M${a.toFixed(2)} ${G.findTop + 3.5}H${z.toFixed(2)}`, 'finding-bracket');
+      out += text((a + z) / 2, G.findBase - 6, `${fmt(e.shift_bp)} bp`, 'finding-lab', 'middle');
+      /* the side labels are a nicety; the bracket and the base-pair count carry
+         the claim, so they are dropped rather than pushed off the plot */
+      if (a - 4 - wide(marks[0].tag) > L) {
+        out += text(a - 4, G.findBase, marks[0].tag, 'finding-lab', 'end');
+      }
+      const last = marks[marks.length - 1].tag;
+      if (z + 4 + wide(last) < lim) out += text(z + 4, G.findBase, last, 'finding-lab', 'start');
+    } else {
+      const px = xs[0];
+      const long = marks.length > 1
+        ? `${selKind(doc.selection).mark}, ${fmt(e.shift_bp || 0)} bp` : marks[0].tag;
+      const short = marks.length > 1 ? `${fmt(e.shift_bp || 0)} bp` : marks[0].tag;
+      let done = false;
+      for (const label of [long, short]) {
+        const lw = wide(label);
+        if (px + 8 + lw < lim) { out += text(px + 8, G.findBase, label, 'finding-lab', 'start'); done = true; break; }
+        if (px - 8 - lw > L) { out += text(px - 8, G.findBase, label, 'finding-lab', 'end'); done = true; break; }
+      }
+      if (!done) {
+        const lw = wide(short);
+        const cx = Math.max(L + lw / 2 + 1, Math.min(lim - lw / 2 - 1, px));
+        out += text(cx, G.findBase, short, 'finding-lab', 'middle');
+      }
+    }
+    return out;
+  }
+
+  /* The anchor is where the sampler looked. Outline only, and labelled, so it can
+     never read as an annotated base. */
+  function drawAnchor(pxPerBase) {
+    if (!doc.anchor || doc.anchor.offset == null) return '';
+    const at = doc.anchor.offset;
+    if (at < start || at > end) return '';
+    const px = x(at);
+    const w = Math.max(3, pxPerBase + 3);
+    let out = `<rect class="anchor" x="${(px - w / 2).toFixed(2)}" y="${(G.stripY - 3).toFixed(2)}" width="${
+      w.toFixed(2)}" height="${(G.stripH + 6).toFixed(2)}" rx="1.5"/>`;
+    out += path(`M${px.toFixed(2)} ${G.anchorTop + 11}V${(G.stripY - 4).toFixed(2)}`, 'anchor');
+    const label = `ANCHOR · ${String(doc.anchor.kind || '').toUpperCase()}`;
+    const lw = measureTracked(label, FONTS.reg, 0.9);
+    const left = px + 6 + lw < Math.min(W - R, G.scaleLeft - 8);
+    out += text(left ? px + 6 : px - 6, G.anchorBase, label, 'anchor-lab', left ? 'start' : 'end');
+    return out;
+  }
+
+  /* ---- coordinate bar ---------------------------------------------------- */
+  function paintRegion(pxPerBase) {
+    const span = nBasesShown();
+    const scale = pxPerBase >= 1
+      ? `<b>${num(pxPerBase, pxPerBase >= 10 ? 0 : 1)}</b> px per base`
+      : `<b>${num(1 / pxPerBase, 1 / pxPerBase >= 10 ? 0 : 1)}</b> bp per column, max`;
+    region.innerHTML =
+      `<span class="fr-coord">${esc(doc.chrom)}:${fmt(coordMin())}–${fmt(coordMax())}</span>` +
+      `<span class="fr-item"><span class="fr-key">asm</span><b>${esc(doc.assembly)}</b></span>` +
+      `<span class="fr-item"><span class="fr-key">strand</span><b>${doc.strand < 0 ? 'minus' : 'plus'}</b></span>` +
+      `<span class="fr-item"><span class="fr-key">shown</span><b>${fmt(span)}</b> of ${fmt(doc.n_bases)} bp</span>` +
+      `<span class="fr-item"><span class="fr-key">scale</span>${scale}</span>`;
+  }
+
+  /* ---- cursor and readout ------------------------------------------------ */
+  function focus(base, polite) {
+    const g = svg.querySelector('#feat-focus');
+    if (!g) return;
+    if (base === null || base < start || base > end) { g.innerHTML = ''; return; }
+    const px = x(base);
+    const cls = pinned === base ? 'pin' : 'cursor';
+    let out = path(`M${px.toFixed(2)} ${G.axisY}V${G.gridBottom}`, cls);
+    if (pinned === base) {
+      out += `<path class="pin-cap" d="M${(px - 3.4).toFixed(2)} ${G.axisY}h6.8l-3.4 5z"/>`;
+    }
+    g.innerHTML = out;
+    describe(base, polite);
+  }
+
+  /* The readout is aria-live. Pointer hover would fire it on every pixel, so
+     politeness is switched off while the pointer drives it and switched back on
+     for the keyboard and for pinning, which is where a screen-reader user is. */
+  function setPoliteness(on) {
+    const want = on ? 'polite' : 'off';
+    if (readout.getAttribute('aria-live') !== want) readout.setAttribute('aria-live', want);
+  }
+
+  function describe(base, polite) {
+    setPoliteness(!!polite);
+    const letter = (doc.seq[base] || 'N').toUpperCase();
+    const baseTok = `var(--base-${'acgt'.includes(letter.toLowerCase()) ? letter.toLowerCase() : 'n'})`;
+    let posRows = `<span class="k">base</span><span class="v">${fmt(base + 1)}<span class="v dim"> / ${
+      fmt(doc.n_bases)}</span></span>` +
+      `<span class="k">chr${esc(doc.chrom)}</span><span class="v">${fmt(coordOf(base))}</span>` +
+      `<span class="k">seq</span><span class="v"><span class="seqbase" style="color:${baseTok}">${
+        esc(letter)}</span></span>`;
+    if (doc.anchor && doc.anchor.offset === base) {
+      posRows += `<span class="k">anchor</span><span class="v dim">sampled here</span>`;
+    }
+
+    let annRows = '';
+    for (const strand of strandsCovered()) {
+      const reg = regionAt(strand, base), site = siteAt(strand, base);
+      const genes = genesAt(strand, base).map(g => g.gene_name || g.gene_id).filter(Boolean);
+      let value = reg
+        ? `<span class="achip"><i style="background:var(--ann-${esc(reg)})"></i>${esc(REGION_LABEL[reg] || reg)}</span>`
+        : '<span class="v dim">not annotated</span>';
+      if (site) {
+        value += ` <span class="achip"><i class="site" style="background:var(--ann-${esc(site)})"></i>${
+          esc(SITE_LABEL[site] || site)}</span>`;
+      }
+      if (genes.length) value += ` <span class="gname">${esc(genes.join(', '))}</span>`;
+      annRows += `<span class="k">${esc(strand)}</span><span class="v">${value}</span>`;
+    }
+    /* The featured locus carries the report's gene model instead of a label
+       track, so the same register is derived from its exons and introns. */
+    if (!annRows && doc.gene_report) {
+      const g = doc.gene_report;
+      const c = coordOf(base);
+      const inGene = c >= g.start && c <= g.end;
+      const inExon = (g.exons || []).some(([a, z]) => c >= a && c <= z);
+      const cls = !inGene ? 'intergenic' : inExon ? 'cds' : 'intron';
+      const word = !inGene ? 'outside the gene' : inExon ? 'CDS' : 'intron';
+      annRows = `<span class="k">gene model</span><span class="v">` +
+        `<span class="achip"><i style="background:var(--ann-${cls})"></i>${esc(word)}</span>` +
+        (inGene ? ` <span class="gname">${esc(g.gene_id)}</span>` : '') + `</span>`;
+      const con = doc.contested;
+      if (con) {
+        const which = con.araport11_donor === base
+          ? { cls: 'donor', site: 'donor', who: 'where TAIR10 and Araport11 put it' }
+          : con.tair12_donor === base
+            ? { cls: 'donor', site: 'donor', who: 'where the 1999 BAC and TAIR12 put it' }
+            : con.acceptor === base
+              ? { cls: 'acceptor', site: 'acceptor', who: 'of the same intron' } : null;
+        if (which) {
+          annRows += `<span class="k">contested</span><span class="v">` +
+            `<span class="achip"><i class="site" style="background:var(--ann-${which.cls})"></i>${
+              esc(which.site)}</span> <span class="gname">${esc(which.who)}</span></span>`;
+        }
+      }
+    }
+    if (!annRows) {
+      annRows = '<span class="k">register</span><span class="v dim">no annotation track for this window</span>';
+    }
+
+    const hits = shown.map(id => {
+      const t = trackOf(id);
+      return t ? { id, t, v: t.v[base] } : null;
+    }).filter(Boolean);
+    const fired = hits.filter(h => h.v > 0).sort((a, b) => b.v - a.v);
+    const zero = hits.filter(h => h.v === 0);
+    let actBody = fired.length
+      ? '<div class="rows">' + fired.map(h =>
+        `<span class="chip" style="background:${featColour(slotOf(h.id))}"></span>` +
+        `<span class="fid">f${h.id}</span>` +
+        `<span class="fnm">${h.t.label ? esc(h.t.label) : 'unnamed'}</span>` +
+        `<span class="fv">${num(h.v)}</span>`).join('') + '</div>'
+      : '<div class="ro-empty">None of the lanes fired at this base.</div>';
+    if (zero.length) {
+      actBody += `<div class="ro-silent">silent here · <code>${
+        zero.map(h => 'f' + h.id).join(' ')}</code></div>`;
+    }
+    const gid = topGlobal(base);
+    actBody += `<div class="ro-foot">${gid >= 0
+      ? `strongest of all 8,192 here: <b>f${gid}</b>` + (shown.includes(gid) ? '' : ' (no lane)')
+      : 'no feature in the dictionary fired at this base'}</div>`;
+
+    readout.innerHTML =
+      `<div class="ro-block ro-pos"><p class="ro-lab">Position${
+        pinned === base ? '<span class="pinned">pinned</span>' : ''}</p>` +
+      `<div class="ro-rows">${posRows}</div></div>` +
+      `<div class="ro-block ro-ann"><p class="ro-lab">Annotation</p>` +
+      `<div class="ro-rows">${annRows}</div></div>` +
+      `<div class="ro-block ro-act"><p class="ro-lab">Activation<span>stride 1</span></p>${actBody}</div>`;
+
+    paintPanel(base);
+  }
+
+  /* ---- view control ------------------------------------------------------ */
+  function setView(a, b) {
+    const width = Math.round(Math.max(40, Math.min(doc.n_bases, b - a)));
+    start = Math.max(0, Math.min(doc.n_bases - width, Math.round(a)));
+    end = start + width;
+    render();
+  }
+  /* Panning fires per pointermove; one render per frame is enough. */
+  let viewRaf = 0, pendingView = null;
+  function setViewSoon(a, b) {
+    pendingView = [a, b];
+    if (viewRaf) return;
+    viewRaf = requestAnimationFrame(() => {
+      viewRaf = 0;
+      const [p, q] = pendingView;
+      setView(p, q);
+    });
+  }
+  function zoom(factor) {
+    const centre = (pinned !== null && pinned >= start && pinned <= end) ? pinned : (start + end) / 2;
+    const width = Math.max(40, Math.min(doc.n_bases, nBasesShown() * factor));
+    setView(centre - width / 2, centre + width / 2);
+  }
+
+  /* ---- window picker -----------------------------------------------------
+     The layout is read out of the data, never assumed. When the windows carry a
+     `selection` field the picker groups by species and labels each window by
+     what it shows — its gene and whether the features agree with the annotation
+     or contest it. Without that field it falls back to the species-by-anchor
+     matrix, so the page never breaks while the window set is being swapped. */
+  function pickerPlan() {
+    const featured = index.windows.find(w => w.featured);
+    const rest = index.windows.filter(w => !w.featured);
+    const groups = [];
+    const byKey = new Map();
+    for (const w of rest) {
+      if (!byKey.has(w.species)) {
+        const g = { species: w.species, binomial: w.species_binomial, family: w.family, windows: [], cells: new Map() };
+        byKey.set(w.species, g); groups.push(g);
+      }
+      const g = byKey.get(w.species);
+      g.windows.push(w);
+      g.cells.set((w.anchor && w.anchor.kind) || 'other', w);
+    }
+    const described = rest.some(w => w.selection && w.selection.kind);
+    if (described) return { shape: 'selection', featured, groups };
+    const kinds = [];
+    for (const w of rest) {
+      const k = (w.anchor && w.anchor.kind) || 'other';
+      if (!kinds.includes(k)) kinds.push(k);
+    }
+    const cols = ANCHOR_ORDER.filter(k => kinds.includes(k))
+      .concat(kinds.filter(k => !ANCHOR_ORDER.includes(k)));
+    return { shape: 'anchor', featured, groups, cols };
+  }
+
+  /* what a window is called in the picker: its gene, else its uid */
+  const windowGeneLabel = w => {
+    const genes = asList(w.genes_sense);
+    return genes.length ? shortList(genes) : w.window_uid;
+  };
+
+  function paintPicker() {
+    const plan = pickerPlan();
+    let out = '';
+    if (plan.featured) {
+      const f = plan.featured;
+      out += `<button type="button" class="win-hero" data-uid="${esc(f.window_uid)}">` +
+        `<span class="wh-tag">THE&nbsp;LOCUS</span>` +
+        `<span class="wh-name">${esc(f.window_uid)}</span>` +
+        `<span class="wh-sub">the contested donor · <i>${esc(f.species_binomial)}</i>` +
+        `<span class="wh-asm"> · ${esc(f.assembly)}</span></span></button>`;
+    }
+
+    if (plan.shape === 'selection') {
+      for (const g of plan.groups) {
+        out += `<div class="win-block"><p class="win-sp"><span class="b">${esc(g.binomial)}</span>${
+          g.family ? `<span class="f">${esc(g.family)}</span>` : ''}</p><div class="win-list">`;
+        for (const w of g.windows) {
+          const sel = w.selection || {};
+          const k = selKind(sel);
+          const name = windowGeneLabel(w);
+          const metric = selMetric(sel);
+          const usage = w.usage_check;
+          const uv = usage ? usageVerdict(usage) : null;
+          const aria = [`${name}, ${g.binomial}`, k.tag, sel.headline, sel.why,
+            uv ? `usage: ${uv.tag}, ${uv.gloss}` : '', w.window_uid]
+            .filter(Boolean).join(' — ');
+          out += `<button type="button" class="win-card" data-uid="${esc(w.window_uid)}" data-kind="${
+            esc(sel.kind || 'other')}" data-flag="${k.flag ? '1' : '0'}" aria-label="${
+            esc(aria)}" title="${esc(aria)}">` +
+            `<span class="wk">${esc(k.tag)}</span>` +
+            `<span class="wn">${esc(name)}</span>` +
+            (sel.headline ? `<span class="wh">${esc(sel.headline)}</span>` : '') +
+            (metric ? `<span class="wm">${esc(metric)}</span>` : '') +
+            (uv ? `<span class="wv" data-verdict="${esc(usage.verdict || 'untested')}">${
+              esc(uv.tag)}</span>` : '') +
+            `<span class="wu">${esc(w.window_uid)}</span>` +
+            '</button>';
+        }
+        out += '</div></div>';
+      }
+    } else if (plan.groups.length) {
+      out += `<div class="win-matrix" style="--wm-cols:${plan.cols.length}">`;
+      out += '<span class="wm-corner" aria-hidden="true"></span>';
+      for (const k of plan.cols) out += `<span class="wm-head">${esc(ANCHOR_COL[k] || k)}</span>`;
+      for (const g of plan.groups) {
+        out += `<span class="wm-sp"><span class="b">${esc(g.binomial)}</span>${
+          g.family ? `<span class="f">${esc(g.family)}</span>` : ''}</span>`;
+        for (const k of plan.cols) {
+          const w = g.cells.get(k);
+          if (!w) { out += '<span class="wm-empty" aria-hidden="true"></span>'; continue; }
+          const aria = `${ANCHOR_TITLE[k] || k} window in ${g.binomial}, ${w.window_uid}`;
+          out += `<button type="button" class="wm-cell" data-uid="${esc(w.window_uid)}" aria-label="${
+            esc(aria)}"><span class="wc-anchor">${esc(ANCHOR_COL[k] || k)}</span>` +
+            `<span class="wc-uid">${esc(w.window_uid)}</span></button>`;
+        }
+      }
+      out += '</div>';
+    }
+    picker.innerHTML = out;
+    picker.classList.toggle('win-wide', plan.shape === 'selection');
+    /* one row per species when the viewport can hold it, however many windows a
+       species turns out to have */
+    const widest = plan.groups.reduce((n, g) => Math.max(n, g.windows.length), 1);
+    picker.style.setProperty('--wl-cols', String(Math.min(8, Math.max(1, widest))));
+
+    /* Twenty-one buttons would be twenty-one tab stops. One radiogroup with a
+       roving tabindex is one stop, and a screen reader announces the position. */
+    picker.setAttribute('role', 'radiogroup');
+    const cells = Array.from(picker.querySelectorAll('[data-uid]'));
+    cells.forEach((b, i) => {
+      b.setAttribute('role', 'radio');
+      b.setAttribute('aria-checked', 'false');
+      b.tabIndex = i === 0 ? 0 : -1;
+      b.addEventListener('click', () => choose(b.dataset.uid));
+      b.addEventListener('keydown', ev => {
+        const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[ev.key];
+        let next = null;
+        if (step) next = cells[(i + step + cells.length) % cells.length];
+        else if (ev.key === 'Home') next = cells[0];
+        else if (ev.key === 'End') next = cells[cells.length - 1];
+        if (!next) return;
+        ev.preventDefault();
+        next.focus();
+        choose(next.dataset.uid);
+      });
+    });
+  }
+
+  /* ---- feature picker ---------------------------------------------------- */
+  /* Thirty-eight rows, grouped: the fourteen the report names, by what kind of
+     thing they detect, then the rest ranked by how many bases they win here. */
+  function paintList() {
+    const named = doc.features.filter(f => f.curated);
+    const ranked = doc.features.filter(f => !f.curated)
+      .sort((a, b) => b.argmax_bases - a.argmax_bases || b.peak - a.peak);
+    /* a window can store thousands of tracks; the list offers the ones that win
+       the most bases, and the panel finds any of the rest at a base */
+    const rest = ranked.slice(0, LIST_UNNAMED);
+    const full = shown.length >= MAX_LANES;
+
+    const row = f => {
+      const on = shown.includes(f.id);
+      const slot = slotOf(f.id);
+      const silent = !(f.peak > 0);
+      const cov = doc.n_bases ? Math.min(100, Math.round(f.n_fired / doc.n_bases * 100)) : 0;
+      const cls = ['fl-row', f.curated ? 'named' : '', on ? 'on' : '', silent ? 'silent' : ''].join(' ');
+      const detail = silent
+        ? '<span class="fpeak zero">silent here</span>'
+        : `<span class="fpeak">${num(f.peak)}</span>`;
+      const covTitle = silent ? 'no base fired in this window'
+        : `${fmt(f.n_fired)} of ${fmt(doc.n_bases)} bases fired (${cov}%)`;
+      /* the checkbox itself is the lane's colour swatch once it is on */
+      const tint = on ? ` style="accent-color:${featColour(slot)}"` : '';
+      const what = f.label
+        ? esc(f.label)
+        : `<span class="un">wins ${fmt(f.argmax_bases)} bp of the strip</span>`;
+      return `<label class="${cls}" title="${esc(covTitle)}">` +
+        `<input type="checkbox" data-id="${f.id}"${on ? ' checked' : ''}${!on && full ? ' disabled' : ''}${tint}>` +
+        `<span class="fid">f${f.id}</span>` +
+        `<span class="fname">${what}</span>` +
+        detail +
+        `<span class="fcov"><i style="width:${cov}%"></i></span>` +
+        `</label>`;
+    };
+
+    let namedRows = '';
+    const seen = new Set();
+    for (const kind of KIND_ORDER.concat(['other'])) {
+      const bucket = named.filter(f => (KIND_ORDER.includes(f.kind) ? f.kind : 'other') === kind);
+      if (!bucket.length) continue;
+      bucket.sort((a, b) => b.peak - a.peak);
+      namedRows += `<p class="fl-sub">${esc(KIND_GROUP[kind] || 'other')}</p>`;
+      namedRows += bucket.map(f => { seen.add(f.id); return row(f); }).join('');
+    }
+
+    /* the fold state is the reader's, not something a repaint gets to reset */
+    if (restOpen === null) restOpen = false;
+    const open = restOpen;
+    list.innerHTML =
+      `<div class="fl-bar"><span class="fl-count"><b>${shown.length}</b> of ${MAX_LANES} lanes${
+        full ? ' <span class="full">· full</span>' : ''}</span>` +
+      `<button type="button" class="fl-reset">Reset to the report's six</button></div>` +
+      (namedRows
+        ? `<div class="fl-group"><p class="fl-h">Named in the report <span class="n">${named.length}</span>` +
+          `<span class="why">the report measures what each one detects</span></p>` +
+          `<div class="fl-rows">${namedRows}</div></div>`
+        : '') +
+      (rest.length
+        ? `<details class="fl-group"${open ? ' open' : ''}><summary>Unnamed <span class="n">${
+            rest.length}${ranked.length > rest.length ? ' of ' + fmt(ranked.length) : ''}</span>` +
+          `<span class="why">ranked by bases won in this window</span></summary>` +
+          `<div class="fl-rows">${rest.map(row).join('')}</div></details>`
+        : '') +
+      `<p class="fl-note">Numbers are this window's peak activation for the feature; the bar is the share of
+       the window's bases where it fired at all. Up to ${fmt(MAX_LANES)} lanes at a time${
+        ranked.length > rest.length
+          ? `. This window stores tracks for ${fmt(doc.features.length)} features in all &mdash; <em>Top features</em> finds any of them at a base`
+          : ''}.</p>`;
+
+    const details = list.querySelector('details.fl-group');
+    if (details) details.addEventListener('toggle', () => { restOpen = details.open; });
+
+    list.querySelectorAll('input').forEach(box => {
+      box.addEventListener('change', () => {
+        const id = Number(box.dataset.id);
+        if (box.checked) {
+          if (shown.length < MAX_LANES) shown.push(id); else box.checked = false;
+        } else shown = shown.filter(f => f !== id);
+        /* the list is repainted, so hand keyboard focus back to the same row */
+        const refocus = document.activeElement === box;
+        paintList(); render();
+        if (refocus) {
+          const again = list.querySelector(`input[data-id="${id}"]`);
+          if (again) again.focus({ preventScroll: true });
+        }
+      });
+    });
+    const reset = list.querySelector('.fl-reset');
+    if (reset) reset.addEventListener('click', () => {
+      shown = asList(doc.default_features).slice(0, MAX_LANES).filter(id => trackOf(id));
+      paintList(); render();
+    });
+  }
+
+  /* ---- titles ------------------------------------------------------------ */
+  /* Windows are named by the gene they cover and what they show. The sampler
+     anchor is still drawn in the plot, but it is not what a window is called. */
+  const shortList = names => names.slice(0, 2).join(', ') + (names.length > 2 ? '…' : '');
+  const docGeneLabel = () => {
+    const sense = doc.annotations && doc.annotations.sense;
+    const own = asList(sense && sense.genes).map(g => g.gene_name || g.gene_id).filter(Boolean);
+    if (own.length) return shortList(own);
+    const meta = index && index.windows.find(w => w.window_uid === doc.window_uid);
+    const listed = asList(meta && meta.genes_sense);
+    if (listed.length) return shortList(listed);
+    if (doc.gene_report && doc.gene_report.gene_id) return doc.gene_report.gene_id;
+    return doc.window_uid;
+  };
+  const windowTitleText = () => doc.featured && doc.gene_report
+    ? `${doc.gene_report.gene_id}, the contested donor`
+    : `${docGeneLabel()}${doc.selection ? ' — ' + selKind(doc.selection).tag.toLowerCase() : ''}`;
+  const ariaLabel = () =>
+    `${windowTitleText()}. Genome browser: a per-base top-feature strip, an annotation register and ${
+      shown.length} activation lane${shown.length === 1 ? '' : 's'} over ${fmt(nBasesShown())} of ${
+      fmt(doc.n_bases)} base pairs.`;
+
+  function paintHeading() {
+    if (doc.featured && doc.gene_report) {
+      title.innerHTML = `${esc(doc.gene_report.gene_id)}<span class="ft-dim">, the contested donor</span>`;
+    } else {
+      const k = doc.selection ? selKind(doc.selection) : null;
+      title.innerHTML = esc(docGeneLabel()) + (k
+        ? ` <span class="ft-kind" data-flag="${k.flag ? '1' : '0'}">${esc(k.tag)}</span>` : '');
+    }
+    const bits = [`<span class="uid">${esc(doc.window_uid)}</span>`,
+      `<span class="species">${esc(doc.species_binomial)}</span>`];
+    if (doc.family) bits.push(esc(doc.family));
+    bits.push(esc(doc.assembly));
+    bits.push(`${fmt(doc.n_bases)} bp`);
+    sub.innerHTML = bits.join('<span class="sep">/</span>') +
+      (doc.split ? `<span class="split">${esc(doc.split)}</span>` : '');
+    paintCase();
+  }
+
+  /* What this window shows, as one island: the reason it was chosen, and — for the
+     windows where a feature marks a site the annotation does not carry — the
+     verdict the independent registers returned. A window with nothing to check
+     shows only the reason, never an unanswered question. */
+  function paintCase() {
+    if (!caseEl) return;
+    const sel = doc.selection;
+    const u = doc.usage_check;
+    if (!sel && !doc.note) { caseEl.hidden = true; caseEl.innerHTML = ''; return; }
+
+    const k = sel ? selKind(sel) : null;
+    /* doc.note repeats the headline as its own first clause, so showing both
+       would stutter; the headline is the chip and the rest is the description. */
+    const why = (sel && sel.why) || doc.note || '';
+    let html = '<p class="fc-head">' +
+      (k ? `<span class="fc-kind" data-flag="${k.flag ? '1' : '0'}">${esc(k.tag)}</span>` : '') +
+      (sel && sel.headline ? `<span class="fc-headline">${esc(sel.headline)}</span>` : '') +
+    '</p>' +
+    (why ? `<p class="fc-why">${esc(why)}</p>` : '');
+
+    if (u) {
+      const v = usageVerdict(u);
+      const rows = asList(u.registers).map(r => {
+        const result = USAGE_RESULT[r.result] || String(r.result || '');
+        return '<li>' +
+          `<span class="ur-name">${esc(r.name)}</span>` +
+          `<span class="ur-role">${esc(r.role)}</span>` +
+          `<span class="ur-result" data-result="${esc(r.result || '')}">${esc(result)}</span>` +
+          `<span class="ur-detail">${esc(r.detail)}</span>` +
+        '</li>';
+      }).join('');
+      html += '<div class="usage-check">' +
+        '<p class="uc-head">' +
+          `<span class="uc-verdict" data-verdict="${esc(u.verdict || 'untested')}">${esc(v.tag)}</span>` +
+          `<span class="uc-headline">${esc(u.headline || v.gloss)}</span>` +
+        '</p>' +
+        (u.summary ? `<p class="uc-summary">${esc(u.summary)}</p>` : '') +
+        (rows ? `<ul class="uc-registers">${rows}</ul>` : '') +
+        '<p class="uc-foot">Usage is asked of registers independent of the annotation the ' +
+        'tracks were scored against, and never of the model. ' +
+        '<a href="#sources">What each register is</a>.</p>' +
+      '</div>';
+    }
+
+    caseEl.innerHTML = html;
+    caseEl.hidden = false;
+  }
+
+  /* ---- window loading ---------------------------------------------------- */
+  let gen = 0;
+  async function load(uid) {
+    const mine = ++gen;
+    if (!cache.has(uid)) {
+      host.setAttribute('aria-busy', 'true');
+      region.textContent = `Loading ${uid}…`;
+      let payload;
+      try {
+        const r = await fetch(`data/sae/${uid}.json`);
+        if (!r.ok) throw new Error(`window ${uid} unavailable`);
+        payload = await r.json();
+      } finally {
+        if (mine === gen) host.removeAttribute('aria-busy');
+      }
+      /* a slower earlier click must not overwrite a later one */
+      if (mine !== gen) return;
+      cache.set(uid, payload);
+    }
+    if (mine !== gen) return;
+    doc = cache.get(uid);
+    vectors = new Map();
+    tracks = new Map();
+    runIdx.clear();
+    featureIndex = new Map(asList(doc.features).map(f => [f.id, f]));
+    buildArgmaxLut();
+    buildLaneMarks();
+    shown = asList(doc.default_features).slice(0, MAX_LANES).filter(id => trackOf(id));
+    start = 0; end = doc.n_bases;
+    /* the cursor opens on the base the window was chosen for, so the readout
+       already describes the finding without pinning it and blocking hover */
+    cursor = doc.selection && doc.selection.position != null ? doc.selection.position
+      : (doc.anchor && doc.anchor.offset != null ? doc.anchor.offset : Math.floor(doc.n_bases / 2));
+    pinned = null;
+    paintHeading();
+    picker.querySelectorAll('[data-uid]').forEach(b => {
+      const on = b.dataset.uid === uid;
+      b.setAttribute('aria-checked', String(on));
+      b.tabIndex = on ? 0 : -1;
+    });
+    if (findBtn) {
+      const marks = findingMarks(doc.selection);
+      findBtn.hidden = !marks.length;
+      findBtn.textContent = marks.length > 1 ? 'Show the shift' : 'Zoom to change locus';
+      findBtn.title = marks.length
+        ? `Frame ${marks.length > 1 ? 'both positions' : 'base ' + fmt(marks[0].base + 1)}, the reason this window is here`
+        : '';
+    }
+    paintList();
+    render();
+    tools.forEach(b => { if (b) b.disabled = false; });
+  }
+
+  /* ---- top-features panel ------------------------------------------------
+     Orders the features firing at the cursor by reading the window's stored
+     tracks at that base. Clicking a row gives the feature a lane. */
+  let panel = null, panelDock = null, panelBase = null, findBtn = null;
+  let controls = null, controlsDock = null;
+  const PANEL_ROWS = 8;
+  /* The window stores a full track for every feature that reaches a base's top
+     `panel_depth` anywhere in it, so the strongest `panel_depth` at any base are
+     all present and scanning the stored tracks gives the true ordering there.
+     The data states the rule; asking for more rows than it guarantees is the one
+     case where the panel has to qualify what it shows. */
+  const storedDepth = () => {
+    const c = doc && doc.coverage;
+    const d = c && Number(c.panel_depth);
+    return Number.isFinite(d) && d > 0 ? d : 0;
+  };
+  function topAt(base) {
+    const rows = [];
+    for (const f of doc.features) {
+      const v = valueAt(f, base);
+      if (v > 0) rows.push({ id: f.id, v, f });
+    }
+    rows.sort((a, b) => b.v - a.v);
+    /* The claim holds when the panel asks for no more rows than the store
+       guarantees; otherwise it says only what it can see. */
+    const depth = storedDepth();
+    return { rows: rows.slice(0, PANEL_ROWS), nz: rows.length,
+             whole: depth > 0 && PANEL_ROWS <= depth };
+  }
+
+  /* ---- floating docks ----------------------------------------------------
+     Both movable surfaces — the top-features panel and the lanes dock — are
+     positioned inside .feat-stage rather than the viewport, so they scroll away
+     with the figure instead of following the reader down the page. A drag is
+     clamped to the stage, and a remembered position that no longer falls inside
+     it is discarded rather than restoring a panel where it cannot be reached. */
+  const DOCK_KEY = 'botanic1.sae.docks';
+  const docks = [];
+  const stageEl = () => host.closest('.feat-stage') || host.closest('figure') || host.parentElement;
+
+  function readDocks() {
+    try {
+      const raw = sessionStorage.getItem(DOCK_KEY);
+      const parsed = raw ? JSON.parse(raw) : null;
+      return (parsed && typeof parsed === 'object') ? parsed : {};
+    } catch (error) { return {}; }
+  }
+  function writeDocks(next) {
+    try { sessionStorage.setItem(DOCK_KEY, JSON.stringify(next)); } catch (error) { /* private mode */ }
+  }
+  function saveDock(d) {
+    const all = readDocks();
+    const was = all[d.name] || {};
+    const entry = { open: !d.el.hidden, left: was.left, top: was.top };
+    if (d.floating() && !d.el.hidden) {
+      const box = d.el.getBoundingClientRect(), stage = stageEl().getBoundingClientRect();
+      entry.left = Math.round(box.left - stage.left);
+      entry.top = Math.round(box.top - stage.top);
+    }
+    all[d.name] = entry;
+    writeDocks(all);
+  }
+
+  function makeDock(spec) {
+    const el = spec.el;
+    const d = {
+      el, name: spec.name, toggle: spec.toggle, rest: spec.rest,
+      floating: () => getComputedStyle(el).position === 'absolute'
+    };
+    /* place, in stage coordinates, clamped so the whole surface stays reachable */
+    d.place = (left, top) => {
+      if (!d.floating()) { el.style.maxHeight = ''; return; }
+      const stage = stageEl().getBoundingClientRect();
+      /* let it measure against the whole stage, clamp, then cap to what is left
+         below wherever it landed, so its body scrolls instead of hanging out */
+      el.style.maxHeight = `${Math.max(160, Math.round(stage.height - 20))}px`;
+      const w = el.offsetWidth || 300, h = el.offsetHeight || 200;
+      const x = Math.max(0, Math.min(Math.max(0, stage.width - w), left));
+      const y = Math.max(0, Math.min(Math.max(0, stage.height - h), top));
+      el.style.left = `${Math.round(x)}px`;
+      el.style.top = `${Math.round(y)}px`;
+      el.style.right = 'auto';
+      el.style.bottom = 'auto';
+      el.style.maxHeight = `${Math.max(160, Math.round(stage.height - y - 12))}px`;
+    };
+    d.inStage = (left, top) => {
+      const stage = stageEl().getBoundingClientRect();
+      const w = el.offsetWidth || 300, h = el.offsetHeight || 200;
+      return left >= -2 && top >= -2 && left <= stage.width - w + 2 && top <= stage.height - h + 2;
+    };
+    d.setOpen = open => {
+      el.hidden = !open;
+      if (d.toggle) d.toggle.setAttribute('aria-expanded', String(open));
+      if (open) {
+        const saved = readDocks()[d.name] || {};
+        requestAnimationFrame(() => {
+          if (saved.left != null && saved.top != null && d.inStage(saved.left, saved.top)) {
+            d.place(saved.left, saved.top);
+          } else d.settle();
+        });
+      }
+      saveDock(d);
+    };
+    d.settle = () => {
+      if (!d.floating() || el.hidden) return;
+      const at = d.rest(d);
+      if (at) d.place(at.left, at.top);
+    };
+
+    const handle = el.querySelector(spec.handle);
+    if (handle) {
+      let grab = null;
+      handle.addEventListener('pointerdown', ev => {
+        if (ev.target.closest('button')) return;
+        if (!d.floating()) return;
+        const box = el.getBoundingClientRect(), stage = stageEl().getBoundingClientRect();
+        grab = { dx: ev.clientX - box.left, dy: ev.clientY - box.top, sx: stage.left, sy: stage.top };
+        handle.classList.add('dragging');
+        handle.setPointerCapture(ev.pointerId);
+      });
+      handle.addEventListener('pointermove', ev => {
+        if (!grab) return;
+        d.place(ev.clientX - grab.dx - grab.sx, ev.clientY - grab.dy - grab.sy);
+      });
+      const drop = ev => {
+        if (!grab) return;
+        grab = null;
+        handle.classList.remove('dragging');
+        if (handle.hasPointerCapture(ev.pointerId)) handle.releasePointerCapture(ev.pointerId);
+        saveDock(d);
+      };
+      handle.addEventListener('pointerup', drop);
+      handle.addEventListener('pointercancel', drop);
+    }
+    docks.push(d);
+    return d;
+  }
+
+  /* When there is room the stage grows a right gutter and the lanes dock rests
+     in it, beside the canvas rather than on top of it. Narrower than that it is
+     an overlay the reader can drag, and narrower still it drops into the flow. */
+  const GUTTER_AT = 1081;
+  function syncGutter() {
+    const stage = stageEl();
+    const want = !!(controls && controlsDock && !controls.hidden
+      && controlsDock.floating() && window.innerWidth >= GUTTER_AT);
+    if (stage.classList.contains('stage-docked') !== want) {
+      stage.classList.toggle('stage-docked', want);
+      return true;
+    }
+    return false;
+  }
+
+  /* a resting place inside the stage that keeps clear of the other open dock */
+  function restIn(d, corner) {
+    const stage = stageEl().getBoundingClientRect();
+    const w = d.el.offsetWidth || 300, h = d.el.offsetHeight || 220;
+    const pad = 14;
+    const top = stage.height - h - pad;
+    let y = corner === 'top' ? 92 : Math.max(92, top);
+    const other = docks.find(o => o !== d && o.floating() && !o.el.hidden);
+    let x = Math.max(pad, stage.width - w - pad);
+    if (other) {
+      const ob = other.el.getBoundingClientRect();
+      const oy = ob.top - stage.top, oh = ob.height;
+      const overlaps = y < oy + oh && y + h > oy;
+      if (overlaps) {
+        if (oy + oh + pad + h <= stage.height) y = oy + oh + pad;
+        else if (oy - pad - h >= 0) y = oy - pad - h;
+        else x = Math.max(pad, ob.left - stage.left - w - pad);
+      }
+    }
+    return { left: x, top: y };
+  }
+
+  /* the top-features panel: the page ships the shell, the fallback keeps it
+     working if it ever does not */
+  function ensurePanel() {
+    if (panel) return;
+    const stage = stageEl();
+    panel = document.getElementById('feat-panel');
+    if (!panel) { panel = document.createElement('aside'); panel.id = 'feat-panel'; }
+    panel.className = 'fp feat-float';
+    panel.setAttribute('role', 'group');
+    panel.setAttribute('aria-label', 'Top features at the inspected base');
+    panel.hidden = true;
+    panel.innerHTML =
+      '<div class="fp-head"><h3 id="fp-title">Top features here</h3>' +
+      '<span class="fp-at"></span>' +
+      '<button type="button" class="fp-close" aria-label="Close the top-features panel">&times;</button></div>' +
+      '<p class="fp-src"></p><ol class="fp-rows"></ol><p class="fp-foot"></p>';
+    /* absolute positioning has to resolve against the stage, and the figure
+       clips its own overflow, so the panel lives as the stage's last child;
+       in static flow that also puts it after the lanes dock */
+    stage.appendChild(panel);
+
+    let toggle = document.getElementById('feat-panel-toggle');
+    if (!toggle) {
+      toggle = document.createElement('button');
+      toggle.type = 'button';
+      toggle.id = 'feat-panel-toggle';
+      toggle.setAttribute('aria-controls', 'feat-panel');
+      toggle.textContent = 'Top features';
+      (document.querySelector('.feat-tools') || stage).appendChild(toggle);
+    }
+    toggle.disabled = false;
+    panelDock = makeDock({
+      el: panel, name: 'panel', toggle, handle: '.fp-head',
+      rest: d => restIn(d, 'bottom')
+    });
+    toggle.addEventListener('click', () => {
+      panelDock.setOpen(panel.hidden);
+      if (!panel.hidden) paintPanel(panelBase === null ? cursor : panelBase);
+    });
+    panel.querySelector('.fp-close').addEventListener('click', () => {
+      panelDock.setOpen(false);
+      toggle.focus();
+    });
+    panel.addEventListener('keydown', ev => {
+      if (ev.key === 'Escape') { panelDock.setOpen(false); toggle.focus(); }
+    });
+    const saved = readDocks().panel || {};
+    if (saved.open) { panelDock.setOpen(true); paintPanel(cursor); }
+  }
+
+  /* the lanes dock: colouring mode and the feature checklist, beside the canvas
+     instead of a screen away from it */
+  function ensureControls() {
+    if (controls) return;
+    controls = document.getElementById('feat-controls');
+    if (!controls) return;
+    controls.classList.add('feat-float');
+    let close = controls.querySelector('.dock-close');
+    const head = controls.querySelector('.dock-title');
+    if (head && !close) {
+      close = document.createElement('button');
+      close.type = 'button';
+      close.className = 'dock-close';
+      close.setAttribute('aria-label', 'Close the lanes panel');
+      close.innerHTML = '&times;';
+      head.appendChild(close);
+    }
+    const toggle = document.getElementById('feat-controls-toggle');
+    if (toggle) toggle.disabled = false;
+    controlsDock = makeDock({
+      el: controls, name: 'controls', toggle, handle: '.dock-title',
+      rest: d => {
+        if (stageEl().classList.contains('stage-docked')) {
+          const stage = stageEl().getBoundingClientRect();
+          return { left: stage.width - (d.el.offsetWidth || 336) - 7, top: 0 };
+        }
+        return restIn(d, 'top');
+      }
+    });
+    const wrapped = controlsDock.setOpen;
+    controlsDock.setOpen = open => {
+      controls.hidden = !open;
+      syncGutter();
+      wrapped(open);
+    };
+    if (toggle) toggle.addEventListener('click', () => controlsDock.setOpen(controls.hidden));
+    if (close) close.addEventListener('click', () => {
+      controlsDock.setOpen(false);
+      if (toggle) toggle.focus();
+    });
+    const saved = readDocks().controls || {};
+    controlsDock.setOpen(saved.open !== false);
+  }
+
+  function paintPanel(base) {
+    panelBase = base;
+    if (!panel || panel.hidden || base == null || !doc) return;
+    const { rows, nz, whole } = topAt(base);
+    panel.querySelector('.fp-at').textContent = `base ${fmt(base + 1)} · ${esc(doc.seq[base] || '')}`;
+    panel.querySelector('.fp-src').innerHTML = whole
+      ? `The <b>${fmt(rows.length)}</b> strongest features at this base, out of all <b>8,192</b>.` +
+        ` This window carries a complete track for every feature that reaches a base's top ${
+          fmt(storedDepth())} anywhere in it, so these are the true strongest here;` +
+        ` <b>${fmt(nz)}</b> of the ${fmt(doc.features.length)} it stores fire at this base.`
+      : `The <b>${fmt(rows.length)}</b> strongest at this base among the <b>${
+          fmt(doc.features.length)}</b> features this window stores.`;
+
+    const list = panel.querySelector('.fp-rows');
+    if (!rows.length) {
+      list.innerHTML = '<li><p class="fp-empty">No feature fired at this base.</p></li>';
+    } else {
+      list.innerHTML = rows.map(r => {
+        const on = shown.includes(r.id);
+        const colour = on ? featColour(slotOf(r.id)) : 'var(--rule-2)';
+        const name = r.f.label ? esc(r.f.label) : '<span class="un">unnamed</span>';
+        const tip = on ? 'Remove this lane' : 'Give this feature a lane';
+        return `<li><button type="button" class="fp-row" data-id="${r.id}" aria-pressed="${
+          on}" title="${esc(tip)}">` +
+          `<span class="chip" style="background:${colour}"></span>` +
+          `<span class="fid">f${r.id}</span><span class="fnm">${name}</span>` +
+          `<span class="fv">${num(r.v)}</span></button></li>`;
+      }).join('');
+      list.querySelectorAll('.fp-row').forEach(btn => btn.addEventListener('click', () => {
+        const id = Number(btn.dataset.id);
+        if (shown.includes(id)) shown = shown.filter(f => f !== id);
+        else if (shown.length < MAX_LANES) shown.push(id);
+        else return;
+        paintList(); render();
+      }));
+    }
+    const gid = topGlobal(base);
+    panel.querySelector('.fp-foot').innerHTML =
+      (gid >= 0 ? `Rank 0 of all 8,192 here: <b>f${gid}</b>` : 'Nothing in the dictionary fired here') +
+      `<span class="hint">Click a row to add or remove its lane, up to ${fmt(MAX_LANES)}.</span>`;
+  }
+
+  /* A window that will not load is reported in the readout. The plot keeps the
+     window it already has rather than being replaced by a fallback paragraph,
+     which would detach the svg that render() writes into. */
+  function choose(uid) {
+    load(uid).catch(error => {
+      host.removeAttribute('aria-busy');
+      if (doc) paintRegion(G ? G.plotW / nBasesShown() : 1);
+      readout.setAttribute('aria-live', 'polite');
+      readout.innerHTML = `<div class="ro-block ro-fail"><p class="ro-lab">Window unavailable</p>` +
+        `<div class="ro-empty">${esc(uid)} could not be loaded. The window on screen is unchanged;` +
+        ` pick another window or reload the page.</div></div>`;
+      if (window.console) console.error(error);
+    });
+  }
+
+  /* ---- boot -------------------------------------------------------------- */
+  try {
+    const r = await fetch('data/sae/index.json');
+    if (!r.ok) throw new Error('feature index unavailable');
+    index = await r.json();
+
+    paintPicker();
+    ensurePanel();
+    ensureControls();
+
+    svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('role', 'group');
+    svg.setAttribute('tabindex', '0');
+    svg.setAttribute('aria-describedby', 'feat-help');
+    svg.setAttribute('aria-label', 'Feature browser, loading');
+    host.appendChild(svg);
+
+    /* the finding is a handful of bases in 8,191; one click frames it */
+    findBtn = document.createElement('button');
+    findBtn.type = 'button';
+    findBtn.id = 'feat-finding';
+    findBtn.hidden = true;
+    findBtn.addEventListener('click', () => {
+      const marks = findingMarks(doc.selection);
+      if (!marks.length) return;
+      const bases = marks.map(m => m.base);
+      const lo = Math.min(...bases), hi = Math.max(...bases);
+      const span = Math.max(240, (hi - lo) * 4);
+      const centre = (lo + hi) / 2;
+      cursor = marks[0].base;
+      pinned = null;
+      setView(centre - span / 2, centre + span / 2);
+      focus(cursor, true);
+    });
+    (document.querySelector('.feat-tools') || host.parentElement).appendChild(findBtn);
+
+    document.getElementById('feat-in').addEventListener('click', () => zoom(0.5));
+    document.getElementById('feat-out').addEventListener('click', () => zoom(2));
+    document.getElementById('feat-full').addEventListener('click', () => setView(0, doc.n_bases));
+    modeBtns.forEach(b => b.addEventListener('click', () => {
+      mode = b.dataset.mode;
+      modeBtns.forEach(o => o.setAttribute('aria-pressed', String(o === b)));
+      render();
+    }));
+
+    const pointBase = ev => {
+      const p = svg.createSVGPoint();
+      p.x = ev.clientX; p.y = ev.clientY;
+      const q = p.matrixTransform(svg.getScreenCTM().inverse());
+      if (q.x < L || q.x > W - R) return null;
+      const base = Math.floor(start + (q.x - L) / G.plotW * nBasesShown());
+      return base >= 0 && base < doc.n_bases ? base : null;
+    };
+    const midBase = () => {
+      const [a, b] = Array.from(pointers.values());
+      const p = svg.createSVGPoint();
+      p.x = (a.x + b.x) / 2; p.y = (a.y + b.y) / 2;
+      const q = p.matrixTransform(svg.getScreenCTM().inverse());
+      return start + (Math.min(Math.max(q.x, L), W - R) - L) / G.plotW * nBasesShown();
+    };
+    const spread = () => {
+      const [a, b] = Array.from(pointers.values());
+      return Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+    };
+
+    svg.addEventListener('pointerdown', ev => {
+      pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+      if (pointers.size === 2) {
+        drag = null;
+        const at = midBase();
+        pinch = { d0: spread(), width: nBasesShown(), at, frac: (at - start) / Math.max(1, nBasesShown()) };
+      } else if (pointers.size === 1) {
+        drag = { px: ev.clientX, start, end, moved: false };
+      }
+    });
+    svg.addEventListener('pointermove', ev => {
+      if (pointers.has(ev.pointerId)) pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+      if (pinch && pointers.size >= 2) {
+        const scale = pinch.d0 / spread();
+        const width = Math.max(40, Math.min(doc.n_bases, pinch.width * scale));
+        const f = Math.min(Math.max(pinch.frac, 0), 1);
+        setViewSoon(pinch.at - width * f, pinch.at + width * (1 - f));
+        return;
+      }
+      if (drag) {
+        const delta = ev.clientX - drag.px;
+        if (Math.abs(delta) > 5) drag.moved = true;
+        if (drag.moved) {
+          svg.setPointerCapture(ev.pointerId);
+          const shift = -delta / svg.getBoundingClientRect().width * W / G.plotW * (drag.end - drag.start);
+          setViewSoon(drag.start + shift, drag.end + shift);
+          return;
+        }
+      }
+      const base = pointBase(ev);
+      if (base !== null && base !== cursor && pinned === null) { cursor = base; focus(base, false); }
+    });
+    svg.addEventListener('pointerup', ev => {
+      if (drag && !drag.moved) {
+        const base = pointBase(ev);
+        if (base !== null) {
+          pinned = pinned === base ? null : base;
+          cursor = base;
+          focus(pinned === null ? cursor : pinned, true);
+        }
+      }
+      pointers.delete(ev.pointerId);
+      if (pointers.size < 2) pinch = null;
+      drag = null;
+      if (svg.hasPointerCapture(ev.pointerId)) svg.releasePointerCapture(ev.pointerId);
+    });
+    svg.addEventListener('pointercancel', ev => {
+      pointers.delete(ev.pointerId);
+      if (pointers.size < 2) pinch = null;
+      drag = null;
+    });
+    svg.addEventListener('pointerleave', () => {
+      if (!drag) focus(pinned === null ? cursor : pinned, false);
+    });
+    svg.addEventListener('keydown', ev => {
+      if (ev.key === '+' || ev.key === '=') { ev.preventDefault(); zoom(0.5); return; }
+      if (ev.key === '-' || ev.key === '_') { ev.preventDefault(); zoom(2); return; }
+      if (ev.key === 'Home') { ev.preventDefault(); setView(0, doc.n_bases); return; }
+      if (ev.key === 'Escape') {
+        if (pinned !== null) { ev.preventDefault(); pinned = null; focus(cursor, true); }
+        return;
+      }
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        ev.preventDefault();
+        pinned = pinned === cursor ? null : cursor;
+        focus(pinned === null ? cursor : pinned, true);
+        return;
+      }
+      if (!['ArrowLeft', 'ArrowRight'].includes(ev.key)) return;
+      ev.preventDefault();
+      const step = ev.shiftKey ? Math.max(1, Math.round(nBasesShown() / 20)) : 1;
+      cursor = Math.max(0, Math.min(doc.n_bases - 1, cursor + (ev.key === 'ArrowLeft' ? -step : step)));
+      pinned = cursor;
+      if (cursor < start || cursor > end) {
+        const width = nBasesShown();
+        setView(cursor - width / 2, cursor + width / 2);
+      } else focus(cursor, true);
+    });
+
+    if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => render());
+    let settleRaf;
+    const settleDocks = () => {
+      cancelAnimationFrame(settleRaf);
+      settleRaf = requestAnimationFrame(() => docks.forEach(d => {
+        if (!d.floating() || d.el.hidden) return;
+        const box = d.el.getBoundingClientRect(), stage = stageEl().getBoundingClientRect();
+        d.place(box.left - stage.left, box.top - stage.top);
+      }));
+    };
+    new ResizeObserver(settleDocks).observe(stageEl());
+    window.addEventListener('resize', () => { syncGutter(); docks.forEach(d => d.settle()); settleDocks(); });
+
+    let raf;
+    new ResizeObserver(() => { cancelAnimationFrame(raf); raf = requestAnimationFrame(render); }).observe(host);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => render());
+    await load(index.windows[0].window_uid);
+  } catch (error) {
+    fail(error);
+  }
+
+  /* The (?) beside the lane toggle. Hover opens it for a reader with a mouse and
+     click pins it open, because a hover-opened panel that a click then shut would
+     make the click look broken. Only a pinned panel survives the pointer leaving.
+     The close is delayed a beat because the pointer has to cross a gap to reach
+     the panel it just opened. Nothing here depends on a loaded window, so the
+     button is live from the first paint. */
+  function wireHelp() {
+    const btn = document.getElementById('feat-help-toggle');
+    const panel = document.getElementById('feat-help-panel');
+    if (!btn || !panel) return;
+    let shut, pinned = false;
+    const set = open => {
+      clearTimeout(shut);
+      panel.hidden = !open;
+      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    };
+    const close = () => { if (!pinned) shut = setTimeout(() => set(false), 220); };
+    const unpin = () => { pinned = false; set(false); };
+    btn.addEventListener('click', () => {
+      pinned = !pinned;
+      set(pinned);
+    });
+    btn.addEventListener('pointerenter', () => set(true));
+    btn.addEventListener('focus', () => set(true));
+    btn.addEventListener('pointerleave', close);
+    panel.addEventListener('pointerenter', () => clearTimeout(shut));
+    panel.addEventListener('pointerleave', close);
+    /* A click inside the panel must not shut it, but a click anywhere else must. */
+    document.addEventListener('pointerdown', ev => {
+      if (!panel.hidden && !panel.contains(ev.target) && ev.target !== btn) unpin();
+    });
+    document.addEventListener('keydown', ev => {
+      if (ev.key === 'Escape' && !panel.hidden) { unpin(); btn.focus(); }
+    });
+  }
+  function fail(error) {
+    if (region) region.textContent = 'Feature windows';
+    if (readout) readout.textContent = 'The precomputed windows could not be loaded. Reload the page to try again.';
+    host.innerHTML = '<p class="feat-fallback">The interpretability results are described in the report.</p>';
+    if (window.console) console.error(error);
+  }
+})();

assets/sae-sources.css

@@ -0,0 +1,182 @@
+/* Annotation-sources block. Kept in its own file so the figure's stylesheet and this
+   one are never edited together. Tokens only, so both themes follow the site. */
+
+.src-table td { vertical-align: top; }
+.src-acc { color: var(--ink-3); font-size: 10.5px; }
+
+.src-badge { display: inline-block; font: 600 11px var(--sans); padding: 3px 9px;
+  border-radius: 999px; white-space: nowrap; border: 1px solid var(--rule-2); }
+.src-badge.cur { background: var(--paper-2); color: var(--ink-2); }
+.src-badge.up { background: var(--lime-2); color: var(--ink); border-color: var(--lime); }
+
+.src-details { margin: 14px 0 0; border-top: 1px solid var(--rule); }
+.src-details > summary { font: 600 13.5px var(--sans); color: var(--ink); cursor: pointer;
+  padding: 11px 0; list-style: none; display: flex; align-items: baseline; gap: 8px; }
+.src-details > summary::-webkit-details-marker { display: none; }
+.src-details > summary::before { content: '+'; font-family: var(--mono); color: var(--ink-3);
+  font-weight: 400; width: 1ch; }
+.src-details[open] > summary::before { content: '\2212'; }
+.src-details > summary:hover { color: var(--accent); }
+.src-details > ul { margin: 0 0 14px; padding-left: 22px; }
+.src-details > ul > li { margin-bottom: 8px; max-width: var(--measure); }
+
+.src-block { margin: 0 0 16px; padding-left: 12px; border-left: 2px solid var(--rule); }
+.src-block .label { margin: 0 0 5px; text-transform: none; letter-spacing: 0.04em;
+  font-size: 12px; color: var(--ink); }
+.src-block p.small { margin: 0 0 6px; max-width: var(--measure); }
+
+@media (max-width: 640px) {
+  .src-details > summary { padding: 13px 0; }
+  .src-badge { font-size: 10.5px; padding: 2px 7px; }
+}
+
+/* An absent value is named rather than left blank, so a reader can tell "no value
+   published" from "we forgot to fill this in". */
+.na { color: var(--ink-3); font-family: var(--sans); font-size: 12px; font-style: italic; }
+td.n .na { font-size: 11px; }
+
+/* A lane chosen because it matches a category best in this window, as against a
+   feature the report names: the softer third line says which. */
+#feat-plot text.lane-fit { fill: var(--ink-3); font-family: var(--mono); font-size: 9.5px; font-style: italic; }
+
+/* ---- the usage register ------------------------------------------------------
+   Under the browser: what registers independent of the annotation found at the
+   site a feature marked. It is deliberately a quieter register than the plot —
+   nothing here is a measurement of the model — and the three verdicts are
+   distinguished by weight rather than by hue, so `untested` can never read as a
+   weaker `used`. Tokens only, so both themes follow the site. */
+
+/* Nested in the case island, so it carries a rule off the island's top edge
+   rather than a box of its own. */
+.feat-case .usage-check {
+  margin: 11px 0 0; padding: 11px 0 0; border-top: 1px solid var(--rule);
+}
+
+.uc-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0 0 6px; }
+.uc-verdict {
+  font: 600 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
+  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
+  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-2);
+}
+.uc-verdict[data-verdict="used"] {
+  background: var(--lime-2); border-color: var(--lime); color: var(--ink);
+}
+.uc-verdict[data-verdict="untested"] {
+  background: none; border-style: dashed; color: var(--ink-3);
+}
+.uc-headline { font: 600 13px var(--sans); color: var(--ink); }
+.uc-summary { margin: 0 0 9px; font: 13.5px/1.55 var(--serif); color: var(--ink-2); max-width: 74ch; }
+
+.uc-registers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
+  background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
+/* Register, what it answers and what it said on one line; the detail beneath on
+   its own. A four-column grid squeezes the detail to a ribbon at this width. */
+.uc-registers > li {
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
+  background: var(--card); padding: 8px 11px;
+}
+.ur-detail { flex: 1 0 100%; }
+.ur-name { font: 600 11.5px var(--sans); color: var(--ink); }
+.ur-role { font: 10px var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }
+.ur-result {
+  font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--ink-3); white-space: nowrap;
+}
+.ur-result[data-result="used"] { color: var(--accent-ink); }
+.ur-result[data-result="not consulted"] { font-style: italic; font-weight: 400; }
+.ur-detail { font: 11.5px/1.45 var(--sans); color: var(--ink-2); }
+
+.uc-foot { margin: 8px 0 0; font: 11px var(--sans); color: var(--ink-3); }
+
+/* The picker chip. It repeats the verdict so the choice between windows is made
+   with it in view, not after loading one. */
+.win-card .wv {
+  justify-self: start; font: 600 8.5px var(--mono); letter-spacing: 0.12em;
+  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
+  border: 1px solid var(--rule-2); color: var(--ink-3); background: var(--paper-2);
+}
+.win-card .wv[data-verdict="used"] {
+  background: var(--lime-2); border-color: var(--lime); color: var(--ink);
+}
+.win-card .wv[data-verdict="untested"] { background: none; border-style: dashed; }
+
+/* The verdict key beside the register table. */
+.usage-key { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px;
+  margin: 0 0 14px; max-width: var(--measure); }
+.usage-key dt {
+  font: 600 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
+  padding: 3px 9px; border-radius: 999px; justify-self: start; white-space: nowrap;
+  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-2);
+}
+.usage-key dt[data-verdict="used"] { background: var(--lime-2); border-color: var(--lime); color: var(--ink); }
+.usage-key dt[data-verdict="untested"] { background: none; border-style: dashed; color: var(--ink-3); }
+.usage-key dd { margin: 0; font: 12.5px/1.5 var(--sans); color: var(--ink-2); align-self: center; }
+
+@media (max-width: 640px) {
+  .uc-registers > li { padding: 9px 10px; }
+  .usage-key { grid-template-columns: 1fr; gap: 2px 0; }
+  .usage-key dd { margin-bottom: 8px; }
+}
+
+/* ---- the case island --------------------------------------------------------
+   What this window is, inside the figure, where the interaction help used to
+   sit: the kind, the headline, the reason the window was chosen, and — where a
+   feature marks a site the annotation does not carry — the usage verdict. The
+   interaction help now lives behind the (?) beside the lane toggle. */
+
+.feat-case {
+  margin: 0; padding: 13px 24px 14px;
+  border-top: 1px solid var(--rule); background: var(--paper-2);
+}
+.fc-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0 0 5px; }
+.fc-kind {
+  font: 600 9px var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
+  color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 999px;
+  padding: 3px 8px; white-space: nowrap;
+}
+.fc-kind[data-flag="1"] { color: var(--ink-2); border-color: var(--sel-flag); }
+.fc-headline { font: 600 13.5px var(--sans); color: var(--ink); }
+.fc-why {
+  margin: 0; max-width: 82ch;
+  font: 13.5px/1.55 var(--serif); color: var(--ink-2);
+}
+
+/* ---- the (?) help disclosure ---------------------------------------------- */
+
+/* The panel hangs off the tools group, so it needs the positioning context here
+   rather than in the figure's own stylesheet. .feat-browser clips its overflow,
+   which is what keeps the panel inside the figure. */
+.feat-tools { position: relative; }
+.feat-tools button.help {
+  min-width: 34px; padding: 3px 9px; font: 600 14px var(--sans); border-radius: 999px;
+}
+#feat-help-toggle[aria-expanded="true"] {
+  background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg);
+}
+.feat-help-panel {
+  position: absolute; z-index: 6; right: 0; top: calc(100% + 9px);
+  /* .feat-browser is a container-query container, so the panel is sized against
+     the figure it must stay inside rather than against the viewport; the
+     subtrahend is the heading's own left+right padding. */
+  width: min(46ch, calc(100cqw - 48px));
+  padding: 13px 15px 14px;
+  background: var(--card); color: var(--ink-2);
+  border: 1px solid var(--rule-2); border-radius: 8px;
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.14);
+  font: 12px/1.5 var(--sans);
+}
+.feat-help-panel .fh-title {
+  margin: 0 0 7px; font: 600 12px var(--sans); color: var(--ink);
+}
+.feat-help-panel p { margin: 0 0 8px; max-width: none; }
+.feat-help-panel p:last-child { margin-bottom: 0; }
+.feat-help-panel .fh-lanes {
+  padding-top: 8px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 11.5px;
+}
+.feat-help-panel em { font-style: italic; color: var(--ink-2); }
+
+@media (max-width: 640px) {
+  .feat-case { padding: 12px 18px 13px; }
+  .feat-help-panel { right: 0; width: min(46ch, calc(100cqw - 36px)); }
+  .feat-tools button.help { min-width: 40px; }
+}

assets/sae-tables.js

@@ -0,0 +1,211 @@
+/* The static tables beside the browser: the named features and their published
+   evidence, and the annotation sources. All of it is read out of
+   data/sae/index.json.
+
+   Captions are authored in sae-features.html as the first child of each table,
+   so filling a table keeps the caption that is already there. */
+(async function () {
+  const named = document.getElementById('named-table');
+  const prov = document.getElementById('feat-prov');
+  const sources = document.getElementById('sources-body');
+  if (!named) return;
+
+  const esc = value => String(value ?? '').replace(/[&<>"']/g, ch =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]));
+
+  /* A caption has to stay the table's first child, so it is lifted out and put
+     back ahead of the generated head and body. */
+  const fill = (table, html) => {
+    const caption = table.querySelector('caption');
+    table.innerHTML = (caption ? caption.outerHTML : '') + html;
+  };
+
+  /* The report's own vocabulary for what a feature resolves. */
+  const LEVEL = {
+    site: 'base-level', range: 'region-level', motif: 'motif', pattern: 'pattern',
+  };
+
+  /* Reading order: the detectors the report validates against annotation, then
+     the cis-element motifs and repeat patterns, then the two candidates it
+     rejects. Anything the index adds later lands in a fourth group rather than
+     disappearing. */
+  const GROUPS = [
+    { title: 'Validated against annotation', ids: [4131, 2634, 586, 7708, 3930, 2618, 1200] },
+    { title: 'Cis-element motifs and repeat patterns', ids: [4567, 145, 5804, 1474, 5349] },
+    { title: 'Other named features', ids: [] },
+  ];
+  /* Best detector of its class in all four annotated genomes. */
+  const BEST_IN_CLASS = new Set([4131, 586, 7708]);
+
+  /* MCC gets its own numeric column, so it comes off the front of the evidence
+     string; the validation-selected threshold is stated once in the caption. */
+  function splitEvidence(text) {
+    const raw = String(text ?? '').trim();
+    const hit = /^MCC\s+([0-9.]+)/.exec(raw);
+    return { mcc: hit ? hit[1] : '' };
+  }
+
+  try {
+    const index = await (await fetch('data/sae/index.json')).json();
+    const s = index.sae;
+
+    prov.textContent = `${s.model_name}, layer ${s.layer}, ${s.d_sae} features, k = ${s.k}`;
+    prov.title = `${s.sae_id} · sha256 ${s.sae_sha256.slice(0, 16)}… · ${s.threshold_mode} threshold ${s.sae_threshold.toFixed(4)}`;
+
+    const features = new Map(Object.entries(index.curated_features)
+      .map(([id, f]) => [Number(id), f]));
+    const grouped = new Set(GROUPS.flatMap(g => g.ids));
+    GROUPS[GROUPS.length - 1].ids = [...features.keys()].filter(id => !grouped.has(id));
+
+    const row = id => {
+      const f = features.get(id);
+      const { mcc } = splitEvidence(f.evidence);
+      const label = String(f.label ?? '').replace(/\s*\(rejected\)$/, '');
+      return `<tr${BEST_IN_CLASS.has(id) ? ' class="ours"' : ''}>` +
+        `<td class="num">f${id}</td><td>${esc(label)}</td>` +
+        `<td>${esc(LEVEL[f.kind] || f.kind)}</td>` +
+        // A dash, not a blank: an empty cell reads as an oversight. The title
+        // still says which kind of absence this is.
+        `<td class="n">${mcc ? esc(mcc)
+            : '<span class="na" title="the report publishes no MCC for this feature">&ndash;</span>'}</td>` +
+        '</tr>';
+    };
+
+    fill(named,
+      '<thead><tr><th>Feature</th><th>Named for</th><th>Level</th>' +
+      '<th class="n">MCC</th></tr></thead>' +
+      GROUPS.filter(g => g.ids.length).map(g =>
+        `<tbody><tr><th colspan="4" scope="colgroup">${g.title}</th></tr>` +
+        g.ids.filter(id => features.has(id)).map(row).join('') + '</tbody>').join(''));
+
+
+    if (sources) {
+      if (index.sources) renderSources(sources, index.sources);
+      else renderPendingSources(sources, index.windows);
+    }
+
+  } catch (error) {
+    fill(named, '<tbody><tr><td>The feature table could not be loaded.</td></tr></tbody>');
+    if (window.console) console.error(error);
+  }
+
+
+  /* The verified releases, URLs, citations and licences, once index.sources
+     carries them. */
+  function renderSources(host, src) {
+    // Two registers per species: the annotation the per-base tracks were built from,
+    // and the most current annotation on the SAME assembly. A newer assembly cannot be
+    // overlaid on these coordinates, so it is named separately rather than used.
+    const badge = r => r.currency === 'upgraded'
+      ? '<span class="src-badge up">newer release applied</span>'
+      : '<span class="src-badge cur">already current</span>';
+
+    let html = `<p>${esc(src.intro)}</p>`;
+
+    html += '<div class="tablewrap"><table class="src-table">' +
+      '<caption>' + esc(src.caption) + '</caption>' +
+      '<thead><tr><th>Species</th><th>Assembly</th><th>Tracks built from</th>' +
+      '<th>Gene models shown</th><th>Status</th></tr></thead><tbody>';
+    for (const r of src.species) {
+      html += '<tr>' +
+        `<td><em>${esc(r.binomial)}</em></td>` +
+        `<td><span class="num">${esc(r.assembly)}</span><br><span class="src-acc num">${esc(r.assembly_accession)}</span></td>` +
+        `<td>${esc(r.annotation_build)}</td>` +
+        `<td>${r.url ? `<a href="${esc(r.url)}">${esc(r.annotation_current)}</a>` : esc(r.annotation_current)}` +
+          `${r.released ? `<br><span class="src-acc num">released ${esc(r.released)}</span>` : ''}</td>` +
+        `<td>${badge(r)}</td>` +
+      '</tr>';
+    }
+    html += '</tbody></table></div>';
+
+    html += '<details class="src-details"><summary>Per-species detail, licences and what supersedes each assembly</summary>';
+    for (const r of src.species) {
+      html += `<div class="src-block"><p class="label">${esc(r.binomial)}</p>`;
+      if (r.currency_note) html += `<p class="small">${esc(r.currency_note)}</p>`;
+      if (r.superseded_by) html += `<p class="small"><strong>Superseded by:</strong> ${esc(r.superseded_by)}</p>`;
+      if (r.licence) html += `<p class="small"><strong>Licence:</strong> ${esc(r.licence)}</p>`;
+      if (r.citation) html += `<p class="small">${esc(r.citation)}</p>`;
+      html += '</div>';
+    }
+    html += '</details>';
+
+    if (src.usage_registers) html += renderUsageRegisters(src.usage_registers);
+
+    if (src.notes && src.notes.length) {
+      html += '<details class="src-details"><summary>Notes on assembly currency and coordinates</summary><ul>' +
+        src.notes.map(n => `<li>${esc(n)}</li>`).join('') + '</ul></details>';
+    }
+    if (src.citations && src.citations.length) {
+      html += '<details class="src-details"><summary>Citations</summary><ul class="small">' +
+        src.citations.map(c => `<li>${esc(c)}</li>`).join('') + '</ul></details>';
+    }
+    host.innerHTML = html;
+  }
+
+  /* The registers that answer whether a site is used, as opposed to whether an
+     annotation carries it. They are a separate table because they are a separate
+     question, and because each one covers only Arabidopsis: the verdict a window
+     shows is only ever as wide as the register behind it. */
+  function renderUsageRegisters(reg) {
+    let html = '<h3 id="usage-registers">Usage registers</h3>' +
+      `<p>${esc(reg.intro)}</p>`;
+
+    if (reg.verdicts && reg.verdicts.length) {
+      html += '<dl class="usage-key">' + reg.verdicts.map(v =>
+        `<dt data-verdict="${esc(v.key)}">${esc(v.label)}</dt><dd>${esc(v.gloss)}</dd>`
+      ).join('') + '</dl>';
+    }
+
+    html += '<div class="tablewrap"><table class="src-table usage-table">' +
+      `<caption>${esc(reg.caption)}</caption>` +
+      '<thead><tr><th>Register</th><th>Answers</th><th>Version</th><th>Covers</th>' +
+      '</tr></thead><tbody>';
+    for (const r of reg.rows) {
+      html += '<tr>' +
+        `<td>${r.url ? `<a href="${esc(r.url)}">${esc(r.name)}</a>` : esc(r.name)}</td>` +
+        `<td>${esc(r.role)}</td>` +
+        `<td><span class="num">${esc(r.version)}</span></td>` +
+        `<td>${esc(r.scope)}</td>` +
+      '</tr>';
+    }
+    html += '</tbody></table></div>';
+
+    html += '<details class="src-details"><summary>What each register contains, and what it ' +
+      'cannot answer</summary>';
+    for (const r of reg.rows) {
+      html += `<div class="src-block"><p class="label">${esc(r.name)}</p>` +
+        `<p class="small">${esc(r.content)}</p>` +
+        (r.caveat ? `<p class="small"><strong>Cannot answer:</strong> ${esc(r.caveat)}</p>` : '') +
+        (r.citation ? `<p class="small">${esc(r.citation)}</p>` : '') +
+      '</div>';
+    }
+    html += '</details>';
+
+    if (reg.note) html += `<p class="note">${esc(reg.note)}</p>`;
+    return html;
+  }
+
+  /* Until then: the assemblies the windows themselves name, and nothing more. */
+  function renderPendingSources(host, windows) {
+    const rows = new Map();
+    for (const w of windows) {
+      const key = `${w.species_binomial}|${w.assembly}`;
+      rows.set(key, (rows.get(key) || 0) + 1);
+    }
+    const body = [...rows.entries()]
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(([key, n]) => {
+        const [binomial, assembly] = key.split('|');
+        return `<tr><td><em>${esc(binomial)}</em></td><td class="num">${esc(assembly)}</td>` +
+          `<td class="n">${n}</td></tr>`;
+      }).join('');
+    host.innerHTML =
+      '<div class="tablewrap"><table><caption>The four annotated genomes, with the windows ' +
+      'each contributes. The <em>AT1G65170</em> window is cut from TAIR10 and carries the ' +
+      'Araport11 gene model the report\'s figure draws.</caption>' +
+      '<thead><tr><th>Species</th><th>Assembly</th><th class="n">Windows</th></tr></thead>' +
+      `<tbody>${body}</tbody></table></div>` +
+      '<p class="note">The annotation release, download URL, citation and licence behind each ' +
+      'of these assemblies are being verified and will be listed here.</p>';
+  }
+})();

assets/sae.css

@@ -0,0 +1,745 @@
+/* Sparse-feature window browser. Sequence, annotations and per-base activations
+   come from data/sae/<window>.json; every colour is a token so dark mode is free.
+
+   Two registers are kept apart on purpose. Measurements — activations read out of
+   the dictionary — are drawn in dark, saturated hues on the card. Annotations are
+   drawn inside a recessed panel, in pale washes and mid-tone ticks, so a glance
+   can never mistake an annotation for a number the model produced. */
+
+/* ---------------------------------------------------------------- tokens --- */
+:root {
+  /* Measurement palette. Twelve hues, one per available lane, so a feature keeps
+     one colour everywhere on the page and no two lanes ever share one. The first
+     six are the default lane set and are the furthest apart in hue *and*
+     lightness, which is what one-pixel bars need; slots 7-12 only appear once a
+     reader adds lanes by hand. */
+  --feat-1: #14539b;   /* blue      */
+  --feat-2: #c9490c;   /* orange    */
+  --feat-3: #0b7550;   /* green     */
+  --feat-4: #c0187c;   /* magenta   */
+  --feat-5: #94711b;   /* gold      */
+  --feat-6: #4a5162;   /* slate     */
+  --feat-7: #7629bb;   /* violet    */
+  --feat-8: #09708c;   /* cyan      */
+  --feat-9: #9c1734;   /* crimson   */
+  --feat-10: #56701c;  /* olive     */
+  --feat-11: #7a4a1e;  /* umber     */
+  --feat-12: #5c3a52;  /* plum      */
+  --feat-none: #ccd3ca;
+
+  /* Annotation register: pale region washes, mid-tone site ticks, a muted brown
+     for gene extents. Deliberately lower in chroma and darker only in the ticks,
+     which have to survive being one pixel wide. */
+  --ann-panel: #fafbf7;
+  --ann-panel-rule: #e2e7dd;
+  --ann-intergenic: #f0f1eb;
+  --ann-cds: #c7dcc2;
+  --ann-utr5: #d6cdec;
+  --ann-utr3: #eecdd7;
+  --ann-intron: #e7dfc6;
+  --ann-ncrna: #c6dee9;
+  --ann-tss: #3f77b8;
+  --ann-tis: #2f8878;
+  --ann-donor: #bb4a42;
+  --ann-acceptor: #8560ad;
+  --ann-stop: #bd7c2a;
+  --ann-tts: #6455a8;
+  --ann-gene: #9c8878;
+  --ann-gene-ink: #6d5348;
+
+  /* Sequence letters. --base-* is the readout's ink, on the card.
+     A letter in the strip sits on one of the twelve measurement hues, so each
+     base also has a light and a dark variant; the drawing code picks whichever
+     has more contrast against the cell it lands on. Both variants keep the
+     base's hue, so A/C/G/T stay identifiable either way. */
+  --base-a: #18813f; --base-c: #3b7fe0; --base-g: #b57405; --base-t: #d8433f; --base-n: #9aa4b0;
+  --base-a-lit: #9ce8b4; --base-c-lit: #b4daff; --base-g-lit: #ffd980;
+  --base-t-lit: #ffcbc4; --base-n-lit: #d8ded9;
+  --base-a-dim: #0a5a26; --base-c-dim: #14357e; --base-g-dim: #6b4a00;
+  --base-t-dim: #8a1010; --base-n-dim: #3b4247;
+
+  /* Figure furniture. */
+  --fig-grid: #dfe5dc;
+  --fig-axis: #b6c1b4;
+  /* Selected control. --ink and --lime both flip role between themes, so
+     ink-on-lime is a light-theme-only pairing and has to be tokenised. */
+  --sel-bg: var(--ink);
+  --sel-fg: var(--lime);
+  /* Picker chrome only: the accent shared by the three kinds where the features
+     and the annotation do not simply agree. Not used inside the plot, so it
+     cannot be confused with either register. */
+  --sel-flag: #b4571f;
+  --sel-quiet: #6f9264;
+  /* Annotation label ink: quiet enough to stay in the paler register, dark
+     enough to read on every region wash. */
+  --ann-ink: var(--ink-2);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --feat-1: #74aef0; --feat-2: #f79055; --feat-3: #45cba0; --feat-4: #f68ac4;
+    --feat-5: #dcb84a; --feat-6: #a9b0c2; --feat-7: #c193ef; --feat-8: #55c9e6;
+    --feat-9: #f0808f; --feat-10: #b2cd5f;
+    --feat-11: #d3a06b; --feat-12: #c49bbb;
+    --feat-none: #3a423b;
+    --ann-panel: #1a201c;
+    --ann-panel-rule: #2b332c;
+    --ann-intergenic: #202724;
+    --ann-cds: #31462f; --ann-utr5: #3a3150; --ann-utr3: #4a323d;
+    --ann-intron: #423b28; --ann-ncrna: #26414c;
+    --ann-tss: #6ea6dd; --ann-tis: #55b09c; --ann-donor: #de7d72;
+    --ann-acceptor: #a98cd2; --ann-stop: #d9a05a; --ann-tts: #9186d6;
+    --ann-gene: #a8917f; --ann-gene-ink: #c9b6a4;
+    --base-a: #5cc47f; --base-c: #7fb0ea; --base-g: #e8b452; --base-t: #f0847f; --base-n: #7c848d;
+    --fig-grid: #262d27; --fig-axis: #414a42;
+    --sel-bg: var(--lime); --sel-fg: #10160f;
+  --sel-flag: #d9944f; --sel-quiet: #6f9264;
+    --sel-flag: #d9944f; --sel-quiet: #6f9264;
+    --ann-ink: var(--ink-2);
+  }
+}
+:root[data-theme="dark"] {
+  --feat-1: #74aef0; --feat-2: #f79055; --feat-3: #45cba0; --feat-4: #f68ac4;
+  --feat-5: #dcb84a; --feat-6: #a9b0c2; --feat-7: #c193ef; --feat-8: #55c9e6;
+  --feat-9: #f0808f; --feat-10: #b2cd5f;
+  --feat-11: #d3a06b; --feat-12: #c49bbb;
+  --feat-none: #3a423b;
+  --ann-panel: #1a201c;
+  --ann-panel-rule: #2b332c;
+  --ann-intergenic: #202724;
+  --ann-cds: #31462f; --ann-utr5: #3a3150; --ann-utr3: #4a323d;
+  --ann-intron: #423b28; --ann-ncrna: #26414c;
+  --ann-tss: #6ea6dd; --ann-tis: #55b09c; --ann-donor: #de7d72;
+  --ann-acceptor: #a98cd2; --ann-stop: #d9a05a; --ann-tts: #9186d6;
+  --ann-gene: #a8917f; --ann-gene-ink: #c9b6a4;
+  --base-a: #5cc47f; --base-c: #7fb0ea; --base-g: #e8b452; --base-t: #f0847f; --base-n: #7c848d;
+  --fig-grid: #262d27; --fig-axis: #414a42;
+  --sel-bg: var(--lime); --sel-fg: #10160f;
+  --ann-ink: var(--ink-2);
+}
+
+/* ------------------------------------------------------- the browser shell --- */
+/* The stage is the positioning context for the two movable surfaces, so they
+   travel with the figure when the page scrolls instead of following the reader. */
+.feat-stage { position: relative; margin: 34px 0 26px; }
+.feat-stage > .feat-browser { margin: 0; }
+.feat-float { position: absolute; z-index: 4; }
+/* room beside the canvas for the lanes dock, when the page is wide enough */
+@media (min-width: 1081px) {
+  .feat-stage.stage-docked { padding-right: 350px; }
+}
+.feat-float[hidden] { display: none !important; }
+
+.feat-browser {
+  /* the figure narrows when the lanes dock takes a gutter, so its own blocks
+     respond to its width rather than the viewport's */
+  container-type: inline-size;
+  margin: 34px 0 26px;
+  border: 1px solid var(--rule-2);
+  border-radius: 12px;
+  background: var(--card);
+  overflow: hidden;
+  font-family: var(--sans);
+}
+.feat-heading {
+  display: flex; justify-content: space-between; align-items: flex-end;
+  gap: 14px 20px; flex-wrap: wrap;
+  padding: 17px 24px 15px;
+  border-bottom: 1px solid var(--rule);
+  background: var(--sage);
+}
+.feat-heading > div:first-child { min-width: 0; }
+.feat-browser h2 {
+  margin: 0 0 6px; font-size: 21px; line-height: 1.18; letter-spacing: -0.02em; max-width: 34ch;
+}
+.feat-browser h2 i, .feat-browser h2 em { font-style: italic; font-weight: 600; }
+.feat-browser h2 .ft-dim { color: var(--ink-2); font-weight: 600; }
+.feat-browser h2 .ft-kind {
+  display: inline-block; vertical-align: 3px;
+  font: 600 9.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--ink-2); background: var(--card);
+  border: 1px solid var(--rule-2); border-left: 3px solid var(--sel-quiet); border-radius: 4px;
+  padding: 2px 7px; margin-left: 6px; white-space: nowrap;
+}
+.feat-browser h2 .ft-kind[data-flag="1"] { border-left-color: var(--sel-flag); color: var(--ink); }
+.feat-heading > div:first-child > p {
+  margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5;
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px;
+}
+.feat-heading > div:first-child > p .species { font-style: italic; }
+.feat-heading > div:first-child > p .uid { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
+.feat-heading > div:first-child > p .sep { color: var(--rule-2); }
+.feat-heading > div:first-child > p .split {
+  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3);
+  border: 1px solid var(--rule-2); border-radius: 3px; padding: 1px 5px;
+}
+
+.feat-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.feat-tools button {
+  font: 600 12px var(--sans); color: var(--ink-2); background: var(--card);
+  border: 1px solid var(--rule-2); border-radius: 6px; padding: 7px 11px;
+  cursor: pointer; min-height: 34px;
+}
+.feat-tools button.zoom { font-size: 17px; min-width: 36px; padding: 3px 9px; }
+.feat-tools button:hover:not(:disabled) { background: var(--lime-2); color: var(--ink); border-color: var(--lime); }
+.feat-tools button:disabled { opacity: .4; cursor: default; }
+
+/* the coordinate bar between the heading and the plot */
+.feat-browser .feat-region {
+  margin: 0; padding: 11px 24px 3px; max-width: none;
+  font: 11px var(--sans); color: var(--ink-2);
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 16px;
+}
+.feat-region .fr-coord {
+  font: 500 12.5px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+.feat-region .fr-item { color: var(--ink-3); display: inline-flex; gap: 5px; align-items: baseline; }
+.feat-region .fr-item b { font-weight: 500; color: var(--ink-2); font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.feat-region .fr-key { text-transform: uppercase; letter-spacing: 0.1em; font-size: 9.5px; font-family: var(--mono); }
+
+.feat-scroll { overflow-x: hidden; padding: 2px 14px 0; }
+#feat-plot { min-width: 0; }
+#feat-plot svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
+
+/* ------------------------------------------------------------- plot marks --- */
+#feat-plot text { fill: var(--ink-2); font: 10.5px var(--mono); }
+#feat-plot .ruler-tick { font: 10px var(--mono); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
+#feat-plot .axis { stroke: var(--fig-axis); stroke-width: .8; fill: none; }
+#feat-plot .grid { stroke: var(--fig-grid); stroke-width: .7; fill: none; }
+
+/* register labels: two tiny keys in the gutter that name what each block is */
+#feat-plot .reg-lab { font: 500 9px var(--mono); letter-spacing: 0.13em; fill: var(--ink-3); }
+#feat-plot .reg-rule { stroke: var(--rule); stroke-width: .8; }
+
+/* the headline strip */
+#feat-plot .strip-frame { fill: none; stroke: var(--fig-axis); stroke-width: .8; }
+#feat-plot .seqletter { font: 600 10px var(--mono); }
+#feat-plot .nofire { fill: var(--feat-none); }
+
+/* the annotation panel. A recessed plate keeps annotations in their own register. */
+#feat-plot .ann-panel { fill: var(--ann-panel); stroke: var(--ann-panel-rule); stroke-width: .8; }
+#feat-plot .ann-band { }
+#feat-plot .ann-band-rule { stroke: var(--ann-panel-rule); stroke-width: .7; fill: none; }
+#feat-plot .ann-sitelab { font: 9px var(--sans); fill: var(--ink-3); }
+#feat-plot .ann-bandlab { font: 500 8.5px var(--sans); fill: var(--ann-ink); }
+#feat-plot .gene-line { stroke: var(--ann-gene); stroke-width: 1.1; fill: none; }
+#feat-plot .gene-label { font: italic 10px var(--sans); fill: var(--ann-gene-ink); }
+#feat-plot .gene-exon { fill: var(--ann-cds); stroke: var(--ann-gene); stroke-width: .7; }
+#feat-plot .strand-name { font: 500 10px var(--sans); fill: var(--ink-2); letter-spacing: 0.01em; }
+
+/* lanes: a measurement register, so names are ink and the hue lives in a key bar */
+#feat-plot .lane-key { stroke-linecap: round; }
+#feat-plot .lane-name { font: 600 11px var(--sans); fill: var(--ink); }
+#feat-plot .lane-name.lane-id-name { font-family: var(--mono); font-size: 11px; letter-spacing: -0.01em; }
+#feat-plot .lane-id { font: 500 10px var(--mono); fill: var(--ink-3); }
+#feat-plot .lane-max { font: 500 10px var(--mono); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
+#feat-plot .lane-max .u { fill: var(--ink-3); font-weight: 400; }
+#feat-plot .lane-silent { font: italic 10px var(--sans); fill: var(--ink-3); }
+#feat-plot .lane-base { stroke: var(--fig-axis); stroke-width: .8; fill: none; }
+#feat-plot .lane-base.silent { stroke: var(--rule); stroke-dasharray: 2 3; }
+#feat-plot .lane-stems { fill: none; stroke-width: 1.05; }
+#feat-plot .reg-note { font: 9.5px var(--sans); fill: var(--ink-3); }
+
+/* cursor and pin */
+#feat-plot .cursor { stroke: var(--ink-3); stroke-width: 1; fill: none; }
+#feat-plot .pin { stroke: var(--ink); stroke-width: 1.3; fill: none; }
+#feat-plot .pin-cap { fill: var(--ink); stroke: none; }
+
+/* The anchor is where the sampler looked, not an annotation of that base, so it
+   is outlined, never filled, and it is labelled as its own thing. */
+#feat-plot .anchor { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 2; }
+#feat-plot .anchor-lab { font: 500 9px var(--mono); letter-spacing: 0.1em; fill: var(--ink-2); }
+/* the base a window was chosen for: solid, to pair with the anchor's dashed outline */
+#feat-plot .finding { fill: var(--ink); stroke: none; }
+#feat-plot .finding.open { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; }
+#feat-plot .finding-bracket { fill: none; stroke: var(--ink); stroke-width: 1; }
+#feat-plot .finding-lab { font: 500 9px var(--mono); letter-spacing: 0.08em; fill: var(--ink); }
+
+/* halo, for the labels that sit over the plot at narrow widths */
+#feat-plot .halo { paint-order: stroke; stroke: var(--card); stroke-width: 3.4px; stroke-linejoin: round; }
+#feat-plot .halo-panel { paint-order: stroke; stroke: var(--ann-panel); stroke-width: 3.4px; stroke-linejoin: round; }
+
+/* scale bar: a bracket the width of one round number of bases */
+#feat-plot .scalebar { stroke: var(--ink-3); stroke-width: 1; fill: none; }
+#feat-plot .scale-pill { fill: var(--paper-2); stroke: var(--rule-2); stroke-width: .8; }
+#feat-plot .scale-lab { font: 500 9.5px var(--mono); fill: var(--ink-2); letter-spacing: 0.02em; }
+
+/* the global-mode key, shown only when the strip reads the whole dictionary */
+#feat-plot .gkey-id { font: 500 9.5px var(--mono); fill: var(--ink-2); }
+
+/* ---------------------------------------------------------------- readout --- */
+.feat-readout {
+  display: grid;
+  grid-template-columns: minmax(140px, 0.75fr) minmax(160px, 1fr) minmax(250px, 1.55fr);
+  gap: 0;
+  min-height: 104px;
+  padding: 0;
+  border-top: 1px solid var(--rule);
+  background: var(--paper-2);
+  font-family: var(--sans);
+  color: var(--ink-2);
+}
+.feat-readout .ro-block { padding: 12px 20px 13px; min-width: 0; }
+.feat-readout .ro-block + .ro-block { border-left: 1px solid var(--rule); }
+.feat-readout .ro-lab {
+  font: 500 9.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
+  color: var(--ink-3); margin: 0 0 7px; display: flex; align-items: baseline; gap: 8px;
+}
+.feat-readout .ro-lab > span:not(.pinned) {
+  text-transform: none; letter-spacing: 0.02em; font-family: var(--sans);
+  font-size: 10px; color: var(--ink-3);
+}
+.feat-readout .ro-lab .pinned {
+  text-transform: none; letter-spacing: 0.04em; color: var(--ink);
+  background: var(--lime); border-radius: 3px; padding: 1px 5px; font-size: 9px;
+}
+.feat-readout .ro-rows { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: baseline; }
+.feat-readout .k { font: 11px var(--sans); color: var(--ink-3); }
+.feat-readout .v { font: 500 12px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
+.feat-readout .v.dim { color: var(--ink-3); font-weight: 400; }
+.feat-readout .seqbase { font: 700 14px var(--mono); letter-spacing: 0.06em; }
+.feat-readout .ro-ann .ro-rows { grid-template-columns: auto 1fr; }
+.feat-readout .ro-ann .v { font-family: var(--sans); font-size: 11.5px; font-weight: 500; }
+.feat-readout .achip {
+  display: inline-flex; align-items: center; gap: 5px;
+  font: 500 11px var(--sans); color: var(--ink);
+}
+.feat-readout .achip i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); flex: none; }
+.feat-readout .achip i.site { width: 3px; height: 11px; border-radius: 0; border: 0; }
+.feat-readout .gname { font-style: italic; color: var(--ink-2); font-size: 11px; }
+.feat-readout .ro-act .rows { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; gap: 2px 9px; align-items: baseline; }
+.feat-readout .ro-act .chip { width: 9px; height: 9px; border-radius: 2px; align-self: center; }
+.feat-readout .ro-act .fid { font: 600 11px var(--mono); color: var(--ink); }
+.feat-readout .ro-act .fnm { font: 11.5px var(--sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.feat-readout .ro-act .fv { font: 600 12px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
+.feat-readout .ro-foot { margin-top: 8px; font: 11px var(--sans); color: var(--ink-3); }
+.feat-readout .ro-foot b { font: 600 11px var(--mono); color: var(--ink-2); }
+.feat-readout .ro-silent { margin-top: 7px; font: 11px var(--sans); color: var(--ink-3); }
+.feat-readout .ro-silent code {
+  background: none; padding: 0; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
+}
+.feat-readout .ro-empty { font: italic 11.5px var(--sans); color: var(--ink-3); }
+.feat-readout .ro-fail { grid-column: 1 / -1; }
+
+/* ------------------------------------------------------------- figcaption --- */
+.feat-browser figcaption {
+  margin: 0; padding: 11px 24px 12px; max-width: none;
+  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
+  gap: 6px 24px;
+  font: 11.5px var(--sans); color: var(--ink-2);
+  border-top: 1px solid var(--rule);
+  background: var(--card);
+}
+.feat-browser figcaption a { color: var(--ink-2); }
+.feat-browser figcaption #feat-prov { color: var(--ink-3); }
+.feat-browser figcaption > span:last-child { color: var(--ink-3); }
+.feat-browser .feat-fallback { margin: 18px 24px; font-size: 14px; font-family: var(--serif); }
+
+/* ------------------------------------------------------------- lanes dock --- */
+.feat-dock {
+  width: 336px; max-width: calc(100% - 24px);
+  background: var(--card); color: var(--ink);
+  border: 1px solid var(--rule-2); border-radius: 10px;
+  box-shadow: 0 8px 26px color-mix(in srgb, var(--ink) 16%, transparent);
+  font-family: var(--sans);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+}
+#feat-controls .dock-title {
+  margin: 0; max-width: none; flex: none;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 8px 8px 8px 13px;
+  font: 700 12.5px var(--sans); letter-spacing: -0.01em; color: var(--ink);
+  background: var(--sage); border-bottom: 1px solid var(--rule);
+  cursor: grab; touch-action: none; user-select: none;
+}
+#feat-controls .dock-title.dragging { cursor: grabbing; }
+.dock-close {
+  font: 400 16px/1 var(--sans); color: var(--ink-2); background: none; border: 0;
+  border-radius: 5px; width: 26px; height: 26px; flex: none; cursor: pointer;
+}
+.dock-close:hover { background: var(--paper-2); color: var(--ink); }
+.dock-body { padding: 4px 13px 12px; overflow-y: auto; min-height: 0; }
+#feat-controls .label { margin: 12px 0 6px; max-width: none; }
+#feat-controls .label:first-child { margin-top: 8px; }
+#feat-controls .seg { flex-wrap: wrap; }
+#feat-controls .seg button { font-size: 12px; padding: 6px 10px; }
+#feat-controls #feat-list { margin: 0; }
+#feat-controls .fl-rows { grid-template-columns: 1fr; gap: 0; }
+#feat-controls-toggle[aria-expanded="true"] { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
+
+/* ---------------------------------------------------------- window picker --- */
+.win-picker { margin: 16px 0 10px; display: grid; gap: 14px; max-width: 900px; }
+#win-picker.win-wide { max-width: 1120px; gap: 10px; }
+
+.win-hero {
+  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px;
+  text-align: left; width: 100%;
+  font: inherit; cursor: pointer;
+  background: var(--card); color: var(--ink);
+  border: 1px solid var(--rule-2); border-left: 4px solid var(--lime); border-radius: 8px;
+  padding: 10px 15px; max-width: 540px;
+}
+.win-hero:hover { background: var(--lime-2); border-color: var(--lime); }
+.win-hero[aria-checked="true"] { background: var(--sage-2); border-color: var(--rule-2); border-left-width: 6px; }
+.win-hero[aria-checked="true"] .wh-tag { color: var(--ink-2); }
+.win-hero .wh-tag {
+  grid-row: 1 / span 2; align-self: center;
+  font: 500 9.5px var(--mono); letter-spacing: 0.13em; color: var(--ink-3);
+  writing-mode: horizontal-tb;
+}
+.win-hero .wh-name { font: 700 15px var(--sans); letter-spacing: -0.01em; }
+.win-hero .wh-sub { font: 12px var(--sans); color: var(--ink-2); }
+.win-hero .wh-sub i { font-style: italic; }
+
+/* selection-shaped picker: species blocks of cards labelled by what the window
+   shows, used as soon as the window files carry a `selection` field */
+.win-block + .win-block { margin-top: 4px; }
+#win-picker .win-sp {
+  display: flex; align-items: baseline; gap: 9px; margin: 0 0 6px; max-width: none;
+  border-top: 1px solid var(--rule); padding-top: 8px;
+}
+#win-picker .win-block:first-of-type .win-sp { border-top: 0; padding-top: 0; }
+#win-picker .win-sp .b { font: italic 600 13px var(--sans); color: var(--ink); }
+#win-picker .win-sp .f { font: 10px var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
+.win-list { display: grid; grid-template-columns: repeat(var(--wl-cols, 5), minmax(0, 1fr)); gap: 7px; }
+.win-card {
+  display: grid; gap: 2px; text-align: left; font: inherit; cursor: pointer;
+  background: var(--card); color: var(--ink);
+  border: 1px solid var(--rule-2); border-left: 3px solid var(--rule-2); border-radius: 7px;
+  padding: 8px 11px;
+}
+.win-card[data-flag="0"] { border-left-color: var(--sel-quiet); }
+.win-card[data-flag="1"] { border-left-color: var(--sel-flag); }
+.win-card:hover { background: var(--lime-2); border-color: var(--lime); }
+.win-card[aria-checked="true"] { background: var(--sage-2); border-color: var(--rule-2); border-left-width: 6px; }
+.win-card .wk {
+  font: 500 8.5px var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3);
+}
+.win-card[data-flag="1"] .wk { color: var(--ink-2); font-weight: 600; }
+.win-card .wn { font: 600 13px var(--sans); letter-spacing: -0.01em; }
+.win-card .wh { font: 11.5px var(--sans); color: var(--ink-2); line-height: 1.35; }
+.win-card .wm {
+  font: 10.5px var(--mono); color: var(--ink-3); line-height: 1.4; letter-spacing: -0.01em;
+  overflow-wrap: anywhere;
+}
+.win-card .wu { font: 10px var(--mono); color: var(--ink-3); letter-spacing: -0.02em; }
+
+.win-matrix {
+  display: grid;
+  grid-template-columns: max-content repeat(var(--wm-cols, 5), minmax(0, 1fr));
+  gap: 5px 6px;
+  align-items: stretch;
+}
+.win-matrix .wm-corner { }
+.win-matrix .wm-head {
+  font: 500 9.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--ink-3); padding: 0 0 2px 2px; align-self: end;
+}
+.win-matrix .wm-sp {
+  display: grid; align-content: center; padding: 0 14px 0 2px; min-width: 0;
+}
+.win-matrix .wm-sp .b { font: italic 600 12.5px var(--sans); color: var(--ink); }
+.win-matrix .wm-sp .f { font: 10px var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
+.win-matrix .wm-cell {
+  font: inherit; cursor: pointer; text-align: left;
+  display: grid; align-content: center; gap: 1px;
+  background: var(--card); color: var(--ink);
+  border: 1px solid var(--rule-2); border-radius: 6px;
+  padding: 7px 9px; min-height: 38px;
+}
+.win-matrix .wm-cell:hover { background: var(--lime-2); border-color: var(--lime); }
+.win-matrix .wm-cell[aria-checked="true"] { background: var(--sel-bg); border-color: var(--sel-bg); }
+.win-matrix .wm-cell .wc-uid { font: 500 10.5px var(--mono); color: var(--ink-2); letter-spacing: -0.02em; }
+.win-matrix .wm-cell .wc-anchor { display: none; font: 600 11.5px var(--sans); }
+.win-matrix .wm-cell[aria-checked="true"] .wc-uid,
+.win-matrix .wm-cell[aria-checked="true"] .wc-anchor { color: var(--sel-fg); }
+/* site.css pairs ink-on-lime for a pressed segmented control, which inverts to
+   an illegible 1.1:1 in dark; the token pair restores it. */
+#feat-mode button[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-fg); }
+.win-matrix .wm-empty { border: 1px dashed var(--rule); border-radius: 6px; min-height: 38px; }
+
+/* --------------------------------------------------------- feature picker --- */
+#feat-list { margin: 16px 0 8px; }
+.fl-bar {
+  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
+  gap: 8px 16px; padding-bottom: 7px; border-bottom: 1px solid var(--rule-2);
+}
+.fl-count { font: 12px var(--sans); color: var(--ink-3); }
+.fl-count b { font: 600 13px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
+.fl-count .full { color: var(--ink-2); }
+.fl-reset {
+  font: 600 11.5px var(--sans); color: var(--ink-2); background: var(--card);
+  border: 1px solid var(--rule-2); border-radius: 999px; padding: 5px 12px; cursor: pointer;
+}
+.fl-reset:hover { background: var(--lime-2); border-color: var(--lime); color: var(--ink); }
+
+.fl-group { margin-top: 16px; }
+#feat-list .fl-group > .fl-h, #feat-list .fl-group > summary {
+  display: flex; align-items: baseline; gap: 9px;
+  font: 700 13px var(--sans); color: var(--ink); letter-spacing: -0.01em;
+  margin: 0 0 6px; list-style: none;
+}
+.fl-group > summary { cursor: pointer; }
+.fl-group > summary::-webkit-details-marker { display: none; }
+.fl-group > summary::before {
+  content: "";
+  width: 0; height: 0; flex: none; align-self: center;
+  border-left: 5px solid var(--ink-2); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
+}
+.fl-group[open] > summary::before { transform: rotate(90deg); }
+.fl-group > .fl-h .n, .fl-group > summary .n {
+  font: 500 10.5px var(--mono); color: var(--ink-3);
+  border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px;
+}
+.fl-group > .fl-h .why, .fl-group > summary .why { font: 400 11.5px var(--sans); color: var(--ink-3); }
+
+.fl-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 0 28px; }
+#feat-list .fl-sub {
+  grid-column: 1 / -1;
+  display: flex; align-items: center; gap: 9px;
+  font: 500 9.5px var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
+  color: var(--ink-3); margin: 9px 0 1px;
+}
+.fl-sub::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
+
+.fl-row {
+  display: grid;
+  grid-template-columns: 15px auto minmax(0, 1fr) auto 40px;
+  align-items: center; gap: 0 9px;
+  padding: 5px 2px; cursor: pointer;
+  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
+  font-family: var(--sans);
+}
+.fl-row:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
+.fl-row input { margin: 0; accent-color: var(--ink); justify-self: center; }
+.fl-row .fid { font: 500 11px var(--mono); color: var(--ink-2); }
+.fl-row.on .fid { color: var(--ink-2); }
+.fl-row .fname {
+  font: 12.5px var(--sans); color: var(--ink);
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.fl-row.named .fname { font-weight: 600; }
+.fl-row .fname .un { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; font-weight: 400; }
+.fl-row .fpeak {
+  font: 500 11px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.fl-row .fpeak.zero { color: var(--ink-3); font-style: italic; font-family: var(--sans); font-size: 10.5px; }
+.fl-row .fcov { height: 5px; background: color-mix(in srgb, var(--rule) 60%, transparent); border-radius: 3px; overflow: hidden; }
+.fl-row .fcov i { display: block; height: 100%; background: var(--ink-3); border-radius: 3px; min-width: 1px; }
+.fl-row.on .fcov i { background: var(--ink); }
+.fl-row.silent { color: var(--ink-3); }
+.fl-row.silent .fname { color: var(--ink-3); }
+.fl-row input:disabled { cursor: not-allowed; }
+.fl-row:has(input:disabled) { cursor: default; opacity: .55; }
+.fl-row:has(input:disabled):hover { background: none; }
+#feat-list .fl-note { margin: 10px 0 0; font: 11.5px var(--sans); color: var(--ink-3); }
+
+/* ---------------------------------------------------------------- legends --- */
+/* The annotation legend sits on the same recessed plate as the annotation panel
+   in the figure, so the reader learns the register once. Region washes fill the
+   first rows; the point sites are forced onto a fresh row so the two kinds of
+   annotation do not read as one undifferentiated run of chips. */
+.ann-legend {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(108px, max-content));
+  gap: 7px 20px;
+  margin: 20px 0 0;
+  padding: 27px 15px 12px;
+  border: 1px solid var(--rule); border-radius: 8px; background: var(--ann-panel);
+  font: 11.5px var(--sans); color: var(--ink-2);
+  position: relative;
+}
+.ann-legend::before {
+  content: "Annotation register — never a measurement";
+  position: absolute; top: 9px; left: 15px;
+  font: 500 9px var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3);
+}
+.ann-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+.ann-legend i {
+  width: 15px; height: 11px; flex: none; display: inline-block;
+  border: 1px solid var(--ann-panel-rule); border-radius: 2px;
+}
+.ann-legend i.site { width: 3px; height: 13px; border: 0; border-radius: 0; }
+/* the first point site starts a new row, whatever the column count */
+.ann-legend span:nth-child(7) { grid-column-start: 1; }
+
+/* ----------------------------------------------------------- narrow widths --- */
+@media (max-width: 1020px) {
+  .feat-readout { grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.6fr); }
+  .feat-readout .ro-act { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
+}
+@media (max-width: 860px) {
+  .win-matrix { grid-template-columns: repeat(var(--wm-cols, 5), minmax(0, 1fr)); gap: 5px; }
+  .win-matrix .wm-corner, .win-matrix .wm-head { display: none; }
+  .win-matrix .wm-sp {
+    grid-column: 1 / -1; padding: 8px 0 1px; display: flex; align-items: baseline; gap: 8px;
+    border-top: 1px solid var(--rule);
+  }
+  .win-matrix .wm-sp:first-of-type { border-top: 0; padding-top: 2px; }
+  .win-matrix .wm-cell { padding: 6px 6px; min-height: 40px; }
+  .win-matrix .wm-cell .wc-uid { display: none; }
+  .win-matrix .wm-cell .wc-anchor { display: block; font-size: 11px; line-height: 1.15; }
+  .ann-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 700px) {
+  /* full-bleed the figure: at 420 px the page gutter is a third of the plot */
+  .feat-browser {
+    margin-left: -28px; margin-right: -28px; margin-top: 26px;
+    border-radius: 0; border-left: 0; border-right: 0;
+  }
+  .feat-heading { padding: 15px 18px 13px; gap: 12px; }
+  .feat-browser h2 { font-size: 19px; }
+  .feat-browser .feat-region { padding: 10px 18px 2px; gap: 2px 12px; }
+  .feat-region .fr-coord { font-size: 11.5px; }
+  .feat-scroll { padding: 2px 4px 0; }
+  .feat-readout { grid-template-columns: 1fr 1fr; min-height: 0; }
+  .feat-readout .ro-block { padding: 10px 15px; }
+  .feat-readout .ro-rows { gap: 2px 10px; }
+  .feat-readout .ro-ann { border-left: 1px solid var(--rule); }
+  .feat-readout .ro-act { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
+  .feat-browser figcaption { padding: 11px 18px 12px; }
+  .feat-tools button { min-height: 40px; }
+  .feat-tools button.zoom { min-width: 44px; font-size: 19px; }
+  .fl-rows { grid-template-columns: 1fr; gap: 0; }
+  .fl-row { grid-template-columns: 17px auto minmax(0, 1fr) auto 32px; padding: 7px 2px; }
+  .win-hero { padding: 10px 13px; }
+}
+/* Between a phone and a wide screen the five cards of a species would wrap to a
+   second row, doubling the block's height; narrower columns keep one row. */
+@media (max-width: 1080px) and (min-width: 621px) {
+  .win-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
+  .win-card { padding: 7px 9px; }
+  .win-card .wn { font-size: 12px; }
+  /* the tag already says what the headline says in three words, so at this width
+     the evidence line is the one worth the space */
+  .win-card .wh { display: none; }
+  .win-card .wm { font-size: 10px; }
+}
+@media (max-width: 620px) {
+  /* the reason a window earns its place is long prose; on a narrow screen it
+     stays in the button's title and aria-label instead of on the card */
+  #win-picker.win-wide { max-width: none; }
+  .win-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
+  .win-card { padding: 7px 9px; }
+  /* on a phone a card is the gene and the kind; the headline, the evidence and
+     the uid stay in its title and aria-label, and the note under the figure
+     carries the full reasoning once a window is chosen */
+  .win-card .wh, .win-card .wm, .win-card .wu { display: none; }
+  .win-card .wn { font-size: 12.5px; line-height: 1.2; }
+  .win-card .wk { font-size: 8px; }
+  /* five columns still fit if the anchor names are allowed to wrap */
+  .win-matrix { gap: 4px; }
+  .win-matrix .wm-cell { padding: 5px 5px; min-height: 42px; }
+  .win-matrix .wm-cell .wc-anchor { font-size: 10px; line-height: 1.15; white-space: normal; }
+  .win-hero { grid-template-columns: 1fr; gap: 1px; }
+  .win-hero .wh-tag { grid-row: auto; }
+  .win-hero .wh-asm { display: none; }
+}
+@media (max-width: 460px) {
+  .ann-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
+}
+
+/* ------------------------------------------- floating top-features panel --- */
+/* Reads the strongest features at the cursor, so a reader can find a feature
+   that has no lane yet and give it one. Floats over the page at wide widths,
+   docks under the readout when there is no room to float. */
+#feat-panel-toggle[aria-expanded="true"] { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
+
+.fp {
+  z-index: 5;
+  width: 300px; max-width: calc(100% - 24px);
+  background: var(--card); color: var(--ink);
+  border: 1px solid var(--rule-2); border-radius: 10px;
+  box-shadow: 0 8px 26px color-mix(in srgb, var(--ink) 18%, transparent);
+  font-family: var(--sans);
+  overflow: hidden;
+}
+.fp-head {
+  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 8px;
+  padding: 8px 8px 8px 12px; background: var(--sage); border-bottom: 1px solid var(--rule);
+  cursor: grab; touch-action: none; user-select: none;
+}
+.fp-head.dragging { cursor: grabbing; }
+#feat-panel .fp-head h3 { margin: 0; font: 700 12.5px var(--sans); letter-spacing: -0.01em; }
+.fp-at { font: 500 10.5px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
+.fp-grip {
+  grid-row: 1; width: 12px; height: 12px; opacity: .5;
+  background:
+    radial-gradient(circle at 2px 2px, currentColor 1px, transparent 1.2px) 0 0 / 5px 5px;
+  color: var(--ink-3);
+}
+.fp-close {
+  font: 400 16px/1 var(--sans); color: var(--ink-2); background: none; border: 0;
+  border-radius: 5px; width: 26px; height: 26px; cursor: pointer;
+}
+.fp-close:hover { background: var(--paper-2); color: var(--ink); }
+#feat-panel .fp-src {
+  margin: 0; padding: 7px 12px 6px;
+  font: 10.5px var(--sans); color: var(--ink-3); line-height: 1.35;
+  border-bottom: 1px solid var(--rule);
+}
+#feat-panel .fp-src b { font: 500 10px var(--mono); color: var(--ink-2); }
+#feat-panel .fp-rows { margin: 0; padding: 4px 6px; list-style: none; max-height: 268px; overflow-y: auto; }
+#feat-panel .fp-rows li { margin: 0; }
+.fp-row {
+  display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; align-items: center;
+  gap: 0 8px; width: 100%; text-align: left;
+  font: inherit; background: none; border: 0; border-radius: 5px;
+  padding: 5px 6px; cursor: pointer;
+}
+.fp-row:hover { background: var(--paper-2); }
+.fp-row .chip { width: 9px; height: 9px; border-radius: 2px; background: var(--rule-2); }
+.fp-row[aria-pressed="true"] .chip { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
+.fp-row .fid { font: 600 11px var(--mono); color: var(--ink); }
+.fp-row .fnm {
+  font: 11.5px var(--sans); color: var(--ink-2);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.fp-row .fnm .un { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; }
+.fp-row .fv { font: 600 11.5px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
+.fp-row[aria-pressed="true"] .fnm { color: var(--ink); }
+#feat-panel .fp-empty { padding: 12px; margin: 0; font: italic 11.5px var(--sans); color: var(--ink-3); }
+#feat-panel .fp-foot {
+  margin: 0; padding: 8px 12px 10px; border-top: 1px solid var(--rule);
+  background: var(--paper-2); font: 10.5px var(--sans); color: var(--ink-3); line-height: 1.4;
+}
+#feat-panel .fp-foot b { font: 600 10.5px var(--mono); color: var(--ink-2); }
+#feat-panel .fp-foot .hint { display: block; margin-top: 3px; }
+
+/* No room to float: both surfaces drop into the flow under the figure, in the
+   order the reader needs them — the figure and its readout, then the lanes,
+   then the top-features panel. */
+@media (max-width: 900px) {
+  .feat-float {
+    position: static !important;
+    width: auto; max-width: none; inset: auto !important;
+    border-radius: 0; border-left: 0; border-right: 0;
+    box-shadow: none;
+  }
+  .feat-dock, .fp { border-top: 1px solid var(--rule-2); border-bottom: 0; margin-top: 0; }
+  .fp-head, #feat-controls .dock-title { cursor: default; }
+  .fp-grip { display: none; }
+  /* in the flow they still scroll internally: 32 ranked rows and 38 lane rows
+     would otherwise add two screens of page */
+  #feat-panel .fp-rows { max-height: 320px; }
+  #feat-controls .dock-body { max-height: 460px; }
+  #feat-panel .fp-rows, #feat-panel .fp-src, #feat-panel .fp-foot { max-width: 620px; }
+  #feat-controls .dock-body { max-width: 640px; }
+  #feat-controls .fl-rows { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 0 24px; }
+}
+
+/* ------------------------------------------------- figure-width responses --- */
+@container (max-width: 1020px) {
+  .feat-readout { grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.6fr); }
+  .feat-readout .ro-act { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
+}
+@container (max-width: 700px) {
+  .feat-readout { grid-template-columns: 1fr 1fr; min-height: 0; }
+  .feat-readout .ro-ann { border-left: 1px solid var(--rule); }
+}
+@container (max-width: 430px) {
+  .feat-readout { grid-template-columns: 1fr; }
+  .feat-readout .ro-ann { border-left: 0; border-top: 1px solid var(--rule); }
+}

causal-variants.html

@@ -13,7 +13,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>
-<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html" aria-current="page">Causal variants</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
+<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html" aria-current="page">Causal variants</a><a href="sae-features.html">SAE features</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
 <div class="page">
 
 <main class="prose">

corpus.html

@@ -12,7 +12,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>
-<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="use-case.html">Use case</a><a href="corpus.html" aria-current="page">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
+<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="sae-features.html">SAE features</a><a href="use-case.html">Use case</a><a href="corpus.html" aria-current="page">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
 <div class="page">
 
 <main class="prose">

data/sae/annotation-changes.json

@@ -0,0 +1 @@
+{"what":"Every verified annotation change we could locate in the corpus, scored by whether the report's splice feature reads higher at the position the newer release places the site or at the position it superseded.","method":"Candidate sites come from diffing each species' two annotation builds per transcript. A site is kept only if the window's own annotation carries a site of the expected class at the expected base, the new position carries none, the new boundary is absent from every isoform of the old build (so a re-pick is not counted as a move), and both positions lie at least 200 bp from a window edge. Each position is scored as the feature's maximum within 2 bases of it. A site counts as decided when one position exceeds the other by more than 1.5x.","feature_used":{"moved_donor":4131,"moved_acceptor":586},"totals":{"sites":98,"windows":82,"decided_sites":70,"favour_revised_sites":61,"favour_superseded_sites":9,"no_separation_sites":28,"decided_windows":59,"favour_revised_windows":50,"favour_superseded_windows":9,"exactly_zero_at_superseded":41,"binomial_p_per_site":1.28e-10,"binomial_p_per_window":5.26e-08},"by_species":{"slycopersicum":{"newer_release":"ITAG3.2","same_assembly":true,"favour_revised_windows":29,"favour_superseded_windows":2},"osativa":{"newer_release":"RAP-DB 2026-02-05","same_assembly":true,"favour_revised_windows":16,"favour_superseded_windows":2},"athaliana":{"newer_release":"TAIR12_1Feb26","same_assembly":false,"favour_revised_windows":5,"favour_superseded_windows":5,"note":"TAIR12 is a new assembly, so each position had to be tied to the TAIR10 frame by anchoring on identical flanking sequence, and its revisions are often whole-model rather than a single moved site"}},"limits":["Sites were selected by annotation change alone, with no reference to how the feature behaves, so the comparison is not circular - but neither is it a controlled benchmark.","29% of sites show no separation and are excluded from the ratio.","One dictionary, one layer, three annotation updates, two of them on the same assembly as the windows.","A feature reading higher at a position is not evidence that the position is correct; it is evidence that the model's representation prefers it."],"sites":[{"uid":"B00005282","event":"moved_acceptor","old":2737,"new":2759,"gene":"ELP1","species":"athaliana","build_new":"TAIR12 1Feb26","shift":22,"old_val":1.319,"new_val":11.445,"verdict":"new"},{"uid":"B00000073","event":"moved_acceptor","old":2632,"new":2560,"gene":"AT4G21640","species":"athaliana","build_new":"TAIR12 1Feb26","shift":72,"old_val":1.353,"new_val":6.887,"verdict":"new"},{"uid":"B00001834","event":"moved_donor","old":6086,"new":6167,"gene":"AT4G38780","species":"athaliana","build_new":"TAIR12 1Feb26","shift":81,"old_val":0.0,"new_val":15.617,"verdict":"new"},{"uid":"B00005461","event":"moved_acceptor","old":4314,"new":4281,"gene":"EME1B","species":"athaliana","build_new":"TAIR12 1Feb26","shift":33,"old_val":14.016,"new_val":6.441,"verdict":"old"},{"uid":"B00001623","event":"moved_acceptor","old":7320,"new":7239,"gene":"PDIL1-4","species":"athaliana","build_new":"TAIR12 1Feb26","shift":81,"old_val":14.375,"new_val":7.449,"verdict":"old"},{"uid":"B00014342","event":"moved_donor","old":2993,"new":3019,"gene":"Os07g0192900","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":26,"old_val":0.0,"new_val":14.477,"verdict":"new"},{"uid":"B00011405","event":"moved_acceptor","old":1872,"new":1884,"gene":"Os03g0356638","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":12,"old_val":0.0,"new_val":15.453,"verdict":"new"},{"uid":"B00013003","event":"moved_donor","old":3612,"new":3595,"gene":"Os08g0422600","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":17,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00025527","event":"moved_donor","old":4836,"new":4782,"gene":"Solyc07g043620","species":"slycopersicum","build_new":"ITAG3.2","shift":54,"old_val":0.0,"new_val":11.117,"verdict":"new"},{"uid":"B00028267","event":"moved_donor","old":5910,"new":5916,"gene":"Solyc04g050520","species":"slycopersicum","build_new":"ITAG3.2","shift":6,"old_val":1.815,"new_val":12.594,"verdict":"new"},{"uid":"B00029213","event":"moved_donor","old":2720,"new":2645,"gene":"Solyc08g061500","species":"slycopersicum","build_new":"ITAG3.2","shift":75,"old_val":0.0,"new_val":16.031,"verdict":"new"},{"uid":"B00024301","event":"moved_acceptor","old":1722,"new":1806,"gene":"Solyc06g068480","species":"slycopersicum","build_new":"ITAG3.2","shift":84,"old_val":1.3,"new_val":13.93,"verdict":"new"},{"uid":"B00008641","event":"moved_donor","old":3381,"new":3357,"gene":"Os03g0784100","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":24,"old_val":2.65,"new_val":14.273,"verdict":"new"},{"uid":"B00011851","event":"moved_donor","old":3343,"new":3443,"gene":"Os11g0669200","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":100,"old_val":2.062,"new_val":16.344,"verdict":"new"},{"uid":"B00024855","event":"moved_donor","old":5766,"new":5799,"gene":"Solyc06g063210","species":"slycopersicum","build_new":"ITAG3.2","shift":33,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00011656","event":"moved_acceptor","old":6685,"new":6670,"gene":"Os07g0273700","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":15,"old_val":9.023,"new_val":14.781,"verdict":"new"},{"uid":"B00009010","event":"moved_acceptor","old":5193,"new":5188,"gene":"Os07g0637600","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":5,"old_val":0.0,"new_val":16.344,"verdict":"new"},{"uid":"B00024506","event":"moved_donor","old":4616,"new":4679,"gene":"Solyc03g118040","species":"slycopersicum","build_new":"ITAG3.2","shift":63,"old_val":0.0,"new_val":16.406,"verdict":"new"},{"uid":"B00028185","event":"moved_donor","old":4619,"new":4667,"gene":"Solyc02g078010","species":"slycopersicum","build_new":"ITAG3.2","shift":48,"old_val":0.0,"new_val":15.156,"verdict":"new"},{"uid":"B00028185","event":"moved_acceptor","old":3174,"new":3159,"gene":"Solyc02g078010","species":"slycopersicum","build_new":"ITAG3.2","shift":15,"old_val":0.0,"new_val":16.281,"verdict":"new"},{"uid":"B00029108","event":"moved_donor","old":6178,"new":6205,"gene":"Solyc02g089340","species":"slycopersicum","build_new":"ITAG3.2","shift":27,"old_val":0.0,"new_val":17.172,"verdict":"new"},{"uid":"B00028092","event":"moved_acceptor","old":5615,"new":5672,"gene":"Solyc05g007190","species":"slycopersicum","build_new":"ITAG3.2","shift":57,"old_val":3.477,"new_val":16.844,"verdict":"new"},{"uid":"B00028092","event":"moved_acceptor","old":5134,"new":5166,"gene":"Solyc05g007190","species":"slycopersicum","build_new":"ITAG3.2","shift":32,"old_val":0.0,"new_val":15.578,"verdict":"new"},{"uid":"B00028092","event":"moved_acceptor","old":3452,"new":3427,"gene":"Solyc05g007190","species":"slycopersicum","build_new":"ITAG3.2","shift":25,"old_val":0.0,"new_val":16.578,"verdict":"new"},{"uid":"B00027566","event":"moved_acceptor","old":6260,"new":6320,"gene":"Solyc07g049280","species":"slycopersicum","build_new":"ITAG3.2","shift":60,"old_val":13.867,"new_val":16.172,"verdict":"tie"},{"uid":"B00010384","event":"moved_donor","old":3759,"new":3766,"gene":"Os03g0196000","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":7,"old_val":2.848,"new_val":13.805,"verdict":"new"},{"uid":"B00014209","event":"moved_acceptor","old":2944,"new":2948,"gene":"Os04g0420600","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":4,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00029205","event":"moved_acceptor","old":5367,"new":5415,"gene":"Solyc02g072310","species":"slycopersicum","build_new":"ITAG3.2","shift":48,"old_val":0.82,"new_val":9.117,"verdict":"new"},{"uid":"B00028091","event":"moved_donor","old":6636,"new":6576,"gene":"Solyc04g005330","species":"slycopersicum","build_new":"ITAG3.2","shift":60,"old_val":0.0,"new_val":15.562,"verdict":"new"},{"uid":"B00028091","event":"moved_donor","old":4285,"new":4300,"gene":"Solyc04g005330","species":"slycopersicum","build_new":"ITAG3.2","shift":15,"old_val":2.965,"new_val":16.406,"verdict":"new"},{"uid":"B00028091","event":"moved_acceptor","old":2514,"new":2463,"gene":"Solyc04g005330","species":"slycopersicum","build_new":"ITAG3.2","shift":51,"old_val":0.0,"new_val":14.312,"verdict":"new"},{"uid":"B00027887","event":"moved_donor","old":5168,"new":5213,"gene":"Solyc08g081340","species":"slycopersicum","build_new":"ITAG3.2","shift":45,"old_val":0.0,"new_val":13.938,"verdict":"new"},{"uid":"B00028023","event":"moved_donor","old":4284,"new":4269,"gene":"Solyc03g121950","species":"slycopersicum","build_new":"ITAG3.2","shift":15,"old_val":10.055,"new_val":13.547,"verdict":"tie"},{"uid":"B00013733","event":"moved_acceptor","old":3359,"new":3224,"gene":"Os04g0472500","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":135,"old_val":12.016,"new_val":1.589,"verdict":"old"},{"uid":"B00001688","event":"moved_acceptor","old":4047,"new":4035,"gene":"AT5G07170","species":"athaliana","build_new":"TAIR12 1Feb26","shift":12,"old_val":16.0,"new_val":4.965,"verdict":"old"},{"uid":"B00001688","event":"moved_donor","old":4462,"new":4482,"gene":"AT5G07170","species":"athaliana","build_new":"TAIR12 1Feb26","shift":20,"old_val":14.039,"new_val":10.914,"verdict":"tie"},{"uid":"B00000376","event":"moved_donor","old":4634,"new":4645,"gene":"P4H13","species":"athaliana","build_new":"TAIR12 1Feb26","shift":11,"old_val":9.07,"new_val":8.023,"verdict":"tie"},{"uid":"B00002232","event":"moved_donor","old":4941,"new":4953,"gene":"AT1G06590","species":"athaliana","build_new":"TAIR12 1Feb26","shift":12,"old_val":12.055,"new_val":6.828,"verdict":"old"},{"uid":"B00000243","event":"moved_acceptor","old":6256,"new":6241,"gene":"AT1G07705","species":"athaliana","build_new":"TAIR12 1Feb26","shift":15,"old_val":15.688,"new_val":10.141,"verdict":"old"},{"uid":"B00005939","event":"moved_acceptor","old":2236,"new":2203,"gene":"AT1G19650","species":"athaliana","build_new":"TAIR12 1Feb26","shift":33,"old_val":13.094,"new_val":15.508,"verdict":"tie"},{"uid":"B00000106","event":"moved_acceptor","old":4454,"new":4421,"gene":"DWA3","species":"athaliana","build_new":"TAIR12 1Feb26","shift":33,"old_val":4.941,"new_val":12.758,"verdict":"new"},{"uid":"B00008882","event":"moved_donor","old":4692,"new":4704,"gene":"Os08g0190300","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":12,"old_val":3.307,"new_val":13.0,"verdict":"new"},{"uid":"B00008384","event":"moved_acceptor","old":4215,"new":4070,"gene":"Os01g0276200","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":145,"old_val":0.0,"new_val":14.312,"verdict":"new"},{"uid":"B00027450","event":"moved_donor","old":2406,"new":2463,"gene":"Solyc01g008840","species":"slycopersicum","build_new":"ITAG3.2","shift":57,"old_val":3.09,"new_val":17.281,"verdict":"new"},{"uid":"B00029839","event":"moved_acceptor","old":3339,"new":3372,"gene":"Solyc01g108460","species":"slycopersicum","build_new":"ITAG3.2","shift":33,"old_val":0.0,"new_val":14.781,"verdict":"new"},{"uid":"B00029497","event":"moved_donor","old":4926,"new":4920,"gene":"Solyc02g081390","species":"slycopersicum","build_new":"ITAG3.2","shift":6,"old_val":0.0,"new_val":16.094,"verdict":"new"},{"uid":"B00029961","event":"moved_donor","old":1998,"new":2004,"gene":"Solyc02g088230","species":"slycopersicum","build_new":"ITAG3.2","shift":6,"old_val":2.01,"new_val":13.336,"verdict":"new"},{"uid":"B00029961","event":"moved_acceptor","old":1657,"new":1744,"gene":"Solyc02g088230","species":"slycopersicum","build_new":"ITAG3.2","shift":87,"old_val":0.0,"new_val":11.188,"verdict":"new"},{"uid":"B00029369","event":"moved_donor","old":6545,"new":6539,"gene":"Solyc06g007780","species":"slycopersicum","build_new":"ITAG3.2","shift":6,"old_val":11.969,"new_val":5.086,"verdict":"old"},{"uid":"B00029313","event":"moved_donor","old":5807,"new":5789,"gene":"Solyc10g008180","species":"slycopersicum","build_new":"ITAG3.2","shift":18,"old_val":10.047,"new_val":12.0,"verdict":"tie"},{"uid":"B00028667","event":"moved_donor","old":2744,"new":2696,"gene":"Solyc10g085570","species":"slycopersicum","build_new":"ITAG3.2","shift":48,"old_val":11.789,"new_val":14.07,"verdict":"tie"},{"uid":"B00029170","event":"moved_acceptor","old":1897,"new":1882,"gene":"Solyc11g007300","species":"slycopersicum","build_new":"ITAG3.2","shift":15,"old_val":2.102,"new_val":14.703,"verdict":"new"},{"uid":"B00027370","event":"moved_donor","old":1911,"new":1903,"gene":"Solyc12g044300","species":"slycopersicum","build_new":"ITAG3.2","shift":8,"old_val":14.711,"new_val":1.602,"verdict":"old"},{"uid":"B00029720","event":"moved_acceptor","old":5876,"new":5925,"gene":"Solyc01g094060","species":"slycopersicum","build_new":"ITAG3.2","shift":49,"old_val":0.0,"new_val":13.906,"verdict":"new"},{"uid":"B00029720","event":"moved_donor","old":5971,"new":5996,"gene":"Solyc01g094060","species":"slycopersicum","build_new":"ITAG3.2","shift":25,"old_val":1.594,"new_val":13.367,"verdict":"new"},{"uid":"B00029484","event":"moved_donor","old":4051,"new":4075,"gene":"Solyc01g074040","species":"slycopersicum","build_new":"ITAG3.2","shift":24,"old_val":0.0,"new_val":14.719,"verdict":"new"},{"uid":"B00029941","event":"moved_donor","old":5999,"new":5995,"gene":"Solyc03g006070","species":"slycopersicum","build_new":"ITAG3.2","shift":4,"old_val":4.723,"new_val":14.617,"verdict":"new"},{"uid":"B00029941","event":"moved_acceptor","old":5938,"new":5934,"gene":"Solyc03g006070","species":"slycopersicum","build_new":"ITAG3.2","shift":4,"old_val":0.0,"new_val":14.977,"verdict":"new"},{"uid":"B00027784","event":"moved_donor","old":891,"new":885,"gene":"Solyc07g049280","species":"slycopersicum","build_new":"ITAG3.2","shift":6,"old_val":1.053,"new_val":13.703,"verdict":"new"},{"uid":"B00026158","event":"moved_donor","old":6872,"new":6946,"gene":"Solyc12g088110","species":"slycopersicum","build_new":"ITAG3.2","shift":74,"old_val":0.0,"new_val":10.805,"verdict":"new"},{"uid":"B00010384","event":"moved_donor","old":3615,"new":3611,"gene":"Os03g0196000","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":4,"old_val":4.121,"new_val":13.531,"verdict":"new"},{"uid":"B00027883","event":"moved_donor","old":6722,"new":6707,"gene":"Solyc02g093870","species":"slycopersicum","build_new":"ITAG3.2","shift":15,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00027883","event":"moved_acceptor","old":5240,"new":5204,"gene":"Solyc02g093870","species":"slycopersicum","build_new":"ITAG3.2","shift":36,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00029302","event":"moved_acceptor","old":1654,"new":1690,"gene":"Solyc11g019960","species":"slycopersicum","build_new":"ITAG3.2","shift":36,"old_val":9.305,"new_val":9.055,"verdict":"tie"},{"uid":"B00005274","event":"moved_donor","old":5261,"new":5237,"gene":"CRK16","species":"athaliana","build_new":"TAIR12 1Feb26","shift":24,"old_val":7.934,"new_val":9.789,"verdict":"tie"},{"uid":"B00014205","event":"moved_acceptor","old":6774,"new":6858,"gene":"Os04g0452600","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":84,"old_val":0.0,"new_val":14.641,"verdict":"new"},{"uid":"B00029071","event":"moved_donor","old":6799,"new":6883,"gene":"Solyc05g013490","species":"slycopersicum","build_new":"ITAG3.2","shift":84,"old_val":0.0,"new_val":0.814,"verdict":"new"},{"uid":"B00028617","event":"moved_acceptor","old":4341,"new":4359,"gene":"Solyc05g050000","species":"slycopersicum","build_new":"ITAG3.2","shift":18,"old_val":7.555,"new_val":13.68,"verdict":"new"},{"uid":"B00029845","event":"moved_donor","old":3000,"new":3083,"gene":"Solyc06g065620","species":"slycopersicum","build_new":"ITAG3.2","shift":83,"old_val":0.0,"new_val":13.438,"verdict":"new"},{"uid":"B00029845","event":"moved_acceptor","old":6863,"new":6885,"gene":"Solyc06g065620","species":"slycopersicum","build_new":"ITAG3.2","shift":22,"old_val":4.711,"new_val":15.18,"verdict":"new"},{"uid":"B00010782","event":"moved_donor","old":4170,"new":4258,"gene":"Os02g0641000","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":88,"old_val":0.0,"new_val":15.805,"verdict":"new"},{"uid":"B00003121","event":"moved_donor","old":2934,"new":2907,"gene":"AT1G31530","species":"athaliana","build_new":"TAIR12 1Feb26","shift":27,"old_val":4.578,"new_val":14.094,"verdict":"new"},{"uid":"B00005922","event":"moved_donor","old":7165,"new":7195,"gene":"ATX2","species":"athaliana","build_new":"TAIR12 1Feb26","shift":30,"old_val":12.914,"new_val":11.586,"verdict":"tie"},{"uid":"B00029708","event":"moved_donor","old":6388,"new":6334,"gene":"Solyc06g010190","species":"slycopersicum","build_new":"ITAG3.2","shift":54,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00027719","event":"moved_acceptor","old":1514,"new":1489,"gene":"Solyc06g051930","species":"slycopersicum","build_new":"ITAG3.2","shift":25,"old_val":1.818,"new_val":14.039,"verdict":"new"},{"uid":"B00011423","event":"moved_donor","old":895,"new":1049,"gene":"Os08g0562700","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":154,"old_val":0.831,"new_val":15.883,"verdict":"new"},{"uid":"B00011177","event":"moved_acceptor","old":2648,"new":2465,"gene":"Os09g0551251","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":183,"old_val":12.203,"new_val":12.68,"verdict":"tie"},{"uid":"B00027935","event":"moved_acceptor","old":3242,"new":3257,"gene":"Solyc05g051770","species":"slycopersicum","build_new":"ITAG3.2","shift":15,"old_val":2.117,"new_val":12.812,"verdict":"new"},{"uid":"B00029825","event":"moved_donor","old":7895,"new":7898,"gene":"Solyc01g103120","species":"slycopersicum","build_new":"ITAG3.2","shift":3,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00028958","event":"moved_donor","old":6163,"new":6091,"gene":"Solyc09g089830","species":"slycopersicum","build_new":"ITAG3.2","shift":72,"old_val":0.0,"new_val":14.047,"verdict":"new"},{"uid":"B00029587","event":"moved_donor","old":1377,"new":1361,"gene":"Solyc04g072870","species":"slycopersicum","build_new":"ITAG3.2","shift":16,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00010015","event":"moved_donor","old":6595,"new":6510,"gene":"Os06g0584000","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":85,"old_val":10.539,"new_val":0.0,"verdict":"old"},{"uid":"B00028760","event":"moved_acceptor","old":4490,"new":4485,"gene":"Solyc10g084280","species":"slycopersicum","build_new":"ITAG3.2","shift":5,"old_val":1.901,"new_val":13.016,"verdict":"new"},{"uid":"B00013712","event":"moved_acceptor","old":675,"new":497,"gene":"Os04g0588200","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":178,"old_val":16.703,"new_val":16.266,"verdict":"tie"},{"uid":"B00013712","event":"moved_donor","old":433,"new":555,"gene":"Os04g0588200","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":122,"old_val":14.68,"new_val":14.805,"verdict":"tie"},{"uid":"B00010057","event":"moved_donor","old":2809,"new":2910,"gene":"Os12g0611300","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":101,"old_val":0.0,"new_val":15.125,"verdict":"new"},{"uid":"B00028405","event":"moved_donor","old":1238,"new":1181,"gene":"Solyc02g084520","species":"slycopersicum","build_new":"ITAG3.2","shift":57,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00011618","event":"moved_acceptor","old":1654,"new":1496,"gene":"Os05g0256500","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":158,"old_val":9.023,"new_val":8.031,"verdict":"tie"},{"uid":"B00011618","event":"moved_donor","old":1409,"new":1569,"gene":"Os05g0256500","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":160,"old_val":12.695,"new_val":10.383,"verdict":"tie"},{"uid":"B00011918","event":"moved_donor","old":413,"new":556,"gene":"Os06g0162550","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":143,"old_val":15.125,"new_val":11.859,"verdict":"tie"},{"uid":"B00011918","event":"moved_acceptor","old":660,"new":492,"gene":"Os06g0162550","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":168,"old_val":12.367,"new_val":13.922,"verdict":"tie"},{"uid":"B00030204","event":"moved_acceptor","old":357,"new":363,"gene":"Solyc01g098870","species":"slycopersicum","build_new":"ITAG3.2","shift":6,"old_val":11.008,"new_val":10.539,"verdict":"tie"},{"uid":"B00011970","event":"moved_acceptor","old":6503,"new":6508,"gene":"Os11g0545700","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":5,"old_val":6.863,"new_val":15.742,"verdict":"new"},{"uid":"B00029693","event":"moved_donor","old":803,"new":892,"gene":"Solyc03g117440","species":"slycopersicum","build_new":"ITAG3.2","shift":89,"old_val":0.0,"new_val":15.789,"verdict":"new"},{"uid":"B00009937","event":"moved_acceptor","old":4068,"new":3945,"gene":"Os09g0327800","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":123,"old_val":0.914,"new_val":14.875,"verdict":"new"},{"uid":"B00010789","event":"moved_acceptor","old":6653,"new":6790,"gene":"Os08g0100200","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":137,"old_val":0.0,"new_val":0.0,"verdict":"tie"},{"uid":"B00013801","event":"moved_donor","old":284,"new":275,"gene":"Os02g0803250","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":9,"old_val":3.211,"new_val":13.75,"verdict":"new"},{"uid":"B00014205","event":"moved_donor","old":7629,"new":7815,"gene":"Os04g0452600","species":"osativa","build_new":"RAP-DB 2026-02-05","shift":186,"old_val":0.0,"new_val":16.297,"verdict":"new"}]}

factory.html

@@ -15,7 +15,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body class="factory">
-<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html" aria-current="page">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
+<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html" aria-current="page">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="sae-features.html">SAE features</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
 <div class="page">
 <main class="prose">
 <p class="kicker">Methods</p>

index.html

@@ -17,7 +17,7 @@
 <script src="assets/overview.js" defer></script>
 </head>
 <body class="landing">
-<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html" aria-current="page">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
+<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html" aria-current="page">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="sae-features.html">SAE features</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
 
 <main>
 <section class="hero" aria-labelledby="intro-title">

leaderboard.html

@@ -12,7 +12,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>
-<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html" aria-current="page">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
+<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html" aria-current="page">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="sae-features.html">SAE features</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
 <div class="page">
 
 <main class="prose">

sae-features.html

@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Botanic1 sparse features</title>
+<meta name="description" content="Sparse autoencoder features of Botanic1-M read out base by base over annotated genomic windows in four plant species.">
+<script>(function(){try{var t=new URLSearchParams(location.search).get('__theme');if(t==='dark'||t==='light')document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&amp;family=Spectral:ital,wght@0,400;0,500;0,600;1,400&amp;family=IBM+Plex+Mono:wght@400;500;600&amp;display=swap">
+<link rel="stylesheet" href="assets/site.css?v=20260908-use-case">
+<link rel="stylesheet" href="assets/sae.css?v=20260908-case2">
+<link rel="stylesheet" href="assets/sae-sources.css?v=20260908-case2">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+</head>
+<body>
+<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="sae-features.html" aria-current="page">SAE features</a><a href="use-case.html">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
+<div class="page">
+
+<main class="prose">
+<p class="kicker">Interpretability</p>
+<h1>Sparse features are readable genomic concepts</h1>
+<p class="lede">A sparse autoencoder decomposes one layer of a frozen Botanic1-M into 8,192
+features, fitted with no genomic annotation at all. Single features nonetheless detect
+splice donors and acceptors at MCC 0.871 and 0.873, intron bodies, and each of the three
+positions in a codon. Two of them read zero where TAIR10 and Araport11 annotate a splice
+donor &mdash; and in 2026 TAIR12 moved that donor to where they fire.</p>
+
+<p>The browser below reads that dictionary out base by base over 21 precomputed windows.
+Every value drawn is a measurement; the annotation rows are a separate, paler register and
+never an input to a number on this page.</p>
+
+<h2 id="choose">Choose a window</h2>
+<p>Each window is 8,191 bp, the model's native context, and each was chosen because it
+shows something. Ten are windows where the features track the annotation closely: over 384
+windows scanned, the splice features fire at a median 95% of the annotated donors and
+acceptors, and these are the clearest of them. Eight are disagreements &mdash; five where a
+feature marks a splice site the canonical transcript drops but another annotated isoform
+uses, three where it marks a site no annotated transcript uses at all. Each of those eight
+also carries a verdict from a register independent of the annotation, and one of the three
+is a site an RNA-seq atlas measures in use. Two are loci where the annotation itself moved
+between releases. The last is the <em>AT1G65170</em> locus the report's
+annotation-correction result is drawn from.</p>
+
+<p>A released annotation says which splice sites someone drew a transcript through. It
+does not say which sites are <em>used</em>, and the two questions come apart exactly where
+a feature disagrees with the annotation. So each of the eight disagreements carries a second
+register, shown under the browser: for Arabidopsis, AtRTD3's 169,503 long-read transcripts,
+the 2026 TAIR12 reannotation, and PastDB's usage measurements over 202 RNA-seq samples, all
+three on the same TAIR10 coordinates the windows are cut from.</p>
+
+<p class="note">The three verdicts are different claims, and only one of them is a
+discovery. <strong>Used</strong> means an independent register records the site in use:
+chr1:21,735,155, which no transcript model carries, is an alternative 3&prime; splice site
+in PastDB running at up to 7.5% against the dominant site's 99.8%, and both Arabidopsis
+alternative-isoform sites are ones TAIR12 keeps while dropping the canonical site the
+feature reads near zero at. <strong>Untestable</strong> means the registers cover the locus
+and still cannot answer: chr5:5,427,495 sits 23 bp upstream of the start codon of a gene
+with one transcript, no annotated 5&prime; UTR and a median expression of 0.00 cRPKM, so no
+read can confirm or refute it. <strong>Untested</strong> means no register was consulted at
+all &mdash; the rice and maize disagreements, where no long-read transcriptome or splicing
+atlas on those assemblies was checked. A feature firing where nothing is annotated is not
+evidence of a discovery until a register says so, and it is not presented as one here.</p>
+
+<p class="label" id="win-label">Window</p>
+<div class="win-picker" id="win-picker" role="group" aria-labelledby="win-label"></div>
+
+<noscript><p class="small">The window picker requires JavaScript.</p></noscript>
+
+<div class="feat-stage">
+<figure class="feat-browser" aria-labelledby="feat-title">
+  <div class="feat-heading">
+    <div>
+      <h2 id="feat-title">A genomic window, feature by feature</h2>
+      <p id="feat-sub"></p>
+    </div>
+    <div class="feat-tools" role="group" aria-label="Window navigation">
+      <button type="button" class="zoom" id="feat-out" aria-label="Zoom out" disabled>&minus;</button>
+      <button type="button" class="zoom" id="feat-in" aria-label="Zoom in" disabled>+</button>
+      <button type="button" id="feat-full" disabled>Whole window</button>
+      <button type="button" id="feat-panel-toggle" aria-expanded="false" aria-controls="feat-panel" disabled>Top features</button>
+      <button type="button" id="feat-controls-toggle" aria-expanded="true" aria-controls="feat-controls" disabled>Lanes</button>
+      <button type="button" class="help" id="feat-help-toggle" aria-expanded="false" aria-controls="feat-help-panel" aria-label="How to read this browser">?</button>
+      <div class="feat-help-panel" id="feat-help-panel" role="group" aria-labelledby="feat-help-title" hidden>
+        <p class="fh-title" id="feat-help-title">How to read this browser</p>
+        <p id="feat-help">Hover a base to inspect it; click or press Enter to pin it, Escape to
+        unpin. Drag to pan, pinch or + and &minus; to zoom, arrow keys to step base by base (hold
+        Shift to stride), Home for the whole window. <em>Top features</em> opens a movable panel
+        ranking the strongest features at the pinned base.</p>
+        <p class="fh-lanes">Each window opens on one lane per genomic category &mdash; splice
+        donor, splice acceptor, intron, coding sequence, the three codon positions, and whichever
+        other annotated element the dictionary marks best here. Each lane is the feature that
+        matches that category best in <em>this</em> window, searched over every feature the window
+        stores rather than a shortlist, scored as Matthews correlation against the annotated
+        category. The threshold is the best of six percentiles of the feature's own values in the
+        window, so the score describes the picture in front of you and is not an out-of-sample
+        estimate. Codon positions are derived from the canonical transcripts' coding sequence in
+        transcription order, because the label tracks carry region and site classes but not
+        reading frame. <em>Top features</em> ranks the strongest features at the pinned base out
+        of all 8,192 and any of them can be given a lane: this dictionary keeps 64 features per
+        base and zeroes the rest, and each window carries a complete track for every feature that
+        reaches a base's top eight anywhere in it.</p>
+      </div>
+    </div>
+  </div>
+  <p class="feat-region" id="feat-region">Select a window to read its features base by base.</p>
+  <div class="feat-scroll"><div id="feat-plot"></div></div>
+  <div class="feat-readout" id="feat-readout" aria-live="polite" aria-atomic="true"></div>
+  <aside id="feat-panel" hidden></aside>
+  <div class="feat-case" id="feat-case" aria-label="What this window shows"></div>
+  <figcaption>
+    <span>Activations: <span class="num" id="feat-prov"></span></span>
+  </figcaption>
+  <noscript><p class="feat-fallback">Enable JavaScript to read the features base by base.
+  <a href="https://www.biorxiv.org/content/10.64898/2026.09.04.749355v1">Read the interpretability section in the report &#8599;</a></p></noscript>
+</figure>
+<aside id="feat-controls" class="feat-dock" aria-labelledby="controls-title">
+  <p class="dock-title" id="controls-title">Colouring and lanes</p>
+  <div class="dock-body">
+    <p class="label" id="mode-label">Colouring</p>
+    <div class="seg" id="feat-mode" role="group" aria-labelledby="mode-label">
+      <button type="button" data-mode="selected" aria-pressed="true">Top of the shown lanes</button>
+      <button type="button" data-mode="global" aria-pressed="false">Top of all 8,192</button>
+    </div>
+    <p class="label" id="list-label">Feature lanes</p>
+    <div class="feat-list" id="feat-list" role="group" aria-labelledby="list-label"></div>
+  </div>
+</aside>
+</div>
+
+
+<h2 id="read">How to read the tracks</h2>
+<ul>
+<li><strong>Top strip.</strong> Every base takes the colour of the feature that fires
+hardest on it, and stays grey where nothing fires. Base letters appear once the view is
+narrow enough to hold them.</li>
+<li><strong>Annotation rows.</strong> Region bands, single-base site ticks and gene
+extents, one set per strand, in the paler register. They come from the species' released
+annotation, never from the model.</li>
+<li><strong>Feature lanes.</strong> One lane per shown feature. A stem's height is the
+activation at that base as a fraction of that feature's peak in this window, so lanes are
+scaled independently; the gutter carries each lane's maximum in view. A blank base is a
+zero &mdash; the feature did not fire.</li>
+<li><strong>Dashed outline.</strong> The anchor: the position the window sampler selected
+on. It marks where we looked, not an annotation of that base.</li>
+<li><strong>Readout.</strong> Under the plot: the coordinate, the base, the annotation on
+both strands, every shown feature firing there, and the strongest feature of all 8,192.</li>
+</ul>
+
+<div class="ann-legend" aria-label="Annotation legend">
+  <span><i style="background:var(--ann-cds)"></i>CDS</span>
+  <span><i style="background:var(--ann-utr5)"></i>5&prime; UTR</span>
+  <span><i style="background:var(--ann-utr3)"></i>3&prime; UTR</span>
+  <span><i style="background:var(--ann-intron)"></i>intron</span>
+  <span><i style="background:var(--ann-ncrna)"></i>non-coding</span>
+  <span><i style="background:var(--ann-intergenic)"></i>intergenic</span>
+  <span><i class="site" style="background:var(--ann-tss)"></i>TSS</span>
+  <span><i class="site" style="background:var(--ann-tis)"></i>start codon</span>
+  <span><i class="site" style="background:var(--ann-donor)"></i>donor</span>
+  <span><i class="site" style="background:var(--ann-acceptor)"></i>acceptor</span>
+  <span><i class="site" style="background:var(--ann-stop)"></i>stop</span>
+  <span><i class="site" style="background:var(--ann-tts)"></i>TTS</span>
+</div>
+
+<h2 id="named">The twelve named features</h2>
+<p>The dictionary carries no names: nothing upstream assigns a feature a meaning. These
+twelve have one because the report measures what they detect. The two splice features
+and the intron feature are the best detector of their annotation class in every one of the
+four annotated genomes, at MCC 0.821 to 0.937 for the splice classes and 0.650 to 0.741
+for intron, so the naming does not rest on one genome. f4131 and f2634 are also the pair a
+two-level decision tree selects in all five chromosome folds, sorting a candidate
+<code>GT</code> into decoy, intermediate-usage or constitutive donor at a balanced accuracy
+of 0.841 [0.827, 0.855].</p>
+
+<p class="note">Two features the report names are deliberately absent here. Asked for a
+transcription start site or a termination site, the best feature in the dictionary reaches
+MCC 0.035 and 0.029 &mdash; consistent with neither site having a sharp sequence consensus in
+plants. They are a real negative result, and a lane for either would mark nothing, so neither
+is offered.</p>
+<noscript><p class="small">The feature tables are built from <code>data/sae/index.json</code> and require JavaScript.</p></noscript>
+<div class="tablewrap"><table id="named-table"><caption>Evidence as published. Bold marks the three features that are the best detector of their annotation class in every one of the four annotated genomes.</caption></table></div>
+
+<h2 id="sources">Annotation sources</h2>
+<p>The annotation register is read from each species' released annotation, and the browser
+names the assembly of every window it draws.</p>
+<div id="sources-body"></div>
+
+<p class="note">The report's interpretability section carries the methodology, the full
+figure and the annotation history of the locus:
+<a href="https://www.biorxiv.org/content/10.64898/2026.09.04.749355v1">Botanic1 technical report &#8599;</a></p>
+</main>
+
+<footer class="site-footer">
+  <p>Living Models, Paris. Botanic1 is released for research use under the Living Models research licence.</p>
+  <p>Activations are produced by the sparse autoencoder of the report's interpretability section, read out over annotated windows through the interpretability engine.</p>
+</footer>
+</div>
+<div class="tip" id="tip" role="tooltip"></div>
+<script src="assets/hero.js"></script>
+<script src="assets/sae-browser.js?v=20260908-case2" defer></script>
+<script src="assets/sae-tables.js?v=20260908-case" defer></script>
+</body>
+</html>

use-case.html

@@ -13,7 +13,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 </head>
 <body>
-<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="use-case.html" aria-current="page">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
+<header class="topbar"><div class="inner"><a class="lockup" href="index.html"><div class="wordmark" aria-label="BOTANIC-1"><span class="cell">B</span><span class="cell">O</span><span class="cell">T</span><span class="cell">A</span><span class="cell">N</span><span class="cell">I</span><span class="cell">C</span><span class="cell tok" data-state="masked"><span class="probs"><i></i><i class="top"></i><i></i><i></i></span>?</span></div><span class="org"><svg class="living-models-mark" width="18" height="20" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 85.90 91.50"><rect x="55.1000" y="2.1000" width="3.2000" height="53.2000" /><rect x="55.1000" y="61.3000" width="3.2000" height="28.1000" /><rect x="68.9000" y="9.2000" width="3.2000" height="15.5000" /><rect x="68.9000" y="30.6000" width="3.2000" height="51.7000" /><rect x="82.7000" y="24.7000" width="3.2000" height="42.2000" /><rect x="41.4000" y="0.0000" width="3.2000" height="11.6000" /><rect x="41.4000" y="17.5000" width="3.2000" height="74.0000" /><rect x="27.6000" y="2.1000" width="3.2000" height="70.7000" /><rect x="27.6000" y="78.7000" width="3.2000" height="10.6000" /><rect x="13.8000" y="9.2000" width="3.2000" height="25.0000" /><rect x="13.8000" y="40.2000" width="3.2000" height="42.2000" /><rect x="0.0000" y="24.7000" width="3.2000" height="42.2000" /></svg>Living Models</span></a><nav aria-label="Pages"><a href="index.html">Overview</a><a href="factory.html">Model factory</a><a href="leaderboard.html">Leaderboard</a><a href="causal-variants.html">Causal variants</a><a href="sae-features.html">SAE features</a><a href="use-case.html" aria-current="page">Use case</a><a href="corpus.html">Corpus</a><a class="ext" href="https://huggingface.co/collections/living-models/botanic1" target="_blank" rel="noopener">Models</a></nav></div></header>
 <div class="page">
 <main class="prose use-case-prose">
 <p class="kicker">Use case</p>