scaffold: 12 Hobbies Studio site + OpenScribe project page

Initial static site (no framework, no build) for the 12 Hobbies Studio maker
studio, featuring OpenScribe as the flagship project.

What changed:
- index.html: studio home - hero, featured OpenScribe block with sync diagram,
  projects grid, about. British spelling, dark warm theme.
- projects/openscribe.html: OpenScribe product page. Leads with the "bring your
  own AI" differentiator, an interactive provider picker, the feature set, a
  four-step build guide, and licensing.
- assets/styles.css: all styling (palette, cards, featured layout, picker, code blocks).
- assets/app.js: dependency-free provider picker that swaps a sample server .env
  snippet across Ollama / OpenAI / Anthropic / Groq / LM Studio - on message with
  OpenScribe's any-AI design.
- README, LICENSE (MIT for site code), .gitignore.

Why:
- The user asked to develop a site on 12 Hobbies Studio; this is the first cut,
  showcasing OpenScribe and the connect-to-any-AI capability. Branding uses sensible
  defaults and is trivially editable (noted in README).

Notes:
- Pure static files; deploy to any static host or Forgejo Pages. Validated: app.js
  passes node --check; HTML section tags balanced.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/app.js

@@ -0,0 +1,86 @@
+// SPDX-License-Identifier: MIT
+// Interactive AI-provider picker for the OpenScribe page. Swaps a sample server .env
+// snippet as you choose a provider - the whole point of OpenScribe: bring your own AI.
+(function () {
+  var PROVIDERS = {
+    ollama: {
+      label: "Ollama (local)",
+      lines: [
+        ["c", "# Fully local and self-hosted - no cloud, no key"],
+        ["k", "OPENSCRIBE_LLM_PROVIDER", "ollama"],
+        ["k", "OPENSCRIBE_OLLAMA_URL", "http://localhost:11434"],
+        ["k", "OPENSCRIBE_OLLAMA_MODEL", "llama3.1"],
+      ],
+    },
+    openai: {
+      label: "OpenAI",
+      lines: [
+        ["c", "# Any OpenAI-compatible endpoint works the same way"],
+        ["k", "OPENSCRIBE_LLM_PROVIDER", "openai_compatible"],
+        ["k", "OPENSCRIBE_LLM_BASE_URL", "https://api.openai.com/v1"],
+        ["k", "OPENSCRIBE_LLM_API_KEY", "sk-..."],
+        ["k", "OPENSCRIBE_LLM_MODEL", "gpt-4o-mini"],
+      ],
+    },
+    anthropic: {
+      label: "Anthropic (Claude)",
+      lines: [
+        ["c", "# Commercial Claude via the official Anthropic API"],
+        ["k", "OPENSCRIBE_LLM_PROVIDER", "anthropic"],
+        ["k", "OPENSCRIBE_LLM_API_KEY", "sk-ant-..."],
+        ["k", "OPENSCRIBE_LLM_MODEL", "claude-opus-4-8"],
+      ],
+    },
+    groq: {
+      label: "Groq",
+      lines: [
+        ["c", "# Fast + cheap, OpenAI-compatible"],
+        ["k", "OPENSCRIBE_LLM_PROVIDER", "openai_compatible"],
+        ["k", "OPENSCRIBE_LLM_BASE_URL", "https://api.groq.com/openai/v1"],
+        ["k", "OPENSCRIBE_LLM_API_KEY", "gsk_..."],
+        ["k", "OPENSCRIBE_LLM_MODEL", "llama-3.3-70b-versatile"],
+      ],
+    },
+    lmstudio: {
+      label: "LM Studio (local)",
+      lines: [
+        ["c", "# A local model server on your LAN, OpenAI-compatible"],
+        ["k", "OPENSCRIBE_LLM_PROVIDER", "openai_compatible"],
+        ["k", "OPENSCRIBE_LLM_BASE_URL", "http://localhost:1234/v1"],
+        ["k", "OPENSCRIBE_LLM_MODEL", "local-model"],
+      ],
+    },
+  };
+
+  function esc(s) { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;"); }
+
+  function render(key) {
+    var p = PROVIDERS[key];
+    var html = p.lines.map(function (l) {
+      if (l[0] === "c") return '<span class="c">' + esc(l[1]) + "</span>";
+      return '<span class="k">' + esc(l[1]) + "</span>=" + esc(l[2]);
+    }).join("\n");
+    document.getElementById("env-out").innerHTML = html;
+  }
+
+  function init() {
+    var picker = document.getElementById("provider-picker");
+    if (!picker) return;
+    Object.keys(PROVIDERS).forEach(function (key, i) {
+      var b = document.createElement("button");
+      b.type = "button";
+      b.textContent = PROVIDERS[key].label;
+      b.setAttribute("aria-pressed", i === 0 ? "true" : "false");
+      b.addEventListener("click", function () {
+        picker.querySelectorAll("button").forEach(function (x) { x.setAttribute("aria-pressed", "false"); });
+        b.setAttribute("aria-pressed", "true");
+        render(key);
+      });
+      picker.appendChild(b);
+    });
+    render(Object.keys(PROVIDERS)[0]);
+  }
+
+  if (document.readyState !== "loading") init();
+  else document.addEventListener("DOMContentLoaded", init);
+})();