standard kit demo: research-preview, hero, try-it, on-device

js/main.js

@@ -0,0 +1,78 @@
+import { loadTongue, loadNames } from "./tongue.js";
+import { SAMPLES } from "./samples.js";
+import { previewBanner, hero, sectionCard, brandFooter } from "../kit/components/shell.js";
+import { inputPane, outputPane, controlsRow, statusLine } from "../kit/components/panes.js";
+import { mountSamples } from "../kit/components/samples.js";
+
+const app = document.getElementById("app");
+
+const input = inputPane({ label: "Text", id: "raw-text" });
+const output = outputPane({ label: "Language", placeholder: "the language appears here" });
+const status = statusLine();
+
+const chipsLabel = document.createElement("span");
+chipsLabel.className = "chips-label";
+chipsLabel.textContent = "Load a sample";
+const chips = document.createElement("div");
+chips.className = "chips";
+input.root.append(controlsRow(chipsLabel, chips), controlsRow(status.root));
+
+const demo = sectionCard({ eyebrow: "Try it · on this device", id: "demo" });
+const grid = document.createElement("div");
+grid.className = "demo-grid";
+grid.append(input.root, output.root);
+demo.append(grid);
+
+app.append(
+  previewBanner({
+    title: "Research preview",
+    text: "An early look at tongue, an on-device language identifier. The model runs in this page; nothing you type leaves it.",
+  }),
+  hero({
+    name: "Tongue",
+    lead: "Type a few words in any language and it names the language, offline, in a couple of milliseconds.",
+    accent: "83 languages, 2 MB, on the device.",
+  }),
+  demo,
+  brandFooter(),
+);
+
+mountSamples({ container: chips, textarea: input.textarea, samples: SAMPLES });
+
+function esc(s){ return s.replace(/[&<>]/g, c=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[c])); }
+
+let model = null, NAMES = {};
+
+function render(){
+  const text = input.textarea.value;
+  if(!text.trim() || !model){ output.out.innerHTML = ""; return; }
+  const r = model.detect(text);
+  if(r.top.length === 0){ output.out.innerHTML = ""; return; }
+  const nameOf = c => NAMES[c] || [c, ""];
+  const [nm, native] = nameOf(r.top[0].lang);
+  const tentative = r.reliability === "tentative";
+  const bars = r.top.map((t, i) => {
+    const [n2] = nameOf(t.lang);
+    return `<div class="lang-row"><span class="lang-name">${esc(n2)}</span>`
+      + `<span class="lang-bar"><span class="lang-fill${i?' alt':''}" style="transform:scaleX(${t.p.toFixed(3)})"></span></span>`
+      + `<span class="lang-pct">${(t.p*100).toFixed(1)}%</span></div>`;
+  }).join("");
+  const lead = tentative
+    ? `<p class="lang-note">Short or ambiguous — a best guess only. Add a few words for a confident read.</p>` : "";
+  output.out.innerHTML =
+    `${lead}<div class="lang-head"><span class="lang-primary${tentative?' soft':''}">${esc(nm)}</span>`
+    + `<span class="lang-native">${esc(native)}</span></div><div class="lang-bars">${bars}</div>`;
+  requestAnimationFrame(() => output.out.querySelectorAll(".lang-fill").forEach(el => {
+    const t = el.style.transform; el.style.transform = "scaleX(0)"; requestAnimationFrame(() => el.style.transform = t);
+  }));
+  status.set(`${[...r.text].length} characters · on this device`);
+}
+
+input.textarea.addEventListener("input", render);
+
+status.set("loading the model…", true);
+Promise.all([loadTongue(), loadNames()]).then(([m, n]) => {
+  model = m; NAMES = n;
+  status.set("ready · nothing leaves this page");
+  render();
+}).catch(e => status.set("failed to load: " + e.message));

js/samples.js

@@ -0,0 +1,14 @@
+export const SAMPLES = [
+  { id: "de", label: "kann ich das haben", text: "kann ich das haben" },
+  { id: "fr", label: "je voudrais un café", text: "je voudrais un café au lait" },
+  { id: "es", label: "¿dónde está la estación?", text: "¿dónde está la estación?" },
+  { id: "it", label: "quanto costa il biglietto", text: "quanto costa il biglietto" },
+  { id: "ko", label: "안녕하세요", text: "안녕하세요 만나서 반갑습니다" },
+  { id: "ja", label: "こんにちは", text: "こんにちは、お元気ですか" },
+  { id: "ru", label: "привет как дела", text: "привет как твои дела сегодня" },
+  { id: "ar", label: "مرحبا كيف حالك", text: "مرحبا كيف حالك اليوم" },
+  { id: "el", label: "Καλημέρα", text: "Καλημέρα τι κάνεις σήμερα" },
+  { id: "id", label: "saya suka makan", text: "saya suka makan nasi goreng" },
+  { id: "cy", label: "dw i'n hoffi coffi", text: "dw i'n hoffi coffi" },
+  { id: "vi", label: "xin chào bạn", text: "xin chào bạn khỏe không" },
+];

js/tongue.js

@@ -0,0 +1,169 @@
+// Pure-JS port of the tongue inference pipeline. Must match the Python
+// reference byte for byte on normalize + hashing + script routing, then
+// dequantize the int8 embedding and run the linear head. Verified against
+// Python by scripts/verify_web.py through tests/run_infer.mjs.
+
+// ---- normalize (docs/normalizer.md) ----
+const URL_RE = /(?:https?:\/\/|www\.)\S+/giu;
+const EMAIL_RE = /\S+@\S+\.\S+/gu;
+const MENTION_RE = /[@#][\p{L}\p{N}_]+/gu;
+const DIGIT_RE = /\p{Nd}+/gu;
+const DISCARD_RE = /[\p{So}\p{Sk}\p{Cf}\p{Co}\p{Cn}]/gu;
+const WS_RE = /\s+/gu;
+const MAX_CHARS = 512;
+
+export function normalize(text) {
+  let t = text.normalize("NFC");
+  t = t.replace(URL_RE, " ").replace(EMAIL_RE, " ").replace(MENTION_RE, " ");
+  t = t.replace(DIGIT_RE, " ").replace(DISCARD_RE, "");
+  t = t.toLowerCase();
+  t = t.replace(WS_RE, " ").trim();
+  return [...t].slice(0, MAX_CHARS).join("");
+}
+
+// ---- FNV-1a 32-bit over Unicode scalars (hashing.py) ----
+const OFFSET = 0x811c9dc5, PRIME = 0x01000193, MASK = 0xffffffff;
+function fnv1a(str) {
+  let h = OFFSET;
+  for (const ch of str) {
+    h ^= ch.codePointAt(0);
+    h = Math.imul(h, PRIME) & MASK;
+  }
+  return h >>> 0;
+}
+function* ngrams(text, orders) {
+  if (!text) return;
+  for (const token of text.split(" ")) {
+    if (!token) continue;
+    const marked = "^" + token + "$";
+    const cps = [...marked];
+    for (const n of orders) {
+      if (n > cps.length) continue;
+      for (let i = 0; i + n <= cps.length; i++) yield cps.slice(i, i + n).join("");
+    }
+  }
+}
+
+// ---- script routing (script.py) ----
+const RANGES = [
+  [0x41,0x5a,"Latin"],[0x61,0x7a,"Latin"],[0xc0,0x24f,"Latin"],
+  [0x370,0x3ff,"Greek"],[0x1f00,0x1fff,"Greek"],
+  [0x400,0x52f,"Cyrillic"],[0x2de0,0x2dff,"Cyrillic"],[0xa640,0xa69f,"Cyrillic"],
+  [0x530,0x58f,"Armenian"],[0x590,0x5ff,"Hebrew"],
+  [0x600,0x6ff,"Arabic"],[0x750,0x77f,"Arabic"],[0x8a0,0x8ff,"Arabic"],[0xfb50,0xfdff,"Arabic"],[0xfe70,0xfeff,"Arabic"],
+  [0x700,0x74f,"Syriac"],[0x780,0x7bf,"Thaana"],
+  [0x900,0x97f,"Devanagari"],[0x980,0x9ff,"Bengali"],[0xa00,0xa7f,"Gurmukhi"],[0xa80,0xaff,"Gujarati"],
+  [0xb00,0xb7f,"Oriya"],[0xb80,0xbff,"Tamil"],[0xc00,0xc7f,"Telugu"],[0xc80,0xcff,"Kannada"],
+  [0xd00,0xd7f,"Malayalam"],[0xd80,0xdff,"Sinhala"],[0xe00,0xe7f,"Thai"],[0xe80,0xeff,"Lao"],
+  [0xf00,0xfff,"Tibetan"],[0x1000,0x109f,"Myanmar"],[0x10a0,0x10ff,"Georgian"],[0x2d00,0x2d2f,"Georgian"],
+  [0x1200,0x137f,"Ethiopic"],[0x13a0,0x13ff,"Cherokee"],[0x1780,0x17ff,"Khmer"],[0x1800,0x18af,"Mongolian"],
+  [0x3040,0x309f,"Hiragana"],[0x30a0,0x30ff,"Katakana"],[0x31f0,0x31ff,"Katakana"],
+  [0x3400,0x4dbf,"Han"],[0x4e00,0x9fff,"Han"],[0xf900,0xfaff,"Han"],
+  [0xac00,0xd7af,"Hangul"],[0x1100,0x11ff,"Hangul"],[0x3130,0x318f,"Hangul"],
+].sort((a,b)=>a[0]-b[0]);
+const DECISIVE = {Hangul:"ko",Hiragana:"ja",Katakana:"ja",Thai:"th",Lao:"lo",Khmer:"km",Myanmar:"my",
+  Greek:"el",Hebrew:"he",Armenian:"hy",Georgian:"ka",Ethiopic:"am",Cherokee:"chr",Tamil:"ta",Telugu:"te",
+  Kannada:"kn",Malayalam:"ml",Sinhala:"si",Gujarati:"gu",Gurmukhi:"pa",Oriya:"or",Thaana:"dv",Tibetan:"bo",
+  Mongolian:"mn",Syriac:"syr",Han:"zh"};
+const NARROWING = {Cyrillic:["ru","uk","bg","sr","mk","be","kk","ky"],Arabic:["ar","fa","ur","ug"],
+  Devanagari:["hi","mr","ne"],Bengali:["bn","as"]};
+function scriptOf(cp){
+  let lo=0,hi=RANGES.length-1,ans=null;
+  while(lo<=hi){const m=(lo+hi)>>1; if(RANGES[m][0]<=cp){ans=RANGES[m];lo=m+1;}else hi=m-1;}
+  return ans && cp<=ans[1] ? ans[2] : null;
+}
+function histogram(text){const h={};for(const ch of text){const s=scriptOf(ch.codePointAt(0));if(s)h[s]=(h[s]||0)+1;}return h;}
+function presence(hist,names){
+  const scripted=Object.values(hist).reduce((a,b)=>a+b,0);
+  let best=null,bc=0;
+  for(const s of Object.keys(hist))if(names[s]!==undefined&&hist[s]>bc){bc=hist[s];best=s;}
+  if(best===null)return null;
+  const share=bc/scripted;
+  return (share>=0.5||(bc>=2&&share>=0.25))?best:null;
+}
+export function route(text){
+  const hist=histogram(text);
+  if(Object.keys(hist).length===0)return{verdict:"ambiguous",candidates:[]};
+  if(hist.Hiragana||hist.Katakana)return{verdict:"decisive",candidates:["ja"]};
+  const d=presence(hist,DECISIVE);
+  if(d!==null)return{verdict:"decisive",candidates:[DECISIVE[d]]};
+  const n=presence(hist,Object.fromEntries(Object.keys(NARROWING).map(k=>[k,1])));
+  if(n!==null)return{verdict:"narrowing",candidates:NARROWING[n]};
+  return{verdict:"ambiguous",candidates:[]};
+}
+
+// ---- model ----
+export function makeModel(meta, bytes){
+  const {num_buckets:B, dim:D, labels, embed_scale:scale, ngram_orders:orders} = meta;
+  const emb = new Int8Array(bytes.buffer, bytes.byteOffset, B*D);
+  const linOff = B*D;
+  const linW = new Float32Array(bytes.buffer.slice(linOff, linOff + labels.length*D*4));
+  const linBOff = linOff + labels.length*D*4;
+  const linB = new Float32Array(bytes.buffer.slice(linBOff, linBOff + labels.length*4));
+  const latin = new Set(meta.latin_labels || labels); // full mask by default
+
+  function logits(text, maskSet){
+    const acc = new Float32Array(D);
+    for(const g of ngrams(text, orders)){
+      const b = (fnv1a(g) % B) >>> 0, base = b*D;
+      for(let k=0;k<D;k++) acc[k] += emb[base+k]*scale;
+    }
+    const out = new Float32Array(labels.length).fill(-Infinity);
+    for(let j=0;j<labels.length;j++){
+      if(maskSet && !maskSet.has(labels[j])) continue;
+      let s = linB[j], wOff = j*D;
+      for(let k=0;k<D;k++) s += linW[wOff+k]*acc[k];
+      out[j] = s;
+    }
+    return out;
+  }
+  function softmaxTop(out, k=3){
+    let mx=-Infinity; for(const v of out) if(v>mx) mx=v;
+    let sum=0; const ex=out.map(v=>{const e=v===-Infinity?0:Math.exp(v-mx); sum+=e; return e;});
+    const idx=[...ex.keys()].sort((a,b)=>ex[b]-ex[a]).slice(0,k);
+    return idx.map(i=>({lang:labels[i], p: sum>0?ex[i]/sum:0}));
+  }
+  // Short Latin fragments are unreliable for EVERY detector — "hi i am" reads
+  // as Welsh to any character model. Reliability keys off evidence (input
+  // length + how far the top guess leads the runner-up), not raw softmax
+  // confidence, which is overconfident on short input. Script-decided input
+  // is always reliable; there's no guessing involved.
+  function reliability(text, top, via){
+    if(via==="script") return "confident";
+    const chars = [...text].length;
+    const words = text.split(" ").filter(Boolean).length;
+    const margin = top.length>1 ? top[0].p-top[1].p : top[0]?.p??0;
+    if(chars>=18 && margin>=0.30) return "confident";
+    if(chars>=12 && margin>=0.20) return "likely";
+    return "tentative";
+  }
+  return {
+    labels, latin,
+    detect(raw){
+      const text = normalize(raw);
+      if(!text) return {text, top:[], via:"empty", reliability:"empty"};
+      const r = route(text);
+      if(r.verdict==="decisive") return {text, top:[{lang:r.candidates[0], p:1}], via:"script", reliability:"confident"};
+      const maskSet = r.verdict==="narrowing" ? new Set(r.candidates) : latin;
+      const usable = [...maskSet].filter(l=>labels.includes(l));
+      if(usable.length===0) return {text, top:[], via:"unsupported", reliability:"empty"};
+      const via = r.verdict==="narrowing" ? "narrowed" : "model";
+      const top = softmaxTop(logits(text, new Set(usable)), 3);
+      return {text, top, via, reliability: reliability(text, top, via)};
+    }
+  };
+}
+
+// Load the embedded weights and build a ready model. The weights live in
+// site/models/ alongside the page; nothing is fetched from a server elsewhere.
+export async function loadTongue(base = "./models/"){
+  const [meta, b64] = await Promise.all([
+    fetch(base+"meta.json").then(r=>r.json()),
+    fetch(base+"model.b64").then(r=>r.text()),
+  ]);
+  const raw = Uint8Array.from(atob(b64.trim()), c=>c.charCodeAt(0));
+  const ds = new DecompressionStream("gzip");
+  const buf = new Uint8Array(await new Response(new Blob([raw]).stream().pipeThrough(ds)).arrayBuffer());
+  return makeModel(meta, buf);
+}
+export async function loadNames(base = "./models/"){ return fetch(base+"names.json").then(r=>r.json()); }

kit/assets/fonts/NOTICE

@@ -0,0 +1,100 @@
+Font notices for the woff2 subsets in this directory. All three families
+are licensed under the SIL Open Font License, Version 1.1, reproduced in
+full below.
+
+HankenGrotesk-latin-wght.woff2
+  Copyright 2019 The Hanken Grotesk Project Authors
+  (https://github.com/marcologous/hanken-grotesk)
+
+InstrumentSerif-latin-Regular.woff2, InstrumentSerif-latin-Italic.woff2
+  Copyright 2022 The Instrument Serif Project Authors
+  (https://github.com/Instrument/instrument-serif)
+
+JetBrainsMono-latin-wght.woff2
+  Copyright 2020 The JetBrains Mono Project Authors
+  (https://github.com/JetBrains/JetBrainsMono)
+
+-----------------------------------------------------------------------
+
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to any
+document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may include
+source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components
+as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to
+a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer
+or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or in
+the appropriate machine-readable metadata fields within text or binary
+files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any Modified
+Version, except to acknowledge the contribution(s) of the Copyright
+Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must
+be distributed entirely under this license, and must not be distributed
+under any other license. The requirement for fonts to remain under this
+license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not
+met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
+COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.

kit/components/panes.js

@@ -0,0 +1,83 @@
+import { paintSwarm, setSwarm } from "./swarm.js";
+
+function paneLabel(text) {
+  const row = document.createElement("div");
+  row.className = "pane-label";
+  const caption = document.createElement("span");
+  caption.textContent = text;
+  row.append(caption);
+  return row;
+}
+
+export function controlsRow(...children) {
+  const row = document.createElement("div");
+  row.className = "controls";
+  row.append(...children);
+  return row;
+}
+
+export function inputPane({ label = "Input", id } = {}) {
+  const root = document.createElement("div");
+  root.className = "pane";
+  const labelRow = paneLabel(label);
+  const textarea = document.createElement("textarea");
+  if (id) textarea.id = id;
+  textarea.spellcheck = false;
+  textarea.setAttribute("aria-label", label);
+  root.append(labelRow, textarea);
+  return { root, labelRow, textarea };
+}
+
+export function outputPane({ label = "Output", placeholder = "output appears here" } = {}) {
+  const root = document.createElement("div");
+  root.className = "pane";
+  const labelRow = paneLabel(label);
+  const actions = document.createElement("span");
+  actions.className = "controls";
+  labelRow.append(actions);
+  const out = document.createElement("div");
+  out.className = "out";
+  out.dataset.placeholder = placeholder;
+  out.setAttribute("aria-live", "polite");
+  out.setAttribute("aria-label", label);
+  root.append(labelRow, out);
+  return { root, labelRow, actions, out };
+}
+
+export function runButton(label) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "run-btn";
+  button.textContent = label;
+  return button;
+}
+
+export function ghostButton(label) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "ghost-btn";
+  button.textContent = label;
+  return button;
+}
+
+export function statusLine() {
+  const root = document.createElement("span");
+  root.className = "status";
+  root.setAttribute("role", "status");
+  const swarm = document.createElement("span");
+  swarm.className = "swarm";
+  swarm.setAttribute("aria-hidden", "true");
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  swarm.append(svg);
+  paintSwarm(svg);
+  const text = document.createElement("span");
+  root.append(swarm, text);
+  return {
+    root,
+    set(message, busy = false) {
+      text.textContent = message;
+      setSwarm(swarm, busy);
+    },
+  };
+}

kit/components/samples.js

@@ -0,0 +1,23 @@
+export function mountSamples({ container, textarea, samples, autofill = true }) {
+  const chips = [];
+  const clear = () => {
+    for (const chip of chips) chip.setAttribute("aria-pressed", "false");
+  };
+  for (const [index, sample] of samples.entries()) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "chip";
+    chip.textContent = sample.label;
+    chip.setAttribute("aria-pressed", autofill && index === 0 ? "true" : "false");
+    chip.addEventListener("click", () => {
+      textarea.value = sample.text;
+      clear();
+      chip.setAttribute("aria-pressed", "true");
+    });
+    chips.push(chip);
+    container.append(chip);
+  }
+  if (autofill && samples.length > 0) textarea.value = samples[0].text;
+  textarea.addEventListener("input", clear);
+  return chips;
+}

kit/components/shell.js

@@ -0,0 +1,67 @@
+export function eyebrow(text) {
+  const root = document.createElement("div");
+  root.className = "eyebrow";
+  const tick = document.createElement("span");
+  tick.className = "tick";
+  tick.textContent = "◆";
+  const label = document.createElement("span");
+  label.textContent = text;
+  root.append(tick, label);
+  return root;
+}
+
+export function sectionCard({ eyebrow: eyebrowText, id } = {}) {
+  const root = document.createElement("section");
+  root.className = "card";
+  if (id) root.id = id;
+  if (eyebrowText) root.append(eyebrow(eyebrowText));
+  return root;
+}
+
+export function previewBanner({ title = "Research preview", text }) {
+  const root = document.createElement("div");
+  root.className = "preview-banner";
+  root.setAttribute("role", "note");
+  const strong = document.createElement("strong");
+  strong.textContent = title;
+  const span = document.createElement("span");
+  span.textContent = text;
+  root.append(strong, span);
+  return root;
+}
+
+export function hero({ eyebrow: eyebrowText = "Desert Ant Labs · on-device models", name, lead, accent }) {
+  const root = sectionCard({ eyebrow: eyebrowText });
+  const heading = document.createElement("h1");
+  heading.className = "display";
+  heading.append(document.createTextNode(name));
+  const dot = document.createElement("span");
+  dot.className = "dot";
+  dot.textContent = ".";
+  heading.append(dot);
+  root.append(heading);
+  if (lead || accent) {
+    const p = document.createElement("p");
+    p.className = "lead";
+    if (lead) p.append(document.createTextNode(accent ? `${lead} ` : lead));
+    if (accent) {
+      const mark = document.createElement("span");
+      mark.className = "accent";
+      mark.textContent = accent;
+      p.append(mark);
+    }
+    root.append(p);
+  }
+  return root;
+}
+
+export function brandFooter({ note = `Runs local · ${new Date().getFullYear()}` } = {}) {
+  const root = document.createElement("div");
+  root.className = "brand-footer";
+  const left = document.createElement("span");
+  left.textContent = "Desert Ant Labs";
+  const right = document.createElement("span");
+  right.textContent = note;
+  root.append(left, right);
+  return root;
+}

kit/components/swarm.js

@@ -0,0 +1,31 @@
+export function paintSwarm(svg) {
+  if (!svg || svg.dataset.painted) return;
+  const C = 12, R = 8, r = 1.5, count = 8, speed = 1.6;
+  const rnd = (i, k) => {
+    const v = Math.sin((i + 1) * 12.9898 + k * 78.233) * 43758.5453;
+    return v - Math.floor(v);
+  };
+  let style = "", dots = "";
+  for (let i = 0; i < count; i += 1) {
+    const a = (i / count) * Math.PI * 2 - Math.PI / 2;
+    const x = (C + R * Math.cos(a)).toFixed(2);
+    const y = (C + R * Math.sin(a)).toFixed(2);
+    const inwardX = C - x, inwardY = C - y;
+    const perpX = -(C - y), perpY = C - x;
+    const pull = 0.45 + rnd(i, 1) * 0.6;
+    const wob = (rnd(i, 2) - 0.5) * 0.5;
+    const tx = (inwardX * pull + perpX * wob).toFixed(2);
+    const ty = (inwardY * pull + perpY * wob).toFixed(2);
+    const mid = (0.45 + rnd(i, 3) * 0.3).toFixed(2);
+    const dur = (speed * (0.74 + rnd(i, 4) * 0.62)).toFixed(2);
+    const delay = (-rnd(i, 5) * speed * 1.4).toFixed(2);
+    dots += `<circle class="dot d${i}" cx="${x}" cy="${y}" r="${r}"></circle>`;
+    style += `@keyframes sw${i}{0%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(${tx}px,${ty}px) scale(${mid});opacity:.45}100%{transform:translate(0,0) scale(1);opacity:1}}.d${i}{animation:sw${i} ${dur}s cubic-bezier(.45,0,.55,1) ${delay}s infinite}`;
+  }
+  svg.innerHTML = `<g>${dots}</g><circle class="core" cx="${C}" cy="${C}" r="1.7"></circle><style>${style}</style>`;
+  svg.dataset.painted = "1";
+}
+
+export function setSwarm(el, on) {
+  if (el) el.classList.toggle("visible", !!on);
+}

kit/js/tags.js

@@ -0,0 +1,23 @@
+export function argmaxRows(logits, seqLength, classCount) {
+  const rows = new Array(seqLength);
+  for (let pos = 0; pos < seqLength; pos += 1) {
+    const base = pos * classCount;
+    let best = 0;
+    for (let c = 1; c < classCount; c += 1) {
+      if (logits[base + c] > logits[base + best]) best = c;
+    }
+    rows[pos] = best;
+  }
+  return rows;
+}
+
+export function argmaxHeads(outputs, seqLength, heads, { outputName = (head) => `logits_${head}` } = {}) {
+  const preds = {};
+  for (const [head, labels] of Object.entries(heads)) {
+    const classCount = typeof labels === "number" ? labels : labels.length;
+    const tensor = outputs[outputName(head)];
+    if (!tensor) throw new Error(`missing model output "${outputName(head)}"`);
+    preds[head] = argmaxRows(tensor.data, seqLength, classCount);
+  }
+  return preds;
+}

kit/shell.css

@@ -0,0 +1,346 @@
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  background: var(--bg-canvas);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection { background: var(--selection-bg); color: var(--selection-fg); }
+
+a { color: var(--text-accent); text-decoration: none; }
+a:hover { text-decoration: underline; text-underline-offset: 3px; }
+
+:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }
+
+.page {
+  max-width: var(--container-xl);
+  margin: 0 auto;
+  padding: clamp(1.25rem, 4vw, 4rem);
+}
+
+.card {
+  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
+  border-bottom: var(--border-hair) solid var(--border-subtle);
+}
+.card:last-of-type { border-bottom: 0; }
+
+.eyebrow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: var(--space-6);
+}
+.eyebrow .tick { color: var(--accent); }
+
+.display {
+  font-family: var(--font-display);
+  font-weight: var(--weight-regular);
+  font-size: clamp(3.5rem, 9vw, var(--text-7xl));
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tighter);
+  margin: 0 0 var(--space-5);
+}
+.display-md {
+  font-family: var(--font-display);
+  font-weight: var(--weight-regular);
+  font-size: clamp(2rem, 4.5vw, var(--text-5xl));
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  margin: 0 0 var(--space-5);
+}
+.display .dot { color: var(--accent); }
+
+.lead {
+  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
+  line-height: var(--leading-relaxed);
+  color: var(--text-secondary);
+  max-width: 46em;
+  margin: 0;
+}
+.lead .accent { color: var(--text-accent); }
+
+/* Research preview banner */
+.preview-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2) var(--space-4);
+  margin: 0 0 var(--space-8);
+  padding: var(--space-3) var(--space-4);
+  border: var(--border-hair) solid var(--border-subtle);
+  border-left: 3px solid var(--warning);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+.preview-banner strong {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--warning);
+}
+
+/* Demo panes */
+.demo-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-8);
+  align-items: stretch;
+}
+@media (max-width: 880px) {
+  .demo-grid { grid-template-columns: 1fr; }
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.pane-label {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+textarea {
+  width: 100%;
+  min-height: 280px;
+  flex: 1;
+  resize: vertical;
+  padding: var(--space-4);
+  border: var(--border-hair) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-inset);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: var(--leading-relaxed);
+}
+textarea:focus-visible { box-shadow: var(--shadow-inset), var(--ring-focus); }
+
+.out {
+  min-height: 280px;
+  flex: 1;
+  padding: var(--space-4);
+  border: var(--border-hair) solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-raised);
+  font-size: var(--text-md);
+  line-height: var(--leading-relaxed);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  overflow-x: auto;
+}
+.out:empty::before {
+  content: attr(data-placeholder);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text-faint);
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+.chips-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.chip {
+  padding: 0.4rem 0.85rem;
+  border: var(--border-hair) solid var(--border-default);
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wide);
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.chip:hover { background: var(--bg-sunken); color: var(--text-primary); }
+.chip[aria-pressed="true"] {
+  border-color: var(--accent);
+  color: var(--text-accent);
+  background: var(--bg-accent-soft);
+}
+
+.run-btn {
+  height: var(--control-lg);
+  padding: 0 var(--space-8);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wide);
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.run-btn:hover { background: var(--accent-hover); }
+.run-btn:disabled { opacity: 0.55; cursor: wait; }
+
+.ghost-btn {
+  height: 1.75rem;
+  padding: 0 var(--space-3);
+  border: var(--border-hair) solid var(--border-default);
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.ghost-btn:hover { color: var(--text-accent); border-color: var(--accent); }
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+.switch input {
+  appearance: none;
+  width: 2.1rem;
+  height: 1.15rem;
+  margin: 0;
+  border-radius: var(--radius-full);
+  border: var(--border-hair) solid var(--border-default);
+  background: var(--bg-sunken);
+  position: relative;
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.switch input::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 0.95rem;
+  height: 0.95rem;
+  border-radius: var(--radius-full);
+  background: var(--text-muted);
+  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-standard);
+}
+.switch input:checked { background: var(--accent); border-color: var(--accent); }
+.switch input:checked::after { transform: translateX(0.95rem); background: var(--accent-contrast); }
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 1.5rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-muted);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--space-5);
+  margin-top: var(--space-8);
+  border-top: var(--border-hair) solid var(--border-subtle);
+  padding-top: var(--space-5);
+}
+.stats[hidden] { display: none; }
+.stat { display: flex; flex-direction: column; gap: var(--space-1); }
+.stat .num {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  line-height: var(--leading-none);
+  font-variant-numeric: tabular-nums;
+}
+.stat .label {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.table-scroll { overflow-x: auto; }
+
+/* Swarm loader (design-system tokens/swarm.css) */
+.swarm { display: none; align-items: center; justify-content: center; }
+.swarm.visible { display: inline-flex; }
+.swarm svg { display: block; overflow: visible; width: 16px; height: 16px; }
+.swarm .dot { fill: var(--text-primary); transform-box: fill-box; transform-origin: center; }
+.swarm .core {
+  fill: var(--accent);
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: swarm-core 1.6s ease-in-out infinite;
+}
+@keyframes swarm-core {
+  0%, 100% { transform: scale(0.82); opacity: 0.5; }
+  50% { transform: scale(1.16); opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .swarm .dot, .swarm .core {
+    animation: none !important;
+    opacity: 0.7 !important;
+    transform: none !important;
+  }
+}
+
+.brand-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) 0;
+  border-top: var(--border-hair) solid var(--border-subtle);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}

kit/tokens.css

@@ -0,0 +1,202 @@
+/* Desert Ant Labs design tokens, mirrored for the shared demo kit.
+ *
+ * Provenance: desert-ant-labs/design-system tokens/{colors,typography,
+ * spacing,radius,motion}.css. Values are copied, not invented; when the
+ * brand changes there, re-mirror here and re-sync consuming demos.
+ * Two deliberate deviations:
+ *   - dark mode follows prefers-color-scheme (the design system keys off
+ *     [data-theme="dark"]; a static page has no theme switch), and
+ *   - fonts are self-hosted woff2 subsets (the design system loads the
+ *     same faces from the Google Fonts CDN; this page makes no external
+ *     requests). Instrument Serif, Hanken Grotesk, and JetBrains Mono are
+ *     all SIL Open Font License 1.1; see assets/fonts/NOTICE.
+ */
+
+@font-face {
+  font-family: "Hanken Grotesk";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("assets/fonts/HankenGrotesk-latin-wght.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Instrument Serif";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/InstrumentSerif-latin-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Instrument Serif";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/InstrumentSerif-latin-Italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url("assets/fonts/JetBrainsMono-latin-wght.woff2") format("woff2");
+}
+
+:root {
+  /* colors.css · base ramp, cool silver -> obsidian */
+  --sand-50:  #F4F5F5;
+  --sand-100: #E8EAEB;
+  --sand-200: #D7DBDC;
+  --sand-300: #BEC4C6;
+  --sand-400: #9DA4A8;
+  --sand-500: #7A8286;
+  --sand-600: #5A6266;
+  --sand-700: #41484C;
+  --sand-800: #2C3134;
+  --sand-900: #1A1E20;
+  --sand-950: #0E1113;
+
+  /* colors.css · polarized-sky cobalt accent */
+  --sky-50:  #ECF0FC;
+  --sky-100: #D6DFFA;
+  --sky-200: #AFC1F3;
+  --sky-300: #839DEB;
+  --sky-400: #5675DC;
+  --sky-500: #2D52C8;
+  --sky-600: #2241A8;
+  --sky-700: #1C3585;
+
+  /* colors.css · signals (amber is the one warm note) */
+  --moss-500:  #3C8A52;
+  --amber-500: #C2691A;
+  --oxide-500: #BE3A2E;
+
+  --paper: #FBFCFC;
+  --white: #FFFFFF;
+
+  /* colors.css · semantic aliases, light */
+  --bg-canvas:  var(--sand-50);
+  --bg-surface: var(--paper);
+  --bg-raised:  var(--white);
+  --bg-sunken:  var(--sand-100);
+  --bg-accent-soft: var(--sky-50);
+
+  --text-primary:   var(--sand-950);
+  --text-secondary: var(--sand-700);
+  --text-muted:     var(--sand-500);
+  --text-faint:     var(--sand-400);
+  --text-accent:    var(--sky-600);
+
+  --border-subtle:  var(--sand-200);
+  --border-default: var(--sand-300);
+
+  --accent:          var(--sky-500);
+  --accent-hover:    var(--sky-600);
+  --accent-contrast: var(--white);
+  --focus-ring:      var(--sky-500);
+  --selection-bg:    var(--sky-200);
+  --selection-fg:    var(--sand-950);
+  --warning:         var(--amber-500);
+
+  /* typography.css */
+  --font-display: "Instrument Serif", "Spectral", Georgia, "Times New Roman", serif;
+  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Liberation Mono", Menlo, monospace;
+
+  --weight-regular:  400;
+  --weight-medium:   500;
+  --weight-semibold: 600;
+  --weight-bold:     700;
+
+  --text-2xs:  0.6875rem;
+  --text-xs:   0.75rem;
+  --text-sm:   0.8125rem;
+  --text-base: 0.9375rem;
+  --text-md:   1rem;
+  --text-lg:   1.125rem;
+  --text-xl:   1.375rem;
+  --text-2xl:  1.75rem;
+  --text-3xl:  2.25rem;
+  --text-5xl:  4rem;
+  --text-7xl:  7.5rem;
+
+  --leading-none:    1;
+  --leading-tight:   1.06;
+  --leading-snug:    1.2;
+  --leading-normal:  1.45;
+  --leading-relaxed: 1.62;
+
+  --tracking-tighter: -0.03em;
+  --tracking-tight:   -0.015em;
+  --tracking-wide:    0.04em;
+  --tracking-wider:   0.1em;
+
+  /* spacing.css */
+  --space-1:  0.25rem;
+  --space-2:  0.5rem;
+  --space-3:  0.75rem;
+  --space-4:  1rem;
+  --space-5:  1.25rem;
+  --space-6:  1.5rem;
+  --space-8:  2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --container-xl: 1280px;
+  --control-md: 2.5rem;
+  --control-lg: 3rem;
+
+  /* radius.css */
+  --radius-sm:   4px;
+  --radius-md:   6px;
+  --radius-lg:   8px;
+  --radius-full: 9999px;
+  --border-hair: 1px;
+  --shadow-inset: inset 0 1px 2px rgba(40, 30, 15, 0.07);
+  --ring-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus-ring);
+
+  /* motion.css */
+  --duration-fast: 140ms;
+  --duration-base: 220ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
+  --transition-colors: color var(--duration-fast) var(--ease-standard),
+                       background-color var(--duration-fast) var(--ease-standard),
+                       border-color var(--duration-fast) var(--ease-standard);
+
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* colors.css · semantic aliases, dark (cool obsidian, lifted cobalt) */
+    --bg-canvas:  #0E1113;
+    --bg-surface: #15181B;
+    --bg-raised:  #1C2023;
+    --bg-sunken:  #090B0C;
+    --bg-accent-soft: #15203A;
+
+    --text-primary:   var(--sand-50);
+    --text-secondary: var(--sand-300);
+    --text-muted:     var(--sand-500);
+    --text-faint:     var(--sand-600);
+    --text-accent:    var(--sky-300);
+
+    --border-subtle:  #262C30;
+    --border-default: #353C40;
+
+    --accent:          var(--sky-400);
+    --accent-hover:    var(--sky-300);
+    --accent-contrast: var(--sand-950);
+    --focus-ring:      var(--sky-300);
+    --selection-bg:    var(--sky-700);
+    --selection-fg:    var(--sand-50);
+    --warning:         #D88B3A;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+  }
+}

models/meta.json

@@ -0,0 +1 @@
+{"labels": ["en", "es", "pt", "fr", "de", "it", "nl", "pl", "tr", "sv", "da", "no", "fi", "cs", "ro", "hu", "id", "vi", "ca", "hr", "sk", "lt", "et", "af", "eu", "gl", "is", "tl", "ms", "az", "sl", "sw", "ga", "sq", "cy", "lv", "eo", "la", "ku", "yo", "xh", "st", "ru", "uk", "bg", "sr", "mk", "be", "kk", "ky", "ar", "fa", "ug", "ur", "hi", "mr", "ne", "bn", "as"], "num_buckets": 65536, "dim": 32, "ngram_orders": [1, 2, 3, 4, 5], "embed_scale": 0.06380146507203109, "latin_labels": ["en", "es", "pt", "fr", "de", "it", "nl", "pl", "tr", "sv", "da", "no", "fi", "cs", "ro", "hu", "id", "vi", "ca", "hr", "sk", "lt", "et", "af", "eu", "gl", "is", "tl", "ms", "az", "sl", "sw", "ga", "sq", "cy", "lv", "eo", "la", "ku", "yo", "xh", "st"], "layout": {"emb_int8": [65536, 32], "lin_w_f32": [59, 32], "lin_b_f32": [59]}}

models/names.json

@@ -0,0 +1 @@
+{"en": ["English", "English"], "es": ["Spanish", "Español"], "pt": ["Portuguese", "Português"], "fr": ["French", "Français"], "de": ["German", "Deutsch"], "it": ["Italian", "Italiano"], "nl": ["Dutch", "Nederlands"], "pl": ["Polish", "Polski"], "tr": ["Turkish", "Türkçe"], "sv": ["Swedish", "Svenska"], "da": ["Danish", "Dansk"], "no": ["Norwegian", "Norsk"], "fi": ["Finnish", "Suomi"], "cs": ["Czech", "Čeština"], "ro": ["Romanian", "Română"], "hu": ["Hungarian", "Magyar"], "id": ["Indonesian", "Indonesia"], "vi": ["Vietnamese", "Tiếng Việt"], "ca": ["Catalan", "Català"], "hr": ["Croatian", "Hrvatski"], "sk": ["Slovak", "Slovenčina"], "lt": ["Lithuanian", "Lietuvių"], "et": ["Estonian", "Eesti"], "af": ["Afrikaans", "Afrikaans"], "eu": ["Basque", "Euskara"], "gl": ["Galician", "Galego"], "is": ["Icelandic", "Íslenska"], "tl": ["Tagalog", "Tagalog"], "ms": ["Malay", "Melayu"], "az": ["Azerbaijani", "Azərbaycan"], "sl": ["Slovenian", "Slovenščina"], "sw": ["Swahili", "Kiswahili"], "ga": ["Irish", "Gaeilge"], "sq": ["Albanian", "Shqip"], "cy": ["Welsh", "Cymraeg"], "lv": ["Latvian", "Latviešu"], "eo": ["Esperanto", "Esperanto"], "la": ["Latin", "Latina"], "ku": ["Kurdish", "Kurdî"], "yo": ["Yoruba", "Yorùbá"], "xh": ["Xhosa", "isiXhosa"], "st": ["Sotho", "Sesotho"], "ru": ["Russian", "Русский"], "uk": ["Ukrainian", "Українська"], "bg": ["Bulgarian", "Български"], "sr": ["Serbian", "Српски"], "mk": ["Macedonian", "Македонски"], "be": ["Belarusian", "Беларуская"], "kk": ["Kazakh", "Қазақ"], "ky": ["Kyrgyz", "Кыргыз"], "ar": ["Arabic", "العربية"], "fa": ["Persian", "فارسی"], "ug": ["Uyghur", "ئۇيغۇر"], "ur": ["Urdu", "اردو"], "hi": ["Hindi", "हिन्दी"], "mr": ["Marathi", "मराठी"], "ne": ["Nepali", "नेपाली"], "bn": ["Bengali", "বাংলা"], "as": ["Assamese", "অসমীয়া"], "ko": ["Korean", "한국어"], "ja": ["Japanese", "日本語"], "zh": ["Chinese", "中文"], "th": ["Thai", "ไทย"], "lo": ["Lao", "ລາວ"], "km": ["Khmer", "ខ្មែរ"], "my": ["Burmese", "မြန်မာ"], "el": ["Greek", "Ελληνικά"], "he": ["Hebrew", "עברית"], "hy": ["Armenian", "Հայերեն"], "ka": ["Georgian", "ქართული"], "am": ["Amharic", "አማርኛ"], "ta": ["Tamil", "தமிழ்"], "te": ["Telugu", "తెలుగు"], "kn": ["Kannada", "ಕನ್ನಡ"], "ml": ["Malayalam", "മലയാളം"], "si": ["Sinhala", "සිංහල"], "gu": ["Gujarati", "ગુજરાતી"], "pa": ["Punjabi", "ਪੰਜਾਬੀ"], "or": ["Odia", "ଓଡ଼ିଆ"], "dv": ["Dhivehi", "ދިވެހި"], "bo": ["Tibetan", "བོད"], "mn": ["Mongolian", "Монгол"], "chr": ["Cherokee", "ᏣᎳᎩ"], "syr": ["Syriac", "ܣܘܪܝܝܐ"], "und": ["Unknown", "—"]}

tongue.css

@@ -0,0 +1,48 @@
+/* Model-specific result styling for the tongue demo. Uses kit tokens only;
+   the shared kit under kit/ is never hand-edited. */
+#raw-text {
+  font-family: var(--font-display);
+  font-size: clamp(1.4rem, 3.5vw, 2rem);
+  line-height: var(--leading-snug);
+}
+.lang-note {
+  font-size: var(--text-sm);
+  color: var(--warning);
+  margin: 0 0 var(--space-4);
+}
+.lang-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-5);
+  min-width: 0;
+}
+.lang-primary {
+  font-family: var(--font-display);
+  font-size: clamp(2.2rem, 5vw, 3rem);
+  line-height: 1;
+  color: var(--accent);
+}
+.lang-primary.soft { color: var(--text-secondary); font-size: clamp(1.7rem, 4vw, 2.2rem); }
+.lang-native { font-size: var(--text-lg); color: var(--text-muted); }
+.lang-bars { display: flex; flex-direction: column; gap: var(--space-2); }
+.lang-row {
+  display: grid;
+  grid-template-columns: 7.5rem 1fr 3.4rem;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--text-base);
+}
+.lang-name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.lang-bar { height: .5rem; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; }
+.lang-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: var(--radius-full);
+  transform-origin: left;
+  transition: transform var(--duration-base) var(--ease-out);
+}
+.lang-fill.alt { background: var(--border-default); }
+.lang-pct { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .lang-fill { transition: none; } }