openclacky 1.1.1 → 1.1.2

data/lib/clacky/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Clacky
-  VERSION = "1.1.1"
+  VERSION = "1.1.2"
 end

data/lib/clacky/web/app.css

@@ -943,9 +943,9 @@ body {
   align-self: center;
 }
 .session-item:hover .session-actions-btn { display: flex; }
-.session-actions-btn:hover { 
-  background: var(--color-border-primary); 
-  color: var(--color-text-primary); 
+.session-actions-btn:hover {
+  background: var(--color-border-primary);
+  color: var(--color-text-primary);
 }
 
 /* Pin icon in session name */
@@ -1808,6 +1808,8 @@ body {
 .msg-assistant em { font-style: italic; color: var(--color-text-secondary); }
 .msg-tool      { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); font-family: monospace; font-size: 12px; color: var(--color-text-secondary); align-self: flex-start; }
 .msg-info      { color: var(--color-text-secondary); font-size: 12px; align-self: center; font-style: italic; }
+.msg-info.msg-info-main { font-style: normal; }
+.msg-info-sub  { color: var(--color-text-secondary); font-size: 11px; align-self: center; opacity: 0.7; margin-top: -27px; }
 
 /* ── Feedback request card ──────────────────────────────────────────────── */
 .feedback-card {
@@ -1926,7 +1928,7 @@ body {
 }
 .msg-success   { color: var(--color-success); align-self: flex-start; font-size: 13px; }
 .tool-name     { color: var(--color-warning); font-weight: 600; }
-.progress-msg  { color: var(--color-accent-primary); font-size: 12px; align-self: center; animation: pulse 1.2s infinite; }
+.progress-msg  { color: var(--color-accent-primary); font-size: 12px; align-self: center; }
 
 /* ── Token usage line ────────────────────────────────────────────────────── */
 .token-usage-line {

data/lib/clacky/web/i18n.js

@@ -37,6 +37,7 @@ const I18n = (() => {
       "chat.status.running": "running",
       "chat.status.error":   "error",
       "chat.input.placeholder": "Message… (Enter to send, Shift+Enter for newline)",
+      "chat.input.placeholderRunning": "AI is working — you can still send extra info anytime...",
       "chat.btn.send":       "Send",
       "chat.thinking":       "Thinking…",
       "chat.retrying":       "Retrying",
@@ -44,6 +45,8 @@ const I18n = (() => {
       "chat.history_start":       "No more history",
       "chat.image_expired": "Expired",
       "chat.done":           "Done — {{n}} iteration(s), {{cost}}",
+      "chat.done.duration":  " · {{duration}}s",
+      "chat.done.cache":     "Cache hit {{rate}}% ({{hits}}/{{total}}) · {{tokens}} tokens reused",
       "chat.interrupted":    "Interrupted.",
       "chat.feedback_hint":  "Or type your own answer below ↓",
       "chat.newMessageHint": "New messages ↓",
@@ -562,6 +565,7 @@ const I18n = (() => {
       "chat.status.running": "运行中",
       "chat.status.error":   "出错",
       "chat.input.placeholder": "输入消息…（Enter 发送，Shift+Enter 换行）",
+      "chat.input.placeholderRunning": "AI 正在工作，你仍然可以随时补充新信息给它...",
       "chat.btn.send":       "发送",
       "chat.thinking":       "思考中…",
       "chat.retrying":       "正在重试",
@@ -569,6 +573,8 @@ const I18n = (() => {
       "chat.history_start":       "没有更多历史了",
       "chat.image_expired": "已过期",
       "chat.done":           "完成 — {{n}} 步，{{cost}}",
+      "chat.done.duration":  " · {{duration}}s",
+      "chat.done.cache":     "缓存命中 {{rate}}% ({{hits}}/{{total}}) · 复用 {{tokens}} tokens",
       "chat.interrupted":    "已中断。",
       "chat.feedback_hint":  "或在下方输入框自由作答 ↓",
       "chat.newMessageHint": "有新消息 ↓",

data/lib/clacky/web/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title id="page-title">{{BRAND_NAME}}</title>
   <link rel="icon" type="image/svg+xml" href="/icon.svg">
+  <link rel="stylesheet" href="/vendor/katex/katex.min.css">
   <link rel="stylesheet" href="/app.css">
   <script>
     // Inline theme init — must run before CSS renders to prevent flash of wrong theme.
@@ -905,7 +906,6 @@
   <div class="modal-box new-session-modal">
     <div class="modal-header">
       <h3 class="modal-title" data-i18n="sessions.modal.title">Create New Session</h3>
-      <button id="new-session-modal-close" class="modal-close-btn" title="Close">×</button>
     </div>
     <div class="modal-body">
       <div class="modal-field">
@@ -997,6 +997,8 @@
 
 
 <script src="/marked.min.js"></script>
+<script src="/vendor/katex/katex.min.js"></script>
+<script src="/vendor/katex/auto-render.min.js"></script>
 <script src="/i18n.js"></script>
 <script src="/auth.js"></script>
 <script src="/theme.js"></script>

data/lib/clacky/web/sessions.js

@@ -90,20 +90,67 @@ const Sessions = (() => {
   // if the marked library is unavailable.
   function _markedParse(text) {
     if (!text) return "";
+
+    // Extract math BEFORE marked so backslashes / underscores survive intact.
+    const math = [];
+    const PLACEHOLDER = (i) => `\u0000KTX${i}\u0000`;
+    let prepared = _extractMath(text, math, PLACEHOLDER);
+
+    let html;
     if (typeof marked !== "undefined") {
-      // Custom renderer: open all links in a new tab
       const renderer = new marked.Renderer();
       renderer.link = function({ href, title, text }) {
         const titleAttr = title ? ` title="${title}"` : "";
         return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
       };
-      // Use marked with a few sensible defaults:
-      //   breaks: true  — treat single newlines as <br> (matches chat UX expectations)
-      //   gfm:    true  — GitHub-flavoured markdown (tables, strikethrough, etc.)
-      return marked.parse(text, { breaks: true, gfm: true, renderer });
+      html = marked.parse(prepared, { breaks: true, gfm: true, renderer });
+    } else {
+      html = escapeHtml(prepared).replace(/\n/g, "<br>");
+    }
+
+    if (math.length) {
+      html = html.replace(/\u0000KTX(\d+)\u0000/g, (_, i) => _renderMath(math[+i]));
+    }
+    return html;
+  }
+
+  // Pull $$...$$, \[...\], $...$, \(...\) out of `text` and replace each with a
+  // sentinel placeholder so marked won't mangle the LaTeX source. The matched
+  // segments are pushed (with display flag) onto `out` for later KaTeX rendering.
+  function _extractMath(text, out, placeholder) {
+    // Order matters: longest/most-specific delimiters first.
+    const patterns = [
+      { re: /\$\$([\s\S]+?)\$\$/g,        display: true  },
+      { re: /\\\[([\s\S]+?)\\\]/g,    display: true  },
+      { re: /\\\(([\s\S]+?)\\\)/g,    display: false },
+      // Inline $...$: avoid $$, escaped \$, and prevent crossing newlines/blanks.
+      { re: /(^|[^\$])\$(?!\s)([^\$\n]+?)(?<!\s)\$(?!\d)/g, display: false, hasPrefix: true },
+    ];
+    let result = text;
+    for (const { re, display, hasPrefix } of patterns) {
+      result = result.replace(re, (m, a, b) => {
+        const body = hasPrefix ? b : a;
+        const idx  = out.length;
+        out.push({ body, display });
+        return (hasPrefix ? a : "") + placeholder(idx);
+      });
+    }
+    return result;
+  }
+
+  function _renderMath({ body, display }) {
+    if (typeof katex === "undefined") {
+      return `<code>${escapeHtml((display ? "$$" : "$") + body + (display ? "$$" : "$"))}</code>`;
+    }
+    try {
+      return katex.renderToString(body, {
+        displayMode: display,
+        throwOnError: false,
+        output: "html",
+      });
+    } catch (e) {
+      return `<code class="katex-error">${escapeHtml(body)}</code>`;
     }
-    // Fallback: plain escaped text with newlines preserved
-    return escapeHtml(text).replace(/\n/g, "<br>");
   }
 
   // Build the collapsible thinking block HTML for a given rendered-HTML content string.
@@ -112,7 +159,7 @@ const Sessions = (() => {
     return `<details class="thinking-block">` +
       `<summary class="thinking-summary">` +
         `<span class="thinking-chevron">›</span>` +
-        `<span class="thinking-label">Thought for a moment</span>` +
+        `<span class="thinking-label">Thoughts</span>` +
       `</summary>` +
       `<div class="thinking-body">${renderedHtml}</div>` +
     `</details>`;
@@ -349,9 +396,7 @@ const Sessions = (() => {
     document.getElementById("btn-welcome-new")
       .addEventListener("click", () => Sessions.create("general"));
 
-    // Modal: close / cancel / create / overlay click
-    document.getElementById("new-session-modal-close")
-      .addEventListener("click", () => Sessions.closeNewSessionModal());
+    // Modal: cancel / create / overlay click
     document.getElementById("new-session-cancel")
       .addEventListener("click", () => Sessions.closeNewSessionModal());
     document.getElementById("new-session-create")
@@ -2051,6 +2096,15 @@ const Sessions = (() => {
       // Here we only update the interrupt button visibility.
       const interrupt = $("btn-interrupt");
       if (interrupt) interrupt.style.display = status === "running" ? "" : "none";
+
+      // Swap input placeholder so the user knows they can still send extra
+      // info while the agent is working.
+      const inp = $("user-input");
+      if (inp) {
+        const key = status === "running" ? "chat.input.placeholderRunning" : "chat.input.placeholder";
+        inp.setAttribute("data-i18n-placeholder", key);
+        inp.setAttribute("placeholder", I18n.t(key));
+      }
     },
 
     /**
@@ -2410,13 +2464,19 @@ const Sessions = (() => {
       }
     },
 
-    appendInfo(text) {
+    appendInfo(text, subline) {
       Sessions.collapseToolGroup();
       const messages = $("messages");
       const el = document.createElement("div");
-      el.className   = "msg msg-info";
+      el.className   = subline ? "msg msg-info msg-info-main" : "msg msg-info";
       el.textContent = text;
       messages.appendChild(el);
+      if (subline) {
+        const sub = document.createElement("div");
+        sub.className = "msg msg-info-sub";
+        sub.textContent = subline;
+        messages.appendChild(sub);
+      }
       _scrollToBottomIfNeeded(messages);
     },
 
@@ -2490,11 +2550,58 @@ const Sessions = (() => {
     _getProgressState(id) {
       if (!id) return null;
       if (!Sessions._sessionProgress[id]) {
-        Sessions._sessionProgress[id] = { el: null, interval: null, startTime: null, type: null, displayText: null };
+        Sessions._sessionProgress[id] = { el: null, interval: null, startTime: null, type: null, displayText: null, metadata: null, lastChunkAt: null };
       }
       return Sessions._sessionProgress[id];
     },
 
+    // Compact a token count: 1234 → "1.2k", 12345 → "12k", 1234567 → "1.2M".
+    _compactTokenCount(n) {
+      if (n < 1000) return String(n);
+      if (n < 1_000_000) {
+        const k = n / 1000;
+        return k >= 10 ? `${Math.floor(k)}k` : `${k.toFixed(1)}k`;
+      }
+      const m = n / 1_000_000;
+      return m >= 10 ? `${Math.floor(m)}M` : `${m.toFixed(1)}M`;
+    },
+
+    // Render LLM streaming output token count as "↓ 234 tokens".
+    // Returns null when no positive output_tokens — matches CLI behaviour
+    // (input is hidden mid-stream because most providers only ship
+    // input_tokens with the final usage frame).
+    _formatTokenSuffix(metadata) {
+      if (!metadata) return null;
+      const output = metadata.output_tokens;
+      if (output == null || output <= 0) return null;
+      return `↓ ${Sessions._compactTokenCount(output)} tokens`;
+    },
+
+    // Compose the live progress line:
+    //   "<text>… (Ns · ↓N tokens · reasoning…)"
+    // The "reasoning" tail surfaces inter-chunk silence so users see
+    // the model is in extended thinking, not stuck. Threshold mirrors
+    // ProgressHandle::IDLE_HINT_THRESHOLD_SECONDS. Animated dots avoid
+    // duplicating the elapsed counter.
+    _composeProgressLine(displayText, startTime, metadata, lastChunkAt) {
+      const now = Date.now();
+      const elapsed = startTime ? Math.floor((now - startTime) / 1000) : 0;
+      const tokenStr = Sessions._formatTokenSuffix(metadata);
+      const parts = [];
+      if (elapsed > 0) parts.push(`${elapsed}s`);
+      if (tokenStr) parts.push(tokenStr);
+      if (tokenStr && lastChunkAt) {
+        const idle = Math.floor((now - lastChunkAt) / 1000);
+        if (idle >= 2) {
+          const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+          const frame = frames[Math.floor(now / 250) % frames.length];
+          parts.push(`reasoning ${frame} `);
+        }
+      }
+      if (parts.length === 0) return displayText;
+      return `${displayText}… (${parts.join(" · ")})`;
+    },
+
     // Build the display label for a given progress type (pure — no side effects).
     _buildDisplayText(text, progress_type, metadata) {
       if (progress_type === "thinking") {
@@ -2530,23 +2637,19 @@ const Sessions = (() => {
 
       const el = document.createElement("div");
       el.className = "progress-msg";
-      const displayText = state.displayText;
-      // Show elapsed time immediately (not just after first setInterval tick)
-      const initialElapsed = Math.floor((Date.now() - state.startTime) / 1000);
-      el.textContent = initialElapsed > 0
-        ? `⟳ ${displayText}… (${initialElapsed}s)`
-        : `⟳ ${displayText}`;
+      el.textContent = Sessions._composeProgressLine(state.displayText, state.startTime, state.metadata, state.lastChunkAt);
       messages.appendChild(el);
       state.el = el;
       _scrollToBottomIfNeeded(messages);
 
-      // Start elapsed time counter (update every second)
+      // Tick at 250ms so streaming token counts feel live.  The elapsed
+      // counter only displays whole seconds, but token numbers update at
+      // sub-second cadence on fast streams.
       state.interval = setInterval(() => {
-        const elapsed = Math.floor((Date.now() - state.startTime) / 1000);
         if (state.el) {
-          state.el.textContent = `⟳ ${displayText}… (${elapsed}s)`;
+          state.el.textContent = Sessions._composeProgressLine(state.displayText, state.startTime, state.metadata, state.lastChunkAt);
         }
-      }, 1000);
+      }, 250);
     },
 
     // Detach only the DOM element and timer for a session, preserving logical state
@@ -2568,54 +2671,53 @@ const Sessions = (() => {
       const sid = _activeId;
       if (!sid) return;
 
-      const newStartTime   = startedAt || Date.now();
-      const newDisplayText = Sessions._buildDisplayText(text, progress_type, metadata);
+      const newStartTime = startedAt || Date.now();
 
-      // If this session already has a visible progress indicator (DOM element
-      // attached), update it in-place instead of tear-down/rebuild.  This avoids
-      // the jarring flicker when replay_live_state arrives shortly after the
-      // eager-attach on session switch.
       const existing = Sessions._sessionProgress[sid];
       if (existing && existing.el) {
-        // If the start time is the same (same progress phase, e.g. dedup replay),
-        // keep everything as-is — not even the display text changes.
+        // Same start time → same progress phase. Most common case during LLM
+        // streaming (token counts arriving every ~250ms with message: null).
+        // Keep the existing displayText so the random "thinking" verb does
+        // NOT churn on every chunk. Just refresh metadata; the interval tick
+        // will repaint with fresh tokens.
         if (existing.startTime === newStartTime) {
-          existing.type = progress_type;
+          existing.type     = progress_type;
+          existing.metadata = metadata || {};
+          existing.lastChunkAt = Date.now();
+          // Only adopt a new displayText if the server actually sent one.
+          if (text) existing.displayText = Sessions._buildDisplayText(text, progress_type, metadata);
           return;
         }
-        // Different start time → new progress phase.  Update state in-place and
-        // restart the interval, but reuse the existing DOM element so the user
-        // never sees the indicator disappear/reappear.
+        // Different start time → new progress phase. Update state in-place
+        // and reset the timer base, but reuse the existing DOM element so
+        // the user never sees the indicator disappear/reappear.
+        const newDisplayText = Sessions._buildDisplayText(text, progress_type, metadata);
         existing.type        = progress_type;
         existing.startTime   = newStartTime;
         existing.displayText = newDisplayText;
-        // Immediately refresh the text + elapsed counter
-        const elapsed = Math.floor((Date.now() - newStartTime) / 1000);
-        existing.el.textContent = elapsed > 0
-          ? `⟳ ${newDisplayText}… (${elapsed}s)`
-          : `⟳ ${newDisplayText}`;
-        // Restart interval with new startTime
+        existing.metadata    = metadata || {};
+        existing.lastChunkAt = newStartTime;
+        existing.el.textContent = Sessions._composeProgressLine(newDisplayText, newStartTime, metadata, existing.lastChunkAt);
         if (existing.interval) clearInterval(existing.interval);
         existing.interval = setInterval(() => {
-          const e = Math.floor((Date.now() - existing.startTime) / 1000);
           if (existing.el) {
-            existing.el.textContent = `⟳ ${existing.displayText}… (${e}s)`;
+            existing.el.textContent = Sessions._composeProgressLine(existing.displayText, existing.startTime, existing.metadata, existing.lastChunkAt);
           }
-        }, 1000);
+        }, 250);
         _scrollToBottomIfNeeded($("messages"));
         return;
       }
 
       // No existing visible progress — create from scratch.
-      // Clear any stale logical state first.
       Sessions.clearProgress(sid);
 
       const state = Sessions._getProgressState(sid);
       state.type        = progress_type;
       state.startTime   = newStartTime;
-      state.displayText = newDisplayText;
+      state.displayText = Sessions._buildDisplayText(text, progress_type, metadata);
+      state.metadata    = metadata || {};
+      state.lastChunkAt = newStartTime;
 
-      // Attach DOM + timer
       Sessions._attachProgressUI(sid);
     },
 
@@ -2655,6 +2757,8 @@ const Sessions = (() => {
       state.startTime   = null;
       state.type        = null;
       state.displayText = null;
+      state.metadata    = null;
+      state.lastChunkAt = null;
     },
 
     // Delete all progress state for a session (used when session is removed).

data/lib/clacky/web/vendor/katex/auto-render.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};return function(){r.d(o,{default:function(){return d}});var e=r(771),t=r.n(e);const n=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},i=/^\\begin{/;var a=function(e,t){let r;const o=[],a=new RegExp("("+t.map((e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"))).join("|")+")");for(;r=e.search(a),-1!==r;){r>0&&(o.push({type:"text",data:e.slice(0,r)}),e=e.slice(r));const a=t.findIndex((t=>e.startsWith(t.left)));if(r=n(t[a].right,e,t[a].left.length),-1===r)break;const l=e.slice(0,r+t[a].right.length),s=i.test(l)?l:e.slice(t[a].left.length,r);o.push({type:"math",data:s,rawData:l,display:t[a].display}),e=e.slice(r+t[a].right.length)}return""!==e&&o.push({type:"text",data:e}),o};const l=function(e,n){const r=a(e,n.delimiters);if(1===r.length&&"text"===r[0].type)return null;const o=document.createDocumentFragment();for(let e=0;e<r.length;e++)if("text"===r[e].type)o.appendChild(document.createTextNode(r[e].data));else{const i=document.createElement("span");let a=r[e].data;n.displayMode=r[e].display;try{n.preProcess&&(a=n.preProcess(a)),t().render(a,i,n)}catch(i){if(!(i instanceof t().ParseError))throw i;n.errorCallback("KaTeX auto-render: Failed to parse `"+r[e].data+"` with ",i),o.appendChild(document.createTextNode(r[e].rawData));continue}o.appendChild(i)}return o},s=function(e,t){for(let n=0;n<e.childNodes.length;n++){const r=e.childNodes[n];if(3===r.nodeType){let o=r.textContent,i=r.nextSibling,a=0;for(;i&&i.nodeType===Node.TEXT_NODE;)o+=i.textContent,i=i.nextSibling,a++;const s=l(o,t);if(s){for(let e=0;e<a;e++)r.nextSibling.remove();n+=s.childNodes.length-1,e.replaceChild(s,r)}else n+=a}else if(1===r.nodeType){const e=" "+r.className+" ";-1===t.ignoredTags.indexOf(r.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&s(r,t)}}};var d=function(e,t){if(!e)throw new Error("No element provided to render");const n={};for(const e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);n.delimiters=n.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],n.ignoredTags=n.ignoredTags||["script","noscript","style","textarea","pre","code","option"],n.ignoredClasses=n.ignoredClasses||[],n.errorCallback=n.errorCallback||console.error,n.macros=n.macros||{},s(e,n)}}(),o=o.default}()}));

data/lib/clacky/web/vendor/katex/katex.min.css

@@ -0,0 +1 @@
+@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(fonts/KaTeX_AMS-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(fonts/KaTeX_Fraktur-Bold.woff2) format("woff2")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Fraktur-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(fonts/KaTeX_Main-Bold.woff2) format("woff2")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(fonts/KaTeX_Main-BoldItalic.woff2) format("woff2")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(fonts/KaTeX_Main-Italic.woff2) format("woff2")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Main-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(fonts/KaTeX_Math-BoldItalic.woff2) format("woff2")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(fonts/KaTeX_Math-Italic.woff2) format("woff2")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(fonts/KaTeX_SansSerif-Bold.woff2) format("woff2")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(fonts/KaTeX_SansSerif-Italic.woff2) format("woff2")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(fonts/KaTeX_SansSerif-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Script-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size1-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size2-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size3-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size4-Regular.woff2) format("woff2")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Typewriter-Regular.woff2) format("woff2")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.11"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}