Studio Lite after Wave A (f84883c): thread-caching allocator, compiled-code cache, own tab, Fast draft, accessibility; engine fixes (EXIF/ICC, bounded work, small shapes)

README.md

@@ -29,7 +29,7 @@ own processor.
 It is the desktop app's interface and the desktop app's code, not a demo of them:
 
 - **Vectorize** with a live draft while you move a control and the full trace once you stop,
-  eight presets, the Custom wizard, the measured colour difference, the palette with colour
+  ten presets, the Custom wizard, the measured colour difference, the palette with colour
   groups, snapping to a brand palette, and export (SVG, minified SVG, PNG sizes, a favicon set,
   an asset pack) as a download.
 - **Minify SVG**: rewrite an SVG you already have in fewer bytes, with the difference measured.
@@ -38,10 +38,13 @@ It is the desktop app's interface and the desktop app's code, not a demo of them
   into your browser, in the background as the Studio opens (not when your browser asks to save
   data), and run on your GPU where there is one (ONNX Runtime Web).
 
-Use **Full screen** in the top bar, or **Open in its own tab** when the Space's frame will not
-go full screen; its own tab also gives it every core. It is built for a laptop or desktop
-screen. A logo dropped on the front page opens straight in the Studio, handed over inside
-your browser.
+Hugging Face shows this Space inside a frame on its own page, and a browser will not give a
+framed page the threads the engine needs (cross-origin isolation needs every page above it to
+ask for it). So the front page opens the Studio in **a tab of its own**, where it runs on every
+core and can use the denoiser; a logo dropped on the front page goes with it, handed over
+inside your browser. Its own address:
+<https://logolabs-inkvec.static.hf.space/studio/index.html>. It is built for a laptop or
+desktop screen; **Full screen** is in its top bar.
 
 The desktop app, **Inkvec Studio** (Windows, macOS, Linux), is the same interface plus what a
 browser cannot do: folders of images in one batch, the `inkvec` command line, the right-click

index.html

@@ -17,6 +17,11 @@
   --ink:#faf8f5;--dim:rgba(250,248,245,.75);--faint:rgba(250,248,245,.55);--muted:rgba(250,248,245,.4);
   --rule:rgba(250,248,245,.08);--rule2:#2a2724;
   --accent:#c9754a;--accent-hover:#d4896a;--accent-ink:#1a1816;--accent-soft:rgba(201,117,74,.12);--accent-subtle:rgba(201,117,74,.08);
+  /* Copper as text on a copper-tinted ground (a pressed toggle, the chosen gallery case):
+     --accent-soft over --card composites to #352922, where --accent is 4.1:1 and fails WCAG 2.2
+     SC 1.4.3 (4.5:1 below 24 px; r2-product's axe run). The lighter copper is 5.1:1 there and
+     5.9:1 on --card. */
+  --accent-text:#d4896a;
   --gold:#b8976c;
   --good:#34d399;--goodbg:rgba(52,211,153,.15);--bad:#f87171;--check:#2a2724;
   --anchor:#f87171;--handle:#b8976c;--wire:#faf8f5;
@@ -28,13 +33,16 @@
 *{box-sizing:border-box}
 body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}
+/* A link inside a sentence is underlined, not told apart by its colour alone (WCAG 2.2 SC
+   1.4.1); navigation, buttons and tiles keep their own shapes. */
+.note a,.lede a,.cta-note a,.caption a,.how a,footer a{text-decoration:underline;text-underline-offset:2px}
 button,.btn{font:600 13.5px/1 var(--font-body);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
 button:hover,.btn:hover{border-color:rgba(250,248,245,.18);text-decoration:none;color:var(--ink)}button:active,.btn:active{transform:translateY(1px) scale(.98)}
 .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:15px 28px;font-size:16px;border-radius:var(--radius-full)}
 .btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--glow);transform:translateY(-1px);color:var(--accent-ink)}
 .btn.big{padding:15px 24px;font-size:15px;border-radius:var(--radius-full)}
 .btn svg{width:18px;height:18px}
-button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
+button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
 .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
 code{font-family:var(--font-mono);font-size:.92em}
 h1,h2,h3{font-family:var(--font-display)}
@@ -70,6 +78,11 @@ h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;font
 .samples a{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border:1px solid var(--rule);border-radius:999px;color:var(--dim);font-size:12.5px;font-weight:600;background:var(--stage)}
 .samples a:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
 .samples img{width:22px;height:22px;border-radius:50%;background:#fff;object-fit:contain}
+.drop.holding{cursor:default}
+.drop.holding > :not(.handoff):not(input){display:none}
+.handoff{display:flex;flex-direction:column;align-items:center;gap:8px}
+.handoff .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
+.handoff .btn.primary{padding:12px 22px;font-size:15px}
 /* what's new */
 .newgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px}
 .new{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
@@ -108,7 +121,7 @@ h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;font
 .tools .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:5px}
 .seg{display:inline-flex;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-full);padding:3px;gap:2px;flex-wrap:wrap}
 .seg button{border:0;background:transparent;border-radius:var(--radius-full);padding:7px 10px;font-size:12.5px;color:var(--dim)}
-.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
+.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text)}
 /* gallery */
 .gal{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-top:18px;align-items:start}
 @media (max-width:820px){.gal{grid-template-columns:1fr}}
@@ -123,7 +136,7 @@ h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;font
 .case .th img{width:100%;height:100%;object-fit:contain}
 .case .nm{width:100%;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
 .case[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
-.case[aria-pressed="true"] .nm{color:var(--accent)}
+.case[aria-pressed="true"] .nm{color:var(--accent-text)}
 .caption{margin:8px 0 0;font-size:13px;color:var(--dim)}
 .caption b{color:var(--ink)}
 @media (max-width:820px){
@@ -248,36 +261,115 @@ const el = (tag, cls, html) => { const e = document.createElement(tag); if (cls)
 const esc = s => String(s).replace(/[&<>"]/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
 
 // ---------------------------------------------------------------- the way into the Studio
-// Inside the Space's frame the page may not be cross-origin isolated, and then the Studio
-// runs on one core without the denoiser; its own tab always is. Say so where it matters.
+// Hugging Face shows this page inside an iframe on huggingface.co, which sends no isolation
+// headers, and a frame is cross-origin isolated only if every page above it is (web.dev,
+// "Making your website cross-origin isolated using COOP and COEP"; MDN, crossOriginIsolated).
+// A Studio opened inside the frame therefore runs on one core and without the denoiser,
+// while the same address in a tab of its own is isolated, since the static host sends the
+// headers itself: 2048 px Quality traces 1.7-3.5x faster there (r2-product, measured). So
+// inside the frame every way into the Studio opens it in a tab of its own. At the static
+// host's own address the page is isolated and the Studio opens in this tab, as before.
 const framed = (() => { try { return window.self !== window.top; } catch { return true; } })() ||
   [...(location.ancestorOrigins || [])].some(o => /(^|\.)huggingface\.co(:\d+)?$/.test(o.replace(/^[a-z]+:\/\//, '')));
+const ownTab = framed && !self.crossOriginIsolated;
 document.documentElement.classList.toggle('framed', framed);
-if (framed) {
-  $("ctanote").innerHTML = `Best on a laptop or desktop screen. For the whole window and every core, <a href="studio/index.html" target="_blank" rel="noopener">open the Studio in its own tab</a>.`;
+if (ownTab) {
+  $("ctanote").innerHTML = `Best on a laptop or desktop screen. The Studio opens in a tab of its own, where it runs on every core and can use the denoiser.`;
+  for (const a of document.querySelectorAll('a[href^="studio/index.html"]')) a.target = "_blank";
 }
-// A dropped or chosen file is handed to the Studio through this browser's own storage (the
-// Studio is served from this origin, under studio/) and never leaves the machine.
+
+// A dropped, chosen or pasted file never leaves the machine. At the static host's own
+// address it is handed over through this origin's IndexedDB and the Studio opens in this
+// tab. Inside Hugging Face's frame neither storage nor messages reach the Studio's own tab:
+// the frame's storage is partitioned under huggingface.co (the tab cannot read it), and the
+// Studio's isolation (COOP same-origin) puts its tab in another browsing context group, which
+// cuts it off from this frame. Measured in a framed stand-in: the window.open handle reads
+// closed once the Studio loads, a postMessage to it is dropped, the tab's window.opener is
+// null, and BroadcastChannel is partitioned too. What does cross is the address, so the file
+// rides in the URL fragment, which is never sent to any server (RFC 3986, section 3.5).
+// Not from the literature: the fragment as a hand-off between a partitioned frame and an
+// isolated tab; see also: WHATWG HTML, "Cross-origin opener policies" (browsing context
+// group switches), and Chromium's storage partitioning (third-party storage keyed by the
+// top-level site).
 const HANDOFF_DB = "inkvec-handoff";
-function handOff(file){
+// The largest file that fits: base64 makes 1.5 MB into 2,000,000 characters, inside
+// Chromium's 2 MiB limit on a URL (url::kMaxURLChars); a longer one opens as about:blank.
+const HANDOFF_MAX = 1_500_000;
+function handOffHere(name, bytes){
   const req = indexedDB.open(HANDOFF_DB, 1);
   req.onupgradeneeded = () => req.result.createObjectStore("files");
-  req.onsuccess = async () => {
-    const bytes = new Uint8Array(await file.arrayBuffer());
+  req.onsuccess = () => {
     const tx = req.result.transaction("files", "readwrite");
-    tx.objectStore("files").put({ name: file.name || "pasted image", bytes }, "open");
+    tx.objectStore("files").put({ name, bytes }, "open");
     tx.oncomplete = () => { location.href = "studio/index.html?open=handoff"; };
   };
   req.onerror = () => { location.href = "studio/index.html"; };
 }
-$("file").addEventListener("change", e => { const f = e.target.files[0]; if (f) handOff(f); });
+// base64url (RFC 4648, section 5), in slices so a large file never builds one huge argument list.
+function base64url(bytes){
+  let s = "";
+  for (let i = 0; i < bytes.length; i += 0x8000) s += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+  return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function handOffUrl(name, bytes){
+  return bytes.length <= HANDOFF_MAX ? `studio/index.html#open=${base64url(bytes)}&name=${encodeURIComponent(name)}` : null;
+}
 const drop = $("drop");
+function release(){
+  drop.classList.remove("holding");
+  $("handoff")?.remove();
+}
+// Inside the frame: the file goes to a tab of its own. A browser lets a page open a tab only
+// just after a click or a key press (transient user activation); choosing a file or pressing
+// Ctrl+V leaves one, a file dropped from another application does not. Without one, the
+// drop zone holds the file and offers the tab as a button, whose click is the activation.
+function holdForTab(name, bytes, url){
+  release();
+  const mb = (bytes.length / 1e6).toFixed(1);
+  const card = el("div", "handoff");
+  card.id = "handoff";
+  card.setAttribute("role", "group");
+  card.setAttribute("aria-label", "Open the file in the Studio");
+  card.append(el("div", "big", url ? `${esc(name)} is ready to open` : `${esc(name)} is ${mb} MB`));
+  card.append(el("div", "small", url
+    ? "It opens in a tab of its own, where the Studio runs on every core and can use the denoiser."
+    : `From inside Hugging Face's page, a file can reach a tab of its own only inside the page address, which holds up to ${(HANDOFF_MAX / 1e6).toFixed(1)} MB. Open the Studio in its own tab and drop the file there, or open it here, on one core.`));
+  const acts = el("div", "acts");
+  const tab = el("button", "btn primary", url ? "Open in its own tab" : "Open the Studio in its own tab");
+  tab.type = "button";
+  tab.dataset.act = "tab";
+  tab.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); window.open(url || "studio/index.html", "_blank"); release(); });
+  const here = el("button", "btn", "Open here, on one core");
+  here.type = "button";
+  here.dataset.act = "here";
+  here.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); handOffHere(name, bytes); });
+  const other = el("button", "btn", "Another file");
+  other.type = "button";
+  other.dataset.act = "cancel";
+  other.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); release(); });
+  acts.append(tab, here, other);
+  card.append(acts);
+  drop.classList.add("holding");
+  drop.append(card);
+  tab.focus();
+}
+async function handOff(file){
+  const name = file.name || "pasted image";
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  if (!ownTab) return handOffHere(name, bytes);
+  const url = handOffUrl(name, bytes);
+  if (url && navigator.userActivation?.isActive && window.open(url, "_blank")) return;
+  holdForTab(name, bytes, url);
+}
+$("file").addEventListener("change", e => { const f = e.target.files[0]; e.target.value = ""; if (f) handOff(f); });
+drop.addEventListener("click", e => { if (drop.classList.contains("holding")) e.preventDefault(); });
 drop.addEventListener("dragover", e => { e.preventDefault(); drop.classList.add("over"); });
 drop.addEventListener("dragleave", () => drop.classList.remove("over"));
 drop.addEventListener("drop", e => { e.preventDefault(); drop.classList.remove("over"); const f = e.dataTransfer.files[0]; if (f) handOff(f); });
 document.addEventListener("paste", e => { const f = [...(e.clipboardData?.files || [])][0]; if (f) handOff(f); });
 for (const [file, label] of [["flat-logo.png", "Flat logo"], ["crest-filigree.png", "Crest"], ["signature-bw.png", "Signature"]]){
   const a = el("a"); a.href = `studio/index.html?sample=${file}`; a.innerHTML = `<img src="studio/samples/${file}" alt="">${label}`;
+  if (ownTab) a.target = "_blank";
   a.addEventListener("click", e => e.stopPropagation());
   $("samples").appendChild(a);
 }

studio/assets/engine.worker-D2MRJiuD.js

@@ -0,0 +1 @@
+const a=self;let n=null,m=null,g=null,u=null,p=null;async function y(e,t){if(!e.ok||!e.body)return;const r=t||Number(e.headers.get("content-length"))||0;let s=0,o=0;const i=e.body.getReader();try{for(;;){const{done:l,value:d}=await i.read();if(l)break;s+=d.byteLength;const c=performance.now();c-o>40&&(o=c,a.postMessage({type:"loading",got:s,total:r}))}a.postMessage({type:"loading",got:s,total:Math.max(r,s),done:!0})}catch{}}const w=new Set(["capabilities","default_prefs","sanitise_prefs","reset_prefs","trace_bands","match_palette","close"]);let h=Promise.resolve();function _(e,t){const r=performance.now();return e(t).then(()=>a.postMessage({type:"pool",threads:t+1,poolError:null,ms:performance.now()-r}),s=>a.postMessage({type:"pool",threads:1,poolError:String(s?.message??s),ms:performance.now()-r}))}async function S(e){const t=typeof crossOriginIsolated<"u"&&crossOriginIsolated,r=t?"pkg-threads":"pkg",s=e.token?`?v=${e.token}`:"",o=new URL(`${r}/inkvec_studio_wasm.js${s}`,e.base).href,i=fetch(new URL(`${r}/inkvec_studio_wasm_bg.wasm${s}`,e.base));i.catch(()=>{}),n=await import(o);const l=await i;y(l.clone(),e.wasmBytes?.[r]),m=(await n.default({module_or_path:l})).memory??null,a.postMessage({type:"instantiated",denoiserUrl:n.denoiser_model_url(),denoiserSha256:n.denoiser_model_sha256()}),u=e.generations?new Int32Array(e.generations):null,p=e.denoiserPort,p&&t&&(v(p),n.enable_denoiser()),g=new n.Studio;const c=t&&!!n.initThreadPool;c&&n.initThreadPool&&(h=_(n.initThreadPool,Math.max(1,Math.min(navigator.hardwareConcurrency||4,16)-1))),a.postMessage({type:"ready",threads:1,pool:c?"starting":"none",poolError:null,isolated:t,version:n.version(),denoiserUrl:n.denoiser_model_url(),denoiserSha256:n.denoiser_model_sha256(),denoiserRepo:n.denoiser_model_repo()})}function v(e){a.inkvecDenoiseSync=(t,r,s)=>{const o=t.length,i=new SharedArrayBuffer(8+Math.max(o*4,4096)),l=new Int32Array(i,0,2);if(e.postMessage({type:"run",input:t.slice(),width:r,height:s,shared:i}),Atomics.wait(l,0,0,6e5)==="timed-out")throw new Error("the denoiser did not answer in ten minutes");if(Atomics.load(l,0)!==1){const c=new TextDecoder().decode(new Uint8Array(i,8,Atomics.load(l,1)).slice());throw new Error(c||"the denoiser failed")}return new Float32Array(i,8,o).slice()}}function M(e){return u?Atomics.load(u,0)===e:!0}function k(e){const t=g;if(!t)throw new Error("the engine is not loaded");switch(e.op){case"capabilities":return JSON.parse(t.capabilities(!!e.supported,!!e.installed,e.bytes??void 0));case"open_bytes":return JSON.parse(t.open_bytes(e.bytes,e.name??void 0));case"trace":{const r=e.generation,s=t.trace(JSON.stringify(e.request),e.draftPx,e.draftSeconds,r,o=>a.postMessage({type:"progress",generation:r,json:o}),M);return s===void 0?null:JSON.parse(s)}case"preview":return JSON.parse(t.preview(JSON.stringify(e.request),e.draftPx,e.draftSeconds));case"export":return t.export_files(JSON.stringify({request:e.request}),!!e.zip).map(s=>({name:s.name,data:s.data}));case"close":return t.close(),null;default:return JSON.parse(t.call(e.op,JSON.stringify(e.args??{})))}}function O(e){return e instanceof WebAssembly.RuntimeError||e instanceof RangeError&&/memory|allocation/i.test(e.message)||/unreachable|out of memory|memory access out of bounds/i.test(String(e?.message??e))}let f=Promise.resolve();a.onmessage=e=>{const t=e.data;f=f.then(async()=>{if(t.type==="init"){try{await S(t)}catch(s){a.postMessage({type:"loadfail",error:String(s?.stack??s)})}return}w.has(t.op)||await h;const r=performance.now();try{const s=k(t),o=[];if(t.op==="export")for(const i of s)o.push(i.data.buffer);a.postMessage({type:"reply",id:t.id,ok:!0,value:s,ms:performance.now()-r,mem:m?.buffer.byteLength??null},o)}catch(s){const o=String(s?.message??s);a.postMessage({type:"reply",id:t.id,ok:!1,error:o,crashed:O(s)})}})};

studio/assets/engine.worker-wbMABDxy.js

@@ -1 +0,0 @@
-const i=self;let o=null,y=null,h=null,p=null,u=null;function w(e,t){if(!e.ok||!e.body||typeof TransformStream>"u")return e;const s=t||Number(e.headers.get("content-length"))||0;let n=0,r=0;const a=e.body.pipeThrough(new TransformStream({transform(l,d){n+=l.byteLength;const c=performance.now();c-r>40&&(r=c,i.postMessage({type:"loading",got:n,total:s})),d.enqueue(l)},flush(){i.postMessage({type:"loading",got:n,total:Math.max(s,n),done:!0})}}));return new Response(a,{status:e.status,headers:{"content-type":"application/wasm"}})}async function S(e){const t=typeof crossOriginIsolated<"u"&&crossOriginIsolated,s=t?"pkg-threads":"pkg",n=e.token?`?v=${e.token}`:"",r=new URL(`${s}/inkvec_studio_wasm.js${n}`,e.base).href,a=fetch(new URL(`${s}/inkvec_studio_wasm_bg.wasm${n}`,e.base));a.catch(()=>{}),o=await import(r),y=(await o.default({module_or_path:w(await a,e.wasmBytes?.[s])})).memory??null,i.postMessage({type:"instantiated",denoiserUrl:o.denoiser_model_url(),denoiserSha256:o.denoiser_model_sha256()});let d=1,c=null;if(t&&o.initThreadPool){const f=Math.max(1,Math.min(navigator.hardwareConcurrency||4,16)-1);try{await o.initThreadPool(f),d=f+1}catch(m){c=String(m?.message??m)}}p=e.generations?new Int32Array(e.generations):null,u=e.denoiserPort,u&&t&&(_(u),o.enable_denoiser()),h=new o.Studio,i.postMessage({type:"ready",threads:d,poolError:c,isolated:t,version:o.version(),denoiserUrl:o.denoiser_model_url(),denoiserSha256:o.denoiser_model_sha256(),denoiserRepo:o.denoiser_model_repo()})}function _(e){i.inkvecDenoiseSync=(t,s,n)=>{const r=t.length,a=new SharedArrayBuffer(8+Math.max(r*4,4096)),l=new Int32Array(a,0,2);if(e.postMessage({type:"run",input:t.slice(),width:s,height:n,shared:a}),Atomics.wait(l,0,0,6e5)==="timed-out")throw new Error("the denoiser did not answer in ten minutes");if(Atomics.load(l,0)!==1){const c=new TextDecoder().decode(new Uint8Array(a,8,Atomics.load(l,1)).slice());throw new Error(c||"the denoiser failed")}return new Float32Array(a,8,r).slice()}}function v(e){return p?Atomics.load(p,0)===e:!0}function M(e){const t=h;if(!t)throw new Error("the engine is not loaded");switch(e.op){case"capabilities":return JSON.parse(t.capabilities(!!e.supported,!!e.installed,e.bytes??void 0));case"open_bytes":return JSON.parse(t.open_bytes(e.bytes,e.name??void 0));case"trace":{const s=e.generation,n=t.trace(JSON.stringify(e.request),e.draftPx,e.draftSeconds,s,r=>i.postMessage({type:"progress",generation:s,json:r}),v);return n===void 0?null:JSON.parse(n)}case"preview":return JSON.parse(t.preview(JSON.stringify(e.request),e.draftPx,e.draftSeconds));case"export":return t.export_files(JSON.stringify({request:e.request}),!!e.zip).map(n=>({name:n.name,data:n.data}));case"close":return t.close(),null;default:return JSON.parse(t.call(e.op,JSON.stringify(e.args??{})))}}function k(e){return e instanceof WebAssembly.RuntimeError||e instanceof RangeError&&/memory|allocation/i.test(e.message)||/unreachable|out of memory|memory access out of bounds/i.test(String(e?.message??e))}let g=Promise.resolve();i.onmessage=e=>{const t=e.data;g=g.then(async()=>{if(t.type==="init"){try{await S(t)}catch(n){i.postMessage({type:"loadfail",error:String(n?.stack??n)})}return}const s=performance.now();try{const n=M(t),r=[];if(t.op==="export")for(const a of n)r.push(a.data.buffer);i.postMessage({type:"reply",id:t.id,ok:!0,value:n,ms:performance.now()-s,mem:y?.buffer.byteLength??null},r)}catch(n){const r=String(n?.message??n);i.postMessage({type:"reply",id:t.id,ok:!1,error:r,crashed:k(n)})}})};

studio/assets/main-BwYpaGSz.css

@@ -1 +0,0 @@
-@font-face{font-family:Inter Studio;src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Playfair Studio;src:url(../fonts/playfair-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root,:root[data-theme=dark]{color-scheme:dark;--void: #0c0a09;--stage: #141210;--paper: #1a1816;--card: #211f1c;--surface: #2a2724;--highlight: #35322e;--ink: #faf8f5;--dim: rgba(250, 248, 245, .75);--faint: rgba(250, 248, 245, .55);--muted: rgba(250, 248, 245, .4);--rule: rgba(250, 248, 245, .08);--rule2: #2a2724;--accent: #c9754a;--accent-text: #d4896a;--accent-hover: #d4896a;--accent-ink: #1a1816;--accent-soft: rgba(201, 117, 74, .12);--accent-subtle: rgba(201, 117, 74, .08);--gold: #b8976c;--gold-soft: rgba(184, 151, 108, .15);--good: #34d399;--goodbg: rgba(52, 211, 153, .15);--bad: #f87171;--badbg: rgba(248, 113, 113, .15);--anchor: #f87171;--handle: #b8976c;--wire: #faf8f5;--vt: #9a938c;--checker-a: #191715;--checker-b: #141210;--focus: rgba(201, 117, 74, .35);--focus-line: #c9754a;--state-draft: #b8976c;--state-final: #34d399;--state-stale: #c9754a;--shadow-sm: 0 4px 12px -2px rgba(12, 10, 9, .4);--shadow: 0 8px 24px -4px rgba(12, 10, 9, .5);--shadow-lg: 0 20px 50px -12px rgba(12, 10, 9, .6);--shadow-xl: 0 30px 70px -20px rgba(12, 10, 9, .7);--glow: 0 6px 20px rgba(201, 117, 74, .25)}:root[data-theme=light]{color-scheme:light;--void: #e6e1d9;--stage: #f0ece6;--paper: #faf8f5;--card: #ffffff;--surface: #eae5dd;--highlight: #ded8ce;--ink: #1a1816;--dim: rgba(26, 24, 22, .75);--faint: rgba(26, 24, 22, .58);--muted: rgba(26, 24, 22, .46);--rule: rgba(26, 24, 22, .1);--rule2: #d8d2c8;--accent: #c9754a;--accent-text: #9c5730;--accent-hover: #b3603a;--accent-ink: #faf8f5;--accent-soft: rgba(201, 117, 74, .14);--accent-subtle: rgba(201, 117, 74, .08);--gold: #8a6a3f;--gold-soft: rgba(138, 106, 63, .14);--good: #1c7a55;--goodbg: rgba(28, 122, 85, .14);--bad: #b83232;--badbg: rgba(184, 50, 50, .13);--anchor: #b83232;--handle: #8a6a3f;--wire: #1a1816;--vt: #6f6862;--checker-a: #ffffff;--checker-b: #e8e3db;--focus: rgba(201, 117, 74, .45);--focus-line: #9c5730;--state-draft: #8a6a3f;--state-final: #1c7a55;--state-stale: #9c5730;--shadow-sm: 0 4px 12px -2px rgba(90, 76, 60, .12);--shadow: 0 8px 24px -4px rgba(90, 76, 60, .16);--shadow-lg: 0 20px 50px -12px rgba(90, 76, 60, .2);--shadow-xl: 0 30px 70px -20px rgba(90, 76, 60, .24);--glow: 0 6px 20px rgba(201, 117, 74, .28)}:root{--font-display: "Playfair Studio", "Playfair Display", Georgia, serif;--font-body: "Inter Studio", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--h-compact: 28px;--h-control: 32px;--h-pill: 36px;--h-appbar: 46px;--h-status: 26px;--h-row: 30px;--t-chrome: 12.5px;--t-panel: 13px;--t-label: 11.5px;--t-eyebrow: 10px;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--rail-pad: 14px;--rail-w: 352px;--radius-sm: 6px;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--d-micro: .15s;--d-fast: .2s;--d-normal: .4s}@media(prefers-reduced-motion:reduce){:root{--d-micro: 0ms;--d-fast: 0ms;--d-normal: 0ms}}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--paper);color:var(--ink);font:400 var(--t-panel) / 1.5 var(--font-body);-webkit-font-smoothing:antialiased;user-select:none;cursor:default}#app{height:100%;display:flex;flex-direction:column}:focus{outline:none}:focus-visible{outline:2px solid var(--focus-line);outline-offset:2px;border-radius:var(--radius-sm)}a{color:var(--accent-text);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}.num{font-variant-numeric:tabular-nums}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.serif{font-family:var(--font-display);letter-spacing:-.03em}.eyebrow{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.dim{color:var(--dim)}.faint{color:var(--faint)}.muted{color:var(--muted)}.sep{width:1px;height:18px;background:var(--rule2);flex:none}.spacer{flex:1}kbd{font:500 10.5px var(--font-mono);border:1px solid var(--highlight);border-radius:4px;padding:1px 5px;color:var(--faint)}.btn{height:var(--h-control);padding:0 16px;border-radius:var(--radius-full);border:1px solid var(--rule2);background:transparent;color:var(--dim);font-weight:500;font-size:var(--t-chrome);display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:transform var(--d-micro) var(--ease-smooth),background var(--d-micro),border-color var(--d-micro),box-shadow var(--d-micro)}.btn:hover:not(:disabled){border-color:var(--highlight);color:var(--ink)}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{height:var(--h-pill);border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:var(--t-panel);box-shadow:var(--glow)}.btn.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink);transform:translateY(-2px)}.btn.ghost{border-color:transparent}.btn.ghost:hover:not(:disabled){background:var(--surface)}.btn.compact{height:var(--h-compact);padding:0 11px;border-radius:var(--radius);font-size:var(--t-chrome)}.btn.icon{width:var(--h-control);padding:0}.btn.icon.compact{width:var(--h-compact)}.btn.danger{color:var(--bad)}.seg{display:inline-flex;gap:2px;padding:2px;background:var(--card);border:1px solid var(--rule2);border-radius:7px}.seg>button{font-size:var(--t-label);padding:4px 11px;border-radius:5px;color:var(--faint);white-space:nowrap;transition:background var(--d-micro),color var(--d-micro)}.seg>button:hover{color:var(--dim)}.seg>button[aria-pressed=true]{background:var(--highlight);color:var(--ink);font-weight:500}.seg>button:disabled{color:var(--muted);cursor:default}.toggle{font-size:var(--t-label);padding:3px 9px;border-radius:var(--radius-sm);border:1px solid transparent;color:var(--faint)}.toggle:hover{color:var(--dim)}.toggle[aria-pressed=true]{border-color:var(--highlight);background:var(--rule2);color:var(--ink)}.switch{width:32px;height:18px;flex:none;border-radius:var(--radius-full);background:var(--highlight);position:relative;transition:background var(--d-micro)}.switch:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:transform var(--d-micro) var(--ease-smooth),background var(--d-micro)}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]:after{transform:translate(14px);background:var(--accent-ink)}.checkbox{width:15px;height:15px;flex:none;border-radius:4px;border:1px solid var(--highlight);display:grid;place-items:center;color:var(--accent-ink)}.checkbox[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.checkbox:not([aria-checked=true])>svg{visibility:hidden}.appbar{height:var(--h-appbar);flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--stage);border-bottom:1px solid var(--rule2);-webkit-app-region:drag}.appbar button,.appbar .seg,.appbar .filechip,.appbar .nodrag{-webkit-app-region:no-drag}.brand{display:flex;align-items:center;gap:8px;font-size:var(--t-chrome);font-weight:600;letter-spacing:-.01em;padding-right:4px}.brand>svg{color:var(--accent)}.filechip{display:flex;align-items:center;gap:8px;height:var(--h-compact);padding:0 10px;background:var(--card);border:1px solid var(--rule2);border-radius:var(--radius-sm);font-size:var(--t-chrome);max-width:340px}.filechip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wincontrols{display:flex;gap:2px;margin-left:4px}.wincontrols button{width:30px;height:26px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--faint)}.wincontrols button:hover{background:var(--surface);color:var(--ink)}.wincontrols button.close:hover{background:var(--bad);color:#fff}.wincontrols i{display:block;background:currentColor}.wincontrols .min i{width:10px;height:1px}.wincontrols .max i{width:9px;height:9px;background:none;border:1px solid currentColor;border-radius:2px}.body{flex:1;min-height:0;display:flex}.stage{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--stage);position:relative}.viewertools{min-height:38px;flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:5px 12px;border-bottom:1px solid var(--rule2);background:color-mix(in srgb,var(--stage) 92%,transparent)}.legend{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--faint)}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:block}.legend .anchor{width:7px;height:7px;border-radius:50%;background:var(--anchor)}.legend .handle{width:7px;height:7px;background:var(--handle);transform:rotate(45deg)}.legend .band{width:12px;height:6px;border-radius:2px}.legend .band.sure,.overlay .certainty .sure{--band: #30a46c}.legend .band.soft,.overlay .certainty .soft{--band: #f5a524}.legend .band.unsure,.overlay .certainty .unsure{--band: #e5484d}.legend .band{background:var(--band)}.overlay .certainty path{fill:var(--band);fill-rule:evenodd;fill-opacity:.45;stroke:var(--band);stroke-width:1;vector-effect:non-scaling-stroke}.legend .wire{width:12px;height:2px;background:var(--wire)}.panes{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.pane{flex:1;min-width:0;position:relative;overflow:hidden;display:grid;place-items:center;background-color:var(--stage);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:16px 16px;cursor:grab;touch-action:none}.pane:active{cursor:grabbing}.pane.hidden{display:none}.panes.stacked .pane{position:absolute;inset:0}.panelabel{position:absolute;top:10px;left:12px;z-index:3;pointer-events:none}.chip{position:absolute;top:8px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-full);font-size:var(--t-label);border:1px solid;pointer-events:none}.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}.chip.draft{color:var(--state-draft);border-color:color-mix(in srgb,var(--state-draft) 45%,transparent);background:color-mix(in srgb,var(--state-draft) 15%,transparent)}.chip.final{color:var(--state-final);border-color:color-mix(in srgb,var(--state-final) 40%,transparent);background:color-mix(in srgb,var(--state-final) 15%,transparent)}.chip.stale{color:var(--state-stale);border-color:color-mix(in srgb,var(--state-stale) 45%,transparent);background:color-mix(in srgb,var(--state-stale) 15%,transparent)}.chip.swapped:after{content:"";position:absolute;left:10px;right:10px;bottom:-3px;height:1.5px;background:var(--accent);border-radius:1px;transform-origin:left;animation:sweep var(--d-normal) var(--ease-out-expo)}@keyframes sweep{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.art{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;pointer-events:none}.art img{display:block;image-rendering:pixelated}.art svg{display:block;overflow:visible}.art.swapping{animation:crossfade var(--d-normal) var(--ease-out-expo)}@keyframes crossfade{0%{opacity:.25}to{opacity:1}}.art.centred{position:static;place-self:stretch;min-width:0;min-height:0;padding:44px 32px 32px}.panes.onlight{--stage: #f3f0ea;--checker-a: #ffffff;--checker-b: #ebe7df}.panes.ondark{--stage: #1a1816;--checker-a: #26231f;--checker-b: #211f1c}.overlay{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}.overlay .wireframe path{fill:none;stroke:var(--wire);stroke-width:1px;vector-effect:non-scaling-stroke}.overlay .handles path{fill:none;stroke:var(--handle);vector-effect:non-scaling-stroke}.overlay .handles .lines{stroke-width:.8px}.overlay .handles .knobs{stroke-width:2.4px;stroke-linecap:square}.pane>canvas.anchors{position:absolute;left:0;top:0;pointer-events:none}.wipehandle{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);z-index:4;cursor:ew-resize;opacity:.7}.wipehandle:after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--ink);background:var(--stage)}.detailpane{position:absolute;inset:0;z-index:5;background:var(--stage);display:flex;flex-direction:column}.detailhead{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--rule2);font-size:var(--t-label);color:var(--dim)}.detailbody{flex:1;min-height:0;position:relative;overflow:hidden;display:grid;place-items:center}.detailfoot{flex:none;padding:8px 12px;border-top:1px solid var(--rule2);font-size:var(--t-label);color:var(--faint)}.pixelgrid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(250,248,245,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(250,248,245,.07) 1px,transparent 1px);pointer-events:none}:root[data-theme=light] .pixelgrid{background-image:linear-gradient(to right,rgba(26,24,22,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(26,24,22,.1) 1px,transparent 1px)}.stagestate{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:32px;text-align:center;background:var(--stage)}.stagestate .title{font-size:16px;font-weight:500}.stagestate .body{display:block;font-size:var(--t-chrome);line-height:1.6;color:var(--faint);max-width:46ch}.stagestate .action{font-size:var(--t-chrome);color:var(--accent-text);margin-top:2px}.statusstrip{height:var(--h-status);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-top:1px solid var(--rule2);background:var(--stage);font-size:var(--t-label);color:var(--faint);font-variant-numeric:tabular-nums}.statusstrip .lead{color:var(--dim)}.statusstrip .privacy{margin-left:auto}.statusstrip .updatechip{display:inline-flex;align-items:center;gap:6px;color:var(--gold)}.statusstrip .updatechip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}.statusstrip .fetchchip{display:inline-flex;align-items:center;gap:8px;margin-left:12px;color:var(--faint);white-space:nowrap}.statusstrip .fetchchip.bad{color:var(--bad)}.fetchbar{width:64px;flex:none}.fetchnote{display:flex;flex-direction:column;gap:6px;font-size:11.5px;line-height:1.45;color:var(--faint)}.fetchnote .fetchbar{width:100%}.fetchnote .fetchline{color:var(--dim);font-variant-numeric:tabular-nums}.rail{width:var(--rail-w);flex:none;border-left:1px solid var(--rule2);background:var(--paper);display:flex;flex-direction:column;position:relative}.railscroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--rail-pad);display:flex;flex-direction:column;gap:var(--rail-pad)}.railscroll::-webkit-scrollbar{width:10px}.railscroll::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:5px;border:3px solid var(--paper)}.railscroll::-webkit-scrollbar-thumb:hover{background:var(--highlight)}.card{border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg);padding:13px;display:flex;flex-direction:column;gap:10px}.cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.railfoot{flex:none;border-top:1px solid var(--rule2);background:var(--stage);padding:12px var(--rail-pad);display:flex;flex-direction:column;gap:8px}.railfoot .row{display:flex;gap:8px}.railfoot .note{display:flex;justify-content:space-between;font-size:var(--t-label);color:var(--muted)}.presets{display:flex;flex-wrap:wrap;gap:5px}.preset{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;border:1px solid var(--rule2);background:var(--card);font-size:var(--t-chrome);color:var(--dim);transition:border-color var(--d-micro),background var(--d-micro),color var(--d-micro)}.preset:hover{border-color:var(--highlight);color:var(--ink)}.preset[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:500}.preset.saved{padding-right:22px}.preset{position:relative}.preset .forget{position:absolute;top:50%;margin-top:-8px;right:4px;width:16px;height:16px;border-radius:5px;opacity:0;transition:opacity var(--d-micro),background var(--d-micro)}.preset .forget:before,.preset .forget:after{content:"";position:absolute;left:4px;top:7.5px;width:8px;height:1.5px;border-radius:1px;background:var(--muted)}.preset .forget:before{transform:rotate(45deg)}.preset .forget:after{transform:rotate(-45deg)}.preset:hover .forget,.preset .forget:focus-visible{opacity:1}.preset .forget:hover{background:var(--highlight)}.preset .forget:hover:before,.preset .forget:hover:after{background:var(--bad)}.traybar{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px}.railmodes{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px var(--rail-pad) 0}.railmodes-row{display:grid;grid-template-columns:1.75fr 1fr;gap:8px}.mode.mode-engine{background:var(--paper);border-color:var(--rule)}.mode{min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 11px 11px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card)}.modehead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:16px}.modetitle{font-size:12.5px;font-weight:600;color:var(--ink)}.modestate{font-size:10.5px;color:var(--muted);white-space:nowrap}.seg.big{display:flex;width:100%;padding:3px}.seg.big>button{flex:1;padding:7px 0;font-size:12.5px;text-align:center}.seg.big>button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}.bigswitch{display:flex;align-items:center;gap:8px;height:34px;padding:0 4px;border:1px solid var(--rule2);border-radius:999px;background:var(--paper);color:var(--dim);font-size:12.5px;font-weight:600;transition:background var(--d-micro),border-color var(--d-micro),color var(--d-micro)}.bigswitch .knob{flex:none;width:24px;height:24px;border-radius:50%;background:var(--highlight);transition:background var(--d-micro)}.bigswitch .state{flex:1;text-align:center;padding-right:4px}.bigswitch[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.bigswitch[aria-checked=true]{flex-direction:row-reverse}.bigswitch[aria-checked=true] .knob{background:var(--accent-ink)}.bigswitch[aria-checked=true] .state{padding-right:0;padding-left:4px}.railtabs{flex:none;background:var(--stage);border-bottom:1px solid var(--rule2)}.railseg{display:flex;width:100%}.railseg>button{position:relative;flex:1;display:flex;align-items:baseline;justify-content:center;gap:8px;height:46px;padding:14px 12px 0;color:var(--muted);transition:color var(--d-micro),background var(--d-micro)}.railseg>button:hover:not([aria-selected=true]){color:var(--dim);background:color-mix(in srgb,var(--ink) 4%,transparent)}.railseg>button[aria-selected=true]{color:var(--ink);background:var(--paper)}.railseg>button:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background var(--d-micro)}.railseg>button[aria-selected=true]:after{background:var(--accent)}.railseg .tablabel{font-size:14px;font-weight:600;letter-spacing:-.005em}.railseg .tabnote{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--faint)}.railseg .tabnote:empty{display:none}.railseg>button[aria-selected=true] .tabnote{color:var(--accent-text)}.tabcaption{margin:0;padding:7px var(--rail-pad) 9px;background:var(--paper);font-size:11.5px;color:var(--muted)}.presetblock{display:flex;flex-direction:column;gap:8px}.presetblock .traybar .faint{min-width:0}.rail section.group{gap:0;border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg)}.rail section.group .grouphead{align-items:center;padding-right:13px}.groupbtn{flex:1;display:flex;align-items:center;gap:7px;padding:11px 9px 11px 13px;color:var(--muted);text-align:left;border-radius:var(--radius-lg)}.groupbtn:hover{color:var(--dim)}.groupbtn .changed{font-size:10.5px;color:var(--accent-text)}.groupbody{display:flex;flex-direction:column;gap:13px;padding:2px 13px 14px}.control.changed .controlhead .label:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--accent);vertical-align:1px}.emptycard p{margin:0;font-size:var(--t-chrome);line-height:1.55;color:var(--dim)}.structure .srow{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:5px;align-items:baseline}.structure .srow .k{font-size:var(--t-chrome);color:var(--dim)}.structure .srow .v{font-size:var(--t-panel);font-variant-numeric:tabular-nums}.structure .srow .v .of{margin-left:6px;font-size:10.5px;color:var(--muted)}.sbar{grid-column:1 / -1;position:relative;height:4px;margin-bottom:4px;border-radius:2px;background:var(--highlight)}.sbar i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--accent);transition:width var(--d-normal) var(--ease-out-expo)}.sbar b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--dim)}.readout{display:flex;flex-direction:column;min-height:54px;background:var(--rule2);border:1px solid var(--rule2);border-radius:var(--radius);overflow:hidden}.readout-badge-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;background:var(--card);border-bottom:1px solid var(--rule2)}.engine-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:all var(--d-micro);line-height:1.4;font-family:inherit}.engine-pill.fast{background:color-mix(in srgb,var(--accent) 15%,var(--paper));border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}.engine-pill.quality{background:color-mix(in srgb,var(--accent) 10%,var(--paper));border-color:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--ink)}.engine-pill:hover{filter:brightness(1.08);border-color:var(--accent)}.time-pill{font-size:11px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}.readout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}.readout .cell{min-width:0;display:flex;flex-direction:column;gap:1px;padding:6px 10px;background:var(--paper)}.readout .v{font-size:15px;font-weight:500;line-height:1.25}.readout .k{font-size:10px;color:var(--muted)}.delta{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--muted)}.delta.better{color:var(--good)}.delta.worse{color:var(--gold)}.readout.busy,.readout.idle{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--paper);font-size:var(--t-chrome)}.readout .stage{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--state-stale)}.pulse{flex:none;width:7px;height:7px;border-radius:50%;background:var(--state-stale);animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}.headline{display:flex;align-items:flex-end;gap:12px}.headline .figure{font-family:var(--font-display);font-size:52px;line-height:.85;letter-spacing:-.03em}.headline .of{display:flex;flex-direction:column;gap:2px;padding-bottom:4px}.meter{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--good),var(--gold) 55%,var(--bad))}.meter .threshold{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--dim)}.meter .needle{position:absolute;top:-4px;width:2px;height:14px;background:var(--ink);border-radius:1px;transition:left var(--d-normal) var(--ease-out-expo)}.meterscale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule2);border:1px solid var(--rule2);border-radius:var(--radius);overflow:hidden;font-variant-numeric:tabular-nums}.stats>div{background:var(--paper);padding:8px 10px;display:flex;flex-direction:column;gap:2px}.stats .k{font-size:10.5px;color:var(--muted)}.stats .v{font-size:var(--t-panel)}.benchmark{display:flex;gap:8px;padding:8px 10px;border:1px dashed var(--highlight);border-radius:var(--radius);background:color-mix(in srgb,var(--ink) 2%,transparent)}.benchmark .label{flex:none;padding-top:1px}.benchmark p{margin:0;font-size:var(--t-label);line-height:1.45;color:var(--faint)}.loss{display:flex;gap:9px;padding-bottom:9px;border-bottom:1px solid var(--rule2)}.loss:last-of-type{border-bottom:none;padding-bottom:0}.loss .glyph{flex:none;padding-top:2px;color:var(--gold)}.loss .text{font-size:var(--t-chrome);line-height:1.45;color:var(--dim)}.loss .meta{font-size:var(--t-label);color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}.loss .why{font-size:var(--t-label);line-height:1.5;color:var(--faint);margin-top:4px;padding-left:9px;border-left:1px solid var(--rule2)}.loss .expand{color:var(--muted)}.loss .expand:hover{color:var(--dim)}.nothinglost{display:flex;gap:9px;align-items:center;font-size:var(--t-chrome);color:var(--faint)}.nothinglost .glyph{color:var(--good);flex:none;display:flex}.ink{display:flex;align-items:center;gap:9px;padding:2px 0;border-radius:var(--radius-sm);width:100%;text-align:left}.ink:hover{background:var(--surface)}.swatch{width:22px;height:22px;flex:none;border-radius:5px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:8px 8px;position:relative;overflow:hidden}.swatch i{position:absolute;inset:0;display:block}.swatch.snapped{border:2px solid var(--accent)}.ink .hex{font-size:var(--t-chrome);font-variant-numeric:tabular-nums;color:var(--dim);width:72px}.ink .share{font-size:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums;width:44px}.ink .snap{margin-left:auto;font-size:var(--t-label);color:var(--muted)}.ink .snap.on{color:var(--accent-text)}.ink{gap:6px;touch-action:none}.ink.grouped .hex{color:var(--accent-text)}.inkpick{width:16px;height:16px;flex:none;border-radius:4px;border:1px solid var(--highlight);display:grid;place-items:center;color:var(--accent-ink)}.inkpick[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.inkmain{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left}.inkmain[aria-disabled=true]{cursor:grab}.swatch.mini{width:16px;height:16px;border-radius:4px}.swatch.mini.ramp{width:26px}.inklist{display:flex;flex-direction:column;gap:1px;border-radius:var(--radius-sm)}.inklist,.cgroup{transition:box-shadow var(--d-fast),background var(--d-fast)}.mergebar{display:flex;align-items:center;gap:10px;font-size:var(--t-label)}.cgroups{display:flex;flex-direction:column;gap:7px}.cgroupshead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.cgroup{border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper);padding:8px;display:flex;flex-direction:column;gap:7px}.cgroup.suggested{border-style:dashed;background:transparent}.cchips{display:flex;flex-wrap:wrap;gap:4px}.cchip{display:inline-flex;align-items:center;border:1px solid var(--highlight);border-radius:999px;background:var(--card);touch-action:none;font-size:var(--t-label);color:var(--dim)}.cchip.target{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.cchip.unmatched{border-color:var(--gold);border-style:dashed}.cchipmain{display:inline-flex;align-items:center;gap:5px;padding:2px 4px 2px 3px;border-radius:999px}.cchipmain .swatch.mini{border-radius:999px}.cchipx{display:grid;place-items:center;width:18px;height:18px;margin-right:2px;border-radius:999px;color:var(--muted)}.cchipx:hover{color:var(--ink);background:var(--surface)}.cresult{display:flex;align-items:center;gap:6px;font-size:var(--t-label)}.cresult>span{white-space:nowrap}.cresult .arrow{color:var(--muted)}.cresultchip{display:inline-flex;align-items:center;gap:5px;color:var(--dim)}.cactions{display:flex;align-items:center;gap:6px}.creport{font-size:11px;line-height:1.4;display:inline-flex;align-items:center;gap:5px;min-width:0}.creport.warn{color:var(--gold)}.creport.warn svg{flex:none}.simplifyrow{display:flex;align-items:center;gap:5px;font-size:var(--t-label)}.numberfield.simplify{min-width:0;width:40px;text-align:center}.dragghost{position:fixed;z-index:60;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}body.dragging-ink,body.dragging-ink *{cursor:grabbing!important}body.dragging-ink [data-drop=list]{box-shadow:0 0 0 1px var(--rule2)}.dropping{box-shadow:0 0 0 2px var(--accent)!important;background:var(--accent-subtle)!important}.control{display:flex;flex-direction:column;gap:5px}.controlhead{display:flex;align-items:baseline;gap:8px}.controlhead .label{flex:1;font-size:var(--t-chrome);color:var(--dim)}.controlhead .unit{font-size:var(--t-label);color:var(--muted)}.numberfield{height:24px;min-width:58px;padding:0 6px;border:1px solid var(--highlight);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font:400 var(--t-chrome) var(--font-body);font-variant-numeric:tabular-nums;text-align:center}.numberfield:focus-visible{border-color:var(--accent)}.slider{appearance:none;-webkit-appearance:none;width:100%;height:14px;background:none;margin:2px 0 0;cursor:pointer}.slider::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--highlight)}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:var(--ink);border:none}.slider::-moz-range-track{height:3px;border-radius:2px;background:var(--highlight)}.slider::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:var(--ink)}.stops{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);white-space:nowrap}.group{display:flex;flex-direction:column;gap:9px}.grouphead{display:flex;align-items:baseline;justify-content:space-between}.reset{font-size:var(--t-label);color:var(--accent-text)}.reset:disabled{color:var(--muted);cursor:default}.stagelist{display:flex;flex-direction:column;gap:5px;font-variant-numeric:tabular-nums}.stagerow{display:flex;align-items:baseline;gap:8px;font-size:var(--t-label);color:var(--muted)}.stagerow.done{color:var(--dim)}.stagerow .mark{width:10px;text-align:center;color:var(--muted)}.stagerow.done .mark{color:var(--good)}.stagerow .name{flex:1}.sweep{height:2px;background:var(--rule2);border-radius:2px;overflow:hidden}.sweep i{display:block;width:30%;height:100%;background:var(--accent);animation:sweepacross 1.6s var(--ease-out-expo) infinite}@keyframes sweepacross{0%{transform:translate(-100%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.sweep i{animation:none;width:100%;opacity:.4}.chip.swapped:after,.art.swapping,.callout,.pulse{animation:none}.dragging .drop{transition:none}}.firstrun{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:var(--stage);padding:24px}.drop{width:min(620px,80%);padding:44px 24px;min-height:220px;justify-content:center;border:1.5px dashed var(--highlight);border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;gap:16px;background:color-mix(in srgb,var(--ink) 1.5%,transparent);text-align:center;transition:border-color var(--d-fast),background var(--d-fast)}.drop .glyph{color:var(--muted)}[hidden]{display:none!important}.drop.solid{background:var(--paper);border-style:solid;border-color:var(--rule2)}.panehint{max-width:34ch;text-align:center;font-size:12.5px;line-height:1.55}.drop .headline{font-family:var(--font-display);font-size:26px;letter-spacing:-.02em;display:block}.drop .release,.dragging .drop .resting{display:none}.dragging .drop .release{display:block}.dragging .drop{width:min(640px,90%);min-height:320px;transition:width var(--d-fast) var(--ease-out-expo),min-height var(--d-fast) var(--ease-out-expo),border-color var(--d-fast),background var(--d-fast)}.samples{display:flex;flex-direction:column;align-items:center;gap:12px}.samplerow{display:flex;gap:12px}.sample{width:112px;display:flex;flex-direction:column;gap:7px;align-items:center}.sample .thumb{width:112px;height:88px;border:1px solid var(--rule2);border-radius:10px;background-color:var(--card);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:12px 12px;display:grid;place-items:center;overflow:hidden;transition:border-color var(--d-micro),transform var(--d-micro)}.sample:hover .thumb{border-color:var(--accent);transform:translateY(-2px)}.sample img{max-width:76px;max-height:68px}.sample .label{font-size:var(--t-label);color:var(--faint)}.dragging .drop{border-color:var(--accent);background:var(--accent-soft)}.dragging .drop .glyph{color:var(--accent)}.dragging:after{content:"";position:fixed;inset:0;border:2px solid var(--accent);pointer-events:none;z-index:60}.dragging .stage>*:not(.stagestate){opacity:.6}.callout{position:absolute;left:20px;bottom:20px;z-index:8;max-width:320px;display:flex;flex-direction:column;gap:5px;padding:10px 13px;border-radius:var(--radius-lg);border:1px solid var(--rule2);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);font-size:11.5px;line-height:1.5;color:var(--dim);animation:rise var(--d-fast) var(--ease-out-expo)}.callout .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}#overlays:empty{display:none}.scrim{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--void) 62%,transparent);display:grid;place-items:center;padding:24px}.modal{width:min(460px,100%);max-height:86vh;overflow-y:auto;background:var(--card);border:1px solid var(--highlight);border-radius:var(--radius-xl);padding:22px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow-xl)}.modal h2{margin:0;font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.02em}.modal p{margin:0;font-size:var(--t-panel);line-height:1.7;color:var(--dim)}.modal .actions{display:flex;gap:8px;justify-content:flex-end}.modal.composer{width:min(1040px,100%);max-height:92vh;padding:0;gap:0;overflow:hidden}.composerhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px 15px;border-bottom:1px solid var(--rule2)}.composerhead p{margin-top:3px;font-size:var(--t-chrome)}.composerbody{display:grid;grid-template-columns:minmax(0,1fr) 312px;min-height:0;overflow-y:auto}.composerpreview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;min-width:0;background:var(--stage)}.cardstage{--ar: 1.7778;position:relative;width:min(100%,calc(58vh * var(--ar)));aspect-ratio:var(--ar);border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-lg)}.cardstage img{display:block;width:100%;height:100%;object-fit:contain}.cardbusy{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--paper) 45%,transparent);transition:opacity var(--d-micro)}.cardstage.busy .cardbusy{opacity:1;transition-delay:.26s}.cardspin{width:20px;height:20px;border-radius:50%;border:2px solid var(--highlight);border-top-color:var(--accent);animation:cardspin .8s linear infinite}@keyframes cardspin{to{transform:rotate(360deg)}}.composerside{display:flex;flex-direction:column;gap:18px;padding:20px 22px;border-left:1px solid var(--rule2)}.optgroup{display:flex;flex-direction:column;gap:8px}.cardseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper)}.cardseg button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 8px;border-radius:calc(var(--radius) - 2px);font-size:var(--t-chrome);color:var(--faint)}.cardseg button small{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.cardseg button:hover:not([aria-checked=true]){color:var(--ink)}.cardseg button[aria-checked=true]{color:var(--ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.optlist{display:flex;flex-direction:column;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper)}.optlist>*+*{border-top:1px solid var(--rule2)}.optrow{display:flex;align-items:center;gap:12px;width:100%;padding:9px 11px;text-align:left}.optrow:hover{background:var(--rule2)}.optext{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}.optlabel{font-size:12.5px;color:var(--ink)}.optnote{font-size:11px;line-height:1.4;color:var(--muted)}.optslider{display:flex;flex-direction:column;gap:4px;padding:9px 11px 8px;transition:opacity var(--d-micro)}.optslider.off{opacity:.4}.optslider.off .slider{cursor:default}.optsliderhead{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}.composeractions{display:flex;flex-direction:column;gap:8px;margin-top:auto}.composeractions .btn{justify-content:center;gap:7px}@media(max-width:860px){.composerbody{grid-template-columns:minmax(0,1fr)}.composerside{border-left:0;border-top:1px solid var(--rule2)}}.popover{position:fixed;z-index:45;background:var(--card);border:1px solid var(--highlight);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.menu{padding:6px;min-width:260px}.menu .item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--radius);width:100%;text-align:left;font-size:var(--t-chrome);color:var(--dim)}.menu .item:hover{background:var(--surface);color:var(--ink)}.menu .item .when{margin-left:auto;font-size:var(--t-label);color:var(--muted)}.menu .rule{height:1px;background:var(--rule2);margin:5px 0}.sheet{position:absolute;inset:0;z-index:20;background:color-mix(in srgb,var(--void) 55%,transparent);display:flex;align-items:flex-end}.sheetbody{width:100%;max-height:100%;overflow-y:auto;background:var(--card);border-top:1px solid var(--highlight);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:14px;display:flex;flex-direction:column;gap:11px;box-shadow:0 -20px 50px color-mix(in srgb,var(--void) 60%,transparent);animation:rise var(--d-fast) var(--ease-out-expo)}@keyframes rise{0%{transform:translateY(12px);opacity:0}}.format{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper);width:100%;text-align:left;font-size:var(--t-chrome);color:var(--dim)}.format:hover{border-color:var(--highlight)}.format .size{margin-left:auto;font-size:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums}.tooltip{position:fixed;z-index:70;max-width:300px;background:var(--highlight);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:var(--radius);padding:10px 12px;font-size:var(--t-chrome);line-height:1.6;color:var(--dim);box-shadow:var(--shadow);pointer-events:none}#toasts{position:fixed;left:50%;bottom:40px;transform:translate(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}.toast{width:min(460px,90vw);background:var(--highlight);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:10px;padding:11px 13px;display:flex;align-items:center;gap:11px;box-shadow:var(--shadow-lg);animation:risein var(--d-fast) var(--ease-out-expo)}@keyframes risein{0%{transform:translateY(8px);opacity:0}}.toast .text{flex:1;font-size:var(--t-chrome);color:var(--dim)}.toast .glyph{display:flex}.toast .glyph.good{color:var(--good)}.toast .glyph.bad{color:var(--bad)}.screen{position:absolute;inset:0;z-index:30;background:var(--paper);display:flex;flex-direction:column}.screenbar{height:var(--h-appbar);flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--stage);border-bottom:1px solid var(--rule2);-webkit-app-region:drag}.screenbar button{-webkit-app-region:no-drag}.screenbody{flex:1;min-height:0;overflow-y:auto;background:var(--stage)}.settingsgrid{width:min(1128px,100%);margin:0 auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;align-content:start}.settinggroup{border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg);overflow:hidden;align-self:start}.settinggroup>.head{padding:11px 14px;border-bottom:1px solid var(--rule2)}.settingrow{display:flex;align-items:center;gap:16px;padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--ink) 5%,transparent)}.settingrow:last-child{border-bottom:none}.settingrow .about{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}.settingrow .label{font-size:var(--t-panel);color:var(--dim)}.settingrow .help{font-size:var(--t-label);line-height:1.5;color:var(--muted)}.settingrow .control{flex:none}.settingrow select,.settingrow input[type=text],.settingrow input[type=number]{height:var(--h-compact);padding:0 8px;border:1px solid var(--rule2);border-radius:7px;background:var(--paper);color:var(--ink);font:400 var(--t-chrome) var(--font-body);font-variant-numeric:tabular-nums;max-width:220px}.privacycard{border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;align-self:start}.privacycard .line{font-family:var(--font-display);font-size:19px;letter-spacing:-.02em}.about{display:flex;min-height:100%}.aboutleft{width:520px;flex:none;background:var(--stage);border-right:1px solid var(--rule2);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:56px}.aboutleft .mark{color:var(--accent)}.aboutright{flex:1;padding:56px;display:flex;flex-direction:column;gap:20px;justify-content:center;background:var(--paper)}.credit{border:1px solid var(--highlight);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--gold-soft)}.notices{border:1px solid var(--rule2);border-radius:var(--radius-lg);overflow:hidden}.notices .head{padding:11px 14px;border-bottom:1px solid var(--rule2);font-size:var(--t-chrome);color:var(--dim);display:flex;justify-content:space-between}.notices pre{margin:0;height:220px;overflow:auto;padding:12px 14px;font:11.5px / 1.75 var(--font-mono);color:var(--muted);background:var(--stage);white-space:pre-wrap;user-select:text}.minifyrail{width:400px;flex:none;border-left:1px solid var(--rule2);background:var(--paper);display:flex;flex-direction:column}.minifyresult{display:flex;flex-direction:column;gap:5px}.minifyresult .figure{font-family:var(--font-display);font-size:66px;line-height:.85;letter-spacing:-.04em;color:var(--accent-text)}.sentence{font-size:var(--t-panel);line-height:2;color:var(--dim)}.sentence .inlinefield{display:inline-flex;align-items:center;height:24px;padding:0 4px;border:1px solid var(--rule2);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font:400 var(--t-chrome) var(--font-body);font-variant-numeric:tabular-nums;width:58px;text-align:center}.sentence .inlinefield.accent{border-color:var(--accent);background:var(--accent-soft)}.batchbar{height:44px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--rule2);background:var(--stage)}.batchhead,.batchrow{display:grid;grid-template-columns:24px minmax(0,1.4fr) 120px 104px 84px 104px 96px minmax(0,1.2fr);align-items:center;gap:12px;padding:0 14px}.batchhead{height:34px;flex:none;border-bottom:1px solid var(--rule2)}.batchrow{height:var(--h-row);border-bottom:1px solid color-mix(in srgb,var(--ink) 4%,transparent);font-size:var(--t-chrome);font-variant-numeric:tabular-nums}.batchrow.failed{background:color-mix(in srgb,var(--bad) 8%,transparent)}.batchrow.running{background:var(--accent-subtle)}.batchrow .trunc,.batchhead .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.batchrow .right,.batchhead .right{text-align:right}.batchrow .state{display:flex;align-items:center;gap:6px}.batchrow .state i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex:none}.state.queued,.state.skipped{color:var(--muted)}.state.running{color:var(--accent-text)}.state.done{color:var(--good)}.state.failed{color:var(--bad)}.batchviewport{flex:1;min-height:0;overflow-y:auto;position:relative}.batchfoot{height:52px;flex:none;display:flex;align-items:center;gap:18px;padding:0 14px;border-top:1px solid var(--rule2);background:var(--stage);font-size:var(--t-chrome);font-variant-numeric:tabular-nums}.progress{height:3px;border-radius:2px;background:var(--highlight);overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);transition:width var(--d-fast) var(--ease-smooth)}@media(max-width:1400px){:root{--rail-w: 330px}}@media(max-width:1180px){:root{--rail-w: 310px}.legend{display:none}}.chooser{position:absolute;left:50%;bottom:16px;transform:translate(-50%);z-index:8;width:min(560px,calc(100% - 32px));max-height:calc(100% - 70px);overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:10px 12px 11px;background:var(--card);border:1px solid var(--highlight);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:rise var(--d-fast) var(--ease-out-expo)}.choosehead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.choosehead .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chooseintro{font-size:var(--t-label);line-height:1.5;color:var(--dim);padding:7px 10px;border-radius:var(--radius);background:var(--accent-subtle);border:1px solid var(--accent-soft)}.choices{display:flex;flex-direction:column;gap:6px}.choice{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:12px;padding:8px 8px 8px 12px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--paper);min-width:0}.choice .btn{min-width:104px}.choicename{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:17px;letter-spacing:-.02em;color:var(--ink)}.choicename svg{color:var(--accent-text)}.choicebody{font-size:var(--t-chrome);line-height:1.5;color:var(--faint)}.choosenews{display:flex;flex-direction:column;gap:6px;padding-top:9px;border-top:1px solid var(--rule2)}.remember{display:flex;align-items:center;gap:7px;font-size:var(--t-label);color:var(--faint);cursor:pointer;align-self:flex-start}.remember input{accent-color:var(--accent);margin:0}.autochose{display:flex;flex-direction:column;gap:7px;font-size:var(--t-chrome)}.autolead{color:var(--dim);line-height:1.5}.autorow{display:flex;align-items:center;gap:10px;justify-content:space-between}.autorow.moved{padding-top:7px;border-top:1px dashed var(--rule2)}.autotext{display:flex;flex-direction:column;gap:2px;min-width:0}.autotitle{color:var(--ink)}.autotext .muted{font-size:var(--t-label)}.autobtns{display:flex;align-items:center;gap:10px;flex:none}.autorow .btn{flex:none}.autotaken{font-size:var(--t-label);color:var(--state-final);flex:none}.card.autocard{border-color:var(--accent-soft);background:color-mix(in srgb,var(--accent) 4%,var(--card))}.guideline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:var(--t-label)}.rail.wizarding{width:max(var(--rail-w),400px)}.sheet.wizsheet{align-items:stretch;background:var(--paper)}.sheetbody.wizbody{height:100%;border-radius:0;border-top:none;box-shadow:none;padding:0;gap:0;overflow:hidden;background:var(--paper)}.wizhead{flex:none;display:flex;flex-direction:column;gap:9px;padding:14px 16px 12px;border-bottom:1px solid var(--rule2)}.wiztitle{font-size:24px;font-weight:500;line-height:1.1;color:var(--ink)}.wizdots{display:flex;gap:6px}.wizdots button{flex:1;height:4px;border-radius:2px;background:var(--highlight);transition:background var(--d-micro)}.wizdots button.done{background:color-mix(in srgb,var(--accent) 45%,var(--highlight))}.wizdots button[aria-selected=true]{background:var(--accent)}.wizdots button:hover{background:var(--accent-hover)}.wizcompare{display:flex;align-items:center;gap:8px;font-size:var(--t-label)}.wizcompare .seg>button{padding:3px 9px}.wizscroll{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}.wizlead{font-size:var(--t-panel);line-height:1.55;color:var(--dim)}.wizguide{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--rule2)}.wizexplain{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:var(--t-chrome);line-height:1.5}.wizexplain dt{font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px;white-space:nowrap}.wizexplain dd{margin:0;color:var(--dim)}.wizlearn{font-size:var(--t-label);color:var(--accent-text);align-self:flex-start;text-decoration:none}.wizlearn:hover{text-decoration:underline}.wizcontrols{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card)}.wizlive{display:flex;flex-direction:column;gap:12px}.wizrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--t-chrome)}.wizsmall{font-size:var(--t-label);line-height:1.5}.wizwhy{font-size:var(--t-chrome);line-height:1.5;color:var(--dim)}.wizchoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wizchoice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 11px;text-align:left;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper);font-size:var(--t-label);line-height:1.45}.wizchoice .name{font-size:13px;font-weight:600;color:var(--ink)}.wizchoice:hover{border-color:var(--highlight)}.wizchoice[aria-pressed=true]{border-color:var(--accent);background:var(--accent-subtle)}.wiznote{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:var(--radius);background:var(--accent-subtle);font-size:var(--t-label);line-height:1.5;color:var(--dim)}.wiznav{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--rule2);background:var(--paper)}.kinds{display:grid;grid-template-columns:1fr 1fr;gap:9px}.kind{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:7px 7px 9px;text-align:left;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card);min-width:0;transition:border-color var(--d-micro),background var(--d-micro)}.kind:hover{border-color:var(--highlight)}.kind[aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--card));box-shadow:0 0 0 1px var(--accent)}.kthumb{position:relative;height:104px;border-radius:var(--radius);background-color:var(--stage);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:10px 10px;display:grid;place-items:center;overflow:hidden;margin-bottom:3px}.kthumb img{max-width:92%;max-height:92%;object-fit:contain;image-rendering:auto}.kspin{position:absolute;inset:auto 0 0;height:2px;overflow:hidden;display:none}.kind.busy .kspin{display:block}.kspin:after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--accent);animation:sweepacross 1.6s var(--ease-out-expo) infinite}@media(prefers-reduced-motion:reduce){.kspin:after{animation:none;width:100%;opacity:.5}}.kname{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);padding:0 2px}.ksugg{font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}.kwhy,.knote,.kstat{font-size:11px;line-height:1.4;padding:0 2px}.kwhy{color:var(--faint)}.knote{color:var(--muted);font-style:italic}.kstat{color:var(--muted);margin-top:2px}.wizreadout table{width:100%;border-collapse:collapse;font-size:var(--t-chrome)}.wizreadout th,.wizreadout td{padding:4px 0;text-align:right;font-weight:400}.wizreadout thead th{font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.wizreadout tbody th{text-align:left;color:var(--faint)}.wizreadout td{color:var(--ink);padding-left:10px}.wizreadout td.delta{width:70px}.wizreadout td.delta.same{color:var(--muted)}.wizchanges .wizchange{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-chrome);color:var(--faint)}.wizchanges .wizchange .num{color:var(--ink)}.pane.source.comparing .panelabel{color:var(--accent-text)}.intro{width:min(620px,80%);display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid var(--accent-soft);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--accent) 5%,var(--paper))}.intro ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}.intro li{display:flex;gap:11px;align-items:baseline;font-size:var(--t-chrome);line-height:1.5}.intro li>div{display:flex;flex-direction:column}.introstep{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--accent);color:var(--accent-ink)}.introtitle{color:var(--ink);font-weight:500}.introfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--t-label)}html.framed:not(.fullscreen) body{padding-top:6px;background:var(--void)}html.framed:not(.fullscreen) #app{position:relative;border-top:1px solid rgba(201,117,74,.35)}.desktopnote{margin:14px 0 0;font-size:12.5px;text-align:center}.webcontrols{display:flex;gap:2px;margin-left:4px}.webcontrols .btn{gap:6px}.phonenote{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--void) 82%,transparent)}.phonecard{max-width:420px;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--radius-lg, 12px);background:var(--card);box-shadow:var(--shadow-lg)}.phonecard p{margin:0;font-size:13.5px;line-height:1.65;color:var(--dim)}.sc-loading{padding:40px;text-align:center}.sc-page{width:min(1320px,100%);margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:18px}.sc-head h1{margin:0 0 6px;font-size:28px;font-weight:600}.sc-head p,.sc-results>p{margin:0;max-width:96ch;font-size:13px;line-height:1.6}.sc-main{display:grid;grid-template-columns:300px 1fr;gap:16px;min-height:0;align-items:start}.sc-list{height:560px;overflow-y:auto;overscroll-behavior:contain;padding:0 10px 10px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card);scrollbar-width:thin}.sc-sethead{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;padding:10px 2px 8px;background:var(--card);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}.sc-sethead span{color:var(--faint);font-weight:600}.sc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}.sc-case{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;overflow:hidden;padding:5px;border:1px solid var(--rule2);border-radius:var(--radius-sm);background:var(--stage);color:var(--dim);cursor:pointer;text-align:left}.sc-case[aria-pressed=true]{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent)}.sc-thumb{aspect-ratio:1;width:100%;border-radius:5px;background:#fff;display:grid;place-items:center;overflow:hidden}.sc-thumb img{width:100%;height:100%;object-fit:contain}.sc-name{width:100%;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-caption{margin:0;font-size:12.5px;color:var(--dim)}.sc-stagecol{display:flex;flex-direction:column;gap:10px;min-width:0}.sc-tools{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}.sc-tools .eyebrow{margin-left:6px}.sc-legend{margin-right:4px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px}.sc-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.sc-dot.a{background:var(--anchor)}.sc-dot.hd{background:var(--handle);margin-left:6px}.sc-viewer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sc-pane{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--rule2);border-radius:var(--radius-sm);background-color:var(--stage);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:16px 16px;cursor:grab;touch-action:none;user-select:none}.sc-pane:active{cursor:grabbing}.sc-cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}.sc-cam>img,.sc-layer,.sc-layer>svg{position:absolute;inset:0;width:100%;height:100%;display:block}.sc-cam>img{object-fit:contain}.sc-tag{position:absolute;top:8px;left:8px;padding:4px 7px;border-radius:6px;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--paper) 85%,transparent);color:var(--ink);pointer-events:none}.sc-wire path,.sc-wire circle,.sc-wire ellipse,.sc-wire rect,.sc-wire polygon{fill:none!important;stroke:var(--wire);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-opacity:.9}.sc-ov{pointer-events:none}.sc-ov .h{stroke:var(--handle);stroke-width:1px;vector-effect:non-scaling-stroke;fill:none;stroke-opacity:.85}.sc-ov .hd{stroke:var(--handle);stroke-width:3.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}.sc-ov .a{stroke:var(--anchor);stroke-width:5px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}.sc-chips{display:flex;flex-wrap:wrap;gap:6px}.sc-chip{font-size:12px;padding:4px 9px;border-radius:999px;border:1px solid var(--rule2);color:var(--dim);font-variant-numeric:tabular-nums}.sc-chip.win{border-color:transparent;background:var(--goodbg);color:var(--good)}.sc-results{display:flex;flex-direction:column;gap:12px;padding-top:8px;border-top:1px solid var(--rule2)}.sc-results h2{margin:8px 0 0;font-size:22px;font-weight:600}.sc-bignums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sc-bignum{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card);font-size:12px}.sc-bignum .v{font-size:28px;color:var(--accent);line-height:1.1}.sc-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--card);border:1px solid var(--rule2);border-radius:var(--radius-lg);overflow:hidden}.sc-table th,.sc-table td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--rule2);white-space:nowrap}.sc-table th:first-child,.sc-table td:first-child{text-align:left}.sc-table th{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}.sc-table td.num{font-variant-numeric:tabular-nums;color:var(--dim)}.sc-table tr.win td{color:var(--ink)}.sc-table tr.win td:first-child{color:var(--accent);font-weight:600}.sc-note{font-size:12px!important}.sc-table caption{text-align:left;padding:10px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}.stagerow.running{color:var(--ink)}.stagerow.running .mark{color:var(--accent)}.stagerow .sub{margin-left:6px;color:var(--faint)}.activity{position:absolute;right:12px;bottom:12px;z-index:6;width:min(360px,calc(100% - 24px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule2);border-radius:var(--radius);box-shadow:var(--shadow-sm);font-family:var(--font-body);font-size:var(--t-label);font-variant-numeric:tabular-nums;color:var(--dim);overflow:hidden}.activity[hidden]{display:none}.activityhead{display:flex;align-items:center;gap:8px;padding:6px 10px;background:none;border:0;color:var(--dim);font:inherit;cursor:pointer;text-align:left}.activityhead .title{flex:1;font-weight:500;color:var(--ink)}.activityhead .chev{color:var(--accent-text)}.activitybody{max-height:180px;overflow-y:auto;padding:0 10px 8px;border-top:1px solid var(--rule)}.activity:not(.open) .activitybody{display:none}.activityline{display:flex;gap:8px;padding-top:3px;line-height:1.35}.activityline .t{flex:none;width:38px;text-align:right;color:var(--muted)}.activityline .w{flex:1;min-width:0}.activityline .r{flex:none;color:var(--muted)}.activityline.running .w,.activityline.running .r{color:var(--accent-text)}.activityline.note .w{color:var(--faint);padding-left:10px}

studio/assets/main-CdmTdoOg.css

@@ -0,0 +1 @@
+@font-face{font-family:Inter Studio;src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Playfair Studio;src:url(../fonts/playfair-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root,:root[data-theme=dark]{color-scheme:dark;--void: #0c0a09;--stage: #141210;--paper: #1a1816;--card: #211f1c;--surface: #2a2724;--highlight: #35322e;--ink: #faf8f5;--dim: rgba(250, 248, 245, .75);--faint: rgba(250, 248, 245, .55);--muted: rgba(250, 248, 245, .5);--rule: rgba(250, 248, 245, .08);--rule2: #2a2724;--accent: #c9754a;--accent-text: #d4896a;--accent-hover: #d4896a;--accent-ink: #1a1816;--accent-soft: rgba(201, 117, 74, .12);--accent-subtle: rgba(201, 117, 74, .08);--gold: #b8976c;--gold-soft: rgba(184, 151, 108, .15);--good: #34d399;--goodbg: rgba(52, 211, 153, .15);--bad: #f87171;--badbg: rgba(248, 113, 113, .15);--anchor: #f87171;--handle: #b8976c;--wire: #faf8f5;--vt: #9a938c;--checker-a: #191715;--checker-b: #141210;--focus: rgba(201, 117, 74, .35);--focus-line: #c9754a;--state-draft: #b8976c;--state-final: #34d399;--state-stale: #c9754a;--shadow-sm: 0 4px 12px -2px rgba(12, 10, 9, .4);--shadow: 0 8px 24px -4px rgba(12, 10, 9, .5);--shadow-lg: 0 20px 50px -12px rgba(12, 10, 9, .6);--shadow-xl: 0 30px 70px -20px rgba(12, 10, 9, .7);--glow: 0 6px 20px rgba(201, 117, 74, .25)}:root[data-theme=light]{color-scheme:light;--void: #e6e1d9;--stage: #f0ece6;--paper: #faf8f5;--card: #ffffff;--surface: #eae5dd;--highlight: #ded8ce;--ink: #1a1816;--dim: rgba(26, 24, 22, .75);--faint: rgba(26, 24, 22, .7);--muted: rgba(26, 24, 22, .64);--rule: rgba(26, 24, 22, .1);--rule2: #d8d2c8;--accent: #c9754a;--accent-text: #9c5730;--accent-hover: #d4896a;--accent-ink: #1a1816;--accent-soft: rgba(201, 117, 74, .14);--accent-subtle: rgba(201, 117, 74, .08);--gold: #8a6a3f;--gold-soft: rgba(138, 106, 63, .14);--good: #1c7a55;--goodbg: rgba(28, 122, 85, .14);--bad: #b83232;--badbg: rgba(184, 50, 50, .13);--anchor: #b83232;--handle: #8a6a3f;--wire: #1a1816;--vt: #6f6862;--checker-a: #ffffff;--checker-b: #e8e3db;--focus: rgba(201, 117, 74, .45);--focus-line: #9c5730;--state-draft: #8a6a3f;--state-final: #1c7a55;--state-stale: #9c5730;--shadow-sm: 0 4px 12px -2px rgba(90, 76, 60, .12);--shadow: 0 8px 24px -4px rgba(90, 76, 60, .16);--shadow-lg: 0 20px 50px -12px rgba(90, 76, 60, .2);--shadow-xl: 0 30px 70px -20px rgba(90, 76, 60, .24);--glow: 0 6px 20px rgba(201, 117, 74, .28)}:root{--font-display: "Playfair Studio", "Playfair Display", Georgia, serif;--font-body: "Inter Studio", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--h-compact: 28px;--h-control: 32px;--h-pill: 36px;--h-appbar: 46px;--h-status: 26px;--h-row: 30px;--t-chrome: 12.5px;--t-panel: 13px;--t-label: 11.5px;--t-eyebrow: 10px;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--rail-pad: 14px;--rail-w: 352px;--radius-sm: 6px;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--d-micro: .15s;--d-fast: .2s;--d-normal: .4s}@media(prefers-reduced-motion:reduce){:root{--d-micro: 0ms;--d-fast: 0ms;--d-normal: 0ms}}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--paper);color:var(--ink);font:400 var(--t-panel) / 1.5 var(--font-body);-webkit-font-smoothing:antialiased;user-select:none;cursor:default}#app{height:100%;display:flex;flex-direction:column}:focus{outline:none}:focus-visible{outline:2px solid var(--focus-line);outline-offset:2px;border-radius:var(--radius-sm)}a{color:var(--accent-text);text-decoration:none}a:hover{text-decoration:underline}p a,.stagestate .body a{text-decoration:underline;text-underline-offset:2px}button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}.num{font-variant-numeric:tabular-nums}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.serif{font-family:var(--font-display);letter-spacing:-.03em}.eyebrow{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.dim{color:var(--dim)}.faint{color:var(--faint)}.muted{color:var(--muted)}.sep{width:1px;height:18px;background:var(--rule2);flex:none}.spacer{flex:1}kbd{font:500 10.5px var(--font-mono);border:1px solid var(--highlight);border-radius:4px;padding:1px 5px;color:var(--faint)}.btn{height:var(--h-control);padding:0 16px;border-radius:var(--radius-full);border:1px solid var(--rule2);background:transparent;color:var(--dim);font-weight:500;font-size:var(--t-chrome);display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:transform var(--d-micro) var(--ease-smooth),background var(--d-micro),border-color var(--d-micro),box-shadow var(--d-micro)}.btn:hover:not(:disabled){border-color:var(--highlight);color:var(--ink)}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{height:var(--h-pill);border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:var(--t-panel);box-shadow:var(--glow)}.btn.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink);transform:translateY(-2px)}.btn.ghost{border-color:transparent}.btn.ghost:hover:not(:disabled){background:var(--surface)}.btn.compact{height:var(--h-compact);padding:0 11px;border-radius:var(--radius);font-size:var(--t-chrome)}.btn.icon{width:var(--h-control);padding:0}.btn.icon.compact{width:var(--h-compact)}.btn.danger{color:var(--bad)}.seg{display:inline-flex;gap:2px;padding:2px;background:var(--card);border:1px solid var(--rule2);border-radius:7px}.seg>button{font-size:var(--t-label);padding:4px 11px;border-radius:5px;color:var(--faint);white-space:nowrap;transition:background var(--d-micro),color var(--d-micro)}.seg>button:hover{color:var(--dim)}.seg>button[aria-pressed=true]{background:var(--highlight);color:var(--ink);font-weight:500}.seg>button:disabled{color:var(--muted);cursor:default}.toggle{font-size:var(--t-label);padding:3px 9px;border-radius:var(--radius-sm);border:1px solid transparent;color:var(--faint)}.toggle:hover{color:var(--dim)}.toggle[aria-pressed=true]{border-color:var(--highlight);background:var(--rule2);color:var(--ink)}.switch{width:32px;height:18px;flex:none;border-radius:var(--radius-full);background:var(--highlight);position:relative;transition:background var(--d-micro)}.switch:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:transform var(--d-micro) var(--ease-smooth),background var(--d-micro)}.switch[aria-checked=true],[aria-checked=true]>.switch{background:var(--accent)}.switch[aria-checked=true]:after,[aria-checked=true]>.switch:after{transform:translate(14px);background:var(--accent-ink)}.checkbox{width:15px;height:15px;flex:none;border-radius:4px;border:1px solid var(--highlight);display:grid;place-items:center;color:var(--accent-ink)}[aria-checked=true]>.checkbox{background:var(--accent);border-color:var(--accent)}.checkbox>svg{visibility:hidden}[aria-checked=true]>.checkbox>svg{visibility:visible}.appbar{height:var(--h-appbar);flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--stage);border-bottom:1px solid var(--rule2);-webkit-app-region:drag}.appbar button,.appbar .seg,.appbar .filechip,.appbar .nodrag{-webkit-app-region:no-drag}.apptabs{margin-left:auto}.appactions{margin-left:auto;display:flex;align-items:center;gap:2px}.brand{margin:0;display:flex;align-items:center;gap:8px;font-size:var(--t-chrome);font-weight:600;letter-spacing:-.01em;padding-right:4px}.brand>svg{color:var(--accent)}.filechip{display:flex;align-items:center;gap:8px;height:var(--h-compact);padding:0 10px;background:var(--card);border:1px solid var(--rule2);border-radius:var(--radius-sm);font-size:var(--t-chrome);max-width:340px}.filechip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wincontrols{display:flex;gap:2px;margin-left:4px}.wincontrols button{width:30px;height:26px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--faint)}.wincontrols button:hover{background:var(--surface);color:var(--ink)}.wincontrols button.close:hover{background:var(--bad);color:#fff}.wincontrols i{display:block;background:currentColor}.wincontrols .min i{width:10px;height:1px}.wincontrols .max i{width:9px;height:9px;background:none;border:1px solid currentColor;border-radius:2px}.body{flex:1;min-height:0;display:flex}.stage{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--stage);position:relative}.viewertools{min-height:38px;flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:5px 12px;border-bottom:1px solid var(--rule2);background:color-mix(in srgb,var(--stage) 92%,transparent)}.legend{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--faint)}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:block}.legend .anchor{width:7px;height:7px;border-radius:50%;background:var(--anchor)}.legend .handle{width:7px;height:7px;background:var(--handle);transform:rotate(45deg)}.legend .band{width:12px;height:6px;border-radius:2px}.legend .band.sure,.overlay .certainty .sure{--band: #30a46c}.legend .band.soft,.overlay .certainty .soft{--band: #f5a524}.legend .band.unsure,.overlay .certainty .unsure{--band: #e5484d}.legend .band{background:var(--band)}.overlay .certainty path{fill:var(--band);fill-rule:evenodd;fill-opacity:.45;stroke:var(--band);stroke-width:1;vector-effect:non-scaling-stroke}.legend .wire{width:12px;height:2px;background:var(--wire)}.panes{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.pane{flex:1;min-width:0;position:relative;overflow:hidden;display:grid;place-items:center;background-color:var(--stage);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:16px 16px;cursor:grab;touch-action:none}.pane:active{cursor:grabbing}.pane.hidden{display:none}.panes.stacked .pane{position:absolute;inset:0}.panelabel{position:absolute;top:10px;left:12px;z-index:3;pointer-events:none}.chip{position:absolute;top:8px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-full);font-size:var(--t-label);border:1px solid;pointer-events:none}.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}.chip.draft{color:var(--state-draft);border-color:color-mix(in srgb,var(--state-draft) 45%,transparent);background:color-mix(in srgb,var(--state-draft) 15%,transparent)}.chip.final{color:var(--state-final);border-color:color-mix(in srgb,var(--state-final) 40%,transparent);background:color-mix(in srgb,var(--state-final) 15%,transparent)}.chip.stale{color:var(--state-stale);border-color:color-mix(in srgb,var(--state-stale) 45%,transparent);background:color-mix(in srgb,var(--state-stale) 15%,transparent)}.chip.swapped:after{content:"";position:absolute;left:10px;right:10px;bottom:-3px;height:1.5px;background:var(--accent);border-radius:1px;transform-origin:left;animation:sweep var(--d-normal) var(--ease-out-expo)}@keyframes sweep{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.art{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;pointer-events:none}.art img{display:block;image-rendering:pixelated}.art svg{display:block;overflow:visible}.art.swapping{animation:crossfade var(--d-normal) var(--ease-out-expo)}@keyframes crossfade{0%{opacity:.25}to{opacity:1}}.art.centred{position:static;place-self:stretch;min-width:0;min-height:0;padding:44px 32px 32px}.panes.onlight{--stage: #f3f0ea;--checker-a: #ffffff;--checker-b: #ebe7df}.panes.ondark{--stage: #1a1816;--checker-a: #26231f;--checker-b: #211f1c}.overlay{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}.overlay .wireframe path{fill:none;stroke:var(--wire);stroke-width:1px;vector-effect:non-scaling-stroke}.overlay .handles path{fill:none;stroke:var(--handle);vector-effect:non-scaling-stroke}.overlay .handles .lines{stroke-width:.8px}.overlay .handles .knobs{stroke-width:2.4px;stroke-linecap:square}.pane>canvas.anchors{position:absolute;left:0;top:0;pointer-events:none}.wipehandle{position:absolute;top:0;bottom:0;width:24px;margin-left:-12px;z-index:4;cursor:ew-resize;opacity:.7;touch-action:none}.wipehandle:before{content:"";position:absolute;top:0;bottom:0;left:11px;width:2px;background:var(--ink)}.wipehandle:focus-visible{opacity:1;outline-offset:-2px}.panes:focus-visible{outline-offset:-3px;border-radius:0}.panpad>button.pan{display:grid;place-items:center;min-width:26px;min-height:24px;padding:4px 6px;color:var(--dim)}.panpad>button.left>svg,.panpad>button.up>svg{transform:rotate(180deg)}.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.wipehandle:after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--ink);background:var(--stage)}.detailpane{position:absolute;inset:0;z-index:5;background:var(--stage);display:flex;flex-direction:column}.detailhead{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--rule2);font-size:var(--t-label);color:var(--dim)}.detailbody{flex:1;min-height:0;position:relative;overflow:hidden;display:grid;place-items:center}.detailfoot{flex:none;padding:8px 12px;border-top:1px solid var(--rule2);font-size:var(--t-label);color:var(--faint)}.pixelgrid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(250,248,245,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(250,248,245,.07) 1px,transparent 1px);pointer-events:none}:root[data-theme=light] .pixelgrid{background-image:linear-gradient(to right,rgba(26,24,22,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(26,24,22,.1) 1px,transparent 1px)}.stagestate{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:32px;text-align:center;background:var(--stage)}.stagestate .title{font-size:16px;font-weight:500}.stagestate .body{display:block;font-size:var(--t-chrome);line-height:1.6;color:var(--faint);max-width:46ch}.stagestate .action{font-size:var(--t-chrome);color:var(--accent-text);margin-top:2px}.statusstrip{height:var(--h-status);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-top:1px solid var(--rule2);background:var(--stage);font-size:var(--t-label);color:var(--faint);font-variant-numeric:tabular-nums}.statusstrip .lead{color:var(--dim)}.statusstrip .privacy{margin-left:auto}.statusstrip .updatechip{display:inline-flex;align-items:center;gap:6px;color:var(--gold)}.statusstrip .updatechip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}.statusstrip .fetchchip{display:inline-flex;align-items:center;gap:8px;margin-left:12px;color:var(--faint);white-space:nowrap}.statusstrip .fetchchip.bad{color:var(--bad)}.fetchbar{width:64px;flex:none}.fetchnote{display:flex;flex-direction:column;gap:6px;font-size:11.5px;line-height:1.45;color:var(--faint)}.fetchnote .fetchbar{width:100%}.fetchnote .fetchline{color:var(--dim);font-variant-numeric:tabular-nums}.rail{width:var(--rail-w);flex:none;border-left:1px solid var(--rule2);background:var(--paper);display:flex;flex-direction:column;position:relative}.railscroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--rail-pad);display:flex;flex-direction:column;gap:var(--rail-pad)}.railscroll::-webkit-scrollbar{width:10px}.railscroll::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:5px;border:3px solid var(--paper)}.railscroll::-webkit-scrollbar-thumb:hover{background:var(--highlight)}.card{border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg);padding:13px;display:flex;flex-direction:column;gap:10px}.cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.railfoot{flex:none;border-top:1px solid var(--rule2);background:var(--stage);padding:12px var(--rail-pad);display:flex;flex-direction:column;gap:8px}.railfoot .row{display:flex;gap:8px}.railfoot .note{display:flex;justify-content:space-between;font-size:var(--t-label);color:var(--muted)}.presets{display:flex;flex-wrap:wrap;gap:5px}.preset{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;border:1px solid var(--rule2);background:var(--card);font-size:var(--t-chrome);color:var(--dim);transition:border-color var(--d-micro),background var(--d-micro),color var(--d-micro)}.preset:hover{border-color:var(--highlight);color:var(--ink)}.preset[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:500}.preset.saved{padding-right:22px}.preset{position:relative}.preset .forget{position:absolute;top:50%;margin-top:-8px;right:4px;width:16px;height:16px;border-radius:5px;opacity:0;transition:opacity var(--d-micro),background var(--d-micro)}.preset .forget:before,.preset .forget:after{content:"";position:absolute;left:4px;top:7.5px;width:8px;height:1.5px;border-radius:1px;background:var(--muted)}.preset .forget:before{transform:rotate(45deg)}.preset .forget:after{transform:rotate(-45deg)}.preset:hover .forget,.preset .forget:focus-visible{opacity:1}.preset .forget:hover{background:var(--highlight)}.preset .forget:hover:before,.preset .forget:hover:after{background:var(--bad)}.traybar{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px}.railmodes{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px var(--rail-pad) 0}.railmodes-row{display:grid;grid-template-columns:1.75fr 1fr;gap:8px}.mode.mode-engine{background:var(--paper);border-color:var(--rule)}.mode{min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 11px 11px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card)}.modehead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:16px}.modetitle{font-size:12.5px;font-weight:600;color:var(--ink)}.modestate{font-size:10.5px;color:var(--muted);white-space:nowrap}.seg.big{display:flex;width:100%;padding:3px}.seg.big>button{flex:1;padding:7px 0;font-size:12.5px;text-align:center}.seg.big>button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}.bigswitch{display:flex;align-items:center;gap:8px;height:34px;padding:0 4px;border:1px solid var(--rule2);border-radius:999px;background:var(--paper);color:var(--dim);font-size:12.5px;font-weight:600;transition:background var(--d-micro),border-color var(--d-micro),color var(--d-micro)}.bigswitch .knob{flex:none;width:24px;height:24px;border-radius:50%;background:var(--highlight);transition:background var(--d-micro)}.bigswitch .state{flex:1;text-align:center;padding-right:4px}.bigswitch[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.bigswitch[aria-checked=true]{flex-direction:row-reverse}.bigswitch[aria-checked=true] .knob{background:var(--accent-ink)}.bigswitch[aria-checked=true] .state{padding-right:0;padding-left:4px}.railtabs{flex:none;background:var(--stage);border-bottom:1px solid var(--rule2)}.railseg{display:flex;width:100%}.railseg>button{position:relative;flex:1;display:flex;align-items:baseline;justify-content:center;gap:8px;height:46px;padding:14px 12px 0;color:var(--muted);transition:color var(--d-micro),background var(--d-micro)}.railseg>button:hover:not([aria-selected=true]){color:var(--dim);background:color-mix(in srgb,var(--ink) 4%,transparent)}.railseg>button[aria-selected=true]{color:var(--ink);background:var(--paper)}.railseg>button:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background var(--d-micro)}.railseg>button[aria-selected=true]:after{background:var(--accent)}.railseg .tablabel{font-size:14px;font-weight:600;letter-spacing:-.005em}.railseg .tabnote{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--faint)}.railseg .tabnote:empty{display:none}.railseg>button[aria-selected=true] .tabnote{color:var(--accent-text)}.tabcaption{margin:0;padding:7px var(--rail-pad) 9px;background:var(--paper);font-size:11.5px;color:var(--muted)}.presetblock{display:flex;flex-direction:column;gap:8px}.presetblock .traybar .faint{min-width:0}.rail section.group{gap:0;border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg)}.rail section.group .grouphead{align-items:center;padding-right:13px}.groupbtn{flex:1;display:flex;align-items:center;gap:7px;padding:11px 9px 11px 13px;color:var(--muted);text-align:left;border-radius:var(--radius-lg)}.groupbtn:hover{color:var(--dim)}.groupbtn .changed{font-size:10.5px;color:var(--accent-text)}.groupbody{display:flex;flex-direction:column;gap:13px;padding:2px 13px 14px}.control.changed .controlhead .label:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--accent);vertical-align:1px}.emptycard p{margin:0;font-size:var(--t-chrome);line-height:1.55;color:var(--dim)}.structure .srow{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:5px;align-items:baseline}.structure .srow .k{font-size:var(--t-chrome);color:var(--dim)}.structure .srow .v{font-size:var(--t-panel);font-variant-numeric:tabular-nums}.structure .srow .v .of{margin-left:6px;font-size:10.5px;color:var(--muted)}.sbar{grid-column:1 / -1;position:relative;height:4px;margin-bottom:4px;border-radius:2px;background:var(--highlight)}.sbar i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--accent);transition:width var(--d-normal) var(--ease-out-expo)}.sbar b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--dim)}.readout{display:flex;flex-direction:column;min-height:54px;background:var(--rule2);border:1px solid var(--rule2);border-radius:var(--radius);overflow:hidden}.readout-badge-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;background:var(--card);border-bottom:1px solid var(--rule2)}.engine-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:all var(--d-micro);line-height:1.4;font-family:inherit}.engine-pill.fast{background:color-mix(in srgb,var(--accent) 15%,var(--paper));border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}.engine-pill.quality{background:color-mix(in srgb,var(--accent) 10%,var(--paper));border-color:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--ink)}.engine-pill:hover{filter:brightness(1.08);border-color:var(--accent)}.time-pill{font-size:11px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}.readout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}.readout .cell{min-width:0;display:flex;flex-direction:column;gap:1px;padding:6px 10px;background:var(--paper)}.readout .v{font-size:15px;font-weight:500;line-height:1.25}.readout .k{font-size:10px;color:var(--muted)}.delta{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--muted)}.delta.better{color:var(--good)}.delta.worse{color:var(--gold)}.readout.busy,.readout.idle{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--paper);font-size:var(--t-chrome)}.readout .stage{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--state-stale)}.pulse{flex:none;width:7px;height:7px;border-radius:50%;background:var(--state-stale);animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}.headline{display:flex;align-items:flex-end;gap:12px}.headline .figure{font-family:var(--font-display);font-size:52px;line-height:.85;letter-spacing:-.03em}.headline .of{display:flex;flex-direction:column;gap:2px;padding-bottom:4px}.meter{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--good),var(--gold) 55%,var(--bad))}.meter .threshold{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--dim)}.meter .needle{position:absolute;top:-4px;width:2px;height:14px;background:var(--ink);border-radius:1px;transition:left var(--d-normal) var(--ease-out-expo)}.meterscale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule2);border:1px solid var(--rule2);border-radius:var(--radius);overflow:hidden;font-variant-numeric:tabular-nums}.stats>div{background:var(--paper);padding:8px 10px;display:flex;flex-direction:column;gap:2px}.stats .k{font-size:10.5px;color:var(--muted)}.stats .v{font-size:var(--t-panel)}.benchmark{display:flex;gap:8px;padding:8px 10px;border:1px dashed var(--highlight);border-radius:var(--radius);background:color-mix(in srgb,var(--ink) 2%,transparent)}.benchmark .label{flex:none;padding-top:1px}.benchmark p{margin:0;font-size:var(--t-label);line-height:1.45;color:var(--faint)}.loss{display:flex;gap:9px;padding-bottom:9px;border-bottom:1px solid var(--rule2)}.loss:last-of-type{border-bottom:none;padding-bottom:0}.loss .glyph{flex:none;padding-top:2px;color:var(--gold)}.loss .text{font-size:var(--t-chrome);line-height:1.45;color:var(--dim)}.loss .meta{font-size:var(--t-label);color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}.loss .why{font-size:var(--t-label);line-height:1.5;color:var(--faint);margin-top:4px;padding-left:9px;border-left:1px solid var(--rule2)}.loss .expand{color:var(--muted)}.loss .expand:hover{color:var(--dim)}.nothinglost{display:flex;gap:9px;align-items:center;font-size:var(--t-chrome);color:var(--faint)}.nothinglost .glyph{color:var(--good);flex:none;display:flex}.ink{display:flex;align-items:center;gap:9px;padding:2px 0;border-radius:var(--radius-sm);width:100%;text-align:left}.ink:hover{background:var(--surface)}.swatch{width:22px;height:22px;flex:none;border-radius:5px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:8px 8px;position:relative;overflow:hidden}.swatch i{position:absolute;inset:0;display:block}.swatch.snapped{border:2px solid var(--accent)}.ink .hex{font-size:var(--t-chrome);font-variant-numeric:tabular-nums;color:var(--dim);width:72px}.ink .share{font-size:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums;width:44px}.ink .snap{margin-left:auto;font-size:var(--t-label);color:var(--muted)}.ink .snap.on{color:var(--accent-text)}.ink{gap:6px;touch-action:none}.ink.grouped .hex{color:var(--accent-text)}.inkpick{width:16px;height:16px;flex:none;border-radius:4px;border:1px solid var(--highlight);display:grid;place-items:center;color:var(--accent-ink)}.inkpick[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.inkmain{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left}.inkmain[aria-disabled=true]{cursor:grab}.swatch.mini{width:16px;height:16px;border-radius:4px}.swatch.mini.ramp{width:26px}.inklist{display:flex;flex-direction:column;gap:1px;border-radius:var(--radius-sm)}.inklist,.cgroup{transition:box-shadow var(--d-fast),background var(--d-fast)}.mergebar{display:flex;align-items:center;gap:10px;font-size:var(--t-label)}.cgroups{display:flex;flex-direction:column;gap:7px}.cgroupshead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.cgroup{border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper);padding:8px;display:flex;flex-direction:column;gap:7px}.cgroup.suggested{border-style:dashed;background:transparent}.cchips{display:flex;flex-wrap:wrap;gap:4px}.cchip{display:inline-flex;align-items:center;border:1px solid var(--highlight);border-radius:999px;background:var(--card);touch-action:none;font-size:var(--t-label);color:var(--dim)}.cchip.target{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.cchip.unmatched{border-color:var(--gold);border-style:dashed}.cchipmain{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 4px 2px 3px;border-radius:999px}.cchipmain .swatch.mini{border-radius:999px}.cchipx{display:grid;place-items:center;width:24px;height:24px;margin-right:1px;border-radius:999px;color:var(--muted)}.cchipx:hover{color:var(--ink);background:var(--surface)}.cresult{display:flex;align-items:center;gap:6px;font-size:var(--t-label)}.cresult>span{white-space:nowrap}.cresult .arrow{color:var(--muted)}.cresultchip{display:inline-flex;align-items:center;gap:5px;color:var(--dim)}.cactions{display:flex;align-items:center;gap:6px}.creport{font-size:11px;line-height:1.4;display:inline-flex;align-items:center;gap:5px;min-width:0}.creport.warn{color:var(--gold)}.creport.warn svg{flex:none}.simplifyrow{display:flex;align-items:center;gap:5px;font-size:var(--t-label)}.numberfield.simplify{min-width:0;width:40px;text-align:center}.dragghost{position:fixed;z-index:60;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}body.dragging-ink,body.dragging-ink *{cursor:grabbing!important}body.dragging-ink [data-drop=list]{box-shadow:0 0 0 1px var(--rule2)}.dropping{box-shadow:0 0 0 2px var(--accent)!important;background:var(--accent-subtle)!important}.control{display:flex;flex-direction:column;gap:5px}.controlhead{display:flex;align-items:baseline;gap:8px}.controlhead .label{flex:1;font-size:var(--t-chrome);color:var(--dim)}.controlhead .unit{font-size:var(--t-label);color:var(--muted)}.numberfield{height:24px;min-width:58px;padding:0 6px;border:1px solid var(--highlight);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font:400 var(--t-chrome) var(--font-body);font-variant-numeric:tabular-nums;text-align:center}.numberfield:focus-visible{border-color:var(--accent)}.slider{appearance:none;-webkit-appearance:none;width:100%;height:14px;background:none;margin:2px 0 0;cursor:pointer}.slider::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--highlight)}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:var(--ink);border:none}.slider::-moz-range-track{height:3px;border-radius:2px;background:var(--highlight)}.slider::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:var(--ink)}.stops{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);white-space:nowrap}.group{display:flex;flex-direction:column;gap:9px}.grouphead{display:flex;align-items:baseline;justify-content:space-between}.reset{font-size:var(--t-label);color:var(--accent-text)}.reset:disabled{color:var(--muted);cursor:default}.stagelist{display:flex;flex-direction:column;gap:5px;font-variant-numeric:tabular-nums}.stagerow{display:flex;align-items:baseline;gap:8px;font-size:var(--t-label);color:var(--muted)}.stagerow.done{color:var(--dim)}.stagerow .mark{width:10px;text-align:center;color:var(--muted)}.stagerow.done .mark{color:var(--good)}.stagerow .name{flex:1}.sweep{height:2px;background:var(--rule2);border-radius:2px;overflow:hidden}.sweep i{display:block;width:30%;height:100%;background:var(--accent);animation:sweepacross 1.6s var(--ease-out-expo) infinite}@keyframes sweepacross{0%{transform:translate(-100%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.sweep i{animation:none;width:100%;opacity:.4}.chip.swapped:after,.art.swapping,.callout,.pulse{animation:none}.dragging .drop{transition:none}}.firstrun{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:var(--stage);padding:24px}.firstfail{width:min(620px,80%);display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);border-radius:var(--radius-lg);background:var(--badbg);user-select:text}.firstfail .glyph{color:var(--bad);display:flex;padding-top:1px}.firstfail>div{display:flex;flex-direction:column;gap:5px;min-width:0}.firstfail .title{font-size:15px;font-weight:500}.firstfail .body{font-size:var(--t-chrome);line-height:1.55;color:var(--dim);overflow-wrap:anywhere}.firstfail .body.faint{color:var(--faint)}.drop{width:min(620px,80%);padding:44px 24px;min-height:220px;justify-content:center;border:1.5px dashed var(--highlight);border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;gap:16px;background:color-mix(in srgb,var(--ink) 1.5%,transparent);text-align:center;transition:border-color var(--d-fast),background var(--d-fast)}.drop .glyph{color:var(--muted)}[hidden]{display:none!important}.drop.solid{background:var(--paper);border-style:solid;border-color:var(--rule2)}.panehint{max-width:34ch;text-align:center;font-size:12.5px;line-height:1.55}.drop .headline{font-family:var(--font-display);font-size:26px;letter-spacing:-.02em;display:block}.drop .release,.dragging .drop .resting{display:none}.dragging .drop .release{display:block}.dragging .drop{width:min(640px,90%);min-height:320px;transition:width var(--d-fast) var(--ease-out-expo),min-height var(--d-fast) var(--ease-out-expo),border-color var(--d-fast),background var(--d-fast)}.samples{display:flex;flex-direction:column;align-items:center;gap:12px}.samplerow{display:flex;gap:12px}.sample{width:112px;display:flex;flex-direction:column;gap:7px;align-items:center}.sample .thumb{width:112px;height:88px;border:1px solid var(--rule2);border-radius:10px;background-color:var(--card);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:12px 12px;display:grid;place-items:center;overflow:hidden;transition:border-color var(--d-micro),transform var(--d-micro)}.sample:hover .thumb{border-color:var(--accent);transform:translateY(-2px)}.sample img{max-width:76px;max-height:68px}.sample .label{font-size:var(--t-label);color:var(--faint)}.dragging .drop{border-color:var(--accent);background:var(--accent-soft)}.dragging .drop .glyph{color:var(--accent)}.dragging:after{content:"";position:fixed;inset:0;border:2px solid var(--accent);pointer-events:none;z-index:60}.dragging .stage>*:not(.stagestate){opacity:.6}.callout{position:absolute;left:20px;bottom:20px;z-index:8;max-width:320px;display:flex;flex-direction:column;gap:5px;padding:10px 13px;border-radius:var(--radius-lg);border:1px solid var(--rule2);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);font-size:11.5px;line-height:1.5;color:var(--dim);animation:rise var(--d-fast) var(--ease-out-expo)}.callout .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}#overlays:empty{display:none}.scrim{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--void) 62%,transparent);display:grid;place-items:center;padding:24px}.modal{width:min(460px,100%);max-height:86vh;overflow-y:auto;background:var(--card);border:1px solid var(--highlight);border-radius:var(--radius-xl);padding:22px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow-xl)}.modal h2{margin:0;font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.02em}.modal p{margin:0;font-size:var(--t-panel);line-height:1.7;color:var(--dim)}.modal .actions{display:flex;gap:8px;justify-content:flex-end}.modal.composer{width:min(1040px,100%);max-height:92vh;padding:0;gap:0;overflow:hidden}.composerhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px 15px;border-bottom:1px solid var(--rule2)}.composerhead p{margin-top:3px;font-size:var(--t-chrome)}.composerbody{display:grid;grid-template-columns:minmax(0,1fr) 312px;min-height:0;overflow-y:auto}.composerpreview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;min-width:0;background:var(--stage)}.cardstage{--ar: 1.7778;position:relative;width:min(100%,calc(58vh * var(--ar)));aspect-ratio:var(--ar);border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-lg)}.cardstage img{display:block;width:100%;height:100%;object-fit:contain}.cardbusy{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--paper) 45%,transparent);transition:opacity var(--d-micro)}.cardstage.busy .cardbusy{opacity:1;transition-delay:.26s}.cardspin{width:20px;height:20px;border-radius:50%;border:2px solid var(--highlight);border-top-color:var(--accent);animation:cardspin .8s linear infinite}@keyframes cardspin{to{transform:rotate(360deg)}}.composerside{display:flex;flex-direction:column;gap:18px;padding:20px 22px;border-left:1px solid var(--rule2)}.optgroup{display:flex;flex-direction:column;gap:8px}.cardseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper)}.cardseg button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 8px;border-radius:calc(var(--radius) - 2px);font-size:var(--t-chrome);color:var(--faint)}.cardseg button small{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.cardseg button:hover:not([aria-checked=true]){color:var(--ink)}.cardseg button[aria-checked=true]{color:var(--ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.optlist{display:flex;flex-direction:column;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper)}.optlist>*+*{border-top:1px solid var(--rule2)}.optrow{display:flex;align-items:center;gap:12px;width:100%;padding:9px 11px;text-align:left}.optrow:hover{background:var(--rule2)}.optext{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}.optlabel{font-size:12.5px;color:var(--ink)}.optnote{font-size:11px;line-height:1.4;color:var(--muted)}.optslider{display:flex;flex-direction:column;gap:4px;padding:9px 11px 8px;transition:opacity var(--d-micro)}.optslider.off{opacity:.4}.optslider.off .slider{cursor:default}.optsliderhead{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}.composeractions{display:flex;flex-direction:column;gap:8px;margin-top:auto}.composeractions .btn{justify-content:center;gap:7px}@media(max-width:860px){.composerbody{grid-template-columns:minmax(0,1fr)}.composerside{border-left:0;border-top:1px solid var(--rule2)}}.popover{position:fixed;z-index:45;background:var(--card);border:1px solid var(--highlight);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.menu{padding:6px;min-width:260px}.menu .item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--radius);width:100%;text-align:left;font-size:var(--t-chrome);color:var(--dim)}.menu .item:hover{background:var(--surface);color:var(--ink)}.menu .item .when{margin-left:auto;font-size:var(--t-label);color:var(--muted)}.menu .rule{height:1px;background:var(--rule2);margin:5px 0}.sheet{position:absolute;inset:0;z-index:20;background:color-mix(in srgb,var(--void) 55%,transparent);display:flex;align-items:flex-end}.sheetbody{width:100%;max-height:100%;overflow-y:auto;background:var(--card);border-top:1px solid var(--highlight);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:14px;display:flex;flex-direction:column;gap:11px;box-shadow:0 -20px 50px color-mix(in srgb,var(--void) 60%,transparent);animation:rise var(--d-fast) var(--ease-out-expo)}@keyframes rise{0%{transform:translateY(12px);opacity:0}}.format{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper);width:100%;text-align:left;font-size:var(--t-chrome);color:var(--dim)}.format:hover{border-color:var(--highlight)}.format .size{margin-left:auto;font-size:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums}.tooltip{position:fixed;z-index:70;max-width:300px;background:var(--highlight);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:var(--radius);padding:10px 12px;font-size:var(--t-chrome);line-height:1.6;color:var(--dim);box-shadow:var(--shadow);pointer-events:none}#toasts{position:fixed;left:50%;bottom:40px;transform:translate(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}.toast{width:min(460px,90vw);background:var(--highlight);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:10px;padding:11px 13px;display:flex;align-items:center;gap:11px;box-shadow:var(--shadow-lg);animation:risein var(--d-fast) var(--ease-out-expo)}@keyframes risein{0%{transform:translateY(8px);opacity:0}}.toast .text{flex:1;font-size:var(--t-chrome);color:var(--dim)}.toast .glyph{display:flex}.toast .glyph.good{color:var(--good)}.toast .glyph.bad{color:var(--bad)}.screen{position:absolute;inset:0;z-index:30;background:var(--paper);display:flex;flex-direction:column}.screenbar{height:var(--h-appbar);flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--stage);border-bottom:1px solid var(--rule2);-webkit-app-region:drag}.screenbar button{-webkit-app-region:no-drag}.screenbody{flex:1;min-height:0;overflow-y:auto;background:var(--stage)}.settingsgrid{width:min(1128px,100%);margin:0 auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;align-content:start}.settinggroup{border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg);overflow:hidden;align-self:start}.settinggroup>.head{padding:11px 14px;border-bottom:1px solid var(--rule2)}.settingrow{display:flex;align-items:center;gap:16px;padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--ink) 5%,transparent)}.settingrow:last-child{border-bottom:none}.settingrow .about{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}.settingrow .label{font-size:var(--t-panel);color:var(--dim)}.settingrow .help{font-size:var(--t-label);line-height:1.5;color:var(--muted)}.settingrow .control{flex:none}.settingrow select,.settingrow input[type=text],.settingrow input[type=number]{height:var(--h-compact);padding:0 8px;border:1px solid var(--rule2);border-radius:7px;background:var(--paper);color:var(--ink);font:400 var(--t-chrome) var(--font-body);font-variant-numeric:tabular-nums;max-width:220px}.privacycard{border:1px solid var(--rule2);background:var(--card);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;align-self:start}.privacycard .line{font-family:var(--font-display);font-size:19px;letter-spacing:-.02em}.about{display:flex;min-height:100%}.aboutleft{width:520px;flex:none;background:var(--stage);border-right:1px solid var(--rule2);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:56px}.aboutleft .mark{color:var(--accent)}.aboutright{flex:1;padding:56px;display:flex;flex-direction:column;gap:20px;justify-content:center;background:var(--paper)}.credit{border:1px solid var(--highlight);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--gold-soft)}.notices{border:1px solid var(--rule2);border-radius:var(--radius-lg);overflow:hidden}.notices .head{padding:11px 14px;border-bottom:1px solid var(--rule2);font-size:var(--t-chrome);color:var(--dim);display:flex;justify-content:space-between}.notices pre{margin:0;height:220px;overflow:auto;padding:12px 14px;font:11.5px / 1.75 var(--font-mono);color:var(--muted);background:var(--stage);white-space:pre-wrap;user-select:text}.minifyrail{width:400px;flex:none;border-left:1px solid var(--rule2);background:var(--paper);display:flex;flex-direction:column}.minifyresult{display:flex;flex-direction:column;gap:5px}.minifyresult .figure{font-family:var(--font-display);font-size:66px;line-height:.85;letter-spacing:-.04em;color:var(--accent-text)}.sentence{font-size:var(--t-panel);line-height:2;color:var(--dim)}.sentence .inlinefield{display:inline-flex;align-items:center;height:24px;padding:0 4px;border:1px solid var(--rule2);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font:400 var(--t-chrome) var(--font-body);font-variant-numeric:tabular-nums;width:58px;text-align:center}.sentence .inlinefield.accent{border-color:var(--accent);background:var(--accent-soft)}.batchbar{height:44px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--rule2);background:var(--stage)}.batchhead,.batchrow{display:grid;grid-template-columns:24px minmax(0,1.4fr) 120px 104px 84px 104px 96px minmax(0,1.2fr);align-items:center;gap:12px;padding:0 14px}.batchhead{height:34px;flex:none;border-bottom:1px solid var(--rule2)}.batchrow{height:var(--h-row);border-bottom:1px solid color-mix(in srgb,var(--ink) 4%,transparent);font-size:var(--t-chrome);font-variant-numeric:tabular-nums}.batchrow.failed{background:color-mix(in srgb,var(--bad) 8%,transparent)}.batchrow.running{background:var(--accent-subtle)}.batchrow .trunc,.batchhead .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.batchrow .right,.batchhead .right{text-align:right}.batchrow .state{display:flex;align-items:center;gap:6px}.batchrow .state i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex:none}.state.queued,.state.skipped{color:var(--muted)}.state.running{color:var(--accent-text)}.state.done{color:var(--good)}.state.failed{color:var(--bad)}.batchviewport{flex:1;min-height:0;overflow-y:auto;position:relative}.batchfoot{height:52px;flex:none;display:flex;align-items:center;gap:18px;padding:0 14px;border-top:1px solid var(--rule2);background:var(--stage);font-size:var(--t-chrome);font-variant-numeric:tabular-nums}.progress{height:3px;border-radius:2px;background:var(--highlight);overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);transition:width var(--d-fast) var(--ease-smooth)}@media(max-width:1400px){:root{--rail-w: 330px}}@media(max-width:1180px){:root{--rail-w: 310px}.legend{display:none}}.chooser{position:absolute;left:50%;bottom:16px;transform:translate(-50%);z-index:8;width:min(560px,calc(100% - 32px));max-height:calc(100% - 70px);overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:10px 12px 11px;background:var(--card);border:1px solid var(--highlight);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:rise var(--d-fast) var(--ease-out-expo)}.choosehead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.choosehead .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chooseintro{font-size:var(--t-label);line-height:1.5;color:var(--dim);padding:7px 10px;border-radius:var(--radius);background:var(--accent-subtle);border:1px solid var(--accent-soft)}.choices{display:flex;flex-direction:column;gap:6px}.choice{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:12px;padding:8px 8px 8px 12px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--paper);min-width:0}.choice .btn{min-width:104px}.choicename{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:17px;letter-spacing:-.02em;color:var(--ink)}.choicename svg{color:var(--accent-text)}.choicebody{font-size:var(--t-chrome);line-height:1.5;color:var(--faint)}.choosenews{display:flex;flex-direction:column;gap:6px;padding-top:9px;border-top:1px solid var(--rule2)}.remember{display:flex;align-items:center;gap:7px;font-size:var(--t-label);color:var(--faint);cursor:pointer;align-self:flex-start}.remember input{accent-color:var(--accent);margin:0}.autochose{display:flex;flex-direction:column;gap:7px;font-size:var(--t-chrome)}.autolead{color:var(--dim);line-height:1.5}.autorow{display:flex;align-items:center;gap:10px;justify-content:space-between}.autorow.moved{padding-top:7px;border-top:1px dashed var(--rule2)}.autotext{display:flex;flex-direction:column;gap:2px;min-width:0}.autotitle{color:var(--ink)}.autotext .muted{font-size:var(--t-label)}.autobtns{display:flex;align-items:center;gap:10px;flex:none}.autorow .btn{flex:none}.autotaken{font-size:var(--t-label);color:var(--state-final);flex:none}.card.autocard{border-color:var(--accent-soft);background:color-mix(in srgb,var(--accent) 4%,var(--card))}.guideline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:var(--t-label)}.rail.wizarding{width:max(var(--rail-w),400px)}.sheet.wizsheet{align-items:stretch;background:var(--paper)}.sheetbody.wizbody{height:100%;border-radius:0;border-top:none;box-shadow:none;padding:0;gap:0;overflow:hidden;background:var(--paper)}.wizhead{flex:none;display:flex;flex-direction:column;gap:9px;padding:14px 16px 12px;border-bottom:1px solid var(--rule2)}.wiztitle{font-size:24px;font-weight:500;line-height:1.1;color:var(--ink)}.wizdots{display:flex;gap:6px}.wizdots button{flex:1;height:4px;border-radius:2px;background:var(--highlight);transition:background var(--d-micro)}.wizdots button.done{background:color-mix(in srgb,var(--accent) 45%,var(--highlight))}.wizdots button[aria-selected=true]{background:var(--accent)}.wizdots button:hover{background:var(--accent-hover)}.wizcompare{display:flex;align-items:center;gap:8px;font-size:var(--t-label)}.wizcompare .seg>button{padding:3px 9px}.wizscroll{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}.wizlead{font-size:var(--t-panel);line-height:1.55;color:var(--dim)}.wizguide{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--rule2)}.wizexplain{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:var(--t-chrome);line-height:1.5}.wizexplain dt{font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px;white-space:nowrap}.wizexplain dd{margin:0;color:var(--dim)}.wizlearn{font-size:var(--t-label);color:var(--accent-text);align-self:flex-start;text-decoration:none}.wizlearn:hover{text-decoration:underline}.wizcontrols{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card)}.wizlive{display:flex;flex-direction:column;gap:12px}.wizrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--t-chrome)}.wizsmall{font-size:var(--t-label);line-height:1.5}.wizwhy{font-size:var(--t-chrome);line-height:1.5;color:var(--dim)}.wizchoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wizchoice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 11px;text-align:left;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--paper);font-size:var(--t-label);line-height:1.45}.wizchoice .name{font-size:13px;font-weight:600;color:var(--ink)}.wizchoice:hover{border-color:var(--highlight)}.wizchoice[aria-pressed=true]{border-color:var(--accent);background:var(--accent-subtle)}.wiznote{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:var(--radius);background:var(--accent-subtle);font-size:var(--t-label);line-height:1.5;color:var(--dim)}.wiznav{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--rule2);background:var(--paper)}.kinds{display:grid;grid-template-columns:1fr 1fr;gap:9px}.kind{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:7px 7px 9px;text-align:left;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card);min-width:0;transition:border-color var(--d-micro),background var(--d-micro)}.kind:hover{border-color:var(--highlight)}.kind[aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--card));box-shadow:0 0 0 1px var(--accent)}.kthumb{position:relative;height:104px;border-radius:var(--radius);background-color:var(--stage);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:10px 10px;display:grid;place-items:center;overflow:hidden;margin-bottom:3px}.kthumb img{max-width:92%;max-height:92%;object-fit:contain;image-rendering:auto}.kspin{position:absolute;inset:auto 0 0;height:2px;overflow:hidden;display:none}.kind.busy .kspin{display:block}.kspin:after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--accent);animation:sweepacross 1.6s var(--ease-out-expo) infinite}@media(prefers-reduced-motion:reduce){.kspin:after{animation:none;width:100%;opacity:.5}}.kname{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);padding:0 2px}.ksugg{font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}.kwhy,.knote,.kstat{font-size:11px;line-height:1.4;padding:0 2px}.kwhy{color:var(--faint)}.knote{color:var(--muted);font-style:italic}.kstat{color:var(--muted);margin-top:2px}.wizreadout table{width:100%;border-collapse:collapse;font-size:var(--t-chrome)}.wizreadout th,.wizreadout td{padding:4px 0;text-align:right;font-weight:400}.wizreadout thead th{font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.wizreadout tbody th{text-align:left;color:var(--faint)}.wizreadout td{color:var(--ink);padding-left:10px}.wizreadout td.delta{width:70px}.wizreadout td.delta.same{color:var(--muted)}.wizchanges .wizchange{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-chrome);color:var(--faint)}.wizchanges .wizchange .num{color:var(--ink)}.pane.source.comparing .panelabel{color:var(--accent-text)}.intro{width:min(620px,80%);display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid var(--accent-soft);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--accent) 5%,var(--paper))}.intro ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}.intro li{display:flex;gap:11px;align-items:baseline;font-size:var(--t-chrome);line-height:1.5}.intro li>div{display:flex;flex-direction:column}.introstep{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--accent);color:var(--accent-ink)}.introtitle{color:var(--ink);font-weight:500}.introfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--t-label)}html.framed:not(.fullscreen) body{padding-top:6px;background:var(--void)}html.framed:not(.fullscreen) #app{position:relative;border-top:1px solid rgba(201,117,74,.35)}.desktopnote{margin:14px 0 0;font-size:12.5px;text-align:center}.webcontrols{display:flex;gap:2px;margin-left:4px}.webcontrols .btn{gap:6px}.sc-loading{padding:40px;text-align:center}.sc-page{width:min(1320px,100%);margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:18px}.sc-head h1{margin:0 0 6px;font-size:28px;font-weight:600}.sc-head p,.sc-results>p{margin:0;max-width:96ch;font-size:13px;line-height:1.6}.sc-main{display:grid;grid-template-columns:300px 1fr;gap:16px;min-height:0;align-items:start}.sc-list{height:560px;overflow-y:auto;overscroll-behavior:contain;padding:0 10px 10px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card);scrollbar-width:thin}.sc-sethead{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;padding:10px 2px 8px;background:var(--card);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}.sc-sethead span{color:var(--faint);font-weight:600}.sc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}.sc-case{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;overflow:hidden;padding:5px;border:1px solid var(--rule2);border-radius:var(--radius-sm);background:var(--stage);color:var(--dim);cursor:pointer;text-align:left}.sc-case[aria-pressed=true]{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent-text)}.sc-thumb{aspect-ratio:1;width:100%;border-radius:5px;background:#fff;display:grid;place-items:center;overflow:hidden}.sc-thumb img{width:100%;height:100%;object-fit:contain}.sc-name{width:100%;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-caption{margin:0;font-size:12.5px;color:var(--dim)}.sc-stagecol{display:flex;flex-direction:column;gap:10px;min-width:0}.sc-tools{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}.sc-tools .eyebrow{margin-left:6px}.sc-legend{margin-right:4px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px}.sc-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.sc-dot.a{background:var(--anchor)}.sc-dot.hd{background:var(--handle);margin-left:6px}.sc-viewer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sc-pane{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--rule2);border-radius:var(--radius-sm);background-color:var(--stage);background-image:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%);background-size:16px 16px;cursor:grab;touch-action:none;user-select:none}.sc-pane:active{cursor:grabbing}.sc-cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}.sc-cam>img,.sc-layer,.sc-layer>svg{position:absolute;inset:0;width:100%;height:100%;display:block}.sc-cam>img{object-fit:contain}.sc-tag{position:absolute;top:8px;left:8px;padding:4px 7px;border-radius:6px;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--paper) 85%,transparent);color:var(--ink);pointer-events:none}.sc-wire path,.sc-wire circle,.sc-wire ellipse,.sc-wire rect,.sc-wire polygon{fill:none!important;stroke:var(--wire);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-opacity:.9}.sc-ov{pointer-events:none}.sc-ov .h{stroke:var(--handle);stroke-width:1px;vector-effect:non-scaling-stroke;fill:none;stroke-opacity:.85}.sc-ov .hd{stroke:var(--handle);stroke-width:3.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}.sc-ov .a{stroke:var(--anchor);stroke-width:5px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}.sc-chips{display:flex;flex-wrap:wrap;gap:6px}.sc-chip{font-size:12px;padding:4px 9px;border-radius:999px;border:1px solid var(--rule2);color:var(--dim);font-variant-numeric:tabular-nums}.sc-chip.win{border-color:transparent;background:var(--goodbg);color:var(--good)}.sc-results{display:flex;flex-direction:column;gap:12px;padding-top:8px;border-top:1px solid var(--rule2)}.sc-results h2{margin:8px 0 0;font-size:22px;font-weight:600}.sc-bignums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sc-bignum{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--rule2);border-radius:var(--radius-lg);background:var(--card);font-size:12px}.sc-bignum .v{font-size:28px;color:var(--accent);line-height:1.1}.sc-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--card);border:1px solid var(--rule2);border-radius:var(--radius-lg);overflow:hidden}.sc-table th,.sc-table td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--rule2);white-space:nowrap}.sc-table th:first-child,.sc-table td:first-child{text-align:left}.sc-table th{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}.sc-table td.num{font-variant-numeric:tabular-nums;color:var(--dim)}.sc-table tr.win td{color:var(--ink)}.sc-table tr.win td:first-child{color:var(--accent);font-weight:600}.sc-note{font-size:12px!important}.sc-table caption{text-align:left;padding:10px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}.stagerow.running{color:var(--ink)}.stagerow.running .mark{color:var(--accent)}.stagerow .sub{margin-left:6px;color:var(--faint)}.activity{position:absolute;right:12px;bottom:12px;z-index:6;width:min(360px,calc(100% - 24px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule2);border-radius:var(--radius);box-shadow:var(--shadow-sm);font-family:var(--font-body);font-size:var(--t-label);font-variant-numeric:tabular-nums;color:var(--dim);overflow:hidden}.activity[hidden]{display:none}.activityhead{display:flex;align-items:center;gap:8px;padding:6px 10px;background:none;border:0;color:var(--dim);font:inherit;cursor:pointer;text-align:left}.activityhead .title{flex:1;font-weight:500;color:var(--ink)}.activityhead .chev{color:var(--accent-text)}.activitybody{max-height:180px;overflow-y:auto;padding:0 10px 8px;border-top:1px solid var(--rule)}.activity:not(.open) .activitybody{display:none}.activityline{display:flex;gap:8px;padding-top:3px;line-height:1.35}.activityline .t{flex:none;width:38px;text-align:right;color:var(--muted)}.activityline .w{flex:1;min-width:0}.activityline .r{flex:none;color:var(--muted)}.activityline.running .w,.activityline.running .r{color:var(--accent-text)}.activityline.note .w{color:var(--faint);padding-left:10px}@media(max-width:760px),(max-height:500px){.appbar{height:auto;min-height:var(--h-appbar);flex-wrap:wrap;row-gap:4px;padding:6px 10px}.appbar .filechip .muted{display:none}.appactions{flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none}.appactions::-webkit-scrollbar{display:none}.appactions>*{flex:none}.webcontrols .btn{position:relative}.webcontrols .btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.viewertools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.viewertools::-webkit-scrollbar{display:none}.viewertools>*,.viewertools>div>*{flex:none}.viewertools .flickhint,.viewertools .legend{display:none}.chooser{flex-direction:row;align-items:center;bottom:8px;width:auto;max-width:calc(100% - 16px);padding:6px;gap:6px}.choosehead{order:2}.choosehead .eyebrow,.chooseintro,.choicename,.choicebody,.choosenews,.remember{display:none}.choices{flex-direction:row}.choice{display:contents}.choice .btn{min-width:0}.activity{width:min(300px,calc(100% - 16px));right:8px;bottom:8px}.stage:has(.chooser:not([hidden])) .activity{display:none}.activitybody{max-height:30vh}.statusstrip{overflow:hidden;white-space:nowrap}.statusstrip .privacy{display:none}.sheet{position:fixed;z-index:40}.screen{position:fixed}.settingsgrid{grid-template-columns:minmax(0,1fr);padding:12px}.settingrow{flex-wrap:wrap}.about{flex-direction:column}.aboutleft{width:auto;border-right:0;border-bottom:1px solid var(--rule2)}.aboutright{padding:24px 16px}}@media(pointer:coarse){.drop .kbdhint{display:none}}@media(max-height:500px){.rail{overflow-y:auto}.railscroll{flex:none;overflow:visible}.railfoot{position:sticky;bottom:var(--phonetip-h, 0px);z-index:5}.railfoot .readout:not(.busy),.railfoot .note{display:none}.sheet.wizsheet{inset:0 0 0 auto;width:max(var(--rail-w),400px)}}@media(max-width:760px)and (min-height:501px){.appactions{order:3;flex:none;width:100%;margin-left:0}html{height:auto;overflow-x:hidden;overflow-y:auto}body{height:auto;min-height:100%;overflow:visible}#app{height:auto;min-height:100vh;min-height:100svh;padding-bottom:var(--phonetip-h, 0px)}.body{flex:none;flex-direction:column}.stage{flex:none;height:62vh;height:62svh;min-height:340px}.stage:has(.firstrun){height:auto}.panes:not(.stacked){flex-direction:column}.rail,.rail.wizarding,.minifyrail{width:auto;border-left:0;border-top:1px solid var(--rule2)}.railscroll{flex:none;overflow:visible}.railfoot{position:sticky;bottom:var(--phonetip-h, 0px);z-index:5}.sheetbody{max-height:85vh;max-height:85svh}.sheet.wizsheet{inset:auto 0 0;width:auto;height:58vh;height:58svh;border-top:1px solid var(--highlight);box-shadow:var(--shadow-xl)}.firstrun{gap:18px;padding:16px;justify-content:flex-start}.drop,.intro,.firstfail{width:100%}.drop{min-height:0;padding:22px 16px}.drop .headline{font-size:22px}.samplerow{flex-wrap:wrap;justify-content:center}.sample,.sample .thumb{width:80px}.sample .thumb{height:66px}.sample img{max-width:56px;max-height:52px}.body>div:not(.stage){flex-direction:column}}

studio/guide/batch.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html" aria-current="page">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/batch.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html" aria-current="page">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/batch.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="batch">Batch</h1>
 <p>The <strong>Batch</strong> tab traces every image in a folder and writes one SVG for each. It is for a set of
 icons, a folder of partner logos, or a brand library.</p>
@@ -92,8 +92,8 @@ folder. Choose the folder they are in.</p>
 <h2 id="studio-lite">Studio Lite</h2>
 <p>The Batch tab needs to read and write folders on disk, so it is not in Studio Lite. Trace the
 images one at a time in Vectorize, or use the <code>inkvec</code> command line in a shell loop, one
-<code>inkvec logo.png -o svg/logo.svg</code> per file.</p><nav class="pagenav"><a class="prev" href="fabricate.html"><span class="dir">Previous</span><span class="lbl">Fabricate</span></a><a class="next" href="settings.html"><span class="dir">Next</span><span class="lbl">Settings</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#running-a-batch">Running a batch</a></li><li class="l2"><a href="#what-each-row-says">What each row says</a></li><li class="l2"><a href="#which-settings-a-batch-uses">Which settings a batch uses</a></li><li class="l2"><a href="#dropping-files">Dropping files</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></ul></aside>
+<code>inkvec logo.png -o svg/logo.svg</code> per file.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="fabricate.html"><span class="dir">Previous</span><span class="lbl">Fabricate</span></a><a class="next" href="settings.html"><span class="dir">Next</span><span class="lbl">Settings</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#running-a-batch">Running a batch</a></li><li class="l2"><a href="#what-each-row-says">What each row says</a></li><li class="l2"><a href="#which-settings-a-batch-uses">Which settings a batch uses</a></li><li class="l2"><a href="#dropping-files">Dropping files</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/export.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html" aria-current="page">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/export.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html" aria-current="page">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/export.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="export">Export</h1>
 <p>When the drawing is right, three buttons at the foot of the rail take it out of the app:
 <strong>Export</strong> (files in a folder), <strong>Copy SVG</strong> (the clipboard) and the comparison card.</p>
@@ -59,7 +59,10 @@ it will write: the app builds them all in memory first and reports what it built
 estimate. The button at the bottom says how many files and how many bytes in total.</p>
 <p><strong>To</strong> is the destination folder. It starts at the <em>Default output folder</em> from
 <a href="settings.html#general">Settings</a> if you set one; <strong>Choose</strong> or <strong>Change</strong> picks another. With none
-chosen, Export asks for one. <strong>Close</strong>, or a click outside the sheet, closes it.</p>
+chosen, Export asks for one. <strong>Close</strong>, <kbd>Esc</kbd>, or a click outside the sheet closes it.</p>
+<p>From the keyboard the sheet works like any dialog: it takes the focus when it opens (on the first
+format), <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> move between its rows without leaving it,
+<kbd>Space</kbd> ticks or unticks a row, and when it closes the focus goes back to where it was.</p>
 <p><strong>Export</strong> always runs a <strong>fresh full trace</strong> first, then writes the files. What is on screen may be
 a draft, and a draft should never be shipped by accident. When the files are written, a note says
 where, with <strong>Show in folder</strong>.</p>
@@ -110,8 +113,8 @@ the source's pixels.</p>
 <p><strong>Save PNG</strong> writes it (as <code>name-card.png</code>, by default); <strong>Copy image</strong> puts it on the clipboard.</p>
 <h2 id="studio-lite">Studio Lite</h2>
 <p>In Studio Lite there is no destination folder: Export and Save PNG download the files through your
-browser, into its downloads folder.</p><nav class="pagenav"><a class="prev" href="palette.html"><span class="dir">Previous</span><span class="lbl">Palette and colour groups</span></a><a class="next" href="minify.html"><span class="dir">Next</span><span class="lbl">Minify SVG</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#the-export-sheet">The export sheet</a><ul><li class="l3"><a href="#the-asset-pack">The asset pack</a></li><li class="l3"><a href="#things-to-know">Things to know</a></li></ul></li><li class="l2"><a href="#copy-svg">Copy SVG</a></li><li class="l2"><a href="#the-comparison-card">The comparison card</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></ul></aside>
+browser, into its downloads folder.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="palette.html"><span class="dir">Previous</span><span class="lbl">Palette and colour groups</span></a><a class="next" href="minify.html"><span class="dir">Next</span><span class="lbl">Minify SVG</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#the-export-sheet">The export sheet</a><ul><li class="l3"><a href="#the-asset-pack">The asset pack</a></li><li class="l3"><a href="#things-to-know">Things to know</a></li></ul></li><li class="l2"><a href="#copy-svg">Copy SVG</a></li><li class="l2"><a href="#the-comparison-card">The comparison card</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/fabricate.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html" aria-current="page">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/fabricate.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html" aria-current="page">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/fabricate.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="fabricate">Fabricate</h1>
 <p>The <strong>Fabricate</strong> tab turns a drawing into files a cutting machine can use: adhesive vinyl in one
 colour or several, iron-on (heat-transfer) vinyl, print-then-cut stickers, stencils, pen and
@@ -321,8 +321,8 @@ Design Space, Silhouette Studio or LightBurn. The foot of the rail repeats the r
 <p>The <a href="tutorials/vinyl-htv.html">layered vinyl tutorial</a> and the <a href="tutorials/laser.html">laser tutorial</a>
 take a drawing through this tab from start to finish.</p>
 <h2 id="studio-lite">Studio Lite</h2>
-<p><strong>Save</strong> downloads the files instead of writing them to a folder.</p><nav class="pagenav"><a class="prev" href="minify.html"><span class="dir">Previous</span><span class="lbl">Minify SVG</span></a><a class="next" href="batch.html"><span class="dir">Next</span><span class="lbl">Batch</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#bringing-a-drawing-in">Bringing a drawing in</a></li><li class="l2"><a href="#material">Material</a></li><li class="l2"><a href="#making">Making</a></li><li class="l2"><a href="#size">Size</a></li><li class="l2"><a href="#colours">Colours</a></li><li class="l2"><a href="#cutting">Cutting</a><ul><li class="l3"><a href="#g-code">G-code</a></li></ul></li><li class="l2"><a href="#before-you-cut">Before you cut</a></li><li class="l2"><a href="#the-stage">The stage</a></li><li class="l2"><a href="#saving">Saving</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></ul></aside>
+<p><strong>Save</strong> downloads the files instead of writing them to a folder.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="minify.html"><span class="dir">Previous</span><span class="lbl">Minify SVG</span></a><a class="next" href="batch.html"><span class="dir">Next</span><span class="lbl">Batch</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#bringing-a-drawing-in">Bringing a drawing in</a></li><li class="l2"><a href="#material">Material</a></li><li class="l2"><a href="#making">Making</a></li><li class="l2"><a href="#size">Size</a></li><li class="l2"><a href="#colours">Colours</a></li><li class="l2"><a href="#cutting">Cutting</a><ul><li class="l3"><a href="#g-code">G-code</a></li></ul></li><li class="l2"><a href="#before-you-cut">Before you cut</a></li><li class="l2"><a href="#the-stage">The stage</a></li><li class="l2"><a href="#saving">Saving</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/getting-started.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html" aria-current="page">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/getting-started.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html" aria-current="page">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/getting-started.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="getting-started">Getting started</h1>
 <p>This page opens an image, explains the choice the app offers when it does, and walks through the
 Custom wizard. The fastest way to follow along is with one of the samples on the empty stage.</p>
@@ -19,6 +19,9 @@ Custom wizard. The fastest way to follow along is with one of the samples on the
 <li><strong>Open…</strong> in the app bar, <strong>Open an image</strong> on the empty stage, or <kbd>Ctrl</kbd>+<kbd>O</kbd>
   (<kbd>⌘</kbd>+<kbd>O</kbd> on a Mac).</li>
 <li><strong>Drag a file onto the window.</strong> The whole window takes the drop, not only the dashed box.</li>
+<li><strong>Paste an image</strong>: <kbd>Ctrl</kbd>+<kbd>V</kbd> (<kbd>⌘</kbd>+<kbd>V</kbd>) anywhere outside a
+  text field opens a picture on the clipboard, such as a screenshot or an image copied from a web
+  page with <em>Copy image</em>.</li>
 <li><strong>Recent</strong> in the app bar: the last eight files you opened.</li>
 <li><strong>A sample</strong> from the row under the drop area, on the empty stage: <em>Flat logo</em>, <em>Icon, 64 px</em>,
   <em>Crest, filigree</em> and <em>Signature, B&amp;W</em>.</li>
@@ -30,6 +33,9 @@ Custom wizard. The fastest way to follow along is with one of the samples on the
 1024 px on its longer side and traced from that picture, which is how a messy drawing comes back
 as clean shapes. To make an SVG smaller <em>without</em> re-drawing it, use <a href="minify.html">Minify SVG</a>
 instead.</p>
+<p>It does not read a PDF, or the HEIC and AVIF photos phones take: save those as PNG or JPEG first.
+A file that does not open says so on the stage, with what the app found in it and the formats it
+reads, and the samples stay there to carry on with.</p>
 <p>What a dropped file does depends on what it is:</p>
 <table>
 <thead>
@@ -62,11 +68,20 @@ instead.</p>
 </tbody>
 </table>
 <p>The app bar shows the open file's name, its size in pixels and its format.</p>
-<p><strong>Studio Lite:</strong> there is no right-click entry, and a dropped or chosen file is read by the browser.</p>
+<p><strong>Studio Lite:</strong> there is no right-click entry, and a dropped or chosen file is read by the browser;
+it never leaves your computer. On the Hugging Face Space, the front page opens the Studio in a tab
+of its own, where it runs on every core: a file you choose, paste or drop there goes with it,
+carried inside the page address, up to 1.5 MB. A larger file can be opened on the front page
+itself, on one core, or dropped again in the new tab. Inside the Space's frame, <strong>Open in its own
+tab</strong> in the app bar takes the open image along the same way.</p>
 <h2 id="auto-traces-at-once">Auto traces at once</h2>
 <p>The moment an image opens, <strong>Auto</strong> traces it. It uses the controls exactly as you left them the
 last time (the first time, the <strong>Logo</strong> preset, which is the default). Nothing has to be chosen
 first, and the trace is already on its way when the next thing appears.</p>
+<p><strong>Studio Lite:</strong> a full trace of a large image takes several seconds in a browser tab, so an image
+larger than the draft size is first drawn by the Fast engine at the draft size, in well under a
+second, and the full trace starts the moment that draft is on screen. The status strip says
+<strong>Fast draft</strong> until the full trace lands; see <a href="viewer.html#draft-and-full-traces">Draft and full traces</a>.</p>
 <h2 id="the-choice-card-keep-auto-or-customise">The choice card: Keep Auto or Customise</h2>
 <p>Over the stage, a small card appears while Auto traces.</p>
 <p><img alt="The card that appears when an image opens, with Auto's result and the Custom option" src="img/chooser.webp"></p>
@@ -75,6 +90,9 @@ first, and the trace is already on its way when the next thing appears.</p>
   and file size. <strong>Keep Auto</strong> closes the card.</li>
 <li><strong>Custom</strong> opens the wizard (next section), which changes the settings a step at a time with
   your result shown beside Auto's.</li>
+<li>On a phone the card is only its two buttons, <strong>Keep Auto</strong> and <strong>Customise…</strong>, and its close,
+  so it covers as little of the drawing as it can. What Auto chose appears in the rail's Result
+  half once the card is closed.</li>
 <li><strong>Auto chose</strong> says what Auto used, and anything its own report suggests. There are at most
   two suggestions, and each is a one-click preset change:</li>
 </ul>
@@ -169,8 +187,8 @@ tab, or <strong>Customise</strong> on the <em>Auto chose</em> note.</p>
 <li>Read the numbers: <a href="result.html">Result</a> explains the quality report.</li>
 <li>Change something: <a href="tune.html">Tune</a> lists every control.</li>
 <li>Save it: <a href="export.html">Export</a>.</li>
-</ul><nav class="pagenav"><a class="prev" href="install.html"><span class="dir">Previous</span><span class="lbl">Install and first launch</span></a><a class="next" href="viewer.html"><span class="dir">Next</span><span class="lbl">The viewer</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#opening-an-image">Opening an image</a></li><li class="l2"><a href="#auto-traces-at-once">Auto traces at once</a></li><li class="l2"><a href="#the-choice-card-keep-auto-or-customise">The choice card: Keep Auto or Customise</a></li><li class="l2"><a href="#the-custom-wizard">The Custom wizard</a></li><li class="l2"><a href="#what-to-do-next">What to do next</a></li></ul></ul></aside>
+</ul><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="install.html"><span class="dir">Previous</span><span class="lbl">Install and first launch</span></a><a class="next" href="viewer.html"><span class="dir">Next</span><span class="lbl">The viewer</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#opening-an-image">Opening an image</a></li><li class="l2"><a href="#auto-traces-at-once">Auto traces at once</a></li><li class="l2"><a href="#the-choice-card-keep-auto-or-customise">The choice card: Keep Auto or Customise</a></li><li class="l2"><a href="#the-custom-wizard">The Custom wizard</a></li><li class="l2"><a href="#what-to-do-next">What to do next</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/guide.css

@@ -1,10 +1,13 @@
 /* LogoLabs design system: warm charcoal ramp, one copper accent, Playfair Display +
- * Inter + IBM Plex Mono. Tokens match web/index.html and the design-system zip. */
+ * Inter + IBM Plex Mono. Tokens match web/index.html and the design-system zip.
+ * Text contrast (WCAG 2.2 SC 1.4.3, 4.5:1 for text under 18 px): --muted is .5, not .4
+ * (5.0:1 on --paper, 4.9:1 on --card; .4 was 3.7:1), as in the Studio's own tokens, and
+ * copper text on the tinted --accent-soft uses --accent-text (5.5:1; --accent is 4.4:1). */
 :root{
   --paper:#1a1816;--card:#211f1c;--stage:#141210;--void:#0c0a09;--surface:#2a2724;--highlight:#35322e;
-  --ink:#faf8f5;--dim:rgba(250,248,245,.75);--faint:rgba(250,248,245,.55);--muted:rgba(250,248,245,.4);
+  --ink:#faf8f5;--dim:rgba(250,248,245,.75);--faint:rgba(250,248,245,.55);--muted:rgba(250,248,245,.5);
   --rule:rgba(250,248,245,.08);--rule2:#2a2724;
-  --accent:#c9754a;--accent-hover:#d4896a;--accent-ink:#1a1816;--accent-soft:rgba(201,117,74,.12);
+  --accent:#c9754a;--accent-text:#d4896a;--accent-hover:#d4896a;--accent-ink:#1a1816;--accent-soft:rgba(201,117,74,.12);
   --gold:#b8976c;--good:#34d399;--bad:#f87171;
   --font-display:"Playfair Display",Georgia,serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
   --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
@@ -36,9 +39,9 @@ a:hover{color:var(--accent-hover)}
   color:var(--muted)}
 .side a{display:block;padding:4px 8px;margin:1px -8px;border-radius:6px;font-size:13.5px;color:var(--faint)}
 .side a:hover{color:var(--ink);background:var(--card)}
-.side a[aria-current]{color:var(--accent);background:var(--accent-soft)}
+.side a[aria-current]{color:var(--accent-text);background:var(--accent-soft)}
 .side a .n{font:500 10.5px/1 var(--font-mono);color:var(--muted);margin-right:7px}
-.side a[aria-current] .n{color:var(--accent)}
+.side a[aria-current] .n{color:var(--accent-text)}
 
 main{padding:44px 48px 90px;min-width:0}
 article{max-width:46rem}
@@ -60,9 +63,19 @@ kbd{font-family:var(--font-mono);font-size:.8em;background:var(--surface);color:
   border:1px solid var(--highlight);border-bottom-width:2px;border-radius:5px;padding:.05em .4em;white-space:nowrap}
 code{font-family:var(--font-mono);font-size:.86em;background:var(--surface);
   border:1px solid var(--rule);border-radius:5px;padding:.1em .35em;color:var(--ink)}
+/* A long identifier, path, hash or URL in running text breaks where it must rather than
+   pushing the page wider than a phone (390 px: index 526, 14-fast-mode 478, pipeline
+   1,157, design 470). */
+article{overflow-wrap:break-word}
+article :not(pre)>code{overflow-wrap:anywhere}
+/* A fenced block the highlighter does not handle (the pipeline page's mermaid source,
+   1,157 px wide) scrolls inside itself like every other code block. */
+article pre{overflow-x:auto;max-width:100%}
 .codehilite{background:var(--stage)!important;border:1px solid var(--rule);border-radius:10px;
   padding:14px 16px;overflow-x:auto;margin:0 0 1.2em}
-.codehilite pre{margin:0;background:transparent!important}
+.codehilite pre{margin:0;background:transparent!important;overflow:visible}
+/* A region that scrolls sideways gets a tab stop (the script in PAGE_SHELL), and shows it. */
+[data-scroll-stop]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .codehilite code{background:transparent;border:0;padding:0;font-size:13px;line-height:1.6}
 
 table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:14px;display:block;overflow-x:auto}
@@ -74,6 +87,7 @@ table code{white-space:nowrap}
 blockquote{margin:0 0 1.2em;padding:10px 16px;border-left:3px solid var(--accent);
   background:var(--accent-soft);border-radius:0 8px 8px 0}
 blockquote p{margin:0 0 .5em;color:var(--ink)}
+blockquote a{color:var(--accent-text)}
 blockquote p:last-child{margin:0}
 
 .math{overflow-x:auto;overflow-y:hidden;padding:6px 2px;margin:0 0 1.2em}
@@ -82,7 +96,7 @@ blockquote p:last-child{margin:0}
 
 /* per-page toc rail */
 .rail{padding:52px 20px 60px 0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
-.rail h5{margin:0 0 10px;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
+.rail .railh{margin:0 0 10px;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
   color:var(--muted)}
 .rail ul{list-style:none;margin:0;padding:0}
 .rail ul ul{padding-left:12px}
@@ -126,7 +140,8 @@ blockquote p:last-child{margin:0}
 
 footer{border-top:1px solid var(--rule);padding:26px 24px;display:flex;justify-content:space-between;
   gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
-footer a{color:var(--dim)}
+footer a{color:var(--dim);text-decoration:underline;text-decoration-color:rgba(250,248,245,.35);
+  text-underline-offset:3px}
 footer a:hover{color:var(--accent)}
 
 @media (max-width:1150px){.rail{display:none}.shell{grid-template-columns:220px minmax(0,1fr)}}

studio/guide/index.html

@@ -9,13 +9,13 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html" aria-current="page">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/index.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html" aria-current="page">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/index.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="inkvec-studio">Inkvec Studio</h1>
 <p>Inkvec Studio is the desktop app for Inkvec. It turns a raster logo, icon or emoji into an SVG,
 shows you how close the SVG is to the image it came from, and prepares the result for the web,
 for print or for a cutting machine. It runs on Windows, macOS and Linux, and everything it does
 happens on your own computer: your image is never uploaded.</p>
-<p>This guide describes the app as it is in version 0.2.0. It covers every screen, and ends with
+<p>This guide describes the app as it is in version 0.2.4. It covers every screen, and ends with
 four tutorials that each take one job from start to finish.</p>
 <p><img alt="The Vectorize tab: the source on the left, the SVG on the right, the quality report in the rail" src="img/workspace.webp"></p>
 <h2 id="what-is-where">What is where</h2>
@@ -51,7 +51,11 @@ four tutorials that each take one job from start to finish.</p>
 </tr>
 </tbody>
 </table>
-<p>On the right of the app bar are <strong>Open…</strong>, <strong>Recent</strong>, <strong>Settings</strong>, <strong>About</strong> and <strong>Help</strong>.
+<p>On the right of the app bar are <strong>Open…</strong>, <strong>Recent</strong>, <strong>Settings</strong>, <strong>About</strong>, <strong>Showcase</strong> and
+<strong>Help</strong>. <strong>Showcase</strong> is before and after on real logos: twenty brand logos and the benchmark's
+logos, icons and emoji, each traced by Inkvec and by other tracers, side by side with the source
+on one shared zoom (fill, wireframe, anchors and handles), above the summary tables of that run.
+It is bundled with the app, so it works offline.
 Help (or <kbd>F1</kbd>) opens this guide inside the app, at the page about what is on screen. The
 guide is bundled with the app, so it works without a network; <strong>Open in browser</strong> shows the same
 page on the web.</p>
@@ -83,6 +87,14 @@ in a few places:</p>
 <li>The denoiser downloads by itself, in the background, the first time Studio Lite opens, and is
   kept in the browser for later visits (see <a href="settings.html#denoiser">the denoiser</a>).</li>
 <li>Preferences and the choices you leave the app with are kept in the browser, not in a file.</li>
+<li>In place of the window's own buttons, the app bar has <strong>Full screen</strong> (the page fills the
+  screen; <kbd>Esc</kbd> leaves it) and, inside the Hugging Face page, <strong>Open in its own tab</strong>,
+  which takes the open image along (up to 1.5 MB). In its own tab the engine uses every core and
+  the denoiser can run; inside the Hugging Face frame it runs on one core.</li>
+<li>It works on a phone. Held upright, the app is one column that scrolls: the drawing first, then
+  the rail, with <strong>Export</strong> kept at the bottom of the screen. On its side, the drawing and the
+  rail stay side by side with the toolbars thinned to one row. Large images trace faster on a
+  laptop.</li>
 </ul>
 <p>Where a page describes something Studio Lite does differently, it says so.</p>
 <h2 id="contents">Contents</h2>
@@ -112,8 +124,8 @@ in a few places:</p>
 <p>How the tracing itself works, stage by stage, is in <a href="https://logolabs.github.io/inkvec/algorithm/index.html">How Inkvec works</a>.
 What it cannot do is in <a href="https://logolabs.github.io/inkvec/limitations.html">Limitations</a>.</p>
 <p><em>The screenshots in this guide were taken from a development build with sample images. The
-numbers in them belong to those samples.</em></p><nav class="pagenav"><span></span><a class="next" href="install.html"><span class="dir">Next</span><span class="lbl">Install and first launch</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#what-is-where">What is where</a></li><li class="l2"><a href="#how-a-trace-happens">How a trace happens</a></li><li class="l2"><a href="#inkvec-studio-and-inkvec-studio-lite">Inkvec Studio and Inkvec Studio Lite</a></li><li class="l2"><a href="#contents">Contents</a></li></ul></ul></aside>
+numbers in them belong to those samples.</em></p><nav class="pagenav" aria-label="Previous and next page"><span></span><a class="next" href="install.html"><span class="dir">Next</span><span class="lbl">Install and first launch</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#what-is-where">What is where</a></li><li class="l2"><a href="#how-a-trace-happens">How a trace happens</a></li><li class="l2"><a href="#inkvec-studio-and-inkvec-studio-lite">Inkvec Studio and Inkvec Studio Lite</a></li><li class="l2"><a href="#contents">Contents</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/install.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html" aria-current="page">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/install.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html" aria-current="page">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/install.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="install-and-first-launch">Install and first launch</h1>
 <p>Inkvec Studio is published on the project's
 <a href="https://github.com/logolabs/inkvec/releases">GitHub releases page</a>. Each release has one
@@ -93,8 +93,8 @@ preferences file (your settings, recent files and saved presets) and, if you dow
 denoiser model. Their locations are listed in <a href="settings.html#where-things-are-kept">Settings</a>.</p>
 <h2 id="studio-lite">Studio Lite</h2>
 <p>Inkvec Studio Lite needs no installation: it runs in a current desktop browser. Everything on this
-page about installers, signing and uninstalling applies only to the desktop app.</p><nav class="pagenav"><a class="prev" href="index.html"><span class="dir">Previous</span><span class="lbl">Overview</span></a><a class="next" href="getting-started.html"><span class="dir">Next</span><span class="lbl">Getting started</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#opening-the-app-the-first-time">Opening the app the first time</a></li><li class="l2"><a href="#what-the-app-sends-over-the-network">What the app sends over the network</a></li><li class="l2"><a href="#updates">Updates</a></li><li class="l2"><a href="#uninstalling">Uninstalling</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></ul></aside>
+page about installers, signing and uninstalling applies only to the desktop app.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="index.html"><span class="dir">Previous</span><span class="lbl">Overview</span></a><a class="next" href="getting-started.html"><span class="dir">Next</span><span class="lbl">Getting started</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#opening-the-app-the-first-time">Opening the app the first time</a></li><li class="l2"><a href="#what-the-app-sends-over-the-network">What the app sends over the network</a></li><li class="l2"><a href="#updates">Updates</a></li><li class="l2"><a href="#uninstalling">Uninstalling</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/minify.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html" aria-current="page">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/minify.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html" aria-current="page">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/minify.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="minify-svg">Minify SVG</h1>
 <p>The <strong>Minify SVG</strong> tab makes an SVG you already have smaller without changing what it looks like.
 It rewrites every path with the fewest segments that stay within a tolerance of the original, and
@@ -90,8 +90,8 @@ survive it. Compare before you replace the original.</p>
 <h2 id="studio-lite">Studio Lite</h2>
 <p><strong>Save SVG</strong> downloads the file.</p>
 <p><strong>Command line:</strong> the same minifier is <code>inkvec-svgmin</code>, with <code>--tolerance</code>, <code>--judge</code>,
-<code>--corner-degrees</code> and <code>--no-document</code>.</p><nav class="pagenav"><a class="prev" href="export.html"><span class="dir">Previous</span><span class="lbl">Export</span></a><a class="next" href="fabricate.html"><span class="dir">Next</span><span class="lbl">Fabricate</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#opening-an-svg">Opening an SVG</a></li><li class="l2"><a href="#checking-that-nothing-moved">Checking that nothing moved</a></li><li class="l2"><a href="#the-result">The result</a></li><li class="l2"><a href="#the-controls">The controls</a></li><li class="l2"><a href="#saving">Saving</a></li><li class="l2"><a href="#rebuild-it-clean-by-re-tracing">Rebuild it clean by re-tracing</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></ul></aside>
+<code>--corner-degrees</code> and <code>--no-document</code>.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="export.html"><span class="dir">Previous</span><span class="lbl">Export</span></a><a class="next" href="fabricate.html"><span class="dir">Next</span><span class="lbl">Fabricate</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#opening-an-svg">Opening an SVG</a></li><li class="l2"><a href="#checking-that-nothing-moved">Checking that nothing moved</a></li><li class="l2"><a href="#the-result">The result</a></li><li class="l2"><a href="#the-controls">The controls</a></li><li class="l2"><a href="#saving">Saving</a></li><li class="l2"><a href="#rebuild-it-clean-by-re-tracing">Rebuild it clean by re-tracing</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/palette.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html" aria-current="page">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/palette.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html" aria-current="page">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/palette.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="the-palette-and-colour-groups">The palette and colour groups</h1>
 <p>The palette card, at the bottom of the Result tab, lists every ink in the drawing: each flat
 colour, and each gradient. It is where you correct a colour, match the drawing to a brand palette,
@@ -114,8 +114,8 @@ every trace of the current image, drafts included, and the Custom wizard's <stro
 restores them with the controls.</p>
 <p><strong>Command line:</strong> the same grouping is <code>inkvec --merge-colors</code>, for example
 <code>--merge-colors "#c0392b,#e74c3c;#123456,#abcdef=#ffffff"</code> (groups separated by <code>;</code>, members by
-<code>,</code>, an optional <code>=</code> target).</p><nav class="pagenav"><a class="prev" href="tune.html"><span class="dir">Previous</span><span class="lbl">Tune</span></a><a class="next" href="export.html"><span class="dir">Next</span><span class="lbl">Export</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#the-inks">The inks</a></li><li class="l2"><a href="#snapping-an-ink-to-an-exact-colour">Snapping an ink to an exact colour</a></li><li class="l2"><a href="#paste-a-brand-palette">Paste a brand palette</a></li><li class="l2"><a href="#colour-groups">Colour groups</a><ul><li class="l3"><a href="#suggested-groups">Suggested groups</a></li><li class="l3"><a href="#making-a-group-yourself">Making a group yourself</a></li><li class="l3"><a href="#what-a-group-becomes">What a group becomes</a></li><li class="l3"><a href="#what-the-engine-did">What the engine did</a></li><li class="l3"><a href="#groups-belong-to-one-image">Groups belong to one image</a></li></ul></li></ul></ul></aside>
+<code>,</code>, an optional <code>=</code> target).</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="tune.html"><span class="dir">Previous</span><span class="lbl">Tune</span></a><a class="next" href="export.html"><span class="dir">Next</span><span class="lbl">Export</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#the-inks">The inks</a></li><li class="l2"><a href="#snapping-an-ink-to-an-exact-colour">Snapping an ink to an exact colour</a></li><li class="l2"><a href="#paste-a-brand-palette">Paste a brand palette</a></li><li class="l2"><a href="#colour-groups">Colour groups</a><ul><li class="l3"><a href="#suggested-groups">Suggested groups</a></li><li class="l3"><a href="#making-a-group-yourself">Making a group yourself</a></li><li class="l3"><a href="#what-a-group-becomes">What a group becomes</a></li><li class="l3"><a href="#what-the-engine-did">What the engine did</a></li><li class="l3"><a href="#groups-belong-to-one-image">Groups belong to one image</a></li></ul></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/result.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html" aria-current="page">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/result.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html" aria-current="page">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/result.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="result-reading-the-quality-report">Result: reading the quality report</h1>
 <p>The <strong>Result</strong> half of the rail is what the last trace produced. It is a measurement, not a
 score: the SVG is rendered and compared with your image pixel by pixel, and the figures are what
@@ -206,8 +206,8 @@ link.</p>
 </tr>
 </tbody>
 </table>
-<p>The first row in this panel is also copied into the asset pack's README when you export one.</p><nav class="pagenav"><a class="prev" href="viewer.html"><span class="dir">Previous</span><span class="lbl">The viewer</span></a><a class="next" href="tune.html"><span class="dir">Next</span><span class="lbl">Tune</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#the-quality-report">The quality report</a></li><li class="l2"><a href="#the-readout-at-the-foot">The readout at the foot</a></li><li class="l2"><a href="#editability">Editability</a></li><li class="l2"><a href="#what-this-trace-could-not-recover">What this trace could not recover</a></li></ul></ul></aside>
+<p>The first row in this panel is also copied into the asset pack's README when you export one.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="viewer.html"><span class="dir">Previous</span><span class="lbl">The viewer</span></a><a class="next" href="tune.html"><span class="dir">Next</span><span class="lbl">Tune</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#the-quality-report">The quality report</a></li><li class="l2"><a href="#the-readout-at-the-foot">The readout at the foot</a></li><li class="l2"><a href="#editability">Editability</a></li><li class="l2"><a href="#what-this-trace-could-not-recover">What this trace could not recover</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/settings.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html" aria-current="page">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/settings.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html" aria-current="page">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/settings.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="settings">Settings</h1>
 <p><strong>Settings</strong> in the app bar (or <kbd>Ctrl</kbd>+<kbd>,</kbd>, <kbd>⌘</kbd>+<kbd>,</kbd> on a Mac)
 opens the preferences on one page. Changes apply as you make them; <strong>Done</strong> or <kbd>Esc</kbd>
@@ -186,8 +186,8 @@ storage for the Space's site, and the denoiser in its Cache Storage; clearing th
 the browser removes both. In a private window, or with site data blocked, nothing can be kept:
 the app works the same and starts from the defaults each time. It has no <strong>Advanced</strong> entries (no
 command on the PATH, no right-click menu) and no default output folder, since files are
-downloaded.</p><nav class="pagenav"><a class="prev" href="batch.html"><span class="dir">Previous</span><span class="lbl">Batch</span></a><a class="next" href="shortcuts.html"><span class="dir">Next</span><span class="lbl">Keyboard and mouse</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#general">General</a></li><li class="l2"><a href="#performance">Performance</a></li><li class="l2"><a href="#denoiser">Denoiser</a></li><li class="l2"><a href="#updates">Updates</a></li><li class="l2"><a href="#advanced">Advanced</a></li><li class="l2"><a href="#what-the-app-remembers">What the app remembers</a></li><li class="l2"><a href="#privacy">Privacy</a></li><li class="l2"><a href="#where-things-are-kept">Where things are kept</a></li><li class="l2"><a href="#about">About</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></ul></aside>
+downloaded.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="batch.html"><span class="dir">Previous</span><span class="lbl">Batch</span></a><a class="next" href="shortcuts.html"><span class="dir">Next</span><span class="lbl">Keyboard and mouse</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#general">General</a></li><li class="l2"><a href="#performance">Performance</a></li><li class="l2"><a href="#denoiser">Denoiser</a></li><li class="l2"><a href="#updates">Updates</a></li><li class="l2"><a href="#advanced">Advanced</a></li><li class="l2"><a href="#what-the-app-remembers">What the app remembers</a></li><li class="l2"><a href="#privacy">Privacy</a></li><li class="l2"><a href="#where-things-are-kept">Where things are kept</a></li><li class="l2"><a href="#about">About</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/shortcuts.html

@@ -9,9 +9,11 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html" aria-current="page">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/shortcuts.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html" aria-current="page">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/shortcuts.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="keyboard-and-mouse">Keyboard and mouse</h1>
-<p>On a Mac, read <kbd>⌘</kbd> for <kbd>Ctrl</kbd>.</p>
+<p>On a Mac, read <kbd>⌘</kbd> for <kbd>Ctrl</kbd>. Every drag in the viewer has a key and a single
+click or tap that does the same, and every drag in the palette has a button (tick and <strong>Merge</strong>,
+or a chip's <strong>×</strong>).</p>
 <h2 id="anywhere">Anywhere</h2>
 <table>
 <thead>
@@ -26,6 +28,10 @@
 <td>Open an image</td>
 </tr>
 <tr>
+<td><kbd>Ctrl</kbd>+<kbd>V</kbd></td>
+<td>Open the image on the clipboard (a screenshot, or a picture copied with <em>Copy image</em>), outside a text field</td>
+</tr>
+<tr>
 <td><kbd>Ctrl</kbd>+<kbd>E</kbd></td>
 <td>Open the export sheet (once there is a drawing)</td>
 </tr>
@@ -43,11 +49,37 @@
 </tr>
 <tr>
 <td><kbd>Esc</kbd></td>
-<td>Close, in this order: Settings, About or the guide; the Custom wizard (keeping what you chose); the choice card (keeping Auto). With none of those open, cancel the trace in progress.</td>
+<td>Close, in this order: a dialog or the export sheet; Settings, About, Showcase or the guide; the Custom wizard (keeping what you chose); the choice card (keeping Auto). With none of those open, cancel the trace in progress.</td>
 </tr>
 </tbody>
 </table>
 <p>The preset shortcuts do nothing while you are typing in a field.</p>
+<h2 id="in-a-dialog">In a dialog</h2>
+<p>The export sheet, Settings, About, Showcase, the guide and every dialog over the window behave
+the same way:</p>
+<table>
+<thead>
+<tr>
+<th>Keys</th>
+<th>Does</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>(opening it)</td>
+<td>The keyboard moves into it</td>
+</tr>
+<tr>
+<td><kbd>Tab</kbd>, <kbd>Shift</kbd>+<kbd>Tab</kbd></td>
+<td>Move between its controls; past the last one it goes back to the first, never to the window behind</td>
+</tr>
+<tr>
+<td><kbd>Esc</kbd></td>
+<td>Close it; the keyboard goes back to the button that opened it</td>
+</tr>
+</tbody>
+</table>
+<p>The window behind is out of reach while one is open, for the keyboard and for a screen reader.</p>
 <h2 id="in-the-vectorize-viewer">In the Vectorize viewer</h2>
 <table>
 <thead>
@@ -82,12 +114,25 @@
 <td>Pan</td>
 </tr>
 <tr>
-<td>Drag the wipe divider</td>
+<td>The arrow buttons beside the zoom stops</td>
+<td>Pan a quarter of the view (shown once you have zoomed or panned)</td>
+</tr>
+<tr>
+<td><kbd>Tab</kbd> to the viewer, then the arrow keys</td>
+<td>Pan a tenth of the view; with <kbd>Shift</kbd>, half</td>
+</tr>
+<tr>
+<td>Drag the wipe divider, or tap where it should go</td>
 <td>Move it (in Wipe)</td>
 </tr>
+<tr>
+<td><kbd>Tab</kbd> to the wipe divider, then <kbd>←</kbd> <kbd>→</kbd></td>
+<td>Move it 2% of the width; with <kbd>Shift</kbd>, or <kbd>Page Up</kbd> and <kbd>Page Down</kbd>, 10%; <kbd>Home</kbd> and <kbd>End</kbd> go to the ends</td>
+</tr>
 </tbody>
 </table>
-<p><kbd>Space</kbd> also flicks between Before and After in the Minify SVG tab.</p>
+<p><kbd>Space</kbd> also flicks between Before and After in the Minify SVG tab, whose wipe divider
+works the same way.</p>
 <h2 id="in-the-rail">In the rail</h2>
 <table>
 <thead>
@@ -125,9 +170,13 @@
 <td><kbd>Enter</kbd>, in the save-preset or colour field</td>
 <td>Save or use it</td>
 </tr>
+<tr>
+<td><kbd>Tab</kbd> to the engine log's lines</td>
+<td>Scroll them with the arrow keys</td>
+</tr>
 </tbody>
-</table><nav class="pagenav"><a class="prev" href="settings.html"><span class="dir">Previous</span><span class="lbl">Settings</span></a><a class="next" href="troubleshooting.html"><span class="dir">Next</span><span class="lbl">Troubleshooting</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#anywhere">Anywhere</a></li><li class="l2"><a href="#in-the-vectorize-viewer">In the Vectorize viewer</a></li><li class="l2"><a href="#in-the-rail">In the rail</a></li></ul></ul></aside>
+</table><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="settings.html"><span class="dir">Previous</span><span class="lbl">Settings</span></a><a class="next" href="troubleshooting.html"><span class="dir">Next</span><span class="lbl">Troubleshooting</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#anywhere">Anywhere</a></li><li class="l2"><a href="#in-a-dialog">In a dialog</a></li><li class="l2"><a href="#in-the-vectorize-viewer">In the Vectorize viewer</a></li><li class="l2"><a href="#in-the-rail">In the rail</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/troubleshooting.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html" aria-current="page">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/troubleshooting.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html" aria-current="page">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/troubleshooting.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="troubleshooting-and-questions">Troubleshooting and questions</h1>
 <h2 id="installing-and-starting">Installing and starting</h2>
 <p><strong>Windows says "Windows protected your PC".</strong> The installer is not code-signed. Choose <strong>More
@@ -82,8 +82,10 @@ original, smaller file instead.</p>
 says so. Re-set the words in a vector editor if they must stay editable.</p>
 <p><strong>Lines came back as thin filled shapes.</strong> Try the <em>Line art</em> preset. It only works for lines of one
 even width; brush and calligraphic strokes stay as outlines.</p>
-<p><strong>The draft and the final look different.</strong> A draft is traced small (512 px) for speed. Wait for
-the chip to say <strong>final</strong> before judging or copying.</p>
+<p><strong>The draft and the final look different.</strong> A draft is traced small (512 px) for speed. In Studio
+Lite, the first draft of a large image just opened is also drawn by the Fast engine, whatever the
+Mode control says, and the status strip says <strong>Fast draft</strong>. Wait for the chip to say <strong>final</strong>
+before judging or copying.</p>
 <p><strong>The favicon has space above and below the logo.</strong> Favicons are square; a wide drawing is
 centred in them on a transparent background rather than stretched. Trace a square crop of the mark
 for a favicon that fills its square.</p>
@@ -108,7 +110,7 @@ folder.</p>
 <p><strong>Where are Batch, the command line and the right-click menu?</strong> They need the desktop app. See
 <a href="index.html#inkvec-studio-and-inkvec-studio-lite">Inkvec Studio and Inkvec Studio Lite</a>.</p>
 <p><strong>The first visit takes a few seconds to start.</strong> The loading screen is the engine arriving
-(about 5 MB) and starting; its bar follows the real download. Later visits start from the
+(about 6 MB) and starting; its bar follows the real download. Later visits start from the
 browser's cache.</p>
 <p><strong>The denoiser is on but the trace looks the same, and the rail says it is downloading.</strong> The
 trace shown was made without it while it downloads (about 100 MB, once). It traces again by
@@ -117,13 +119,24 @@ the status strip.</p>
 <p><strong>Nothing is downloaded in the background.</strong> Your browser asks sites to save data, so Studio
 Lite waits until you turn the denoiser on. Inside the Hugging Face frame the denoiser cannot run
 at all: use <strong>Open in its own tab</strong>.</p>
+<p><strong>Open in its own tab opened the Studio without my image.</strong> The image travels inside the page
+address, which holds up to 1.5 MB; for a larger file the app says so before it opens the tab.
+Open the file again in the new tab.</p>
+<p><strong>I opened a file and it says it did not open.</strong> The file is not an image the app reads: a
+text file renamed to <code>.png</code>, an empty file, a PDF, or a phone photo in HEIC or AVIF. The card
+says what the app found in it. Save the picture as PNG or JPEG (any image editor, or a
+screenshot) and open that.</p>
+<p><strong>Can I use Studio Lite on a phone?</strong> Yes. Held upright it is one column: the drawing, then the
+rail, with Export at the bottom of the screen; turned on its side it keeps the two side by side.
+Everything works, but a phone is slower and has less memory than a laptop, so a large image takes
+longer; the desktop app is the fastest.</p>
 <p><strong>My settings are not remembered.</strong> A private window, or a browser set to block site data, gives
 the page nowhere to keep them. The app still works, from the defaults each time.</p>
 <h2 id="reporting-a-problem">Reporting a problem</h2>
 <p>Report bugs on <a href="https://github.com/logolabs/inkvec/issues">GitHub</a>. Include the app version (from
 About), your operating system, and, if you can share it, the image. Security problems go through
-the <a href="https://logolabs.github.io/inkvec/security.html">security policy</a> instead.</p><nav class="pagenav"><a class="prev" href="shortcuts.html"><span class="dir">Previous</span><span class="lbl">Keyboard and mouse</span></a><a class="next" href="tutorials/jpeg-logo.html"><span class="dir">Next</span><span class="lbl">Clean up a JPEG logo</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#installing-and-starting">Installing and starting</a></li><li class="l2"><a href="#transparency-and-backgrounds">Transparency and backgrounds</a></li><li class="l2"><a href="#colours">Colours</a></li><li class="l2"><a href="#the-denoiser">The denoiser</a></li><li class="l2"><a href="#speed-and-size">Speed and size</a></li><li class="l2"><a href="#the-result">The result</a></li><li class="l2"><a href="#integrations">Integrations</a></li><li class="l2"><a href="#help-and-settings">Help and settings</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li><li class="l2"><a href="#reporting-a-problem">Reporting a problem</a></li></ul></ul></aside>
+the <a href="https://logolabs.github.io/inkvec/security.html">security policy</a> instead.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="shortcuts.html"><span class="dir">Previous</span><span class="lbl">Keyboard and mouse</span></a><a class="next" href="tutorials/jpeg-logo.html"><span class="dir">Next</span><span class="lbl">Clean up a JPEG logo</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#installing-and-starting">Installing and starting</a></li><li class="l2"><a href="#transparency-and-backgrounds">Transparency and backgrounds</a></li><li class="l2"><a href="#colours">Colours</a></li><li class="l2"><a href="#the-denoiser">The denoiser</a></li><li class="l2"><a href="#speed-and-size">Speed and size</a></li><li class="l2"><a href="#the-result">The result</a></li><li class="l2"><a href="#integrations">Integrations</a></li><li class="l2"><a href="#help-and-settings">Help and settings</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li><li class="l2"><a href="#reporting-a-problem">Reporting a problem</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/tune.html

@@ -9,9 +9,9 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html" aria-current="page">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tune.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html" aria-current="page">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tune.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="tune-presets-and-every-control">Tune: presets and every control</h1>
-<p>The <strong>Tune</strong> half of the rail holds the settings for the next trace: eight presets, any presets you
+<p>The <strong>Tune</strong> half of the rail holds the settings for the next trace: ten presets, any presets you
 saved, and twenty-three controls. Moving any of them starts a draft at once and a full trace a moment
 later (see <a href="viewer.html#draft-and-full-traces">draft and full traces</a>); the readout at the foot of
 the rail shows what the change bought or cost.</p>
@@ -353,8 +353,8 @@ matters mainly when that is off.</p>
 </tr>
 </tbody>
 </table>
-<p><code>inkvec --help</code> lists them all with their exact spelling.</p><nav class="pagenav"><a class="prev" href="result.html"><span class="dir">Previous</span><span class="lbl">Result</span></a><a class="next" href="palette.html"><span class="dir">Next</span><span class="lbl">Palette and colour groups</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#how-the-controls-work">How the controls work</a></li><li class="l2"><a href="#the-engine-the-denoiser-and-editable">The engine, the denoiser and Editable</a><ul><li class="l3"><a href="#which-controls-each-engine-reads">Which controls each engine reads</a></li></ul></li><li class="l2"><a href="#presets">Presets</a><ul><li class="l3"><a href="#saving-your-own">Saving your own</a></li></ul></li><li class="l2"><a href="#detail">Detail</a></li><li class="l2"><a href="#colour">Colour</a></li><li class="l2"><a href="#shape">Shape</a></li><li class="l2"><a href="#output">Output</a></li><li class="l2"><a href="#the-same-controls-on-the-command-line">The same controls on the command line</a></li></ul></ul></aside>
+<p><code>inkvec --help</code> lists them all with their exact spelling.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="result.html"><span class="dir">Previous</span><span class="lbl">Result</span></a><a class="next" href="palette.html"><span class="dir">Next</span><span class="lbl">Palette and colour groups</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#how-the-controls-work">How the controls work</a></li><li class="l2"><a href="#the-engine-the-denoiser-and-editable">The engine, the denoiser and Editable</a><ul><li class="l3"><a href="#which-controls-each-engine-reads">Which controls each engine reads</a></li></ul></li><li class="l2"><a href="#presets">Presets</a><ul><li class="l3"><a href="#saving-your-own">Saving your own</a></li></ul></li><li class="l2"><a href="#detail">Detail</a></li><li class="l2"><a href="#colour">Colour</a></li><li class="l2"><a href="#shape">Shape</a></li><li class="l2"><a href="#output">Output</a></li><li class="l2"><a href="#the-same-controls-on-the-command-line">The same controls on the command line</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/tutorials/favicon-asset-pack.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html">Clean up a JPEG logo</a><a href="favicon-asset-pack.html" aria-current="page">A favicon and an asset pack</a><a href="vinyl-htv.html">Layered vinyl and iron-on</a><a href="laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/favicon-asset-pack.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html">Clean up a JPEG logo</a><a href="favicon-asset-pack.html" aria-current="page">A favicon and an asset pack</a><a href="vinyl-htv.html">Layered vinyl and iron-on</a><a href="laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/favicon-asset-pack.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="tutorial-a-favicon-and-an-asset-pack">Tutorial: a favicon and an asset pack</h1>
 <p>This tutorial takes a mark from a PNG to the set of files a website or a brand folder needs: an
 SVG, a minified SVG, PNGs at three sizes, a favicon, a palette, and a zip holding all of them with a
@@ -91,8 +91,8 @@ is, and, if the trace could not recover something (lettering as outlines, JPEG c
 <li><strong>A dark-mode favicon.</strong> Trace a light version of the mark, or edit the colours in the SVG.</li>
 <li><strong>Only the SVG.</strong> <strong>Copy SVG</strong> at the foot of the rail puts it on the clipboard without writing
   any files.</li>
-</ul><nav class="pagenav"><a class="prev" href="jpeg-logo.html"><span class="dir">Previous</span><span class="lbl">Clean up a JPEG logo</span></a><a class="next" href="vinyl-htv.html"><span class="dir">Next</span><span class="lbl">Layered vinyl and iron-on</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#1-start-from-the-right-image">1. Start from the right image</a></li><li class="l2"><a href="#2-open-and-trace-it">2. Open and trace it</a></li><li class="l2"><a href="#3-set-the-output">3. Set the output</a></li><li class="l2"><a href="#4-export">4. Export</a></li><li class="l2"><a href="#5-put-the-favicon-on-a-site">5. Put the favicon on a site</a></li><li class="l2"><a href="#6-hand-over-the-pack">6. Hand over the pack</a></li><li class="l2"><a href="#variations">Variations</a></li></ul></ul></aside>
+</ul><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="jpeg-logo.html"><span class="dir">Previous</span><span class="lbl">Clean up a JPEG logo</span></a><a class="next" href="vinyl-htv.html"><span class="dir">Next</span><span class="lbl">Layered vinyl and iron-on</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#1-start-from-the-right-image">1. Start from the right image</a></li><li class="l2"><a href="#2-open-and-trace-it">2. Open and trace it</a></li><li class="l2"><a href="#3-set-the-output">3. Set the output</a></li><li class="l2"><a href="#4-export">4. Export</a></li><li class="l2"><a href="#5-put-the-favicon-on-a-site">5. Put the favicon on a site</a></li><li class="l2"><a href="#6-hand-over-the-pack">6. Hand over the pack</a></li><li class="l2"><a href="#variations">Variations</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/tutorials/jpeg-logo.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html" aria-current="page">Clean up a JPEG logo</a><a href="favicon-asset-pack.html">A favicon and an asset pack</a><a href="vinyl-htv.html">Layered vinyl and iron-on</a><a href="laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/jpeg-logo.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html" aria-current="page">Clean up a JPEG logo</a><a href="favicon-asset-pack.html">A favicon and an asset pack</a><a href="vinyl-htv.html">Layered vinyl and iron-on</a><a href="laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/jpeg-logo.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="tutorial-clean-up-a-jpeg-logo">Tutorial: clean up a JPEG logo</h1>
 <p>A logo saved as a JPEG, or captured in a screenshot, is the most common thing people need to
 vectorize, and the hardest to trace well. JPEG compression leaves faint blocks and halos around
@@ -88,8 +88,8 @@ so whoever uses the files knows to check the colours.</p>
 <h2 id="why-not-trace-the-jpeg-as-it-is">Why not trace the JPEG as it is?</h2>
 <p>You can: with the denoiser <strong>Off</strong>, the trace reproduces the JPEG faithfully, and the colour
 difference is lower because it copies the damage. That is the right choice when the damage is part
-of what you want to keep. For a logo, it almost never is.</p><nav class="pagenav"><a class="prev" href="../troubleshooting.html"><span class="dir">Previous</span><span class="lbl">Troubleshooting</span></a><a class="next" href="favicon-asset-pack.html"><span class="dir">Next</span><span class="lbl">A favicon and an asset pack</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#1-get-the-denoiser">1. Get the denoiser</a></li><li class="l2"><a href="#2-open-the-jpeg">2. Open the JPEG</a></li><li class="l2"><a href="#3-turn-the-clean-up-on">3. Turn the clean-up on</a></li><li class="l2"><a href="#4-settle-the-palette">4. Settle the palette</a></li><li class="l2"><a href="#5-check-the-edges">5. Check the edges</a></li><li class="l2"><a href="#6-match-the-brand-colours">6. Match the brand colours</a></li><li class="l2"><a href="#7-take-it-out">7. Take it out</a></li><li class="l2"><a href="#why-not-trace-the-jpeg-as-it-is">Why not trace the JPEG as it is?</a></li></ul></ul></aside>
+of what you want to keep. For a logo, it almost never is.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="../troubleshooting.html"><span class="dir">Previous</span><span class="lbl">Troubleshooting</span></a><a class="next" href="favicon-asset-pack.html"><span class="dir">Next</span><span class="lbl">A favicon and an asset pack</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#1-get-the-denoiser">1. Get the denoiser</a></li><li class="l2"><a href="#2-open-the-jpeg">2. Open the JPEG</a></li><li class="l2"><a href="#3-turn-the-clean-up-on">3. Turn the clean-up on</a></li><li class="l2"><a href="#4-settle-the-palette">4. Settle the palette</a></li><li class="l2"><a href="#5-check-the-edges">5. Check the edges</a></li><li class="l2"><a href="#6-match-the-brand-colours">6. Match the brand colours</a></li><li class="l2"><a href="#7-take-it-out">7. Take it out</a></li><li class="l2"><a href="#why-not-trace-the-jpeg-as-it-is">Why not trace the JPEG as it is?</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/tutorials/laser.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html">Clean up a JPEG logo</a><a href="favicon-asset-pack.html">A favicon and an asset pack</a><a href="vinyl-htv.html">Layered vinyl and iron-on</a><a href="laser.html" aria-current="page">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/laser.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html">Clean up a JPEG logo</a><a href="favicon-asset-pack.html">A favicon and an asset pack</a><a href="vinyl-htv.html">Layered vinyl and iron-on</a><a href="laser.html" aria-current="page">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/laser.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="tutorial-laser-cutting-dxf-and-g-code">Tutorial: laser cutting, DXF and G-code</h1>
 <p>This tutorial turns a logo into files for a laser cutter or a CNC router: hairline cut paths in
 real millimetres, compensated for the width of the cut, as an SVG for LightBurn, a DXF for CAD and
@@ -101,8 +101,8 @@ every colour as its own group, <code>name.dxf</code> and, if on, <code>name.gcod
 centre, rather than around both of its edges. The <strong>Drawing</strong> card sets the tip width (the preview
 shows the line the tool will leave) and which lines count as lines: <em>Lines up to</em> <strong>x</strong> <em>mm wide are
 drawn once</em> (0 for any width); wider parts are drawn round their outline. The DXF has lines as open
-polylines and outlines as closed ones. G-code works as above.</p><nav class="pagenav"><a class="prev" href="vinyl-htv.html"><span class="dir">Previous</span><span class="lbl">Layered vinyl and iron-on</span></a><span></span></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#1-trace-it-or-bring-an-svg">1. Trace it, or bring an SVG</a></li><li class="l2"><a href="#2-choose-laser-or-sign-cutter">2. Choose "Laser or sign cutter"</a></li><li class="l2"><a href="#3-set-the-size-and-the-units-the-file-states">3. Set the size, and the units the file states</a></li><li class="l2"><a href="#4-measure-and-set-the-kerf">4. Measure and set the kerf</a></li><li class="l2"><a href="#5-for-a-router-dogbones-and-the-bit">5. For a router: dogbones and the bit</a></li><li class="l2"><a href="#6-check-before-you-cut">6. Check before you cut</a></li><li class="l2"><a href="#7-g-code-for-a-grbl-machine">7. G-code for a GRBL machine</a></li><li class="l2"><a href="#8-save">8. Save</a></li><li class="l2"><a href="#engraving-lines-with-pen-or-score">Engraving lines with "Pen or score"</a></li></ul></ul></aside>
+polylines and outlines as closed ones. G-code works as above.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="vinyl-htv.html"><span class="dir">Previous</span><span class="lbl">Layered vinyl and iron-on</span></a><span></span></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#1-trace-it-or-bring-an-svg">1. Trace it, or bring an SVG</a></li><li class="l2"><a href="#2-choose-laser-or-sign-cutter">2. Choose "Laser or sign cutter"</a></li><li class="l2"><a href="#3-set-the-size-and-the-units-the-file-states">3. Set the size, and the units the file states</a></li><li class="l2"><a href="#4-measure-and-set-the-kerf">4. Measure and set the kerf</a></li><li class="l2"><a href="#5-for-a-router-dogbones-and-the-bit">5. For a router: dogbones and the bit</a></li><li class="l2"><a href="#6-check-before-you-cut">6. Check before you cut</a></li><li class="l2"><a href="#7-g-code-for-a-grbl-machine">7. G-code for a GRBL machine</a></li><li class="l2"><a href="#8-save">8. Save</a></li><li class="l2"><a href="#engraving-lines-with-pen-or-score">Engraving lines with "Pen or score"</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/tutorials/vinyl-htv.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html">Clean up a JPEG logo</a><a href="favicon-asset-pack.html">A favicon and an asset pack</a><a href="vinyl-htv.html" aria-current="page">Layered vinyl and iron-on</a><a href="laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/vinyl-htv.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="../index.html"><img src="../logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="../index.html">Overview</a><a href="../install.html">Install and first launch</a><a href="../getting-started.html">Getting started</a><a href="../viewer.html">The viewer</a><a href="../result.html">Result</a><a href="../tune.html">Tune</a><a href="../palette.html">Palette and colour groups</a><a href="../export.html">Export</a><a href="../minify.html">Minify SVG</a><a href="../fabricate.html">Fabricate</a><a href="../batch.html">Batch</a><a href="../settings.html">Settings</a><a href="../shortcuts.html">Keyboard and mouse</a><a href="../troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="jpeg-logo.html">Clean up a JPEG logo</a><a href="favicon-asset-pack.html">A favicon and an asset pack</a><a href="vinyl-htv.html" aria-current="page">Layered vinyl and iron-on</a><a href="laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/tutorials/vinyl-htv.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="tutorial-layered-vinyl-and-iron-on">Tutorial: layered vinyl and iron-on</h1>
 <p>This tutorial takes a colour logo to cut files for a Cricut, Silhouette or Brother machine: one
 sheet per colour, stacked so there are no gaps between colours, with marks to line the sheets up.
@@ -102,8 +102,8 @@ layer fully, following the vinyl's instructions.</p>
 <li><strong>Sticker</strong>: the artwork with a contour 3 mm around it, for print-then-cut.</li>
 <li><strong>Stencil</strong>: the design cut out of one sheet, with bridges holding the middles of letters.</li>
 </ul>
-<p>All of them are described in <a href="../fabricate.html">Fabricate</a>.</p><nav class="pagenav"><a class="prev" href="favicon-asset-pack.html"><span class="dir">Previous</span><span class="lbl">A favicon and an asset pack</span></a><a class="next" href="laser.html"><span class="dir">Next</span><span class="lbl">Laser: DXF and G-code</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#1-trace-with-the-cutter-in-mind">1. Trace with the cutter in mind</a></li><li class="l2"><a href="#2-bring-it-into-fabricate">2. Bring it into Fabricate</a></li><li class="l2"><a href="#3-choose-the-material-and-the-size">3. Choose the material and the size</a></li><li class="l2"><a href="#4-for-iron-on-mirror-and-a-thinner-overlap">4. For iron-on: mirror, and a thinner overlap</a></li><li class="l2"><a href="#5-the-colours-and-their-order">5. The colours and their order</a></li><li class="l2"><a href="#6-fix-what-will-go-wrong">6. Fix what will go wrong</a></li><li class="l2"><a href="#7-save-and-cut">7. Save and cut</a></li><li class="l2"><a href="#other-things-this-tab-makes">Other things this tab makes</a></li></ul></ul></aside>
+<p>All of them are described in <a href="../fabricate.html">Fabricate</a>.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="favicon-asset-pack.html"><span class="dir">Previous</span><span class="lbl">A favicon and an asset pack</span></a><a class="next" href="laser.html"><span class="dir">Next</span><span class="lbl">Laser: DXF and G-code</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#1-trace-with-the-cutter-in-mind">1. Trace with the cutter in mind</a></li><li class="l2"><a href="#2-bring-it-into-fabricate">2. Bring it into Fabricate</a></li><li class="l2"><a href="#3-choose-the-material-and-the-size">3. Choose the material and the size</a></li><li class="l2"><a href="#4-for-iron-on-mirror-and-a-thinner-overlap">4. For iron-on: mirror, and a thinner overlap</a></li><li class="l2"><a href="#5-the-colours-and-their-order">5. The colours and their order</a></li><li class="l2"><a href="#6-fix-what-will-go-wrong">6. Fix what will go wrong</a></li><li class="l2"><a href="#7-save-and-cut">7. Save and cut</a></li><li class="l2"><a href="#other-things-this-tab-makes">Other things this tab makes</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/guide/viewer.html

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="shell">
-  <aside class="side"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html" aria-current="page">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/viewer.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
+  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html" aria-current="page">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/viewer.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
   <main><article><h1 id="the-viewer">The viewer</h1>
 <p>The stage of the Vectorize tab shows the image you opened (<strong>Source</strong>) beside the SVG it became
 (<strong>Vector · SVG</strong>). Both panes share one pan and one zoom, so the same spot is always under the
@@ -18,9 +18,13 @@ an edge, not an enlarged bitmap.</p>
 <h2 id="comparing-side-by-side-wipe-ab">Comparing: side by side, wipe, A/B</h2>
 <p>The three buttons at the left of the toolbar arrange the two panes.</p>
 <ul>
-<li><strong>Side by side</strong>: the two panes next to each other.</li>
-<li><strong>Wipe</strong>: one pane over the other, with a divider. Drag the divider to move it; the source is on
-  the left of it and the SVG on the right.</li>
+<li><strong>Side by side</strong>: the two panes next to each other (one above the other on a phone held
+  upright).</li>
+<li><strong>Wipe</strong>: one pane over the other, with a divider. Drag the divider to move it, or tap or click
+  where it should go; the source is on the left of it and the SVG on the right. From the keyboard,
+  <kbd>Tab</kbd> to the divider and move it with the arrow keys (see
+  <a href="shortcuts.html#in-the-vectorize-viewer">Keyboard and mouse</a>); a screen reader announces how much
+  of each side is showing.</li>
 <li><strong>A/B</strong>: one pane at a time, the SVG. Hold <kbd>Space</kbd> to see the source instead, and
   release to go back. Flicking between the two in place is the quickest way to see a small
   difference.</li>
@@ -40,7 +44,11 @@ an edge, not an enlarged bitmap.</p>
 </tr>
 <tr>
 <td>Pan</td>
-<td>Drag with the left button</td>
+<td>Drag with the left button, or press the arrow buttons beside the zoom stops</td>
+</tr>
+<tr>
+<td>Pan from the keyboard</td>
+<td><kbd>Tab</kbd> to the viewer and use the arrow keys (<kbd>Shift</kbd> for a bigger step)</td>
 </tr>
 <tr>
 <td>Fit the drawing to the window</td>
@@ -57,7 +65,8 @@ an edge, not an enlarged bitmap.</p>
 </tbody>
 </table>
 <p>Zoom runs from a quarter of the image's size to 64×. The view fits the window until you zoom or
-pan; after that it stays where you put it when the window is resized. From 4× up, the source is
+pan; after that it stays where you put it when the window is resized. The four arrow buttons
+appear beside <strong>Fit</strong> once the view is no longer fitted, and each moves it a quarter of the pane. From 4× up, the source is
 drawn with square pixels rather than smoothed, because those pixels are the evidence the trace was
 measured against.</p>
 <h2 id="overlays-what-the-svg-is-made-of">Overlays: what the SVG is made of</h2>
@@ -130,13 +139,25 @@ chip at the top right of the stage says which one you are looking at:</p>
 <p>The chip flashes when a draft is replaced by its full trace, so the swap is never silent. Draft
 size, draft time limit and the wait before the full trace are in
 <a href="settings.html#performance">Settings, Performance</a>.</p>
+<p><strong>Studio Lite, opening a large image.</strong> When an image larger than the draft size is opened in the
+browser, its first draft is drawn by the Fast engine, whatever the Mode control says, so a
+drawing appears in well under a second; the full trace, with your controls, starts the moment
+that draft lands. The status strip names the engine that drew what is on screen: <strong>Fast draft</strong>,
+then <strong>Quality in</strong> so many seconds. Moving a control, <strong>Cancel</strong> or opening another image in the
+meantime drops the queued full trace. The desktop app opens with the full trace alone.</p>
 <p>Only the full trace is ever exported: <a href="export.html">Export</a> always runs one first.</p>
+<h2 id="the-engine-log">The engine log</h2>
+<p>The small panel at the bottom right of the stage, <strong>Engine log</strong>, is what the engine is doing,
+line by line: each stage of the trace with the time it started, what it does and how long it took
+(or, while it runs, its own clock), and the notes the engine makes on the way (<em>8 inks</em>). It keeps
+the last trace's log, with the total time in its header, until the next trace starts. <strong>Hide</strong> and
+<strong>Show</strong> fold it to its header; on a phone it starts folded so it does not cover the drawing.</p>
 <h2 id="the-status-strip">The status strip</h2>
 <p>The line along the bottom of the stage says what is happening: the stage the trace is on and the
 time so far (with <kbd>Esc</kbd> to cancel), or how long the last trace took, at what size, and
 how many segments it has. When the update check has found a new version, it says so here and
 nowhere else. The right end always carries the same sentence: <em>Your image never leaves this
-computer.</em></p>
+computer.</em> (On a phone there is no room for it; Settings and About say the same.)</p>
 <h2 id="when-the-stage-is-not-showing-a-drawing">When the stage is not showing a drawing</h2>
 <table>
 <thead>
@@ -153,6 +174,11 @@ computer.</em></p>
 <td>Wait.</td>
 </tr>
 <tr>
+<td>That file did not open</td>
+<td>The first file you opened is not an image the app reads (a text file, an empty file, a PDF, a phone's HEIC or AVIF photo). The card says what the app found and lists the formats it opens; the drop area and the samples stay under it.</td>
+<td>Open another image, or save the picture as PNG or JPEG first.</td>
+</tr>
+<tr>
 <td>This image is one flat colour</td>
 <td>There is no boundary to trace; the whole output would be one rectangle.</td>
 <td>Open another image.</td>
@@ -191,8 +217,8 @@ computer.</em></p>
 </table>
 <p>A large image is traced at the <strong>Trace size</strong> (2048 px on the longer side by default) and the SVG
 is still written at the image's full size. When that happens a note says so; it is normal, and the
-SVG scales without limit.</p><nav class="pagenav"><a class="prev" href="getting-started.html"><span class="dir">Previous</span><span class="lbl">Getting started</span></a><a class="next" href="result.html"><span class="dir">Next</span><span class="lbl">Result</span></a></nav></article></main>
-  <aside class="rail"><h5>On this page</h5><ul><ul><li class="l2"><a href="#comparing-side-by-side-wipe-ab">Comparing: side by side, wipe, A/B</a></li><li class="l2"><a href="#zooming-and-panning">Zooming and panning</a></li><li class="l2"><a href="#overlays-what-the-svg-is-made-of">Overlays: what the SVG is made of</a></li><li class="l2"><a href="#detail-the-pixel-grid-under-the-edge">Detail: the pixel grid under the edge</a></li><li class="l2"><a href="#certainty">Certainty</a></li><li class="l2"><a href="#draft-and-full-traces">Draft and full traces</a></li><li class="l2"><a href="#the-status-strip">The status strip</a></li><li class="l2"><a href="#when-the-stage-is-not-showing-a-drawing">When the stage is not showing a drawing</a></li></ul></ul></aside>
+SVG scales without limit.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="getting-started.html"><span class="dir">Previous</span><span class="lbl">Getting started</span></a><a class="next" href="result.html"><span class="dir">Next</span><span class="lbl">Result</span></a></nav></article></main>
+  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#comparing-side-by-side-wipe-ab">Comparing: side by side, wipe, A/B</a></li><li class="l2"><a href="#zooming-and-panning">Zooming and panning</a></li><li class="l2"><a href="#overlays-what-the-svg-is-made-of">Overlays: what the SVG is made of</a></li><li class="l2"><a href="#detail-the-pixel-grid-under-the-edge">Detail: the pixel grid under the edge</a></li><li class="l2"><a href="#certainty">Certainty</a></li><li class="l2"><a href="#draft-and-full-traces">Draft and full traces</a></li><li class="l2"><a href="#the-engine-log">The engine log</a></li><li class="l2"><a href="#the-status-strip">The status strip</a></li><li class="l2"><a href="#when-the-stage-is-not-showing-a-drawing">When the stage is not showing a drawing</a></li></ul></aside>
 </div>
 </body>
 </html>

studio/index.html

@@ -11,8 +11,8 @@
     <meta name="description" content="Turn a raster logo into an exact SVG, in your browser. Nothing is uploaded." />
     <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
     <title>Inkvec Studio Lite</title>
-    <script type="module" crossorigin src="./assets/main-v2TpNvwt.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/main-BwYpaGSz.css">
+    <script type="module" crossorigin src="./assets/main-DydoLkFD.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/main-CdmTdoOg.css">
     <link rel="preload" href="./fonts/playfair-latin.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="preload" href="./fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin />
     <style>

studio/pkg-threads/inkvec_studio_wasm.js

@@ -546,7 +546,7 @@ function __wbg_get_imports(memory) {
         __wbindgen_object_drop_ref: function(arg0) {
             takeObject(arg0);
         },
-        memory: memory || new WebAssembly.Memory({initial:23,maximum:65536,shared:true}),
+        memory: memory || new WebAssembly.Memory({initial:24,maximum:65536,shared:true}),
     };
     return {
         __proto__: null,

studio/pkg-threads/inkvec_studio_wasm_bg.wasm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:21c9a4e8e7c51c8a58ae17c0622b021ce474726f1af84d557fbee21259355c6e
-size 5938888
+oid sha256:08c15b39fbe98421697c5b60ebeee69d873223abc59139de92fd062081f56ccf
+size 6139358

studio/pkg-threads/snippets/wasm-bindgen-rayon-38edf6e439f6d70d/src/workerHelpers.js

@@ -51,7 +51,7 @@ waitForMsgType(self, 'wasm_bindgen_worker_init').then(async ({ init, receiver })
   // OTOH, even though it can't be inlined, it should be still reasonably
   // cheap since the requested file is already in cache (it was loaded by
   // the main thread).
-  const pkg = await import('../../../inkvec_studio_wasm.js?v=d5c590fbfb80');
+  const pkg = await import('../../../inkvec_studio_wasm.js?v=a58c9495e128');
   await pkg.default(init);
   postMessage({ type: 'wasm_bindgen_worker_ready' });
   pkg.wbg_rayon_start_worker(receiver);

studio/pkg/inkvec_studio_wasm_bg.wasm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1bc9a2f7f2bad5719188a5a8f67e0a257ec3ddd7059b608ec2c6dbe2860715e4
-size 5906132
+oid sha256:92b651405294f14ac0fbfef9b23ed5434be03f9e9fc430b7ba3e1145008eab9e
+size 6089582