Deploy FitCheck UI brick

README.md

@@ -1,13 +1,56 @@
 ---
 title: FitCheck
-emoji: 🏃
-colorFrom: pink
+emoji: ✅
+colorFrom: indigo
 colorTo: green
 sdk: gradio
-sdk_version: 6.17.3
-python_version: '3.13'
+sdk_version: 6.16.0
 app_file: app.py
 pinned: false
+license: mit
+short_description: Honest, plain answers about what AI your computer can run
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# FitCheck
+
+**What AI can your computer actually run?**
+
+Tell FitCheck about your computer in plain words. It tells you honestly what AI
+you can run today, from chatbots to object detection, what it will feel like,
+and exactly how to start. No jargon, no hype, no fake promises.
+
+Built for the [Build Small hackathon](https://huggingface.co/build-small-hackathon)
+(Backyard AI track).
+
+## What makes it different
+
+- **Plain words.** Built for people who do not know what VRAM or quantisation
+  means, and it explains those words when they appear.
+- **The whole realm, not just chatbots.** Goals span LLMs and specialised deep
+  learning: object detection (YOLO), segmentation, 6-DoF pose (FoundationPose),
+  image and video generation, speech-to-text, embeddings, fine-tuning, plus a
+  custom "describe it" option.
+- **Honest by design.** Three plain bands (Runs great, Tight but works, Will not
+  fit) with conservative estimates that under-promise rather than over.
+
+## How it is built
+
+A hand-built HTML, CSS and JS frontend (no framework, no build step) served by
+Gradio server mode (`gr.Server`, which is a FastAPI app). The interface talks to
+a single connector, `POST /api/advise`.
+
+> Note: this is the UI view. The advice endpoint currently returns input-aware
+> placeholder data so the interface is complete and live. A deterministic
+> calculation engine and a small local model plug into the same `/api/advise`
+> contract next, with no frontend changes.
+
+## Run it locally
+
+```
+python -m venv .venv
+.venv\Scripts\activate
+pip install -r requirements.txt
+python app.py
+```
+
+Then open http://127.0.0.1:7860/ (add `?go` for a sample result).

app.py

@@ -0,0 +1,274 @@
+"""
+FitCheck — what AI can your computer actually run?
+
+This file is the UI BRICK's backend: a `gr.Server` (which IS a FastAPI app)
+that serves the hand-built frontend in static/ and exposes ONE connector
+endpoint, /api/advise.
+
+IMPORTANT: /api/advise currently returns input-aware *placeholder* results so
+the interface is complete and feels alive (the gauge moves, bands change). The
+real deterministic engine (a separate brick) will plug into this same contract
+later — the frontend won't need to change. Mock logic is fenced below.
+"""
+
+import re
+from pathlib import Path
+
+import gradio as gr
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+
+CATALOGUE_VERSION = "2026-06-07"
+STATIC = Path(__file__).parent / "static"
+
+app = gr.Server()
+
+
+# ==========================================================================
+#  PLACEHOLDER engine — to be replaced by the real calculation brick.
+#  Numbers are plausible and conservative but are NOT the audited engine yet.
+# ==========================================================================
+
+_COLORS = {"model": "#818CF8", "chat": "#A5F3C4", "work": "#868E9C"}
+
+# Which broad family each goal belongs to (drives models/tools/commands).
+_FAMILY = {
+    "chat": "llm", "writing": "llm", "coding": "llm", "agents": "llm",
+    "rag": "llm", "translate": "llm", "finetune": "llm",
+    "detect": "vision", "segment": "vision", "pose": "vision",
+    "classify": "vision", "depth": "vision", "ocr": "vision", "train-vision": "vision",
+    "imagegen": "gen", "inpaint": "gen", "upscale": "gen", "videogen": "gen", "bgremove": "gen",
+    "stt": "audio", "tts": "audio", "music": "audio",
+    "embed": "data", "forecast": "data", "tabular": "data",
+    "custom": "llm",
+}
+
+# variant = (name, description, memory-need-GB at sensible setting, setting label)
+_VARIANTS = {
+    "llm": [
+        ("Huge (70B)", "Top open quality. Serious hardware only.", 42, "4-bit"),
+        ("Very large (32B)", "Near-premium. Wants a strong GPU.", 20, "4-bit"),
+        ("Large (14B)", "Noticeably smarter and more reliable.", 9, "4-bit"),
+        ("Medium (7-9B)", "Solid all-rounder: chat, coding, reasoning.", 5.5, "4-bit"),
+        ("Small (3-4B)", "Surprisingly capable everyday assistant.", 2.5, "4-bit"),
+        ("Tiny (~1B)", "Quick simple chat. Runs on almost anything.", 1.2, "4-bit"),
+    ],
+    "vision": [
+        ("Extra-large model", "Highest accuracy, slowest.", 6.0, "full"),
+        ("Large model", "Great accuracy for real work.", 3.5, "full"),
+        ("Medium model", "Balanced accuracy and speed.", 2.0, "full"),
+        ("Small model", "Fast, good for live video.", 1.2, "full"),
+        ("Nano model", "Real-time even on weak hardware.", 0.6, "full"),
+    ],
+    "gen": [
+        ("Flux.1 (dev)", "State-of-the-art image quality.", 18, "full"),
+        ("Flux.1 (schnell)", "Near-top quality, much faster.", 12, "8-bit"),
+        ("SDXL", "Excellent 1024px images.", 8, "full"),
+        ("SDXL Turbo", "Fast SDXL, fewer steps.", 7, "full"),
+        ("Stable Diffusion 1.5", "Light, fast, huge community.", 3.5, "full"),
+    ],
+    "audio": [
+        ("Whisper large-v3", "Best transcription accuracy.", 5.0, "full"),
+        ("Whisper medium", "Strong accuracy, lighter.", 3.0, "full"),
+        ("Whisper small", "Good for clear audio, fast.", 1.5, "full"),
+        ("Whisper base", "Quick drafts, light hardware.", 0.8, "full"),
+    ],
+    "data": [
+        ("Large embedder", "Best search relevance.", 2.5, "full"),
+        ("Base embedder", "Great balance for most search.", 1.2, "full"),
+        ("Small embedder", "Fast, runs on anything.", 0.5, "full"),
+    ],
+}
+
+_TOOLS = {
+    "llm": [
+        ("Ollama", "Type one line; it downloads and runs the model for you.", "Get it from ollama.com", "Easiest"),
+        ("LM Studio", "A point-and-click app with a chat window, no commands.", "Download from lmstudio.ai", "Easy"),
+        ("llama.cpp", "The lightweight engine under the hood. Runs GGUF files directly.", "Releases on GitHub", "Advanced"),
+    ],
+    "vision": [
+        ("Ultralytics", "One pip install, then detect objects from a webcam or file.", "pip install ultralytics", "Easiest"),
+        ("Roboflow", "Browser tools to label data and run models, little code.", "roboflow.com", "Easy"),
+        ("PyTorch", "Full control for custom pipelines and training.", "pytorch.org", "Advanced"),
+    ],
+    "gen": [
+        ("Fooocus", "Image generation that 'just works': one folder, double-click.", "Download from GitHub", "Easiest"),
+        ("ComfyUI", "Powerful visual node editor for image/video pipelines.", "Download from GitHub", "Moderate"),
+        ("Automatic1111", "The classic full-featured Stable Diffusion web UI.", "Download from GitHub", "Moderate"),
+    ],
+    "audio": [
+        ("faster-whisper", "Fast, accurate transcription with a tiny install.", "pip install faster-whisper", "Easiest"),
+        ("whisper.cpp", "Runs Whisper efficiently on CPU and small machines.", "Build from GitHub", "Advanced"),
+    ],
+    "data": [
+        ("sentence-transformers", "Turn text into searchable vectors in a few lines.", "pip install sentence-transformers", "Easiest"),
+        ("Chroma", "A simple local database to store and search those vectors.", "pip install chromadb", "Easy"),
+    ],
+}
+
+_COMMANDS = {
+    "llm": [
+        ("Easy way (Ollama)", "ollama run llama3.1:8b"),
+        ("Power way (llama.cpp)", "llama-server -hf bartowski/Meta-Llama-3.1-8B-Instruct-GGUF:Q4_K_M -c 4096"),
+    ],
+    "vision": [
+        ("Install", "pip install ultralytics"),
+        ("Detect from your webcam", "yolo predict model=yolo11n.pt source=0 show=True"),
+    ],
+    "gen": [
+        ("Easiest (Fooocus)", "# Download Fooocus, unzip, double-click run.bat"),
+        ("Power (ComfyUI)", "git clone https://github.com/comfyanonymous/ComfyUI && cd ComfyUI && python main.py"),
+    ],
+    "audio": [
+        ("Install", "pip install faster-whisper"),
+        ("Transcribe a file", 'python -c "from faster_whisper import WhisperModel; m=WhisperModel(\'small\'); print(list(m.transcribe(\'audio.mp3\')[0]))"'),
+    ],
+    "data": [
+        ("Install", "pip install sentence-transformers"),
+        ("Make searchable vectors", 'python -c "from sentence_transformers import SentenceTransformer as S; print(S(\'all-MiniLM-L6-v2\').encode(\'hello world\').shape)"'),
+    ],
+}
+
+
+def _parse_vram(label: str) -> float:
+    m = re.search(r"(\d+(?:\.\d+)?)\s*GB", label or "")
+    return float(m.group(1)) if m else 0.0
+
+
+def _budgets(p: dict):
+    ram = float(p.get("ram_gb") or 16)
+    provider = p.get("provider", "none")
+    computer = p.get("computer", "Windows laptop")
+
+    if provider == "apple":
+        fast = round(ram * 0.70, 1)
+        return fast, fast, ram, True
+
+    vram = p.get("vram_gb")
+    if not vram:
+        vram = _parse_vram(p.get("gpu", ""))
+    vram = float(vram or 0)
+
+    fast = round(vram * 0.85, 1)
+    reserve = 1.0 if "Mini PC" in computer else (3.0 if "desktop" in computer.lower() or computer == "Mac" else 3.5)
+    total = round(vram + max(0.0, ram - reserve) * 0.9, 1)
+    return fast, vram, total, False
+
+
+def advise_mock(p: dict) -> dict:
+    fam = _FAMILY.get(p.get("usecase", "chat"), "llm")
+    variants = _VARIANTS[fam]
+    fast, _vram, total, is_apple = _budgets(p)
+    is_finetune = p.get("usecase") in ("finetune", "train-vision")
+    factor = 2.4 if is_finetune else 1.0
+
+    # Classify each variant.
+    def verdict_for(need):
+        need *= factor
+        if fast >= 1 and need <= fast * 0.9:
+            return "great", need
+        if need <= total * 0.9:
+            return "tight", need
+        return "no", need
+
+    options = []
+    for name, desc, need, setting in variants:
+        vd, real_need = verdict_for(need)
+        feel = {"great": "Snappy on your graphics card",
+                "tight": "Runs, but slower (uses normal memory)",
+                "no": "Not enough memory"}[vd]
+        options.append({
+            "verdict": vd, "model": name, "desc": desc,
+            "setting": setting, "memory": ("—" if vd == "no" else f"{round(real_need,1):g} GB"),
+            "feel": feel,
+        })
+
+    # Headline = best that runs great, else best that's tight, else smallest.
+    great = [o for o in options if o["verdict"] == "great"]
+    tight = [o for o in options if o["verdict"] == "tight"]
+    head = great[0] if great else (tight[0] if tight else options[-1])
+    hv = head["verdict"]
+    need_gb = float(re.search(r"[\d.]+", head["memory"]).group()) if head["memory"] != "—" else verdict_for(variants[-1][2])[1]
+
+    if is_apple and hv == "great":
+        where = "on your Mac"
+    elif hv == "great" and fast >= 1:
+        where = "on your graphics card"
+    elif hv == "tight":
+        where = "using your computer's memory"
+    else:
+        where = ""
+    verdict_word = {"great": "Runs great", "tight": "Tight, but works", "no": "Won't fit"}[hv]
+    if hv == "great":
+        headline = f"Yes, you can run the {head['model']} {where}, today."
+    elif hv == "tight":
+        headline = f"Sort of. The {head['model']} will run {where}, with trade-offs."
+    else:
+        headline = "This goal is a stretch on this machine. Here's the honest picture."
+
+    detail = (f"For this goal, the sweet spot is a <b>{head['model']}</b> model "
+              f"at the <b>{head['setting']}</b> setting. {head['desc']} "
+              f"It needs about <b>{round(need_gb,1):g} GB</b>, and you have roughly "
+              f"<b>{fast:g} GB</b> fast / <b>{total:g} GB</b> total to work with.")
+    note = ("Fine-tuning needs roughly 2 to 3 times the memory of just using a model. That's baked in above."
+            if is_finetune else "")
+
+    # Gauge
+    scale = max(total, need_gb, 1) * 1.05
+    gauge = {
+        "need_gb": f"{round(need_gb,1):g} GB needed",
+        "fast_gb": f"{fast:g} GB", "total_gb": f"{total:g} GB",
+        "fill_pct": round(need_gb / scale * 100, 1),
+        "mark_pct": round(fast / scale * 100, 1),
+        "breakdown": [
+            {"label": f"Model {round(need_gb*0.8,1):g} GB", "color": _COLORS["model"]},
+            {"label": f"Working space {round(need_gb*0.2,1):g} GB", "color": _COLORS["work"]},
+        ],
+    }
+
+    tools = [{"name": n, "what": w, "install": i, "tag": t} for n, w, i, t in _TOOLS[fam]]
+    cmd_intro = ("These get you a running model in minutes. Pick the easy one or the power one; "
+                 "they do the same job.")
+    commands = {"intro": cmd_intro,
+                "items": [{"label": l, "code": c} for l, c in _COMMANDS[fam]]}
+
+    return {
+        "catalogue_version": CATALOGUE_VERSION,
+        "verdict": hv, "verdict_word": verdict_word,
+        "headline": headline, "detail": detail, "note": note,
+        "gauge": gauge, "options": options, "tools": tools, "commands": commands,
+    }
+
+
+# ==========================================================================
+#  Connector endpoint + static frontend
+# ==========================================================================
+
+class AdviseIn(BaseModel):
+    computer: str = "Windows laptop"
+    ram_gb: float | None = 16
+    provider: str = "none"
+    gpu: str = ""
+    vram_gb: float | None = None
+    paste: str = ""
+    usecase: str = "chat"
+    custom: str = ""
+    priority: str = "balanced"
+
+
+@app.post("/api/advise")
+def api_advise(payload: AdviseIn):
+    return advise_mock(payload.model_dump())
+
+
+app.mount("/static", StaticFiles(directory=STATIC), name="static")
+
+
+@app.get("/")
+def index():
+    return FileResponse(STATIC / "index.html")
+
+
+if __name__ == "__main__":
+    app.launch(server_name="0.0.0.0", server_port=7860)

requirements.txt

@@ -0,0 +1 @@
+gradio==6.16.0

static/app.js

@@ -0,0 +1,283 @@
+/* ============================================================
+   FitCheck — frontend logic (UI brick)
+   Gathers inputs, calls the /api/advise connector, renders results.
+   The backend currently returns input-aware PLACEHOLDER data; the
+   real engine plugs into the same /api/advise contract later.
+   ============================================================ */
+
+// ---- Inline icon helpers (icons.js loads first) --------------------------
+function ic(name) { return (window.ICONS && window.ICONS[name]) || ""; }
+function hydrate(root) {
+  (root || document).querySelectorAll("[data-ic]").forEach(el => {
+    if (!el.dataset.done) { el.innerHTML = ic(el.dataset.ic); el.dataset.done = "1"; }
+  });
+}
+
+// ---- Use-case taxonomy: the full realm, not just LLMs --------------------
+const USE_CASES = [
+  { icon: "cat-text", name: "Text & chat", items: [
+    { id: "chat",      icon: "chat",      label: "Chatbot / assistant" },
+    { id: "writing",   icon: "writing",   label: "Writing & summarising" },
+    { id: "coding",    icon: "coding",    label: "Coding help" },
+    { id: "agents",    icon: "agents",    label: "Agents & tool use" },
+    { id: "rag",       icon: "rag",       label: "Chat with my documents" },
+    { id: "translate", icon: "translate", label: "Translation" },
+  ]},
+  { icon: "cat-vision", name: "See & understand images", items: [
+    { id: "detect",  icon: "detect",   label: "Object detection (YOLO)" },
+    { id: "segment", icon: "segment",  label: "Image segmentation" },
+    { id: "pose",    icon: "pose",     label: "Pose / 6-DoF (FoundationPose)" },
+    { id: "classify",icon: "classify", label: "Image classification" },
+    { id: "depth",   icon: "depth",    label: "Depth estimation" },
+    { id: "ocr",     icon: "ocr",      label: "Read text from images (OCR)" },
+  ]},
+  { icon: "cat-gen", name: "Create images & video", items: [
+    { id: "imagegen", icon: "imagegen", label: "Generate images (SD / Flux)" },
+    { id: "inpaint",  icon: "inpaint",  label: "Edit / inpaint images" },
+    { id: "upscale",  icon: "upscale",  label: "Upscale / restore" },
+    { id: "videogen", icon: "videogen", label: "Generate video" },
+    { id: "bgremove", icon: "bgremove", label: "Remove backgrounds" },
+  ]},
+  { icon: "cat-audio", name: "Audio & speech", items: [
+    { id: "stt",   icon: "stt",   label: "Speech to text (Whisper)" },
+    { id: "tts",   icon: "tts",   label: "Text to speech / voice" },
+    { id: "music", icon: "music", label: "Generate music" },
+  ]},
+  { icon: "cat-data", name: "Data & search", items: [
+    { id: "embed",    icon: "embed",    label: "Semantic search / embeddings" },
+    { id: "forecast", icon: "forecast", label: "Time-series forecasting" },
+    { id: "tabular",  icon: "tabular",  label: "Predict from spreadsheets" },
+  ]},
+  { icon: "cat-train", name: "Train your own", items: [
+    { id: "finetune",     icon: "finetune",     label: "Fine-tune an LLM (LoRA)" },
+    { id: "train-vision", icon: "train-vision", label: "Train a vision model" },
+  ]},
+  { icon: "cat-custom", name: "Something else", items: [
+    { id: "custom", icon: "custom", label: "Custom: describe it" },
+  ]},
+];
+
+// ---- GPU lists per provider ----------------------------------------------
+const GPUS = {
+  none:   [],
+  unsure: [],
+  nvidia: [
+    "RTX 5090 (32 GB)","RTX 5080 (16 GB)","RTX 5070 Ti (16 GB)","RTX 5070 (12 GB)","RTX 5060 (8 GB)",
+    "RTX 4090 (24 GB)","RTX 4080 (16 GB)","RTX 4070 (12 GB)","RTX 4060 (8 GB)",
+    "RTX 3090 (24 GB)","RTX 3080 (10 GB)","RTX 3070 (8 GB)","RTX 3060 (12 GB)","RTX 3050 (8 GB)",
+    "GTX 1660 (6 GB)","GTX 1650 (4 GB)","Laptop RTX (not sure of model)",
+  ],
+  amd:    ["RX 7900 XTX (24 GB)","RX 7800 XT (16 GB)","RX 7600 (8 GB)","RX 6700 XT (12 GB)","Built-in Radeon"],
+  apple:  ["M-series base (8 GB)","M-series Pro (16 GB)","M-series Max (32 GB)","M-series Ultra (64 GB)"],
+  intel:  ["Arc A770 (16 GB)","Arc A750 (8 GB)","Arc A380 (6 GB)","Built-in Intel graphics"],
+};
+
+const $ = (s) => document.querySelector(s);
+const state = { computer: "Windows laptop", provider: "none", priority: "balanced", usecase: "chat", checked: false };
+
+// ---- Build the use-case picker -------------------------------------------
+function buildPicker() {
+  const wrap = $("#usecase-picker");
+  wrap.innerHTML = USE_CASES.map(g => `
+    <div class="uc-group">
+      <div class="uc-cat"><span class="ic" data-ic="${g.icon}"></span>${g.name}</div>
+      <div class="uc-grid">
+        ${g.items.map(it => `
+          <button class="uc-pill${it.id === "chat" ? " active" : ""}" data-uc="${it.id}">
+            <span class="pic ic" data-ic="${it.icon}"></span>${it.label}
+          </button>`).join("")}
+      </div>
+    </div>`).join("");
+  hydrate(wrap);
+
+  wrap.querySelectorAll(".uc-pill").forEach(p => p.addEventListener("click", () => {
+    wrap.querySelectorAll(".uc-pill").forEach(x => x.classList.remove("active"));
+    p.classList.add("active");
+    state.usecase = p.dataset.uc;
+    $("#custom-uc-field").style.display = state.usecase === "custom" ? "block" : "none";
+    maybeLiveUpdate();
+  }));
+}
+
+// ---- Segmented controls ---------------------------------------------------
+function wireSegmented(id, key, after) {
+  $(id).querySelectorAll(".seg-btn").forEach(b => b.addEventListener("click", () => {
+    $(id).querySelectorAll(".seg-btn").forEach(x => x.classList.remove("active"));
+    b.classList.add("active");
+    state[key] = b.dataset.val;
+    if (after) after();
+    maybeLiveUpdate();
+  }));
+}
+function setActive(id, val) {
+  $(id).querySelectorAll(".seg-btn").forEach(b => b.classList.toggle("active", b.dataset.val === val));
+}
+
+// ---- GPU select depends on provider --------------------------------------
+function fillGpu() {
+  const list = GPUS[state.provider] || [];
+  const sel = $("#gpu");
+  if (!list.length) { sel.style.display = "none"; sel.innerHTML = ""; }
+  else { sel.style.display = "block"; sel.innerHTML = list.map(g => `<option>${g}</option>`).join(""); }
+}
+function syncProviderForComputer() {
+  const isMac = state.computer === "Mac";
+  const isPi = state.computer.includes("Mini PC");
+  if (isMac) { state.provider = "apple"; setActive("#provider-seg", "apple"); }
+  else if (isPi) { state.provider = "none"; setActive("#provider-seg", "none"); }
+  fillGpu();
+}
+
+// ---- Find-my-specs help text ---------------------------------------------
+function findSpecsText() {
+  const c = state.computer;
+  if (c === "Mac") return `
+    <ul style="margin:0;padding-left:18px">
+      <li>Click the Apple menu (top-left), then <b>About This Mac</b>.</li>
+      <li>It shows your chip (e.g. <i>Apple M2</i>) and <b>Memory</b> (e.g. <i>16 GB</i>).</li>
+      <li>On a Mac that one memory number is all you need. The graphics share it.</li>
+    </ul>`;
+  if (c === "Linux PC" || c.includes("Mini PC")) return `
+    <ul style="margin:0;padding-left:18px">
+      <li><b>RAM:</b> run <code>free -h</code> in a terminal.</li>
+      <li><b>Graphics card:</b> <code>nvidia-smi</code> (NVIDIA) or <code>lspci | grep VGA</code>.</li>
+    </ul>`;
+  return `
+    <ul style="margin:0;padding-left:18px">
+      <li><b>RAM:</b> press <code>Ctrl + Shift + Esc</code>, then <b>Performance</b>, then <b>Memory</b>.</li>
+      <li><b>Graphics card:</b> same window, <b>GPU</b>. The name is top-right (e.g. <i>NVIDIA RTX 3060</i>).</li>
+      <li>No real GPU listed? You have built-in graphics. Pick “None / built-in”.</li>
+    </ul>`;
+}
+
+// ---- Gather inputs & call the connector ----------------------------------
+function gather() {
+  const sel = $("#gpu");
+  return {
+    computer: state.computer,
+    ram_gb: parseFloat($("#ram").value),
+    provider: state.provider,
+    gpu: sel.style.display === "none" ? "" : sel.value,
+    vram_gb: $("#vram").value ? parseFloat($("#vram").value) : null,
+    paste: $("#paste").value.trim(),
+    usecase: state.usecase,
+    custom: $("#custom-uc").value.trim(),
+    priority: state.priority,
+  };
+}
+
+let debounce;
+function maybeLiveUpdate() {
+  if (!state.checked) return;
+  clearTimeout(debounce);
+  debounce = setTimeout(check, 200);
+}
+
+async function check() {
+  state.checked = true;
+  try {
+    const res = await fetch("/api/advise", {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(gather()),
+    });
+    render(await res.json());
+  } catch (e) {
+    $("#results").innerHTML = `<div class="empty-state"><div class="big"><span class="ic" data-ic="monitor"></span></div>
+      <p>Couldn't reach the advisor. Is the server running?</p></div>`;
+    hydrate($("#results"));
+  }
+}
+
+// ---- Render results -------------------------------------------------------
+const VMAP = {
+  great: { cls: "var(--ok)",   soft: "var(--ok-soft)",   word: "Runs great",       em: "✓" },
+  tight: { cls: "var(--warn)", soft: "var(--warn-soft)", word: "Tight, but works",  em: "≈" },
+  no:    { cls: "var(--no)",   soft: "var(--no-soft)",   word: "Won't fit",         em: "✕" },
+};
+
+function render(d) {
+  const v = VMAP[d.verdict] || VMAP.tight;
+  const g = d.gauge || {};
+  $("#cat-version").textContent = d.catalogue_version || "—";
+
+  const opts = (d.options || []).map(o => {
+    const ov = VMAP[o.verdict] || VMAP.tight;
+    return `<div class="opt" style="--status:${ov.cls};--status-soft:${ov.soft}">
+      <div class="vdot">${ov.em}</div>
+      <div><div class="name">${o.model}</div><div class="desc">${o.desc}</div></div>
+      <div class="meta"><b>${o.memory}</b><div class="feel">${o.setting} · ${o.feel}</div></div>
+    </div>`;
+  }).join("");
+
+  const tools = (d.tools || []).map((t, i) => `
+    <div class="tool">
+      <div class="tool-head"><span class="tname">${t.name}</span>
+        <span class="tag ${i===0?"best":"mid"}">${i===0?"Start here":t.tag}</span></div>
+      <div class="twhat">${t.what}</div>
+      <div class="tinstall"><span class="ic" data-ic="download"></span>${t.install}</div>
+    </div>`).join("");
+
+  const cmds = (d.commands?.items || []).map((c) => `
+    <div class="cmd-box">
+      <div class="cmd-label">${c.label}<button class="copy-btn" data-code="${encodeURIComponent(c.code)}">Copy</button></div>
+      <pre><code>${c.code}</code></pre>
+    </div>`).join("");
+
+  $("#results").innerHTML = `
+    <div class="reveal">
+      <div class="verdict" style="--status:${v.cls};--status-soft:${v.soft}">
+        <span class="badge"><span class="dot"></span>${d.verdict_word || v.word}</span>
+        <h2>${d.headline || ""}</h2>
+        <p>${d.detail || ""}</p>
+        ${d.note ? `<div class="note">${d.note}</div>` : ""}
+      </div>
+
+      ${g.fill_pct != null ? `
+      <div class="gauge-card" style="--status:${v.cls}">
+        <div class="gauge-top"><span class="label" style="margin:0">Memory needed vs. what you have</span>
+          <span class="need">${g.need_gb}</span></div>
+        <div class="gauge" style="--pct:${g.fill_pct};--gcolor:${v.cls};--needpct:${g.mark_pct}">
+          <div class="gauge-fill"></div><div class="gauge-need"></div>
+        </div>
+        <div class="gauge-legend">
+          ${(g.breakdown||[]).map(b=>`<span class="item"><span class="sw" style="background:${b.color}"></span>${b.label}</span>`).join("")}
+          <span class="item marker">Fast: ${g.fast_gb}</span>
+          <span class="item marker">Total: ${g.total_gb}</span>
+        </div>
+      </div>` : ""}
+
+      ${opts ? `<div class="section-title">What you can run <span class="sub">honestly, biggest to smallest</span></div>
+      <div class="opt-grid">${opts}</div>` : ""}
+
+      ${tools ? `<div class="section-title">How to actually run it</div>
+      <div class="tool-grid">${tools}</div>` : ""}
+
+      ${cmds ? `<div class="section-title">Copy-paste to get started</div>
+      <p class="cmd-intro">${d.commands.intro || ""}</p>
+      <div class="cmd">${cmds}</div>` : ""}
+    </div>`;
+
+  hydrate($("#results"));
+  $("#results").querySelectorAll(".copy-btn").forEach(b => b.addEventListener("click", () => {
+    navigator.clipboard.writeText(decodeURIComponent(b.dataset.code));
+    b.textContent = "Copied ✓"; b.classList.add("done");
+    setTimeout(() => { b.textContent = "Copy"; b.classList.remove("done"); }, 1500);
+  }));
+}
+
+// ---- Init -----------------------------------------------------------------
+function init() {
+  hydrate(document);
+  buildPicker();
+  wireSegmented("#computer-seg", "computer", () => { syncProviderForComputer(); $("#find-specs-body").innerHTML = findSpecsText(); });
+  wireSegmented("#provider-seg", "provider", fillGpu);
+  wireSegmented("#priority-seg", "priority");
+  ["#ram","#gpu","#vram","#custom-uc"].forEach(s => $(s).addEventListener("change", maybeLiveUpdate));
+  $("#paste").addEventListener("input", maybeLiveUpdate);
+  $("#check-btn").addEventListener("click", check);
+  fillGpu();
+  $("#find-specs-body").innerHTML = findSpecsText();
+  // Pre-filled share/preview links: /?go renders results immediately.
+  if (new URLSearchParams(location.search).has("go")) check();
+}
+init();

static/icons.js

@@ -0,0 +1,54 @@
+/* Auto-generated by build_icons.py. Inline icons = offline-safe. */
+window.ICONS = {
+"chat": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" /> </svg>",
+"writing": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" /> <path d=\"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z\" /> </svg>",
+"coding": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"m18 16 4-4-4-4\" /> <path d=\"m6 8-4 4 4 4\" /> <path d=\"m14.5 4-5 16\" /> </svg>",
+"agents": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 8V4H8\" /> <rect x=\"4\" y=\"8\" rx=\"2\" /> <path d=\"M2 14h2\" /> <path d=\"M20 14h2\" /> <path d=\"M15 13v2\" /> <path d=\"M9 13v2\" /> </svg>",
+"rag": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 7v14\" /> <path d=\"M16 12h2\" /> <path d=\"M16 8h2\" /> <path d=\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\" /> <path d=\"M6 12h2\" /> <path d=\"M6 8h2\" /> </svg>",
+"translate": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"m5 8 6 6\" /> <path d=\"m4 14 6-6 2-3\" /> <path d=\"M2 5h12\" /> <path d=\"M7 2h1\" /> <path d=\"m22 22-5-10-5 10\" /> <path d=\"M14 18h6\" /> </svg>",
+"detect": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M3 7V5a2 2 0 0 1 2-2h2\" /> <path d=\"M17 3h2a2 2 0 0 1 2 2v2\" /> <path d=\"M21 17v2a2 2 0 0 1-2 2h-2\" /> <path d=\"M7 21H5a2 2 0 0 1-2-2v-2\" /> <circle cx=\"12\" cy=\"12\" r=\"3\" /> <path d=\"m16 16-1.9-1.9\" /> </svg>",
+"segment": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\" /> <path d=\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\" /> <path d=\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\" /> </svg>",
+"pose": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" /> <path d=\"m3.3 7 8.7 5 8.7-5\" /> <path d=\"M12 22V12\" /> </svg>",
+"classify": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z\" /> <path d=\"M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193\" /> <circle cx=\"10.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\" /> </svg>",
+"depth": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"m8 3 4 8 5-5 5 15H2L8 3z\" /> </svg>",
+"ocr": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M3 7V5a2 2 0 0 1 2-2h2\" /> <path d=\"M17 3h2a2 2 0 0 1 2 2v2\" /> <path d=\"M21 17v2a2 2 0 0 1-2 2h-2\" /> <path d=\"M7 21H5a2 2 0 0 1-2-2v-2\" /> <path d=\"M7 8h8\" /> <path d=\"M7 12h10\" /> <path d=\"M7 16h6\" /> </svg>",
+"imagegen": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <rect x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" /> <circle cx=\"9\" cy=\"9\" r=\"2\" /> <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\" /> </svg>",
+"inpaint": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\" /> <path d=\"m14 7 3 3\" /> <path d=\"M5 6v4\" /> <path d=\"M19 14v4\" /> <path d=\"M10 2v2\" /> <path d=\"M7 8H3\" /> <path d=\"M21 16h-4\" /> <path d=\"M11 3H9\" /> </svg>",
+"upscale": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" /> <path d=\"M14 15H9v-5\" /> <path d=\"M16 3h5v5\" /> <path d=\"M21 3 9 15\" /> </svg>",
+"videogen": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <rect x=\"3\" y=\"3\" rx=\"2\" /> <path d=\"M7 3v18\" /> <path d=\"M3 7.5h4\" /> <path d=\"M3 12h18\" /> <path d=\"M3 16.5h4\" /> <path d=\"M17 3v18\" /> <path d=\"M17 7.5h4\" /> <path d=\"M17 16.5h4\" /> </svg>",
+"bgremove": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <circle cx=\"6\" cy=\"6\" r=\"3\" /> <path d=\"M8.12 8.12 12 12\" /> <path d=\"M20 4 8.12 15.88\" /> <circle cx=\"6\" cy=\"18\" r=\"3\" /> <path d=\"M14.8 14.8 20 20\" /> </svg>",
+"stt": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 19v3\" /> <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" /> <rect x=\"9\" y=\"2\" rx=\"3\" /> </svg>",
+"tts": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M2 10v3\" /> <path d=\"M6 6v11\" /> <path d=\"M10 3v18\" /> <path d=\"M14 8v7\" /> <path d=\"M18 5v13\" /> <path d=\"M22 10v3\" /> </svg>",
+"music": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M9 18V5l12-2v13\" /> <circle cx=\"6\" cy=\"18\" r=\"3\" /> <circle cx=\"18\" cy=\"16\" r=\"3\" /> </svg>",
+"embed": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <circle cx=\"12\" cy=\"12\" r=\"10\" /> <path d=\"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z\" /> </svg>",
+"forecast": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M16 7h6v6\" /> <path d=\"m22 7-8.5 8.5-5-5L2 17\" /> </svg>",
+"tabular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 3v18\" /> <rect x=\"3\" y=\"3\" rx=\"2\" /> <path d=\"M3 9h18\" /> <path d=\"M3 15h18\" /> </svg>",
+"finetune": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z\" /> <path d=\"M22 10v6\" /> <path d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\" /> </svg>",
+"train-vision": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z\" /> </svg>",
+"custom": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" /> <path d=\"m15 5 4 4\" /> </svg>",
+"cat-text": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z\" /> </svg>",
+"cat-vision": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" /> <circle cx=\"12\" cy=\"12\" r=\"3\" /> </svg>",
+"cat-gen": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\" /> <circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\" /> <circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\" /> <circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\" /> <circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" /> </svg>",
+"cat-audio": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2\" /> </svg>",
+"cat-data": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M3 3v16a2 2 0 0 0 2 2h16\" /> <path d=\"M18 17V9\" /> <path d=\"M13 17V5\" /> <path d=\"M8 17v-3\" /> </svg>",
+"cat-train": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z\" /> <path d=\"M22 10v6\" /> <path d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\" /> </svg>",
+"cat-custom": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" /> <path d=\"m15 5 4 4\" /> </svg>",
+"check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M20 6 9 17l-5-5\" /> </svg>",
+"search": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"m21 21-4.34-4.34\" /> <circle cx=\"11\" cy=\"11\" r=\"8\" /> </svg>",
+"book": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 7v14\" /> <path d=\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\" /> </svg>",
+"balanced": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 3v18\" /> <path d=\"m19 8 3 8a5 5 0 0 1-6 0zV7\" /> <path d=\"M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1\" /> <path d=\"m5 8 3 8a5 5 0 0 1-6 0zV7\" /> <path d=\"M7 21h10\" /> </svg>",
+"quality": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\" /> <path d=\"M20 2v4\" /> <path d=\"M22 4h-4\" /> <circle cx=\"4\" cy=\"20\" r=\"2\" /> </svg>",
+"speed": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\" /> </svg>",
+"offline": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\" /> </svg>",
+"monitor": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"m9 10 2 2 4-4\" /> <rect x=\"2\" y=\"3\" rx=\"2\" /> <path d=\"M12 17v4\" /> <path d=\"M8 21h8\" /> </svg>",
+"download": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M12 15V3\" /> <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" /> <path d=\"m7 10 5 5 5-5\" /> </svg>",
+"chevron": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"m6 9 6 6 6-6\" /> </svg>",
+"arrow": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" > <path d=\"M5 12h14\" /> <path d=\"m12 5 7 7-7 7\" /> </svg>",
+"brand-windows": "<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\"/><rect x=\"13\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\"/><rect x=\"3\" y=\"13\" width=\"8\" height=\"8\" rx=\"1\"/><rect x=\"13\" y=\"13\" width=\"8\" height=\"8\" rx=\"1\"/></svg>",
+"brand-apple": "<svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"/></svg>",
+"brand-linux": "<svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z\"/></svg>",
+"brand-raspberrypi": "<svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.8955 10.8961-.1726-.3028c.0068-2.1746-1.0022-3.061-2.1788-3.7348.356-.0938.7237-.1711.8245-.6182.6118-.1566.7397-.4398.8011-.7398.16-.1066.6955-.4061.6394-.9211.2998-.2069.4669-.4725.3819-.8487.3222-.3515.407-.6419.2702-.9096.3868-.4805.2152-.7295.05-.9817.2897-.5254.0341-1.0887-.7758-.9944-.3221-.4733-1.0244-.3659-1.133-.3637-.1215-.1519-.2819-.2821-.7755-.219-.3197-.2851-.6771-.2364-1.0458-.0964-.4378-.3403-.7275-.0675-1.0584.0356-.53-.1706-.6513.0631-.9117.1583-.5781-.1203-.7538.1416-1.0309.4182l-.3224-.0063c-.8719.5061-1.305 1.5366-1.4585 2.0664-.1536-.5299-.5858-1.5604-1.4575-2.0664l-.3223.0063C9.942.5014 9.7663.2394 9.1883.3597 8.9279.2646 8.807.0309 8.2766.2015c-.2172-.0677-.417-.2084-.6522-.2012l.0004.0002C7.5017.0041 7.369.049 7.2185.166c-.3688-.1401-.7262-.1887-1.0459.0964-.4936-.0631-.654.0671-.7756.219C5.2887.4791 4.5862.3717 4.264.845c-.8096-.0943-1.0655.4691-.7756.9944-.1653.2521-.3366.5013.05.9819-.1367.2677-.0519.5581.2703.9096-.085.3763.0822.6418.3819.8487-.0561.515.4795.8144.6394.9211.0614.3001.1894.5832.8011.7398.1008.4472.4685.5244.8245.6183-1.1766.6737-2.1856 1.56-2.1788 3.7348l-.1724.3028c-1.3491.8082-2.5629 3.4056-.6648 5.5167.124.6609.3319 1.1355.5171 1.6609.2769 2.117 2.0841 3.1082 2.5608 3.2255.6984.524 1.4423 1.0212 2.449 1.3696.949.964 1.977 1.3314 3.0107 1.3308.0152 0 .0306.0002.0457 0 1.0337.0006 2.0618-.3668 3.0107-1.3308 1.0067-.3483 1.7506-.8456 2.4491-1.3696.4766-.1173 2.2838-1.1085 2.5607-3.2255.1851-.5253.3931-1 .517-1.6609 1.8981-2.1113.6843-4.7089-.6649-5.517zm-1.0386-.3715c-.0704.8759-4.6354-3.0504-3.8472-3.1808 2.1391-.3558 3.9191.896 3.8472 3.1808zm-2.0155 4.3649c-1.1481.7409-2.8025.2626-3.6953-1.0681-.8928-1.3306-.6858-3.0101.4623-3.7509 1.1481-.7409 2.8025-.2627 3.6953 1.068.8927 1.3307.6858 3.0101-.4623 3.751zM13.6591 1.3721c.0396.1967.0843.321.1354.3577.2537-.272.4611-.5506.7878-.8123.0011.1537-.0776.3205.1169.4425.1752-.2356.4119-.4459.7263-.6244-.1514.2611-.026.3404.0554.4486.24-.2059.4681-.4144.9109-.5759-.121.1474-.2902.2914-.1108.4607.2473-.1544.496-.3086 1.0833-.4183-.1323.1475-.4059.295-.2401.4426.3104-.1186.6539-.2047 1.034-.2546-.182.1496-.3337.2963-.1846.4122.3323-.1022.7899-.2398 1.2372-.1212l-.2832.2849c-.0314.0382.6623.0297 1.1202.0364-.167.2321-.3375.4562-.437.8548.0454.0459.2723.0204.4862 0-.2194.4618-.6004.5783-.6893.776.134.1015.32.075.5232.006-.158.3254-.4892.5484-.7509.8123.0662.047.1818.075.4555.0425-.2418.257-.5339.492-.8802.7032.0614.0708.2722.0681.4678.0727-.3136.3069-.7173.466-1.0955.6668.1885.1288.3234.0988.4678.097-.2676.2198-.7225.3342-1.1448.4668.0803.1249.1607.1589.3324.194-.447.2473-1.0873.1343-1.2679.2607.0435.1243.1665.2053.3139.2728-.7197.0418-2.6879-.0262-3.0652-1.5156.7367-.8094 2.0813-1.7593 4.394-2.934-1.7994.6022-3.4229 1.405-4.7817 2.5096-1.5978-.7436-.4965-2.6197.283-3.3645zm-1.6126 5.3718c1.1329-.0123 2.5356.8325 2.53 1.6286-.005.7027-.9851 1.2715-2.5213 1.2607-1.5043-.0177-2.5172-.7148-2.5137-1.3957.003-.5603 1.2282-1.5263 2.505-1.4936zm-5.7646-.6006c.1717-.0351.252-.0692.3323-.194-.4223-.1327-.8772-.247-1.1448-.4668.1444.0018.2792.0318.4678-.097-.3783-.2008-.782-.3599-1.0956-.6668.1955-.0048.4064-.002.4677-.0728-.3462-.2113-.6383-.4463-.8801-.7033.2738.0325.3893.0045.4555-.0425-.2617-.264-.593-.487-.7509-.8123.2032.069.3892.0954.5232-.006-.089-.1977-.47-.3142-.6894-.776.214.0204.4409.0459.4863 0-.0994-.3985-.2698-.6226-.4369-.8547.4579-.0067 1.1516.0018 1.1202-.0364l-.2831-.2849c.4472-.1186.9049.019 1.2371.1213.1492-.1159-.0026-.2626-.1847-.4123.3801.05.7236.1361 1.034.2547.1659-.1476-.1076-.2951-.24-.4426.5872.1097.8361.2639 1.0833.4183.1794-.1694.0103-.3133-.1108-.4607.4428.1615.6709.37.911.5759.0814-.1082.2068-.1875.0554-.4486.3143.1785.5511.3888.7263.6244.1945-.122.1159-.2888.1169-.4426.3267.2618.534.5404.7879.8124.0511-.0366.0959-.161.1354-.3577.7794.7448 1.8807 2.6208.2831 3.3646-1.3589-1.1039-2.9817-1.9064-4.78-2.5086 2.3115 1.174 3.6556 2.1239 4.392 2.9328-.3773 1.4895-2.3455 1.5575-3.0651 1.5157.1473-.0676.2703-.1485.3139-.2728-.1806-.1264-.8209-.0134-1.2679-.2607zm2.8175 1.1334c.7881.1304-3.7769 4.0567-3.8472 3.1809-.0719-2.2846 1.7079-3.5367 3.8472-3.1809zm-4.847 8.7567c-1.1094-.8789-1.4668-3.4529.5901-4.6097 1.2394-.3273.4184 5.051-.5901 4.6097zm4.2656 4.5989c-.6257.3719-2.1452.2187-3.2252-1.3095-.7283-1.2823-.6345-2.5872-.123-2.9705.7648-.4589 1.9464.1609 2.8559 1.2003.7923.9405 1.1536 2.5927.4923 3.0797zm-1.2415-5.6086c-1.1481-.7409-1.3551-2.4203-.4623-3.7511.8928-1.3307 2.5472-1.8089 3.6952-1.068 1.1481.7409 1.3551 2.4203.4623 3.7509-.8926 1.3308-2.5471 1.809-3.6952 1.0682zm4.7948 8.2279c-1.3763.0584-2.7258-1.1105-2.7081-1.5157-.0206-.594 1.6758-1.0578 2.782-1.0306 1.1131-.0479 2.6068.3531 2.6097.8851.0184.5166-1.3547 1.6838-2.6836 1.6612zm2.7584-5.8578c.0081 1.3899-1.226 2.5225-2.7562 2.5299-1.5302.0073-2.7773-1.1135-2.7854-2.5033v-.0265c-.008-1.3899 1.2259-2.5226 2.7562-2.5299 1.5302-.0073 2.7773 1.1134 2.7853 2.5033a.7794.7794 0 0 1 .0001.0265zm3.855 2.0029c-1.186 1.6208-2.7916 1.684-3.3896 1.2325-.6255-.5811-.148-2.3854.7094-3.3747v-.0003c.9812-1.0912 2.0302-1.8037 2.7609-1.2469.4919.4828.7805 2.3008-.0807 3.3894zm1.0724-3.4301c-1.0086.4413-1.8298-4.9372-.5901-4.61 2.0568 1.1569 1.6994 3.731.5901 4.61zm-.0256-8.3279h.2985v-.5304h.2986c.1502 0 .2053.0624.2262.2052.0152.1088.0113.2395.0477.3253h.2984c-.0533-.0763-.0515-.2358-.0571-.3213-.0097-.1373-.0513-.2796-.1977-.3176v-.0037c.1502-.061.2149-.1807.2149-.341 0-.2048-.1539-.3738-.3974-.3738h-.732v1.3573zm.2985-1.1255h.3269c.1333 0 .2054.0573.2054.188 0 .1369-.0721.1942-.2054.1942H20.03v-.3822zm-1.0337.4633c0 .7009.5682 1.2694 1.2695 1.2694s1.2695-.5684 1.2695-1.2694c0-.7013-.5683-1.2697-1.2695-1.2697-.7013 0-1.2695.5684-1.2695 1.2697zm2.3275 0c0 .5845-.4737 1.058-1.058 1.058s-1.058-.4735-1.058-1.058c0-.5849.4737-1.058 1.058-1.058s1.058.4731 1.058 1.058z\"/></svg>",
+"brand-nvidia": "<svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.948 8.798v-1.43a6.7 6.7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851c-.398 0-.787-.062-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6.016 6.016 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964c-.37 0-.733-.035-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936z\"/></svg>",
+"brand-amd": "<svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18.324 9.137l1.559 1.56h2.556v2.557L24 14.814V9.137zM2 9.52l-2 4.96h1.309l.37-.982H3.9l.408.982h1.338L3.432 9.52zm4.209 0v4.955h1.238v-3.092l1.338 1.562h.188l1.338-1.556v3.091h1.238V9.52H10.47l-1.592 1.845L7.287 9.52zm6.283 0v4.96h2.057c1.979 0 2.88-1.046 2.88-2.472 0-1.36-.937-2.488-2.747-2.488zm1.237.91h.792c1.17 0 1.63.711 1.63 1.57 0 .728-.372 1.572-1.616 1.572h-.806zm-10.985.273l.791 1.932H2.008zm17.137.307l-1.604 1.603v2.25h2.246l1.604-1.607h-2.246z\"/></svg>",
+"brand-intel": "<svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20.42 7.345v9.18h1.651v-9.18zM0 7.475v1.737h1.737V7.474zm9.78.352v6.053c0 .513.044.945.13 1.292.087.34.235.618.44.828.203.21.475.359.803.451.334.093.754.136 1.255.136h.216v-1.533c-.24 0-.445-.012-.593-.037a.672.672 0 0 1-.39-.173.693.693 0 0 1-.173-.377 4.002 4.002 0 0 1-.037-.606v-2.182h1.193v-1.416h-1.193V7.827zm-3.505 2.312c-.396 0-.76.08-1.082.241-.327.161-.6.384-.822.668l-.087.117v-.902H2.658v6.256h1.639v-3.214c.018-.588.16-1.02.433-1.299.29-.297.642-.445 1.044-.445.476 0 .841.149 1.082.433.235.284.359.686.359 1.2v3.324h1.663V12.97c.006-.89-.229-1.595-.686-2.09-.458-.495-1.1-.742-1.917-.742zm10.065.006a3.252 3.252 0 0 0-2.306.946c-.29.29-.525.637-.692 1.033a3.145 3.145 0 0 0-.254 1.273c0 .452.08.878.241 1.274.161.395.39.742.674 1.032.284.29.637.526 1.045.693.408.173.86.26 1.342.26 1.397 0 2.262-.637 2.782-1.23l-1.187-.904c-.248.297-.841.699-1.583.699-.464 0-.847-.105-1.138-.321a1.588 1.588 0 0 1-.593-.872l-.019-.056h4.915v-.587c0-.451-.08-.872-.235-1.267a3.393 3.393 0 0 0-.661-1.033 3.013 3.013 0 0 0-1.02-.692 3.345 3.345 0 0 0-1.311-.248zm-16.297.118v6.256h1.651v-6.256zm16.278 1.286c1.132 0 1.664.797 1.664 1.255l-3.32.006c0-.458.525-1.255 1.656-1.261zm7.073 3.814a.606.606 0 0 0-.606.606.606.606 0 0 0 .606.606.606.606 0 0 0 .606-.606.606.606 0 0 0-.606-.606zm-.008.105a.5.5 0 0 1 .002 0 .5.5 0 0 1 .5.501.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .498-.5zm-.233.155v.699h.13v-.285h.093l.173.285h.136l-.18-.297a.191.191 0 0 0 .118-.056c.03-.03.05-.074.05-.136 0-.068-.02-.117-.063-.154-.037-.038-.105-.056-.185-.056zm.13.099h.154c.019 0 .037.006.056.012a.064.064 0 0 1 .037.031c.013.013.012.031.012.056a.124.124 0 0 1-.012.055.164.164 0 0 1-.037.031c-.019.006-.037.013-.056.013h-.154Z\"/></svg>"
+};

static/index.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>FitCheck — what AI can your computer run?</title>
+  <meta name="description" content="Tell FitCheck about your computer in plain words. Get an honest answer about what AI you can actually run on it, from chatbots to object detection, and how to start." />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/style.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="logo">
+      <span class="logo-mark"><span class="ic" data-ic="check"></span></span>
+      <span>Fit<span class="tick">Check</span></span>
+    </div>
+    <div class="spacer"></div>
+    <nav>
+      <a href="#how">How it works</a>
+      <a href="#glossary-anchor">Jargon, explained</a>
+    </nav>
+  </header>
+
+  <main class="container">
+    <section class="hero">
+      <h1>What AI can <span class="accent">your computer</span> actually run?</h1>
+      <p>Tell FitCheck about your setup in plain words. It tells you honestly what you
+         can run today, from chatbots to object detection, what it will feel like, and exactly how to start.</p>
+    </section>
+
+    <div class="layout">
+      <!-- ============================== INPUTS ============================== -->
+      <aside class="panel form-panel">
+        <!-- Step 1: machine -->
+        <div class="step">
+          <div class="step-head"><span class="step-num">1</span><h2>Your computer</h2></div>
+
+          <div class="field">
+            <span class="label">What kind of computer?</span>
+            <div class="segmented" id="computer-seg">
+              <button class="seg-btn active" data-val="Windows laptop"><span class="ic brand" data-ic="brand-windows"></span>Windows laptop</button>
+              <button class="seg-btn" data-val="Windows desktop"><span class="ic brand" data-ic="brand-windows"></span>Windows desktop</button>
+              <button class="seg-btn" data-val="Mac"><span class="ic brand" data-ic="brand-apple"></span>Mac</button>
+              <button class="seg-btn" data-val="Linux PC"><span class="ic brand" data-ic="brand-linux"></span>Linux PC</button>
+              <button class="seg-btn" data-val="Mini PC / Raspberry Pi" style="grid-column:1/-1"><span class="ic brand" data-ic="brand-raspberrypi"></span>Mini PC / Raspberry Pi</button>
+            </div>
+          </div>
+
+          <div class="field">
+            <span class="label">Memory (RAM)</span>
+            <select id="ram">
+              <option>2 GB</option><option>4 GB</option><option>8 GB</option>
+              <option selected>16 GB</option><option>24 GB</option><option>32 GB</option>
+              <option>48 GB</option><option>64 GB</option><option>96 GB</option><option>128 GB</option>
+            </select>
+            <div class="hint">Not sure? See “How do I find my specs?” below.</div>
+          </div>
+
+          <div class="field" id="provider-field">
+            <span class="label">Graphics (GPU)</span>
+            <div class="segmented cols-3" id="provider-seg">
+              <button class="seg-btn active" data-val="none">None / built-in</button>
+              <button class="seg-btn" data-val="nvidia"><span class="ic brand" data-ic="brand-nvidia"></span>NVIDIA</button>
+              <button class="seg-btn" data-val="amd"><span class="ic brand" data-ic="brand-amd"></span>AMD</button>
+              <button class="seg-btn" data-val="apple"><span class="ic brand" data-ic="brand-apple"></span>Apple</button>
+              <button class="seg-btn" data-val="intel"><span class="ic brand" data-ic="brand-intel"></span>Intel</button>
+              <button class="seg-btn" data-val="unsure">Not sure</button>
+            </div>
+            <select id="gpu" style="margin-top:var(--s-3); display:none"></select>
+          </div>
+
+          <details class="disc" id="advanced-disc">
+            <summary>Advanced: enter exact numbers <span class="chev ic" data-ic="chevron"></span></summary>
+            <div class="disc-body">
+              <div class="field">
+                <span class="label">Graphics memory (VRAM), if you know it</span>
+                <input type="number" id="vram" placeholder="e.g. 8" min="0" max="200" step="1" />
+                <div class="hint">Overrides the GPU picker above. Leave blank to use the picker.</div>
+              </div>
+              <div class="field" style="margin-bottom:0">
+                <span class="label">Or paste / describe your specs</span>
+                <textarea id="paste" placeholder="Paste output from 'dxdiag' or 'Task Manager → Performance', or just describe it: 'Dell XPS, RTX 3050, 16GB'…"></textarea>
+              </div>
+            </div>
+          </details>
+        </div>
+
+        <!-- Step 2: goal -->
+        <div class="step">
+          <div class="step-head"><span class="step-num">2</span><h2>What do you want to do?</h2></div>
+          <div id="usecase-picker"><!-- rendered by app.js --></div>
+          <div class="field" id="custom-uc-field" style="display:none; margin-top:var(--s-3)">
+            <span class="label">Describe what you want to build</span>
+            <input type="text" id="custom-uc" placeholder="e.g. real-time hand tracking from my webcam" />
+          </div>
+        </div>
+
+        <!-- Step 3: preference -->
+        <div class="step">
+          <div class="step-head"><span class="step-num">3</span><h2>What matters most? <span class="optional">(optional)</span></h2></div>
+          <div class="field" style="margin-bottom:0">
+            <div class="segmented" id="priority-seg">
+              <button class="seg-btn active" data-val="balanced"><span class="ic" data-ic="balanced"></span>Balanced</button>
+              <button class="seg-btn" data-val="quality"><span class="ic" data-ic="quality"></span>Best quality</button>
+              <button class="seg-btn" data-val="speed"><span class="ic" data-ic="speed"></span>Fastest</button>
+              <button class="seg-btn" data-val="offline"><span class="ic" data-ic="offline"></span>Fully offline</button>
+            </div>
+          </div>
+        </div>
+
+        <button class="cta" id="check-btn">Check my setup <span class="ic" data-ic="arrow"></span></button>
+
+        <details class="disc" id="find-specs">
+          <summary><span class="ic sum-ic" data-ic="search"></span>How do I find my specs? <span class="chev ic" data-ic="chevron"></span></summary>
+          <div class="disc-body" id="find-specs-body"><!-- filled by app.js per computer type --></div>
+        </details>
+
+        <span id="glossary-anchor"></span>
+        <details class="disc" id="glossary">
+          <summary><span class="ic sum-ic" data-ic="book"></span>What do these words mean? <span class="chev ic" data-ic="chevron"></span></summary>
+          <div class="disc-body">
+            <dl>
+              <div><dt>Model</dt><dd>The AI’s “brain”. Bigger means smarter, but heavier.</dd></div>
+              <div><dt>Parameters (e.g. 7B)</dt><dd>How big the brain is. 7B is 7 billion. More means smarter and hungrier for memory.</dd></div>
+              <div><dt>Quantisation (4-bit, 8-bit)</dt><dd>Shrinking a model so it fits. 4-bit is the popular sweet spot: much smaller, barely-noticeable quality loss.</dd></div>
+              <div><dt>VRAM</dt><dd>The fast memory on a graphics card. The biggest factor in what runs quickly.</dd></div>
+              <div><dt>RAM</dt><dd>Your computer’s normal memory. Models can use it too, but it is slower.</dd></div>
+              <div><dt>GGUF</dt><dd>A single-file model format made for running locally.</dd></div>
+            </dl>
+          </div>
+        </details>
+      </aside>
+
+      <!-- ============================== RESULTS ============================== -->
+      <section class="panel results-panel" id="results">
+        <div class="empty-state">
+          <div class="big"><span class="ic" data-ic="monitor"></span></div>
+          <h2>Your honest answer appears here</h2>
+          <p>Fill in your computer and what you want to do, then press <b>Check my setup</b>. Results update as you change things.</p>
+        </div>
+      </section>
+    </div>
+
+    <footer class="foot" id="how">
+      <p>FitCheck gives <b>conservative</b> estimates from a transparent rules engine.
+         It would rather under-promise than over-promise. Real speed depends on your exact chip, drivers and settings.</p>
+      <p style="margin-top:8px">Catalogue last updated <b id="cat-version">—</b>. Built for the Hugging Face Build Small hackathon.</p>
+    </footer>
+  </main>
+
+  <script src="/static/icons.js"></script>
+  <script src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,376 @@
+/* ============================================================
+   FitCheck — design system
+   Dark-first. Every text/status colour clears WCAG AA on the
+   card surface (#181B20). Tokens verified by research agent.
+   ============================================================ */
+
+:root {
+  /* Background layers */
+  --bg-base:    #0F1115;
+  --bg-raised:  #181B20;
+  --bg-inset:   #22262E;
+  --border:     #2A2F38;
+  --border-hi:  #3A4150;
+
+  /* Text */
+  --text-primary:   #ECEEF2;
+  --text-secondary: #B4BAC4;
+  --text-muted:     #868E9C;
+
+  /* Accent — warm indigo */
+  --accent:        #818CF8;
+  --accent-strong: #6366F1;
+  --accent-soft:   rgba(129,140,248,0.14);
+
+  /* Status */
+  --ok:   #4ADE80;
+  --warn: #FBBF24;
+  --no:   #F87171;
+  --ok-soft:   rgba(74,222,128,0.13);
+  --warn-soft: rgba(251,191,36,0.13);
+  --no-soft:   rgba(248,113,113,0.13);
+
+  /* Spacing scale (4px base) */
+  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
+  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
+
+  /* Radius */
+  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
+
+  /* Shadow */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
+  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
+  --glow: 0 0 0 1px var(--accent-soft), 0 8px 24px rgba(99,102,241,0.22);
+
+  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
+  --font-body: 'Inter', system-ui, sans-serif;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--font-body);
+  background:
+    radial-gradient(1200px 600px at 80% -10%, rgba(99,102,241,0.10), transparent 60%),
+    radial-gradient(1000px 500px at -10% 10%, rgba(74,222,128,0.05), transparent 55%),
+    var(--bg-base);
+  color: var(--text-primary);
+  font-size: 16px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+}
+
+h1,h2,h3 { font-family: var(--font-head); line-height: 1.2; letter-spacing: -0.02em; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+button { font-family: inherit; cursor: pointer; }
+
+.label {
+  display: block;
+  font-size: 13px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--text-secondary);
+  margin-bottom: var(--s-2);
+}
+.hint { font-size: 13px; color: var(--text-muted); margin-top: var(--s-1); }
+
+/* Icons (inline SVG; lucide uses stroke, brand logos use fill) */
+.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: none; }
+.ic svg { width: 1em; height: 1em; display: block; }
+.optional { font-weight: 500; color: var(--text-muted); font-size: 13px; }
+
+/* ----------------------------------------------------------- Topbar */
+.topbar {
+  display: flex; align-items: center; gap: var(--s-3);
+  padding: var(--s-4) var(--s-5);
+  max-width: 1180px; margin: 0 auto;
+}
+.logo {
+  display: flex; align-items: center; gap: var(--s-2);
+  font-family: var(--font-head); font-weight: 800; font-size: 20px;
+  letter-spacing: -0.03em;
+}
+.logo-mark {
+  width: 32px; height: 32px; border-radius: 9px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  display: grid; place-items: center;
+  box-shadow: var(--glow);
+  color: #fff;
+}
+.logo-mark .ic { font-size: 18px; }
+.logo-mark .ic svg { stroke-width: 3; }
+.logo .tick { color: var(--ok); }
+.topbar .spacer { flex: 1; }
+.topbar nav a { color: var(--text-secondary); font-size: 14px; font-weight: 500; margin-left: var(--s-4); }
+.topbar nav a:hover { color: var(--text-primary); text-decoration: none; }
+
+/* ----------------------------------------------------------- Layout */
+.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-5) var(--s-8); }
+
+.hero { text-align: center; padding: var(--s-6) 0 var(--s-7); }
+.hero .eyebrow {
+  display: inline-flex; align-items: center; gap: var(--s-2);
+  font-size: 13px; font-weight: 600; color: var(--accent);
+  background: var(--accent-soft); padding: 5px 12px; border-radius: var(--r-pill);
+  margin-bottom: var(--s-4);
+}
+.hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
+.hero h1 .accent { color: var(--accent); }
+.hero p { color: var(--text-secondary); font-size: clamp(15px,1.6vw,18px); max-width: 620px; margin: var(--s-4) auto 0; }
+
+.layout {
+  display: grid;
+  grid-template-columns: 420px 1fr;
+  gap: var(--s-5);
+  align-items: start;
+}
+@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
+
+.panel {
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-md);
+}
+.form-panel { padding: var(--s-5); position: sticky; top: var(--s-4); }
+@media (max-width: 900px) { .form-panel { position: static; } }
+
+.step { margin-bottom: var(--s-5); }
+.step-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
+.step-num {
+  width: 26px; height: 26px; border-radius: var(--r-pill); flex: none;
+  background: var(--accent-soft); color: var(--accent);
+  display: grid; place-items: center; font-weight: 700; font-size: 14px;
+  font-family: var(--font-head);
+}
+.step-head h2 { font-size: 17px; font-weight: 700; }
+
+.field { margin-bottom: var(--s-4); }
+
+/* Segmented control */
+.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
+.segmented.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.seg-btn {
+  background: var(--bg-inset); border: 1px solid var(--border);
+  color: var(--text-secondary); border-radius: var(--r-sm);
+  padding: 10px 12px; font-size: 14px; font-weight: 500;
+  display: flex; align-items: center; gap: var(--s-2); justify-content: center;
+  transition: transform .15s, border-color .15s, color .15s, background .15s;
+}
+.seg-btn:hover { border-color: var(--border-hi); color: var(--text-primary); }
+.seg-btn.active {
+  background: var(--accent-soft); border-color: var(--accent);
+  color: var(--text-primary); box-shadow: var(--shadow-sm);
+}
+.seg-btn .ic { font-size: 17px; color: var(--text-muted); }
+.seg-btn.active .ic { color: var(--accent); }
+.seg-btn .ic.brand { color: var(--text-secondary); }
+.seg-btn.active .ic.brand { color: var(--text-primary); }
+
+/* Native select / input styling */
+select, input[type="text"], input[type="number"], textarea {
+  width: 100%; font-family: inherit; font-size: 15px;
+  color: var(--text-primary);
+  background: var(--bg-inset);
+  border: 1px solid var(--border); border-radius: var(--r-sm);
+  padding: 11px 13px;
+  transition: border-color .15s, box-shadow .15s;
+}
+select:hover, input:hover, textarea:hover { border-color: var(--border-hi); }
+select:focus, input:focus, textarea:focus {
+  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
+}
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868E9C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 12px center;
+  padding-right: 38px;
+}
+textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
+.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
+
+/* Use-case picker */
+.uc-group { margin-bottom: var(--s-4); }
+.uc-cat {
+  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
+  color: var(--text-muted); margin-bottom: var(--s-2); display: flex; align-items: center; gap: 6px;
+}
+.uc-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
+.uc-pill {
+  background: var(--bg-inset); border: 1px solid var(--border);
+  color: var(--text-secondary); border-radius: var(--r-pill);
+  padding: 7px 13px; font-size: 13.5px; font-weight: 500;
+  display: inline-flex; align-items: center; gap: 6px;
+  transition: transform .15s, border-color .15s, color .15s, background .15s;
+}
+.uc-pill:hover { border-color: var(--border-hi); color: var(--text-primary); transform: translateY(-1px); }
+.uc-pill.active {
+  background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary);
+}
+.uc-pill .pic { font-size: 15px; color: var(--text-muted); }
+.uc-pill:hover .pic { color: var(--text-secondary); }
+.uc-pill.active .pic { color: var(--accent); }
+.uc-cat .ic { font-size: 14px; color: var(--text-muted); }
+
+/* Disclosure (advanced / accordions) */
+details.disc {
+  border: 1px solid var(--border); border-radius: var(--r-md);
+  background: var(--bg-inset); margin-top: var(--s-3); overflow: hidden;
+}
+details.disc > summary {
+  list-style: none; cursor: pointer; padding: 12px 14px;
+  font-size: 14px; font-weight: 600; color: var(--text-secondary);
+  display: flex; align-items: center; gap: var(--s-2);
+}
+details.disc > summary::-webkit-details-marker { display: none; }
+details.disc > summary .chev { margin-left: auto; transition: transform .2s; color: var(--text-muted); font-size: 16px; }
+details.disc[open] > summary .chev { transform: rotate(180deg); }
+details.disc > summary .sum-ic { font-size: 16px; color: var(--text-muted); }
+details.disc > summary:hover { color: var(--text-primary); }
+.disc-body { padding: 0 14px 14px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
+.disc-body code {
+  background: var(--bg-base); border: 1px solid var(--border); border-radius: 5px;
+  padding: 1px 6px; font-size: 13px; color: var(--text-primary);
+}
+.disc-body dl { display: grid; gap: var(--s-3); }
+.disc-body dt { font-weight: 700; color: var(--text-primary); font-family: var(--font-head); }
+.disc-body dd { color: var(--text-muted); }
+
+/* Primary CTA */
+.cta {
+  width: 100%; border: none; border-radius: var(--r-md);
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  color: #fff; font-weight: 700; font-size: 16px; font-family: var(--font-head);
+  padding: 14px; margin-top: var(--s-2);
+  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
+  transition: transform .15s, box-shadow .15s, filter .15s;
+}
+.cta:hover { transform: translateY(-2px); box-shadow: var(--glow); filter: brightness(1.05); }
+.cta:active { transform: translateY(0); }
+.cta .ic { font-size: 18px; }
+
+/* ----------------------------------------------------------- Results */
+.results-panel { padding: var(--s-5); min-height: 400px; }
+
+.empty-state { text-align: center; color: var(--text-muted); padding: var(--s-8) var(--s-4); }
+.empty-state .big { font-size: 46px; margin-bottom: var(--s-3); color: var(--text-muted); display: flex; justify-content: center; }
+.empty-state p { max-width: 360px; margin: var(--s-2) auto 0; }
+
+.verdict {
+  border: 1px solid var(--border); border-left: 4px solid var(--status, var(--accent));
+  border-radius: var(--r-md); background: var(--bg-raised);
+  padding: var(--s-5); margin-bottom: var(--s-5);
+}
+.verdict .badge {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 5px 12px; border-radius: var(--r-pill);
+  background: var(--status-soft, var(--accent-soft)); color: var(--status, var(--accent));
+  font: 700 13px/1 var(--font-head); text-transform: uppercase; letter-spacing: .04em;
+  margin-bottom: var(--s-3);
+}
+.verdict .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+.verdict h2 { font-size: 22px; margin-bottom: var(--s-3); }
+.verdict p { color: var(--text-secondary); margin-bottom: var(--s-2); }
+.verdict .note {
+  font-size: 13.5px; color: var(--text-muted); margin-top: var(--s-3);
+  padding-top: var(--s-3); border-top: 1px solid var(--border);
+}
+
+.section-title {
+  font-size: 15px; font-weight: 700; font-family: var(--font-head);
+  color: var(--text-primary); margin: var(--s-5) 0 var(--s-3);
+  display: flex; align-items: center; gap: var(--s-2);
+}
+.section-title .sub { font-size: 13px; font-weight: 500; color: var(--text-muted); font-family: var(--font-body); }
+
+/* Gauge */
+.gauge-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4) var(--s-4) var(--s-3); }
+.gauge-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
+.gauge-top .need { font-weight: 700; color: var(--status, var(--text-primary)); font-family: var(--font-head); }
+.gauge {
+  position: relative; height: 16px; border-radius: var(--r-pill);
+  background: var(--bg-base); overflow: hidden; border: 1px solid var(--border);
+}
+.gauge-fill {
+  height: 100%; width: calc(var(--pct,0) * 1%); border-radius: var(--r-pill);
+  background: linear-gradient(90deg, var(--gcolor, var(--accent)), color-mix(in srgb, var(--gcolor, var(--accent)) 65%, #fff));
+  transition: width .8s cubic-bezier(.22,1,.36,1), background .4s;
+}
+.gauge-need {
+  position: absolute; top: -4px; width: 2px; height: 24px;
+  background: var(--text-primary); border-radius: 2px; opacity: .85;
+  left: calc(var(--needpct,50)*1%); transition: left .8s cubic-bezier(.22,1,.36,1);
+}
+.gauge-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
+.gauge-legend .item { display: inline-flex; align-items: center; gap: 6px; }
+.gauge-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
+.gauge-legend .marker { font-weight: 600; color: var(--text-secondary); }
+
+/* Option cards (the matrix, re-imagined) */
+.opt-grid { display: grid; gap: var(--s-3); }
+.opt {
+  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s-3);
+  background: var(--bg-raised); border: 1px solid var(--border);
+  border-left: 4px solid var(--status, var(--border)); border-radius: var(--r-md);
+  padding: var(--s-4);
+  transition: transform .2s, box-shadow .2s, border-color .2s;
+}
+.opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
+.opt .vdot {
+  width: 30px; height: 30px; border-radius: 50%;
+  background: var(--status-soft); color: var(--status);
+  display: grid; place-items: center; font-size: 15px; font-weight: 700;
+}
+.opt .name { font-weight: 700; font-family: var(--font-head); font-size: 15px; }
+.opt .desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
+.opt .meta { text-align: right; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
+.opt .meta b { color: var(--text-primary); font-family: var(--font-head); }
+.opt .feel { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
+
+/* Tool cards */
+.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s-3); }
+.tool {
+  background: var(--bg-raised); border: 1px solid var(--border);
+  border-radius: var(--r-md); padding: var(--s-4);
+  transition: transform .2s, box-shadow .2s, border-color .2s;
+}
+.tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-hi); }
+.tool .tool-head { display: flex; align-items: center; justify-content: space-between; }
+.tool .tname { font-weight: 700; font-family: var(--font-head); font-size: 15px; }
+.tool .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: var(--r-pill); }
+.tool .tag.best { background: var(--ok-soft); color: var(--ok); }
+.tool .tag.mid  { background: var(--accent-soft); color: var(--accent); }
+.tool .twhat { font-size: 13.5px; color: var(--text-secondary); margin: var(--s-2) 0; line-height: 1.5; }
+.tool .tinstall { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
+.tool .tinstall .ic { font-size: 14px; }
+
+/* Command block */
+.cmd-intro { font-size: 14px; color: var(--text-secondary); margin: var(--s-2) 0 var(--s-3); }
+.cmd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
+@media (max-width: 620px) { .cmd { grid-template-columns: 1fr; } }
+.cmd-box { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
+.cmd-box .cmd-label { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 10px 13px 0; display:flex; justify-content:space-between; align-items:center; }
+.cmd-box pre { padding: 8px 13px 13px; overflow-x: auto; }
+.cmd-box code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; color: #a5f3c4; }
+.copy-btn {
+  background: var(--bg-inset); border: 1px solid var(--border); color: var(--text-secondary);
+  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600;
+}
+.copy-btn:hover { color: var(--text-primary); border-color: var(--border-hi); }
+.copy-btn.done { color: var(--ok); border-color: var(--ok); }
+
+/* Footer */
+.foot { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: var(--s-7); line-height: 1.6; }
+.foot b { color: var(--text-secondary); }
+
+/* Reveal animation */
+.reveal { animation: reveal .5s cubic-bezier(.22,1,.36,1) both; }
+@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
+}