| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Conditioning the base distributions: fix a base, the rest adapt</title> | |
| <meta name="color-scheme" content="light"> | |
| <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=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"> | |
| <style> | |
| :root { | |
| --bg: #f7f5ee; | |
| --ink: #1f1f1d; | |
| --ink-soft: #5b5b56; | |
| --ink-faint: #8a8a83; | |
| --rule: #e3e1d6; | |
| --hair: #eee; | |
| --green: #317f3f; | |
| --green-dark: #1f5024; | |
| --green-tint: #f4f8f4; | |
| --amber: #b8862c; | |
| --amber-dark: #6b4d18; | |
| --red: #b00020; | |
| --blue: #2c5aa0; | |
| --card: #fff; | |
| --soft-cream: #fafaf6; | |
| --base-a: #1A7A40; | |
| --base-t: #b00020; | |
| --base-c: #2c5aa0; | |
| --base-g: #b8862c; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: "Inter", "Helvetica Neue", sans-serif; | |
| font-size: 14px; font-weight: 300; line-height: 1.7; | |
| color: var(--ink); | |
| background: var(--bg); | |
| } | |
| ::-webkit-scrollbar { width: 8px; height: 8px; } | |
| ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| /* --- Page header ----------------------------------------------------- */ | |
| .page-header { | |
| border-bottom: 1px solid var(--rule); | |
| background: var(--bg); | |
| position: sticky; top: 0; z-index: 50; | |
| backdrop-filter: saturate(180%) blur(6px); | |
| } | |
| .page-header__inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 14px 32px; | |
| display: flex; align-items: baseline; gap: 16px; | |
| } | |
| .wordmark { | |
| font-family: "JetBrains Mono", monospace; | |
| font-weight: 700; | |
| font-size: 16px; | |
| letter-spacing: 1px; | |
| } | |
| .wordmark .caret { color: var(--green); margin-right: 4px; } | |
| .wordmark__sub { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; | |
| text-transform: uppercase; letter-spacing: 2px; | |
| color: var(--ink-soft); | |
| margin-left: 4px; | |
| } | |
| .page-header__spacer { flex: 1; } | |
| .page-header__crumbs { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; letter-spacing: 1.4px; | |
| text-transform: uppercase; color: var(--ink-faint); | |
| } | |
| .page-header__crumbs a { color: var(--ink-soft); text-decoration: none; } | |
| .page-header__crumbs a:hover { color: var(--green); } | |
| /* --- Lede ----------------------------------------------------------- */ | |
| .tab-lede { | |
| max-width: 1200px; margin: 56px auto 0; | |
| padding: 0 32px; | |
| } | |
| .tab-lede__rail { | |
| border-left: 3px solid var(--green); | |
| padding: 4px 0 4px 22px; | |
| max-width: 820px; | |
| } | |
| .tab-lede__eyebrow { | |
| display: block; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; | |
| letter-spacing: 0.22em; text-transform: uppercase; | |
| color: var(--green); margin-bottom: 12px; | |
| } | |
| .tab-lede__title { | |
| margin: 0 0 22px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 34px; font-weight: 500; | |
| letter-spacing: -0.01em; line-height: 1.12; | |
| color: var(--ink); | |
| } | |
| .tab-lede__lead { | |
| margin: 0; max-width: 760px; | |
| font-family: "Inter", sans-serif; | |
| font-size: 19px; font-weight: 300; line-height: 1.5; | |
| letter-spacing: -0.005em; color: #2d2d2a; | |
| } | |
| /* --- Post body ------------------------------------------------------ */ | |
| .post { | |
| max-width: 760px; | |
| margin: 32px auto 0; | |
| padding: 0 32px 96px; | |
| } | |
| .post h2 { | |
| margin: 64px 0 18px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 22px; font-weight: 500; | |
| letter-spacing: -0.005em; line-height: 1.3; | |
| color: var(--ink); | |
| padding-top: 12px; | |
| border-top: 1px solid var(--rule); | |
| } | |
| .post h2:first-child { border-top: none; padding-top: 0; } | |
| .post h3 { | |
| margin: 40px 0 12px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 15px; font-weight: 500; | |
| letter-spacing: 0; | |
| color: var(--ink); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .post p { margin: 0 0 14px; } | |
| .post p > code, .post li > code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 0.86em; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 1px 5px; | |
| border-radius: 2px; | |
| color: var(--green-dark); | |
| } | |
| .post pre { | |
| margin: 14px 0 18px; | |
| padding: 14px 16px; | |
| background: var(--card); | |
| border: 1px solid #ddd; | |
| overflow-x: auto; | |
| } | |
| .post pre code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; line-height: 1.6; | |
| color: var(--ink); | |
| background: transparent; border: none; padding: 0; | |
| } | |
| .post a { | |
| color: var(--green-dark); | |
| text-decoration: underline; | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 2px; | |
| } | |
| .post a:hover { color: var(--green); } | |
| .post strong { font-weight: 600; color: var(--ink); } | |
| .post-image { | |
| margin: 24px 0; | |
| } | |
| .post-image img { | |
| display: block; | |
| width: 100%; height: auto; | |
| border: 1px solid var(--rule); | |
| } | |
| /* --- Widget shell (carbon-demo style) ------------------------------- */ | |
| .widget { | |
| max-width: 920px; | |
| margin: 40px auto 8px; | |
| } | |
| .widget__head { | |
| display: flex; align-items: baseline; gap: 14px; | |
| margin-bottom: 6px; | |
| } | |
| .widget__eyebrow { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; | |
| letter-spacing: 0.22em; text-transform: uppercase; | |
| color: var(--green); | |
| } | |
| .widget__title { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; font-weight: 500; | |
| color: var(--ink); letter-spacing: 0; | |
| } | |
| .widget__caption { | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; color: var(--ink-soft); | |
| margin: 8px 4px 14px; | |
| line-height: 1.5; | |
| } | |
| .demo { | |
| background: var(--card); border: 1px solid #ddd; | |
| padding: 22px; margin: 8px 0; | |
| } | |
| .demo-toolbar { | |
| display: flex; gap: 8px; align-items: center; flex-wrap: wrap; | |
| margin-bottom: 14px; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; | |
| color: #666; text-transform: uppercase; letter-spacing: 1.4px; | |
| } | |
| .demo-toolbar .spacer { flex: 1; } | |
| .demo-label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; color: #6b7a6e; | |
| text-transform: uppercase; letter-spacing: 1.6px; | |
| margin: 6px 0 6px; | |
| } | |
| .pill, button.action { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 400; | |
| padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px; | |
| background: #fff; color: #555; cursor: pointer; | |
| text-transform: uppercase; letter-spacing: 1.5px; | |
| transition: all 0.12s; | |
| } | |
| .pill:hover, button.action:hover { border-color: #888; color: var(--ink); } | |
| .pill.active, button.action.primary { background: var(--ink); color: #fff; border-color: var(--ink); } | |
| .pill.active:hover, button.action.primary:hover { background: #000; } | |
| .pill.gh { background: var(--green); color: #fff; border-color: var(--green); } | |
| .pill.gh:hover { background: var(--green-dark); border-color: var(--green-dark); } | |
| .pills { display: inline-flex; flex-wrap: wrap; gap: 6px; } | |
| .status { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: #666; | |
| text-transform: uppercase; letter-spacing: 1.5px; | |
| display: inline-flex; align-items: center; gap: 6px; | |
| margin-left: 8px; | |
| } | |
| .status .dot { | |
| display: inline-block; width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--green); | |
| } | |
| input.seq-input, textarea.seq-input { | |
| width: 100%; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 13px; | |
| padding: 9px 12px; | |
| border: 1px solid #ccc; | |
| border-radius: 3px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--ink); | |
| background: var(--soft-cream); | |
| resize: vertical; | |
| } | |
| textarea.seq-input { letter-spacing: 0.5px; } | |
| input.seq-input:focus, textarea.seq-input:focus { | |
| outline: none; | |
| border-color: var(--green); | |
| background: #fff; | |
| } | |
| /* base + token chips */ | |
| .base, .tok { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| letter-spacing: 0.5px; | |
| } | |
| .base { | |
| display: inline-block; | |
| padding: 2px 5px; | |
| font-weight: 500; | |
| margin: 1px; | |
| color: #fff; | |
| border-radius: 2px; | |
| min-width: 16px; | |
| text-align: center; | |
| } | |
| .base.A { background: var(--base-a); } | |
| .base.T { background: var(--base-t); } | |
| .base.C { background: var(--base-c); } | |
| .base.G { background: var(--base-g); } | |
| .base.dim { opacity: 0.4; } | |
| .base.outline { | |
| background: transparent; | |
| border: 1px solid currentColor; | |
| } | |
| .base.outline.A { color: var(--base-a); } | |
| .base.outline.T { color: var(--base-t); } | |
| .base.outline.C { color: var(--base-c); } | |
| .base.outline.G { color: var(--base-g); } | |
| .tok { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 8px; | |
| margin: 2px; | |
| border: 1px solid #ccc; | |
| border-radius: 3px; | |
| background: #fff; | |
| color: var(--ink); | |
| } | |
| .tok.kmer { | |
| background: rgba(49,127,63,0.10); | |
| border-color: rgba(49,127,63,0.5); | |
| color: var(--green-dark); | |
| font-weight: 500; | |
| } | |
| .tok.bpe { | |
| background: rgba(184,134,44,0.10); | |
| border-color: rgba(184,134,44,0.5); | |
| color: var(--amber-dark); | |
| } | |
| .tok.text { | |
| background: #fff; | |
| border-color: #ccc; | |
| color: var(--ink); | |
| } | |
| .tok.boundary { | |
| background: var(--ink); | |
| color: #fff; | |
| border-color: var(--ink); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-size: 10px; | |
| } | |
| .tok.dim { color: #888; background: var(--soft-cream); } | |
| .tok.ok { background: var(--green); color: #fff; border-color: var(--green); } | |
| .tok.bad { color: var(--red); border-color: rgba(176,0,32,0.4); background: rgba(176,0,32,0.05); } | |
| .tok.selected { | |
| outline: 2px solid var(--green); | |
| outline-offset: 1px; | |
| } | |
| .token-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } | |
| /* count badges */ | |
| .count-badge { | |
| display: inline-block; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 600; | |
| background: var(--ink); color: var(--bg); | |
| padding: 2px 7px; border-radius: 2px; | |
| letter-spacing: 1px; | |
| } | |
| .count-badge.green { background: var(--green); color: #fff; } | |
| .count-badge.amber { background: var(--amber); color: #fff; } | |
| /* W1 · animated tokenization (source on top, schemes drop down) ------ */ | |
| .tk-anim { margin-top: 18px; } | |
| .tk-source, .tk-scheme { | |
| display: grid; | |
| grid-template-columns: 124px 1fr; | |
| gap: 18px; | |
| align-items: start; | |
| padding: 8px 0; | |
| } | |
| .tk-scheme { padding: 10px 0; min-height: 32px; } | |
| .tk-source { padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; } | |
| .tk-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| padding-top: 2px; | |
| } | |
| .tk-label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; | |
| font-weight: 500; | |
| color: var(--ink-soft); | |
| text-transform: uppercase; | |
| letter-spacing: 1.6px; | |
| } | |
| .tk-stat { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| color: var(--ink-faint); | |
| letter-spacing: 0.5px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .tk-stat .n { | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .tk-scheme[data-scheme="bpe"] .tk-stat .n { color: var(--amber-dark); } | |
| .tk-scheme[data-scheme="kmer"] .tk-stat .n { color: var(--green-dark); } | |
| /* Source: tight grid of small chips */ | |
| .tk-source-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| row-gap: 2px; | |
| } | |
| .tk-source-strip .tk-base { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 13px; | |
| height: 17px; | |
| color: #fff; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 500; | |
| border-radius: 1px; | |
| flex: 0 0 13px; | |
| transition: opacity 0.35s ease, filter 0.35s ease; | |
| } | |
| .tk-source-strip .tk-base + .tk-base { margin-left: 1px; } | |
| .tk-source-strip .tk-base.consumed { opacity: 0.18; filter: grayscale(0.6); } | |
| .tk-base.A { background: var(--base-a); } | |
| .tk-base.T { background: var(--base-t); } | |
| .tk-base.C { background: var(--base-c); } | |
| .tk-base.G { background: var(--base-g); } | |
| /* Scheme strips: hold dropped tokens with <> brackets */ | |
| .tk-scheme-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1px 8px; | |
| min-height: 20px; | |
| } | |
| .tk-token { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| display: inline-flex; | |
| align-items: center; | |
| opacity: 0; | |
| will-change: transform, opacity; | |
| } | |
| .tk-token.dropped { | |
| opacity: 1; | |
| transition: | |
| transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), | |
| opacity 0.32s ease; | |
| } | |
| .tk-token .br { color: var(--ink-faint); font-weight: 400; } | |
| .tk-token.tail .br { color: var(--ink-faint); } | |
| .tk-token.tail { opacity: 0.55; } | |
| .tk-token.tail.dropped { opacity: 0.55; } | |
| /* Layouts */ | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 14px; | |
| margin-top: 14px; | |
| } | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| margin-top: 14px; | |
| } | |
| @media (max-width: 720px) { | |
| .grid-3, .grid-2 { grid-template-columns: 1fr; } | |
| } | |
| .col-card { | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 14px; | |
| } | |
| .col-card .col-title { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; | |
| letter-spacing: 1.6px; text-transform: uppercase; | |
| color: var(--ink-soft); | |
| margin-bottom: 8px; | |
| } | |
| .col-card .col-foot { | |
| margin-top: 10px; | |
| display: flex; align-items: center; gap: 8px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--ink-soft); | |
| text-transform: uppercase; letter-spacing: 1.4px; | |
| } | |
| /* Bar chart helpers */ | |
| .bar-row { | |
| display: grid; | |
| grid-template-columns: 18px 1fr 64px; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 3px 0; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| } | |
| .bar-row .bar-label { color: var(--ink-soft); font-weight: 500; text-align: center; } | |
| .bar-row .bar-track { | |
| position: relative; | |
| height: 14px; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| } | |
| .bar-row .bar-fill { | |
| height: 100%; | |
| transition: width 220ms ease, background-color 220ms ease; | |
| } | |
| .bar-row .bar-val { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } | |
| .bar-row.highlight .bar-track { box-shadow: 0 0 0 2px var(--green-tint); } | |
| /* 6-position grid (used in W4, W5, W6) */ | |
| .posgrid { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 8px; | |
| } | |
| .posgrid__col { | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| border-radius: 2px; | |
| padding: 8px 6px 6px; | |
| } | |
| .posgrid__pos { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; color: var(--ink-faint); | |
| text-transform: uppercase; letter-spacing: 1.4px; | |
| text-align: center; margin-bottom: 6px; | |
| } | |
| .posgrid__bars { | |
| display: flex; flex-direction: column; gap: 3px; | |
| } | |
| .posgrid .mini-row { | |
| display: grid; grid-template-columns: 12px 1fr 32px; | |
| align-items: center; gap: 4px; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; | |
| } | |
| .posgrid .mini-row .ml { color: var(--ink-soft); text-align: center; font-weight: 500; } | |
| .posgrid .mini-row .mt { position: relative; height: 10px; background: #fff; border: 1px solid var(--rule); } | |
| .posgrid .mini-row .mf { display: block; height: 100%; transition: width 200ms ease; } | |
| .posgrid .mini-row .mv { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 9.5px; } | |
| .posgrid__col.argmax-A { box-shadow: inset 0 0 0 1px var(--base-a); } | |
| .posgrid__col.argmax-T { box-shadow: inset 0 0 0 1px var(--base-t); } | |
| .posgrid__col.argmax-C { box-shadow: inset 0 0 0 1px var(--base-c); } | |
| .posgrid__col.argmax-G { box-shadow: inset 0 0 0 1px var(--base-g); } | |
| .posgrid__col.locked { background: #fff; } | |
| .posgrid__col.frozen .posgrid__bars { opacity: 0.4; } | |
| .posgrid__sel { display: flex; gap: 3px; margin-top: 8px; } | |
| .cond-pick { | |
| flex: 1 1 0; min-width: 0; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; | |
| padding: 3px 0; border: 1px solid var(--rule); border-radius: 2px; | |
| background: #fff; cursor: pointer; | |
| transition: background 0.12s, border-color 0.12s, color 0.12s; | |
| } | |
| .cond-pick:hover { border-color: #888; } | |
| .cond-pick.active { color: #fff; } | |
| .cond-pick.active.b-A { background: var(--base-a); border-color: var(--base-a); } | |
| .cond-pick.active.b-T { background: var(--base-t); border-color: var(--base-t); } | |
| .cond-pick.active.b-C { background: var(--base-c); border-color: var(--base-c); } | |
| .cond-pick.active.b-G { background: var(--base-g); border-color: var(--base-g); } | |
| /* W3 · real Carbon-500M per-token scoring --------------------------- */ | |
| .w3-itok { cursor: pointer; transition: outline-color 0.12s; } | |
| .w3-itok:hover { border-color: #888; } | |
| .w3-sub { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; color: var(--ink-soft); | |
| margin: 2px 0 10px; line-height: 1.7; | |
| } | |
| .w3-sub b { color: var(--ink); font-weight: 600; } | |
| .w3-sub .tok { margin: 0 2px; } | |
| .w3-toprow { | |
| display: grid; | |
| grid-template-columns: 92px 1fr 52px; | |
| gap: 12px; align-items: center; | |
| margin: 4px 0; | |
| font-family: "JetBrains Mono", monospace; font-size: 11px; | |
| } | |
| .w3-toprow .km { font-weight: 500; letter-spacing: 0.5px; } | |
| .w3-toprow .bar { height: 13px; background: var(--soft-cream); border: 1px solid var(--rule); } | |
| .w3-toprow .fill { height: 100%; background: var(--green); transition: width 0.35s ease; } | |
| .w3-toprow .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); } | |
| .w3-toprow.observed .km { color: var(--ink); } | |
| .w3-toprow.observed .fill { background: var(--amber); } | |
| .w3-io { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 6px; } | |
| .w3-io__group { display: flex; flex-direction: column; gap: 6px; } | |
| .w3-io__lab { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-faint); | |
| } | |
| .w3-io__arrow { font-family: "JetBrains Mono", monospace; font-size: 16px; color: var(--ink-faint); padding-bottom: 5px; } | |
| .w3-gt-tok { background: rgba(184,134,44,0.12); border-color: rgba(184,134,44,0.5) ; } | |
| .w3-chart { display: block; width: 100%; height: auto; margin-top: 6px; background: #fff; border: 1px solid #eee; } | |
| .w3-legend { | |
| display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; | |
| color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; | |
| } | |
| .w3-legend span { display: inline-flex; align-items: center; gap: 6px; } | |
| .w3-legend i { width: 12px; height: 3px; display: inline-block; } | |
| .w3-top { display: flex; gap: 6px; margin-top: 12px; } | |
| .w3-topchip { | |
| flex: 1 1 0; min-width: 0; | |
| display: inline-flex; flex-direction: column; align-items: center; gap: 2px; | |
| font-family: "JetBrains Mono", monospace; | |
| border: 1px solid var(--rule); background: var(--soft-cream); | |
| border-radius: 3px; padding: 6px 4px; | |
| } | |
| .w3-topchip .km { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; } | |
| .w3-topchip .pct { font-size: 9px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } | |
| .posgrid__col.clickable { cursor: pointer; } | |
| .posgrid__col.sel { outline: 2px solid var(--ink); outline-offset: 2px; } | |
| .w3-allgrid { | |
| display: grid; | |
| grid-template-columns: repeat(128, 1fr); | |
| gap: 1px; | |
| margin-top: 8px; | |
| } | |
| .w3-cell { aspect-ratio: 1; background: #d3d0c4; transition: background 0.15s ease; } | |
| .w3-cell.first { | |
| outline: 2px solid var(--ink); | |
| outline-offset: 1px; | |
| position: relative; z-index: 2; | |
| } | |
| .w3-order { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| font-family: "JetBrains Mono", monospace; font-size: 9.5px; | |
| text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-faint); | |
| } | |
| .w3-snake { width: 42px; height: auto; color: var(--ink-soft); display: block; } | |
| /* WCOND · conditional single-nucleotide decoding -------------------- */ | |
| .cond-slots { display: flex; gap: 6px; } | |
| .cond-slot { | |
| width: 40px; height: 40px; | |
| display: flex; align-items: center; justify-content: center; | |
| border: 1px solid var(--rule); border-radius: 3px; background: var(--soft-cream); | |
| font-family: "JetBrains Mono", monospace; font-size: 17px; font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .cond-slot.active { outline: 2px solid var(--ink); outline-offset: 1px; color: var(--ink-faint); } | |
| .cond-slot.pending { color: var(--ink-faint); background: transparent; border-style: dashed; } | |
| .cond-slot.A { background: rgba(26,122,64,0.13); border-color: rgba(26,122,64,0.42); color: var(--base-a); } | |
| .cond-slot.T { background: rgba(176,0,32,0.09); border-color: rgba(176,0,32,0.36); color: var(--base-t); } | |
| .cond-slot.C { background: rgba(44,90,160,0.11); border-color: rgba(44,90,160,0.40); color: var(--base-c); } | |
| .cond-slot.G { background: rgba(184,134,44,0.14); border-color: rgba(184,134,44,0.42); color: var(--amber-dark); } | |
| .cond-choices { display: flex; gap: 10px; } | |
| .cond-choice { | |
| flex: 1 1 0; cursor: pointer; border: 1px solid var(--rule); border-radius: 3px; | |
| padding: 10px 12px; background: var(--soft-cream); | |
| display: flex; flex-direction: column; gap: 7px; | |
| transition: background 0.12s, border-color 0.12s; | |
| } | |
| .cond-choice:hover { background: #fff; border-color: #888; } | |
| .cond-choice__top { display: flex; justify-content: space-between; align-items: baseline; font-family: "JetBrains Mono", monospace; } | |
| .cond-choice__base { font-size: 16px; font-weight: 600; } | |
| .cond-choice__pct { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } | |
| .cond-choice__bar { height: 8px; background: #fff; border: 1px solid var(--rule); } | |
| .cond-choice__fill { display: block; height: 100%; transition: width 0.25s ease; } | |
| .cond-done { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |
| .cond-note { | |
| font-family: "Inter", sans-serif; font-size: 12px; color: var(--ink-soft); | |
| background: var(--soft-cream); border-left: 2px solid var(--green); | |
| padding: 9px 12px; margin-top: 14px; line-height: 1.5; | |
| } | |
| .cond-note .tok { margin: 0 2px; } | |
| /* FNS factorization figure ------------------------------------------ */ | |
| .fns-seq-input { | |
| width: 120px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .fns-viz { | |
| font-family: "JetBrains Mono", monospace; | |
| padding: 10px 0 6px; | |
| } | |
| .fns-truth, .fns-row { | |
| display: grid; | |
| grid-template-columns: 222px repeat(6, 34px) 28px; | |
| align-items: center; | |
| column-gap: 7px; | |
| min-width: 480px; | |
| } | |
| .fns-truth { margin-bottom: 16px; } | |
| .fns-row { margin: 12px 0; } | |
| .fns-gtlabel { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 400; | |
| letter-spacing: 1.6px; | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| } | |
| .fns-eq { | |
| font-size: 16px; | |
| color: var(--ink); | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .fns-eq sub, .fns-eq sup { font-size: 11px; } | |
| .fns-eq .sum { color: var(--ink-soft); } | |
| .fns-bracket { | |
| font-family: "Inter", sans-serif; | |
| font-size: 34px; | |
| font-weight: 200; | |
| line-height: 0; | |
| color: var(--ink-soft); | |
| vertical-align: middle; | |
| transform: scaleX(0.7); | |
| display: inline-block; | |
| } | |
| .fns-box { | |
| width: 30px; height: 30px; | |
| display: inline-flex; align-items: center; justify-content: center; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; font-weight: 600; | |
| border-radius: 3px; border: 1px solid; | |
| transition: background 0.15s, border-color 0.15s, color 0.15s; | |
| } | |
| .fns-box.A { background: rgba(26,122,64,0.13); border-color: rgba(26,122,64,0.42); color: var(--base-a); } | |
| .fns-box.T { background: rgba(176,0,32,0.09); border-color: rgba(176,0,32,0.36); color: var(--base-t); } | |
| .fns-box.C { background: rgba(44,90,160,0.11); border-color: rgba(44,90,160,0.40); color: var(--base-c); } | |
| .fns-box.G { background: rgba(184,134,44,0.14); border-color: rgba(184,134,44,0.42); color: var(--amber-dark); } | |
| .fns-box.wild { opacity: 0.38; } | |
| .fns-loss { | |
| margin-top: 20px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--rule); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 16px; | |
| color: var(--ink); | |
| text-align: center; | |
| } | |
| .fns-loss sup, .fns-loss sub { font-size: 11px; } | |
| .fns-loss .frac { display: inline-block; margin: 0 1px; } | |
| .fns-loss .fns-term { margin: 0 3px; white-space: nowrap; } | |
| .fns-explain { | |
| margin-top: 18px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--rule); | |
| font-family: "Inter", sans-serif; | |
| font-size: 13px; | |
| line-height: 1.62; | |
| color: var(--ink-soft); | |
| } | |
| .fns-explain p { margin: 0 0 11px; } | |
| .fns-explain p:last-child { margin-bottom: 0; } | |
| .fns-explain strong { color: var(--ink); font-weight: 600; } | |
| .fns-explain .mono { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| color: var(--ink); | |
| } | |
| .fns-explain .mono sup, .fns-explain .mono sub { font-size: 9px; } | |
| /* Big stat tile */ | |
| .stat-tile { | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 14px 16px; | |
| text-align: left; | |
| } | |
| .stat-tile__label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--ink-soft); | |
| text-transform: uppercase; letter-spacing: 1.6px; | |
| margin-bottom: 6px; | |
| } | |
| .stat-tile__value { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 26px; font-weight: 500; | |
| color: var(--ink); | |
| } | |
| .stat-tile__sub { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--ink-soft); | |
| margin-top: 4px; letter-spacing: 0.5px; | |
| } | |
| .stat-tile.green .stat-tile__value { color: var(--green-dark); } | |
| .stat-tile.red .stat-tile__value { color: var(--red); } | |
| /* Footer */ | |
| .post-foot { | |
| max-width: 760px; | |
| margin: 64px auto 0; | |
| padding: 24px 32px 64px; | |
| border-top: 1px solid var(--rule); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; color: var(--ink-soft); | |
| text-transform: uppercase; letter-spacing: 1.4px; | |
| } | |
| .post-foot a { color: var(--green-dark); text-decoration: none; } | |
| .post-foot a:hover { color: var(--green); } | |
| /* Position picker (W7) */ | |
| .seq-track { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; | |
| letter-spacing: 0; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 10px 12px; | |
| display: flex; flex-wrap: wrap; gap: 1px; | |
| user-select: none; | |
| } | |
| .seq-track__b { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| width: 22px; height: 26px; | |
| cursor: pointer; | |
| border-radius: 2px; | |
| color: #fff; | |
| font-weight: 500; | |
| transition: transform 0.1s ease, box-shadow 0.1s ease; | |
| } | |
| .seq-track__b:hover { transform: translateY(-1px); } | |
| .seq-track__b.A { background: var(--base-a); } | |
| .seq-track__b.T { background: var(--base-t); } | |
| .seq-track__b.C { background: var(--base-c); } | |
| .seq-track__b.G { background: var(--base-g); } | |
| .seq-track__b.selected { | |
| box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--bg); | |
| } | |
| /* Per-base text color (used wherever DNA letters appear in prose) */ | |
| .b-A, .b-T, .b-C, .b-G { font-weight: 500; } | |
| .b-A { color: var(--base-a); } | |
| .b-T { color: var(--base-t); } | |
| .b-C { color: var(--base-c); } | |
| .b-G { color: var(--base-g); } | |
| /* k-mer token: colored bases inside <>, no chrome */ | |
| .kmer-token, .raw-seq { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| } | |
| .kmer-token { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 0; | |
| white-space: nowrap; | |
| } | |
| .kmer-token .br { color: var(--ink-faint); font-weight: 400; } | |
| .kmer-token.muted { opacity: 0.45; } | |
| .raw-seq { display: inline-flex; padding: 2px 0; } | |
| .bpe-flow { | |
| display: flex; align-items: center; flex-wrap: wrap; | |
| gap: 18px; | |
| margin: 10px 0 8px; | |
| } | |
| .bpe-flow .arrow { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 16px; | |
| color: var(--ink-faint); | |
| } | |
| /* Line 2: source token, SVG fan-out, candidate rows ----------------- */ | |
| .bpe-branches { | |
| display: grid; | |
| grid-template-columns: auto 96px 1fr; | |
| grid-template-rows: auto 150px; | |
| gap: 0; | |
| margin-top: 12px; | |
| } | |
| .branch-source { | |
| grid-column: 1; grid-row: 2; | |
| align-self: center; | |
| display: flex; flex-direction: column; align-items: center; gap: 6px; | |
| padding-right: 8px; | |
| } | |
| .branch-source__hint { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; color: var(--ink-faint); | |
| text-transform: uppercase; letter-spacing: 1.6px; | |
| } | |
| .branch-lines { | |
| grid-column: 2; grid-row: 2; | |
| width: 96px; height: 150px; | |
| display: block; | |
| } | |
| .branch-lines path { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.4; | |
| transition: stroke 0.15s, stroke-width 0.15s; | |
| } | |
| .branch-lines path.selected { stroke: var(--green); stroke-width: 2.2; } | |
| .branch-header { | |
| grid-column: 3; grid-row: 1; | |
| display: grid; | |
| grid-template-columns: 100px 60px 60px; | |
| gap: 18px; | |
| padding: 0 12px 10px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; | |
| font-weight: 500; | |
| letter-spacing: 1.6px; | |
| text-transform: uppercase; | |
| color: var(--ink-soft); | |
| } | |
| .branch-header > span { text-align: center; } | |
| .branch-header > span:first-child { text-align: left; color: var(--ink-faint); } | |
| .branch-targets { | |
| grid-column: 3; grid-row: 2; | |
| display: grid; | |
| grid-template-rows: repeat(5, 26px); | |
| row-gap: 5px; | |
| align-content: center; | |
| justify-content: start; | |
| height: 150px; | |
| } | |
| .cand-row { | |
| display: grid; | |
| grid-template-columns: 100px 60px 60px; | |
| gap: 18px; | |
| align-items: center; | |
| padding: 2px 12px; | |
| cursor: pointer; | |
| border-radius: 2px; | |
| transition: background 0.12s; | |
| } | |
| .cand-row:hover { background: rgba(0,0,0,0.03); } | |
| .cand-row.selected { background: var(--green-tint); } | |
| .mark { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; | |
| font-weight: 500; | |
| text-align: center; | |
| line-height: 1; | |
| user-select: none; | |
| } | |
| .mark.ok { color: var(--green); } | |
| .mark.bad { color: var(--red); } | |
| /* explanation note */ | |
| .note { | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; line-height: 1.55; | |
| color: var(--ink-soft); | |
| background: var(--soft-cream); | |
| border-left: 2px solid var(--green); | |
| padding: 10px 12px; | |
| margin-top: 14px; | |
| } | |
| .note code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| background: #fff; | |
| border: 1px solid var(--rule); | |
| padding: 0 4px; border-radius: 2px; | |
| color: var(--green-dark); | |
| } | |
| .formula { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 10px 12px; | |
| margin-top: 10px; | |
| color: var(--ink); | |
| overflow-x: auto; | |
| } | |
| .formula .hl { color: var(--green-dark); font-weight: 600; } | |
| /* Iframe wrapper: white page, no widget chrome — the host page provides the | |
| heading and description, so we only ship the interactive demo card. */ | |
| body { padding: 20px 24px; background: #fff; } | |
| .widget { max-width: 880px; margin: 0 auto; padding: 0; border: 0; } | |
| .widget__head, .widget__caption { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <aside class="widget" id="wcond"> | |
| <div class="widget__head"> | |
| <span class="widget__eyebrow">§ Widget · 04</span> | |
| <span class="widget__title">Conditioning the base distributions: fix a base, the rest adapt</span> | |
| </div> | |
| <p class="widget__caption"> | |
| Same Carbon-500M next-token distribution as Widget 03. Fix a base under any position and the open positions | |
| re-marginalize over only the six-mers consistent with your choices; a fixed position freezes at its current | |
| distribution, and the grid below greys out the six-mers that are no longer reachable. | |
| </p> | |
| <div class="demo"> | |
| <div class="demo-toolbar"> | |
| <span id="wcond-meta"></span> | |
| <span class="spacer"></span> | |
| <button class="pill" id="wcond-reset">CLEAR FIXED</button> | |
| </div> | |
| <div class="demo-label">Per-position base distribution · fix a base and the rest re-condition</div> | |
| <div class="posgrid" id="wcond-grid"></div> | |
| <div class="demo-label" style="margin-top: 18px">All <span id="wcond-vocab"></span> six-mers, ranked by probability · <span id="wcond-hint"></span></div> | |
| <div class="w3-allgrid" id="wcond-allgrid"></div> | |
| </div> | |
| </aside> | |
| <script> | |
| // ============================================================ | |
| // Shared utilities | |
| // ============================================================ | |
| const BASES = ['A', 'T', 'C', 'G']; | |
| const BASE_IDX = {A: 0, T: 1, C: 2, G: 3}; | |
| const BASE_COLOR = { A: 'var(--base-a)', T: 'var(--base-t)', C: 'var(--base-c)', G: 'var(--base-g)' }; | |
| // FNV-1a 32-bit | |
| function hash32(s) { | |
| let h = 0x811c9dc5; | |
| for (let i = 0; i < s.length; i++) { | |
| h ^= s.charCodeAt(i); | |
| h = Math.imul(h, 0x01000193); | |
| } | |
| return h >>> 0; | |
| } | |
| function rand01(seed) { | |
| const h = hash32(String(seed)); | |
| return (h % 1000003) / 1000003; | |
| } | |
| function softmax(arr) { | |
| let m = -Infinity; | |
| for (let i = 0; i < arr.length; i++) if (arr[i] > m) m = arr[i]; | |
| const out = new Float64Array(arr.length); | |
| let s = 0; | |
| for (let i = 0; i < arr.length; i++) { | |
| out[i] = Math.exp(arr[i] - m); | |
| s += out[i]; | |
| } | |
| for (let i = 0; i < arr.length; i++) out[i] /= s; | |
| return out; | |
| } | |
| function cleanDNA(s) { | |
| return (s || '').toUpperCase().replace(/[^ACGT]/g, ''); | |
| } | |
| function escapeHTML(s) { | |
| return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); | |
| } | |
| // 6-mer integer <-> string helpers | |
| function kmerToIdx(k) { | |
| let i = 0; | |
| for (let p = 0; p < k.length; p++) { | |
| const b = BASE_IDX[k[p]]; | |
| if (b == null) return -1; | |
| i = i * 4 + b; | |
| } | |
| return i; | |
| } | |
| function idxToKmer(i, k = 6) { | |
| let s = ''; | |
| for (let p = k - 1; p >= 0; p--) { | |
| s = BASES[(i >> (2 * p)) & 3] + s; | |
| } | |
| return s; | |
| } | |
| function baseAt(i, p) { | |
| // p in [0..5], 0 is leftmost | |
| return (i >> (2 * (5 - p))) & 3; | |
| } | |
| // generate a 4096-d distribution conditioned on a string seed | |
| function distribution4096(seed) { | |
| const logits = new Float64Array(4096); | |
| for (let i = 0; i < 4096; i++) { | |
| const a = rand01(seed + ':a:' + i); | |
| const b = rand01(seed + ':b:' + (i * 7919)); | |
| const c = rand01(seed + ':c:' + (i * 65537)); | |
| // mix a few uniforms → roughly-normal logit centered near 0 | |
| logits[i] = (a + b + c - 1.5) * 3.2; | |
| } | |
| return softmax(logits); | |
| } | |
| function marginals6x4(probs) { | |
| const m = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]; | |
| for (let i = 0; i < 4096; i++) { | |
| const p = probs[i]; | |
| for (let pos = 0; pos < 6; pos++) { | |
| m[pos][baseAt(i, pos)] += p; | |
| } | |
| } | |
| return m; | |
| } | |
| function fmtPct(p) { return (p * 100).toFixed(2) + '%'; } | |
| function fmt(p, d=4) { return Number(p).toFixed(d); } | |
| // Render a row of per-base bars (used for variants of W4/W6/W7) | |
| function renderPosCol(parent, posIndex, dist4, mode) { | |
| const max = Math.max(0.0001, ...dist4); | |
| let argmax = 0; | |
| for (let i = 1; i < 4; i++) if (dist4[i] > dist4[argmax]) argmax = i; | |
| const col = document.createElement('div'); | |
| col.className = 'posgrid__col' + (mode === 'argmax' ? ' argmax-' + BASES[argmax] : ''); | |
| col.innerHTML = | |
| `<div class="posgrid__pos">pos ${posIndex + 1}</div>` + | |
| `<div class="posgrid__bars">` + | |
| BASES.map((b, j) => { | |
| const w = (dist4[j] / max) * 100; | |
| const isMax = j === argmax; | |
| return `<div class="mini-row"> | |
| <span class="ml">${b}</span> | |
| <span class="mt"><span class="mf" style="width:${w.toFixed(1)}%;background:${BASE_COLOR[b]};opacity:${isMax ? 1 : 0.55}"></span></span> | |
| <span class="mv">${(dist4[j] * 100).toFixed(1)}</span> | |
| </div>`; | |
| }).join('') + | |
| `</div>`; | |
| parent.appendChild(col); | |
| } | |
| function basesHTML(seq) { | |
| return Array.from(seq).map((c) => `<span class="base ${c}">${c}</span>`).join(''); | |
| } | |
| (function setupCond() { | |
| const DATA = {"model":"HuggingFaceBio/Carbon-500M","k":6,"vocab":4096,"inputs":["AGCCCT","CCAGGA","CAGGCT","GCATCA","GAAGAG","GCCATC","AAGCAG","GTCTGT"],"probs_ppm":[802,251,284,417,172,164,227,305,331,226,272,77,321,166,251,353,188,140,164,133,106,151,142,100,212,219,244,38,203,181,176,241,267,181,209,359,112,181,190,245,238,236,196,59,58,75,73,85,541,306,283,447,153,179,203,223,400,309,319,83,539,296,302,351,177,102,87,113,68,129,90,88,128,111,102,33,87,74,99,117,100,81,108,100,89,187,137,114,121,183,153,25,66,83,88,91,138,108,153,259,82,163,157,216,186,233,178,45,34,31,44,43,197,131,155,244,90,134,126,135,172,183,164,30,180,148,192,233,264,98,223,240,102,147,210,228,285,164,212,93,280,137,320,303,87,83,117,101,79,205,217,132,212,185,215,43,177,149,196,176,195,134,182,306,124,252,317,347,225,229,234,54,56,42,55,66,51,45,58,91,34,55,62,77,86,63,68,22,94,52,90,91,446,155,264,694,113,127,211,304,331,189,242,86,345,137,216,334,109,91,114,126,89,123,118,88,168,154,166,48,174,145,151,172,203,141,164,404,95,133,173,261,207,145,166,58,60,52,60,59,514,323,337,770,173,159,243,239,357,315,303,84,328,153,207,319,171,125,105,192,74,67,68,110,113,89,87,27,82,65,71,106,75,155,63,50,80,111,81,69,82,97,99,19,73,99,79,86,83,108,94,128,44,83,54,104,101,110,75,25,20,33,22,34,151,88,80,145,75,58,60,77,156,118,88,32,132,71,68,100,164,106,86,108,66,155,97,82,151,125,115,31,94,73,83,91,165,176,144,115,191,299,217,232,247,292,266,38,153,173,145,185,144,152,150,251,99,170,201,224,192,193,192,37,43,34,31,50,136,119,102,153,81,128,107,116,165,220,136,30,127,127,131,123,218,110,139,219,93,132,295,201,278,232,257,65,256,152,287,269,97,131,140,111,114,221,340,193,254,284,266,58,190,254,234,227,215,196,247,447,140,250,319,310,298,287,225,72,67,60,69,77,52,49,42,69,34,38,62,53,63,75,73,22,54,53,68,63,199,135,137,363,76,93,142,196,200,152,187,74,180,104,134,227,109,159,140,131,94,149,146,158,183,211,189,43,140,229,163,189,161,161,144,271,85,117,113,264,162,156,127,43,40,71,49,44,291,218,167,387,125,141,137,223,304,278,254,103,269,141,165,285,248,142,195,307,80,72,86,152,300,139,141,67,183,110,167,224,90,95,168,91,94,144,120,97,224,213,196,51,155,188,180,205,186,153,526,339,76,123,113,197,205,164,127,43,57,65,78,91,355,224,271,492,180,127,142,211,554,340,314,124,369,273,221,254,133,71,67,93,52,73,63,93,138,151,96,36,94,63,88,124,94,68,193,83,113,199,171,177,207,253,222,46,122,139,137,168,151,127,228,276,95,162,130,222,224,210,127,46,43,43,58,69,262,158,161,304,150,167,148,222,286,314,234,81,212,146,168,275,259,121,197,284,107,125,237,236,328,267,387,107,274,162,304,405,125,104,170,123,110,259,304,229,221,264,304,78,217,281,353,357,225,176,237,457,154,185,253,336,261,225,274,63,68,59,73,88,67,54,54,129,39,35,62,91,100,64,94,39,89,54,90,106,41,24,32,89,24,26,32,73,59,39,51,34,56,30,48,72,27,44,49,53,33,41,50,45,73,56,60,22,71,62,61,95,41,38,67,104,29,33,45,90,56,48,51,32,13,18,18,28,75,46,69,144,46,32,42,70,91,79,99,49,79,44,59,89,307,191,198,330,79,100,117,135,202,175,142,53,418,198,257,420,120,77,87,105,63,109,83,64,160,159,123,30,163,129,109,189,148,145,127,298,63,117,101,125,139,170,102,32,49,44,41,66,322,216,201,498,75,102,114,111,272,248,201,51,383,212,158,225,116,87,74,123,55,94,80,87,118,108,85,26,88,98,107,120,77,72,78,63,81,144,146,115,130,156,128,26,62,83,77,96,109,111,111,191,51,127,138,169,128,153,111,36,33,31,38,37,160,136,118,208,68,119,108,144,129,175,133,33,135,124,125,156,243,131,208,316,97,141,208,235,259,207,226,78,337,225,452,401,102,77,129,101,97,178,253,156,205,243,242,53,202,254,252,237,210,176,222,366,130,232,265,303,239,233,186,60,57,64,76,86,51,50,55,91,28,42,46,71,53,74,81,28,67,57,82,86,368,163,211,579,108,147,180,223,296,193,194,74,397,142,272,528,134,100,90,133,92,151,140,130,236,189,171,42,185,170,157,202,193,137,133,325,89,134,133,227,167,169,140,47,47,47,46,69,381,209,218,404,87,159,140,160,255,278,206,61,263,163,138,292,389,177,145,275,102,103,107,146,175,126,122,38,195,136,172,250,141,83,77,85,89,119,100,72,126,123,144,27,153,115,92,130,114,110,123,180,69,111,107,119,132,141,111,27,35,41,34,45,207,109,111,190,71,94,90,119,144,114,108,30,206,142,118,147,124,73,60,76,98,90,65,75,101,81,79,19,61,52,68,71,114,121,99,78,125,217,171,117,139,141,164,28,92,104,115,114,114,120,131,202,97,187,172,175,185,191,144,34,34,38,42,44,128,105,114,134,80,113,93,113,117,126,106,26,139,110,130,141,193,89,128,180,101,142,157,186,228,129,148,48,210,144,229,235,86,79,136,86,108,199,203,133,192,164,153,45,145,203,203,198,153,138,185,276,119,246,264,379,192,195,201,53,52,64,68,60,35,32,36,58,36,33,45,54,48,43,40,14,62,40,61,50,224,87,108,297,65,80,105,112,129,95,106,28,196,77,130,213,84,63,61,101,59,104,108,69,116,114,126,26,105,118,85,122,187,129,142,228,105,122,147,212,143,142,128,44,41,39,41,55,263,137,111,284,70,109,115,118,139,151,129,35,225,131,112,178,364,181,146,294,104,131,117,129,138,117,113,38,157,99,103,196,92,116,79,93,161,280,148,134,170,212,167,36,87,127,86,128,164,195,131,302,96,193,137,225,161,240,136,42,35,48,38,44,218,126,101,216,80,107,88,118,211,189,123,40,190,127,102,200,346,195,141,248,104,282,149,130,215,189,181,49,148,123,141,199,347,237,238,228,233,1506,319,241,346,455,456,68,218,280,224,306,258,298,281,554,187,538,403,434,418,522,340,93,74,64,68,84,346,250,189,341,150,361,203,219,285,348,267,71,266,220,201,393,278,132,191,296,110,210,304,246,322,254,268,75,334,244,382,447,198,182,232,228,208,470,628,300,434,526,567,91,345,417,459,461,386,362,364,722,237,566,574,630,513,563,423,105,111,108,118,150,65,56,55,93,35,55,89,65,60,63,63,20,70,60,67,91,271,169,201,494,90,166,216,219,213,185,207,68,221,150,191,287,135,149,153,182,136,380,274,273,252,315,308,54,213,323,186,263,253,223,226,494,166,277,292,520,273,287,231,84,49,71,60,82,414,281,252,552,118,264,246,261,297,410,337,82,355,223,264,446,256,179,184,378,87,87,122,149,227,129,157,56,223,138,142,282,83,116,118,95,120,232,208,161,371,312,290,81,170,182,172,224,197,212,249,404,102,228,206,266,292,286,188,73,69,86,75,80,464,265,258,552,150,211,246,269,465,412,352,125,437,287,232,390,149,117,88,165,71,112,117,120,193,153,165,38,132,106,88,167,166,114,180,129,155,256,327,242,400,457,477,80,171,214,201,229,231,217,253,436,189,329,534,442,456,531,284,86,55,70,66,105,385,281,277,485,229,293,344,354,465,551,375,91,393,232,234,404,358,146,219,412,135,207,359,305,376,236,345,111,443,285,481,601,168,131,210,183,165,409,580,314,473,440,712,128,347,393,422,464,389,308,347,789,193,419,563,685,403,361,424,107,112,100,115,142,80,64,82,162,51,58,78,107,102,76,101,40,106,76,97,113,51,31,42,88,17,32,46,57,47,34,46,22,54,31,38,72,29,34,36,36,30,45,59,42,64,61,71,29,47,60,48,51,43,42,43,93,30,49,64,110,59,55,56,26,16,14,20,26,68,53,78,158,39,53,67,66,78,75,81,40,84,46,57,96,198,144,121,279,58,95,97,110,147,127,106,39,235,142,164,246,77,72,68,80,59,121,87,89,141,161,140,36,180,136,108,188,138,139,109,206,64,149,116,125,138,200,117,41,45,48,39,46,228,169,113,211,79,123,86,134,213,201,163,45,239,161,163,187,105,77,75,119,53,99,83,106,119,103,94,29,76,85,96,112,96,76,103,106,89,196,139,129,159,186,165,30,104,191,132,138,129,168,145,222,71,191,175,227,193,250,171,48,27,45,38,49,163,139,143,198,94,169,139,399,139,180,141,43,132,136,170,180,166,87,104,170,64,107,116,150,169,120,128,53,206,150,241,237,96,88,109,105,74,175,207,135,162,191,182,43,188,228,334,242,181,174,162,299,96,194,215,252,194,185,175,61,50,49,50,72,27,30,31,43,18,32,32,56,44,31,30,15,39,42,49,55,283,151,167,451,94,142,179,206,199,164,162,74,306,172,240,371,103,122,111,120,97,201,188,137,203,237,245,52,182,205,184,288,218,188,182,367,134,219,225,337,246,238,183,87,61,60,61,82,374,254,224,458,93,211,174,196,274,220,200,90,369,200,179,384,418,245,273,355,124,124,167,189,308,217,209,70,260,216,252,339,118,101,110,89,76,106,122,70,291,162,195,39,158,144,135,204,286,241,267,414,98,167,194,212,251,234,214,53,69,89,86,101,439,248,229,417,137,149,176,174,335,293,220,61,387,258,308,281,141,107,93,117,74,137,112,105,198,123,157,45,100,98,125,114,146,132,171,133,147,339,255,174,231,230,229,51,137,173,190,204,270,288,351,554,196,414,401,399,369,402,362,90,79,106,118,105,243,189,256,319,160,209,204,252,309,249,216,83,292,253,292,263,298,162,259,375,169,193,294,320,879,292,314,159,320,265,540,422,150,124,174,165,153,280,439,231,378,260,315,92,268,323,428,328,352,352,538,676,209,516,646,679,477,373,424,108,157,104,147,160,86,72,89,109,62,80,92,150,173,101,127,41,129,117,178,141,724,362,467,1228,205,256,432,524,615,413,432,158,722,326,608,938,238,233,316,256,148,297,340,225,444,446,407,100,323,369,323,475,619,500,708,1367,256,515,679,728,555,525,511,161,183,180,234,216,939,550,608,1244,344,367,412,498,663,625,512,156,736,398,525,610,220,119,115,204,68,77,91,103,119,111,121,41,121,88,121,125,72,84,64,76,57,108,96,66,126,187,126,34,94,108,72,137,165,164,152,262,98,172,142,195,145,200,127,38,36,50,51,56,228,121,111,205,94,94,111,114,175,207,124,49,163,124,130,158,204,109,118,163,76,162,161,108,219,199,195,42,110,89,122,140,292,229,172,205,184,479,380,276,328,498,439,73,247,306,325,321,345,440,402,691,234,582,685,647,463,638,549,96,85,102,87,104,260,215,190,302,135,289,204,210,234,335,260,73,261,215,226,236,379,186,252,420,137,243,371,325,433,323,394,135,364,321,512,507,188,191,273,241,185,521,709,336,435,1188,638,110,453,570,654,526,464,427,529,1116,273,650,906,829,479,552,575,149,143,132,206,166,84,64,77,108,54,69,104,100,102,115,106,34,132,109,134,140,527,276,403,996,167,216,406,424,414,370,448,149,458,287,509,596,256,263,304,309,224,372,428,342,527,802,841,120,427,614,427,490,509,488,456,1138,296,500,629,1193,452,622,567,154,121,183,155,190,779,500,400,1075,206,288,351,461,553,642,524,143,648,459,510,652,455,226,293,451,72,100,249,164,303,183,269,84,301,178,243,358,112,153,139,125,129,227,196,155,458,452,511,106,208,258,232,337,258,261,371,502,151,201,250,310,435,350,290,104,104,109,141,152,656,357,377,824,169,217,274,285,686,542,507,166,625,418,448,524,288,148,159,236,106,136,125,153,292,236,214,64,191,108,171,229,175,146,206,174,212,363,360,305,484,613,672,114,245,269,274,375,287,335,467,798,192,450,466,628,628,798,468,153,97,127,140,175,619,383,400,793,280,377,377,390,722,630,514,160,570,386,448,679,527,190,317,524,160,250,404,325,442,312,430,171,474,315,661,678,243,153,230,227,158,386,594,291,458,533,702,140,365,425,524,545,543,363,475,988,198,477,587,646,478,444,1964,176,147,130,237,251,148,79,109,234,58,80,120,137,142,133,168,56,140,106,174,209,92,55,70,153,34,35,69,67,94,76,62,46,97,65,105,146,40,45,75,51,39,60,86,64,104,135,152,43,75,113,84,121,75,66,96,203,52,60,110,150,118,120,127,93,32,33,44,50,123,90,107,224,48,59,87,109,140,112,157,74,130,90,126,172,58,36,40,58,20,25,30,29,48,38,45,18,75,45,61,87,28,32,30,28,23,33,38,24,58,58,65,20,53,53,44,85,50,42,53,87,25,44,50,49,53,61,43,16,26,23,26,28,95,60,70,140,26,33,45,47,78,83,64,29,117,87,77,119,43,32,25,48,14,35,39,33,48,38,37,18,34,31,46,49,33,28,39,48,26,62,56,50,54,73,79,17,35,52,54,58,59,86,89,98,38,95,75,96,82,88,79,30,28,37,37,44,53,64,67,107,38,63,77,122,83,77,68,22,73,86,94,100,74,39,49,87,24,54,65,77,91,44,64,38,88,89,126,146,33,36,60,38,39,69,95,60,95,93,95,41,87,108,136,114,74,95,114,158,38,89,123,164,94,93,103,39,37,46,74,61,20,18,24,37,9,15,22,33,23,23,25,16,32,30,47,40,144,51,76,225,32,54,78,87,117,63,75,37,119,65,125,165,54,48,56,56,33,54,85,58,102,94,94,30,71,88,91,105,104,89,101,227,54,80,129,136,116,111,119,54,51,56,50,94,169,115,118,228,48,59,89,91,133,105,120,46,154,109,134,167,764,457,519,749,301,312,407,511,512,353,405,162,628,311,489,678,193,223,198,161,196,269,309,193,307,312,370,98,355,295,305,464,422,391,518,672,218,369,533,635,386,368,283,89,134,155,164,194,1306,760,747,1252,427,430,557,675,959,737,754,197,1224,716,804,995,330,207,228,274,156,277,245,212,276,236,256,70,235,142,194,204,196,185,214,153,220,491,448,334,271,380,359,73,189,182,225,409,342,418,415,728,273,586,621,625,584,564,506,142,103,107,115,172,598,497,474,662,264,493,537,473,429,675,529,103,666,487,568,620,593,280,482,586,252,427,692,602,727,395,568,229,784,430,785,696,179,180,247,180,241,531,753,420,398,462,489,131,362,415,463,491,492,390,513,872,377,924,1053,1052,567,571,788,168,184,168,228,170,131,113,149,223,117,130,257,183,168,133,162,44,201,119,211,192,981,400,666,1703,290,386,562,807,675,428,622,210,1036,316,606,866,197,179,252,226,200,347,405,268,414,390,378,97,379,331,370,440,538,438,610,1428,346,497,764,1054,606,523,470,205,183,153,192,242,1328,794,893,2143,422,498,748,794,865,877,798,251,1072,495,737,836,376,235,238,381,163,135,172,201,258,199,200,70,243,283,184,299,146,207,119,130,174,260,222,175,208,289,240,75,203,445,202,225,294,331,256,441,142,272,210,330,247,297,225,73,83,128,87,95,337,234,217,353,181,187,191,257,348,340,306,86,319,224,193,308,324,186,157,301,128,271,223,209,345,310,275,57,183,141,206,230,285,332,316,272,344,719,526,514,445,689,601,97,334,471,390,511,409,401,457,785,273,598,615,715,426,628,570,123,117,102,115,138,390,292,233,431,244,454,313,373,379,581,476,91,437,339,303,442,411,202,290,481,222,360,688,456,556,483,691,182,634,404,648,695,164,225,307,198,214,535,779,402,496,819,707,147,444,822,659,575,488,575,527,1039,326,605,926,995,621,723,744,186,178,186,213,187,80,80,117,134,65,85,148,102,121,136,150,46,129,96,128,166,596,356,408,931,230,302,412,680,658,498,648,176,487,515,484,682,284,469,386,300,282,555,605,521,540,693,830,153,593,3525,654,716,472,402,464,1029,275,528,522,1081,508,574,503,178,135,239,162,220,841,586,521,1093,382,418,496,839,748,821,828,228,733,445,519,1013,601,328,389,709,172,174,205,346,514,289,336,139,424,250,324,561,157,190,174,150,213,318,245,237,462,394,468,130,289,440,465,358,326,326,582,694,191,284,265,473,395,386,273,118,99,152,183,168,1024,497,598,1249,347,317,381,634,1452,824,768,295,983,575,536,882,336,211,273,394,146,236,215,271,439,357,426,128,225,209,227,293,196,215,243,248,342,510,543,504,614,761,703,137,286,426,385,388,416,439,571,1014,256,615,551,955,640,748,544,196,120,158,179,247,886,644,700,1361,470,623,655,959,1129,1824,1000,328,957,635,690,1062,710,341,474,868,246,431,734,720,798,538,819,265,664,470,988,1185,228,225,405,270,221,605,877,545,593,645,796,175,536,572,690,848,522,459,709,1347,291,661,839,1052,558,647,752,194,198,227,234,319,189,128,160,345,96,123,161,263,208,209,342,107,225,147,314,431,91,48,73,204,50,59,88,172,117,81,109,74,131,82,109,203,56,50,73,77,58,101,114,104,112,142,139,55,103,203,155,188,93,88,107,273,56,94,130,248,104,133,107,56,43,41,83,97,146,114,132,324,79,75,120,206,190,150,218,159,210,110,168,252,783,439,471,793,233,245,259,347,484,381,296,144,749,508,566,922,212,205,225,168,197,314,280,206,415,472,389,106,441,366,331,609,381,387,462,860,173,351,313,470,358,412,301,100,148,151,118,199,1145,634,763,1351,289,389,385,414,887,859,598,199,1343,709,614,923,323,197,202,481,138,231,244,247,404,305,290,119,216,173,251,368,221,207,242,245,227,518,395,372,351,649,414,75,204,266,329,348,404,406,473,827,205,515,659,635,482,586,443,125,96,116,129,149,484,539,533,878,250,459,438,611,450,634,466,161,518,638,575,738,568,293,522,568,229,386,594,662,685,500,573,216,759,539,885,883,234,192,449,250,224,573,770,425,611,659,693,141,574,648,765,729,573,530,660,1009,295,725,875,878,548,578,612,197,218,200,216,314,114,141,173,311,82,146,137,240,135,176,206,64,200,159,306,216,915,419,559,1848,260,456,605,710,825,466,568,216,777,379,604,1091,277,232,286,290,296,538,424,380,538,540,536,150,421,380,426,611,587,486,574,1262,279,565,618,847,562,545,497,232,191,241,235,236,1317,647,849,1596,377,586,635,689,835,924,789,248,825,504,526,2976]}; | |
| const k = DATA.k, V = DATA.vocab, P = DATA.probs_ppm; | |
| const GREY = '#d3d0c4'; | |
| const gridEl = document.getElementById('wcond-grid'); | |
| const allgrid = document.getElementById('wcond-allgrid'); | |
| const hintEl = document.getElementById('wcond-hint'); | |
| document.getElementById('wcond-meta').textContent = DATA.model.split('/').pop() + ' · next 6-mer'; | |
| document.getElementById('wcond-vocab').textContent = V.toLocaleString(); | |
| const baseAt = (idx, p) => (idx >> (2 * (k - 1 - p))) & 3; | |
| let locks = new Array(k).fill(null); // base index 0..3, or null | |
| let frozen = new Array(k).fill(null); // snapshot sums[4] captured when a position is fixed | |
| function matchesLocks(flat) { | |
| for (let p = 0; p < k; p++) if (locks[p] !== null && baseAt(flat, p) !== locks[p]) return false; | |
| return true; | |
| } | |
| function condSums(p) { | |
| const s = [0, 0, 0, 0]; | |
| for (let f = 0; f < V; f++) if (matchesLocks(f)) s[baseAt(f, p)] += P[f]; | |
| return s; | |
| } | |
| // Stable per-column display order: sort base indices by the UNCONDITIONAL marginal once, | |
| // so conditioning only changes bar lengths, never their order. | |
| const colOrder = []; | |
| for (let p = 0; p < k; p++) { | |
| const s = [0, 0, 0, 0]; | |
| for (let f = 0; f < V; f++) s[baseAt(f, p)] += P[f]; | |
| colOrder.push([0, 1, 2, 3].sort((a, b) => s[b] - s[a])); | |
| } | |
| // Grid cells, one per six-mer, initially in probability-rank order. | |
| const order = [...Array(V).keys()].sort((a, b) => P[b] - P[a]); | |
| allgrid.innerHTML = order.map(() => '<span class="w3-cell"></span>').join(''); | |
| const cellByFlat = {}; | |
| order.forEach((flat, i) => { cellByFlat[flat] = allgrid.children[i]; }); | |
| const COLS = 128; // grid-template-columns: repeat(128, 1fr) | |
| const posOf = {}; // flat -> current cell index in the grid | |
| order.forEach((flat, i) => { posOf[flat] = i; }); | |
| function renderCols() { | |
| gridEl.innerHTML = ''; | |
| // Per-column percentages (these are what the numbers show); bars are scaled to the | |
| // largest percentage across columns, so they track the numbers as you condition. | |
| const cols = []; | |
| let gmaxPct = 0.0001; | |
| for (let p = 0; p < k; p++) { | |
| const locked = locks[p] !== null; | |
| const sums = locked ? frozen[p] : condSums(p); | |
| const total = sums[0] + sums[1] + sums[2] + sums[3]; | |
| const pct = sums.map((s) => (total ? s / total : 0)); | |
| gmaxPct = Math.max(gmaxPct, pct[0], pct[1], pct[2], pct[3]); | |
| cols.push({ locked, sums, pct }); | |
| } | |
| for (let p = 0; p < k; p++) { | |
| const { locked, sums, pct } = cols[p]; | |
| let am = 0; for (let j = 1; j < 4; j++) if (sums[j] > sums[am]) am = j; | |
| const bars = colOrder[p].map((j) => { | |
| const b = BASES[j]; | |
| const w = (pct[j] / gmaxPct) * 100; | |
| return '<div class="mini-row"><span class="ml" style="color:' + BASE_COLOR[b] + '">' + b + '</span>' + | |
| '<span class="mt"><span class="mf" style="width:' + w.toFixed(1) + '%;background:' + BASE_COLOR[b] + '"></span></span>' + | |
| '<span class="mv">' + (pct[j] * 100).toFixed(0) + '</span></div>'; | |
| }).join(''); | |
| const sel = BASES.map((b, j) => | |
| '<button class="cond-pick b-' + b + (locks[p] === j ? ' active' : '') + '" data-p="' + p + '" data-b="' + j + '">' + b + '</button>' | |
| ).join(''); | |
| const col = document.createElement('div'); | |
| col.className = 'posgrid__col argmax-' + BASES[am] + (locked ? ' frozen' : ''); | |
| col.innerHTML = | |
| '<div class="posgrid__pos">Position ' + (p + 1) + '</div>' + | |
| '<div class="posgrid__bars">' + bars + '</div>' + | |
| '<div class="posgrid__sel">' + sel + '</div>'; | |
| gridEl.appendChild(col); | |
| } | |
| gridEl.querySelectorAll('.cond-pick').forEach((btn) => btn.addEventListener('click', () => { | |
| const p = +btn.dataset.p, b = +btn.dataset.b; | |
| if (locks[p] === b) { locks[p] = null; frozen[p] = null; } | |
| else { frozen[p] = condSums(p); locks[p] = b; } // snapshot current dist, then fix | |
| renderCols(); recolorGrid(); | |
| })); | |
| } | |
| function recolorGrid() { | |
| let lop = -1; | |
| for (let p = 0; p < k; p++) if (locks[p] === null) { lop = p; break; } | |
| // Attainable six-mers (prob-ranked) move to the front; unattainable (grey) follow. | |
| const attainFlats = [], restFlats = []; | |
| for (const flat of order) (matchesLocks(flat) ? attainFlats : restFlats).push(flat); | |
| const display = attainFlats.concat(restFlats); | |
| // Cell pitch (column/row step) measured once per update — no per-cell layout reads. | |
| const stepX = allgrid.children[1].offsetLeft - allgrid.children[0].offsetLeft; | |
| const stepY = allgrid.children[COLS].offsetTop - allgrid.children[0].offsetTop; | |
| // Reorder + recolor. FLIP only the colored cells; grey cells are identical so they | |
| // can snap to their new slots invisibly (this is what keeps it smooth at 4,096 cells). | |
| const frag = document.createDocumentFragment(); | |
| const moved = []; | |
| display.forEach((flat, newIdx) => { | |
| const el = cellByFlat[flat]; | |
| const attain = matchesLocks(flat); | |
| el.style.background = attain ? BASE_COLOR[BASES[baseAt(flat, lop === -1 ? 0 : lop)]] : GREY; | |
| frag.appendChild(el); | |
| if (attain) { | |
| const oldIdx = posOf[flat]; | |
| const dx = ((oldIdx % COLS) - (newIdx % COLS)) * stepX; | |
| const dy = (Math.floor(oldIdx / COLS) - Math.floor(newIdx / COLS)) * stepY; | |
| el.style.transition = 'none'; | |
| if (dx || dy) { el.style.transform = 'translate(' + dx + 'px,' + dy + 'px)'; moved.push(el); } | |
| else el.style.transform = ''; | |
| } else { | |
| el.style.transition = 'none'; | |
| el.style.transform = ''; | |
| } | |
| }); | |
| allgrid.appendChild(frag); | |
| display.forEach((flat, i) => { posOf[flat] = i; }); | |
| requestAnimationFrame(() => moved.forEach((el) => { | |
| el.style.transition = 'transform 0.4s ease'; | |
| el.style.transform = ''; | |
| })); | |
| const anyLock = locks.some((x) => x !== null); | |
| hintEl.innerHTML = (lop === -1 ? 'fully fixed' : 'colored by base at position ' + (lop + 1)) + | |
| (anyLock ? ' · <b>' + attainFlats.length.toLocaleString() + '</b> attainable' : ''); | |
| } | |
| document.getElementById('wcond-reset').addEventListener('click', () => { | |
| locks = new Array(k).fill(null); frozen = new Array(k).fill(null); | |
| renderCols(); recolorGrid(); | |
| }); | |
| renderCols(); | |
| recolorGrid(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |