rdstudio 0.2.0__py3-none-any.whl

rdstudio/web/sw.js

@@ -0,0 +1,166 @@
+// Service worker: the dashboard opens at once and can be read offline.
+//
+// - App files (HTML, scripts, styles, fonts, libraries) come from a cache named
+//   after them, so a new rdstudio replaces it; the build fills in SHELL.
+// - Data is cached per data version (data/version.json, a hash of the content):
+//   opening the dashboard costs one small request for the version, and only a
+//   new version fetches data again. Offline, the newest copy is used.
+// - The learner record (api/) and anything unknown go to the network as usual.
+
+const SHELL = "__SHELL__";
+const SHELL_CACHE = "rd-shell-" + SHELL;
+const DATA = "rd-data-"; // one cache per data version
+const META = "rd-meta"; // which data versions exist, newest first
+const KEEP_VERSIONS = 2;
+const VERSION_TTL_MS = 3000; // how long a fetched version is trusted
+const TIMEOUT_MS = 4000; // then assume offline and use what is cached
+
+const scope = new URL(self.registration.scope);
+
+self.addEventListener("install", () => self.skipWaiting());
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil((async () => {
+    for (const name of await caches.keys()) {
+      if (name.startsWith("rd-shell-") && name !== SHELL_CACHE) await caches.delete(name);
+    }
+    await self.clients.claim();
+  })());
+});
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  const url = new URL(req.url);
+  if (req.method !== "GET" || url.origin !== scope.origin || !url.pathname.startsWith(scope.pathname)) return;
+  const path = url.pathname.slice(scope.pathname.length);
+  if (path.startsWith("api/")) return;
+  if (path === "data/version.json") event.respondWith(versionResponse(req));
+  else if (path.startsWith("data/")) event.respondWith(data(req));
+  else if (path.startsWith("reports/") || path === "manifest.webmanifest") event.respondWith(networkFirst(req));
+  else event.respondWith(shell(req));
+});
+
+// The page sends what it loaded before this worker was in control, so the
+// next visit is already served from the cache.
+self.addEventListener("message", (event) => {
+  const urls = event.data?.warm;
+  if (!Array.isArray(urls)) return;
+  event.waitUntil(Promise.allSettled(urls.map((u) => {
+    const url = new URL(u, scope);
+    if (url.origin !== scope.origin || !url.pathname.startsWith(scope.pathname)) return null;
+    const path = url.pathname.slice(scope.pathname.length);
+    if (path.startsWith("api/") || path === "data/version.json" || path.startsWith("reports/")) return null;
+    return path.startsWith("data/") ? data(new Request(url)) : shell(new Request(url));
+  })));
+});
+
+// Tunnels (a VS Code dev tunnel, say) sometimes drop a request with a 502, 503
+// or 504, or fail outright. Try again a couple of times before giving up.
+const RETRY_MS = [400, 1500];
+async function fetchRetry(req) {
+  for (let attempt = 0; ; attempt++) {
+    try {
+      const res = await fetch(req);
+      if (![502, 503, 504].includes(res.status) || attempt >= RETRY_MS.length) return res;
+    } catch (err) {
+      if (attempt >= RETRY_MS.length) throw err;
+    }
+    await new Promise((r) => setTimeout(r, RETRY_MS[attempt]));
+  }
+}
+
+function timeout(promise) {
+  return Promise.race([promise, new Promise((_, reject) => setTimeout(() => reject(new Error("timeout")), TIMEOUT_MS))]);
+}
+
+// ------------------------------------------------------------------ shell
+
+async function shell(req) {
+  const cache = await caches.open(SHELL_CACHE);
+  const page = req.mode === "navigate";
+  const key = page ? scope.href : req; // every page load is the one app page
+  const hit = await cache.match(key, { ignoreSearch: page });
+  if (hit) return hit;
+  const res = await fetchRetry(req);
+  if (res.ok && res.type === "basic") cache.put(key, res.clone());
+  return res;
+}
+
+async function networkFirst(req) {
+  const cache = await caches.open(SHELL_CACHE);
+  try {
+    const res = await timeout(fetchRetry(req));
+    if (res.ok) cache.put(req, res.clone());
+    return res;
+  } catch (err) {
+    const hit = await cache.match(req);
+    if (hit) return hit;
+    throw err;
+  }
+}
+
+// ------------------------------------------------------------------ data
+
+let known = null; // { version, at }
+let asking = null;
+
+async function versions() {
+  const res = await (await caches.open(META)).match("versions");
+  return res ? res.json() : [];
+}
+
+async function noteVersion(version) {
+  const list = [version, ...(await versions()).filter((v) => v !== version)];
+  await (await caches.open(META)).put("versions", new Response(JSON.stringify(list.slice(0, KEEP_VERSIONS))));
+  for (const old of list.slice(KEEP_VERSIONS)) await caches.delete(DATA + old);
+}
+
+// The server's data version, asked at most every few seconds; offline, the
+// newest version cached.
+async function currentVersion() {
+  if (known && Date.now() - known.at < VERSION_TTL_MS) return known.version;
+  asking ||= (async () => {
+    try {
+      const res = await timeout(fetch(scope.href + "data/version.json", { cache: "no-store" }));
+      const { version } = await res.clone().json();
+      known = { version, at: Date.now() };
+      await (await caches.open(META)).put("version.json", res);
+      await noteVersion(version);
+      return version;
+    } catch {
+      return (await versions())[0] ?? null;
+    } finally {
+      asking = null;
+    }
+  })();
+  return asking;
+}
+
+// The page polls this to notice changes and to show whether it is live, so it
+// always asks the server, and fails when the server cannot be reached.
+async function versionResponse() {
+  known = null;
+  await currentVersion();
+  if (!known) return Response.error();
+  return (await (await caches.open(META)).match("version.json")) || Response.error();
+}
+
+async function data(req) {
+  const version = await currentVersion();
+  if (version) {
+    const cache = await caches.open(DATA + version);
+    const hit = await cache.match(req, { ignoreSearch: true });
+    if (hit) return hit;
+  }
+  try {
+    const res = await fetchRetry(req);
+    if (res.ok && version) await (await caches.open(DATA + version)).put(req, res.clone());
+    return res;
+  } catch (err) {
+    for (const v of await versions()) { // offline: the newest copy there is
+      const hit = await (await caches.open(DATA + v)).match(req, { ignoreSearch: true });
+      if (hit) return hit;
+    }
+    throw err;
+  }
+}

rdstudio/web/themes/cyber.css

@@ -0,0 +1,139 @@
+/* Cyber: neon on black over a grid with scanlines, glowing routes, square corners and a monospace interface. Light is a hard-edged daylight version. */
+
+:root {
+  --font-text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
+  --font-ui: "JetBrains Mono", ui-monospace, monospace;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-heading: "JetBrains Mono", ui-monospace, monospace;
+  --h1-size: 28px;
+  --h1-doc-size: 31px;
+  --h2-size: 19px;
+  --brand-size: 16px;
+  --text-size: 17px;
+  --radius: 0px;
+  --map-image: var(--cybergrid);
+  --territory-font: "JetBrains Mono", monospace;
+  --territory-weight: 600;
+  --territory-spacing: 0.16em;
+  --territory-size: 12.5px;
+  --place-font: "JetBrains Mono", monospace;
+  --place-size: 11.5px;
+  --paper: #f1f3f6;
+  --paper-raised: #ffffff;
+  --paper-sunk: #e4e8ee;
+  --ink: #0a0f1a;
+  --ink-soft: #3b4658;
+  --ink-faint: #7a8597;
+  --rule: #c9d1dc;
+  --grid: #dde3ea;
+  --accent: #0068e0;
+  --accent-soft: #dbe9ff;
+  --cybergrid: linear-gradient(rgb(0 119 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(0 119 255 / .08) 1px, transparent 1px);
+  --map-canvas: #eef1f5;
+  --map-size: 28px 28px;
+  --region-open-alpha: .03;
+  --region-closed-alpha: .10;
+  --route-from: #0068e0;
+  --route-to: #d4007a;
+  --route-both: #7a8597;
+  color-scheme: light;
+  --reviewed: #2e7a58;
+  --machine: #5b6b7a;
+  --unverified: #a86f12;
+  --stale: #b0413e;
+  --cat-knowledge: #0068e0;
+  --cat-code: #d4007a;
+  --cat-reports: #e0470b;
+  --cat-agent: #00917a;
+  --cat-other: #56657a;
+  --g0: #0068e0;
+  --g1: #d4007a;
+  --g2: #b07800;
+  --g3: #e0470b;
+  --g4: #6a3fe0;
+  --g5: #00917a;
+  --g6: #d4003a;
+  --g7: #56657a;
+}
+
+:root[data-mode="dark"] {
+  --paper: #070a10;
+  --paper-raised: #0c111b;
+  --paper-sunk: #05080d;
+  --ink: #d7fbff;
+  --ink-soft: #7fb8c4;
+  --ink-faint: #4d7480;
+  --rule: #13303a;
+  --grid: #0d1e25;
+  --accent: #19e6ff;
+  --accent-soft: #06323b;
+  --cybergrid: repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px), linear-gradient(rgb(25 230 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(25 230 255 / .07) 1px, transparent 1px);
+  --map-canvas: #04060a;
+  --map-size: auto, 32px 32px, 32px 32px;
+  --region-open-alpha: .03;
+  --region-closed-alpha: .10;
+  --route-from: #19e6ff;
+  --route-to: #ff2bd6;
+  --route-both: #5f7f88;
+  --territory-ink: #19e6ff;
+  color-scheme: dark;
+  --reviewed: #5fbf8f;
+  --machine: #93a4b3;
+  --unverified: #e0a847;
+  --stale: #ec7a73;
+  --cat-knowledge: #19e6ff;
+  --cat-code: #ff2bd6;
+  --cat-reports: #ff6b2b;
+  --cat-agent: #2bff9e;
+  --cat-other: #8fa8b3;
+  --g0: #19e6ff;
+  --g1: #ff2bd6;
+  --g2: #ffe600;
+  --g3: #ff6b2b;
+  --g4: #9c7cff;
+  --g5: #2bff9e;
+  --g6: #ff2b5e;
+  --g7: #8fa8b3;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mode="light"]):not([data-mode="dark"]) {
+    --paper: #070a10;
+    --paper-raised: #0c111b;
+    --paper-sunk: #05080d;
+    --ink: #d7fbff;
+    --ink-soft: #7fb8c4;
+    --ink-faint: #4d7480;
+    --rule: #13303a;
+    --grid: #0d1e25;
+    --accent: #19e6ff;
+    --accent-soft: #06323b;
+    --cybergrid: repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px), linear-gradient(rgb(25 230 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(25 230 255 / .07) 1px, transparent 1px);
+    --map-canvas: #04060a;
+    --map-size: auto, 32px 32px, 32px 32px;
+    --region-open-alpha: .03;
+    --region-closed-alpha: .10;
+    --route-from: #19e6ff;
+    --route-to: #ff2bd6;
+    --route-both: #5f7f88;
+    --territory-ink: #19e6ff;
+    color-scheme: dark;
+    --reviewed: #5fbf8f;
+    --machine: #93a4b3;
+    --unverified: #e0a847;
+    --stale: #ec7a73;
+    --cat-knowledge: #19e6ff;
+    --cat-code: #ff2bd6;
+    --cat-reports: #ff6b2b;
+    --cat-agent: #2bff9e;
+    --cat-other: #8fa8b3;
+    --g0: #19e6ff;
+    --g1: #ff2bd6;
+    --g2: #ffe600;
+    --g3: #ff6b2b;
+    --g4: #9c7cff;
+    --g5: #2bff9e;
+    --g6: #ff2b5e;
+    --g7: #8fa8b3;
+  }
+}

rdstudio/web/themes/map.css

@@ -0,0 +1,133 @@
+/* Map: a topographic chart. Folders are tinted land with dash-dot borders on a sea of contours, notes are town dots, routes are cased roads. Dark is a night navigation chart. */
+
+:root {
+  --font-text: "Source Serif 4", Georgia, serif;
+  --font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --text-size: 18px;
+  --radius: 2px;
+  --map-image: var(--contours);
+  --region-open-alpha: .28;
+  --region-closed-alpha: .45;
+  --region-dash: 7 3 1.5 3;
+  --territory-font: "Source Serif 4", Georgia, serif;
+  --territory-style: italic;
+  --territory-weight: 600;
+  --territory-spacing: 0.12em;
+  --territory-size: 15px;
+  --place-font: "Source Sans 3", sans-serif;
+  --route-opacity: .85;
+  --paper: #f3f5f0;
+  --paper-raised: #fbfcf9;
+  --paper-sunk: #e6ebe3;
+  --ink: #23291f;
+  --ink-soft: #4f5a4a;
+  --ink-faint: #838d7f;
+  --rule: #d3dbcf;
+  --grid: #e1e8dd;
+  --accent: #1d4e89;
+  --accent-soft: #dde7f3;
+  --contours: repeating-radial-gradient(circle at 18% 22%, transparent 0 22px, rgb(70 120 140 / .10) 22px 23px), repeating-radial-gradient(circle at 82% 78%, transparent 0 30px, rgb(70 120 140 / .08) 30px 31px);
+  --map-canvas: #d9e7ec;
+  --place-fill: #26302a;
+  --route-from: #1d4e89;
+  --route-to: #b8321f;
+  --route-both: #6c7466;
+  --territory-ink: #3d4a39;
+  color-scheme: light;
+  --reviewed: #2e7a58;
+  --machine: #5b6b7a;
+  --unverified: #a86f12;
+  --stale: #b0413e;
+  --cat-knowledge: #1d4e89;
+  --cat-code: #2f6b3a;
+  --cat-reports: #9a5a14;
+  --cat-agent: #6b5a1a;
+  --cat-other: #6c7466;
+  --g0: #8fb573;
+  --g1: #d8bf78;
+  --g2: #c79a8c;
+  --g3: #a9c28e;
+  --g4: #cdb38f;
+  --g5: #c2cc8a;
+  --g6: #d1a878;
+  --g7: #b8b08f;
+}
+
+:root[data-mode="dark"] {
+  --paper: #0f1822;
+  --paper-raised: #15212d;
+  --paper-sunk: #0b131b;
+  --ink: #e6edf2;
+  --ink-soft: #9fb3c2;
+  --ink-faint: #6d8292;
+  --rule: #233443;
+  --grid: #172533;
+  --accent: #f0b429;
+  --accent-soft: #3a2f12;
+  --contours: repeating-radial-gradient(circle at 18% 22%, transparent 0 22px, rgb(120 170 200 / .07) 22px 23px), repeating-radial-gradient(circle at 82% 78%, transparent 0 30px, rgb(120 170 200 / .05) 30px 31px);
+  --map-canvas: #0a1520;
+  --place-fill: #f3e7c4;
+  --route-from: #5fb3f0;
+  --route-to: #f07a5f;
+  --route-both: #7f93a3;
+  --territory-ink: #c9d6df;
+  color-scheme: dark;
+  --reviewed: #5fbf8f;
+  --machine: #93a4b3;
+  --unverified: #e0a847;
+  --stale: #ec7a73;
+  --cat-knowledge: #8fc1f0;
+  --cat-code: #8fd19e;
+  --cat-reports: #f0b429;
+  --cat-agent: #d8c27a;
+  --cat-other: #9fb3c2;
+  --g0: #3f6b4a;
+  --g1: #6b6040;
+  --g2: #6b4a45;
+  --g3: #4f5f3a;
+  --g4: #5d4c3a;
+  --g5: #5c6638;
+  --g6: #6e5638;
+  --g7: #57553f;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mode="light"]):not([data-mode="dark"]) {
+    --paper: #0f1822;
+    --paper-raised: #15212d;
+    --paper-sunk: #0b131b;
+    --ink: #e6edf2;
+    --ink-soft: #9fb3c2;
+    --ink-faint: #6d8292;
+    --rule: #233443;
+    --grid: #172533;
+    --accent: #f0b429;
+    --accent-soft: #3a2f12;
+    --contours: repeating-radial-gradient(circle at 18% 22%, transparent 0 22px, rgb(120 170 200 / .07) 22px 23px), repeating-radial-gradient(circle at 82% 78%, transparent 0 30px, rgb(120 170 200 / .05) 30px 31px);
+    --map-canvas: #0a1520;
+    --place-fill: #f3e7c4;
+    --route-from: #5fb3f0;
+    --route-to: #f07a5f;
+    --route-both: #7f93a3;
+    --territory-ink: #c9d6df;
+    color-scheme: dark;
+    --reviewed: #5fbf8f;
+    --machine: #93a4b3;
+    --unverified: #e0a847;
+    --stale: #ec7a73;
+    --cat-knowledge: #8fc1f0;
+    --cat-code: #8fd19e;
+    --cat-reports: #f0b429;
+    --cat-agent: #d8c27a;
+    --cat-other: #9fb3c2;
+    --g0: #3f6b4a;
+    --g1: #6b6040;
+    --g2: #6b4a45;
+    --g3: #4f5f3a;
+    --g4: #5d4c3a;
+    --g5: #5c6638;
+    --g6: #6e5638;
+    --g7: #57553f;
+  }
+}

rdstudio/web/themes/notebook.css

@@ -0,0 +1,134 @@
+/* Notebook: an exercise book. Ruled paper, handwritten headings and map labels (Caveat), pencil-rough lines. Dark is a chalkboard. */
+
+:root {
+  --font-text: "Literata", Georgia, serif;
+  --font-ui: "Atkinson", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-heading: "Caveat", "Segoe Print", cursive;
+  --h1-size: 40px;
+  --h1-doc-size: 44px;
+  --h2-size: 28px;
+  --brand-size: 25px;
+  --text-size: 18px;
+  --radius: 3px;
+  --map-image: var(--ruled);
+  --map-size: auto;
+  --region-open-alpha: 0;
+  --region-closed-alpha: .07;
+  --region-dash: 22 2.5 9 1.5 14 2;
+  --territory-font: "Caveat", cursive;
+  --territory-size: 22px;
+  --territory-weight: 700;
+  --territory-spacing: 0.01em;
+  --place-font: "Atkinson", sans-serif;
+  --paper: #fcfcf9;
+  --paper-raised: #ffffff;
+  --paper-sunk: #f1f3f6;
+  --ink: #1e2a4a;
+  --ink-soft: #4b5875;
+  --ink-faint: #8a93a8;
+  --rule: #d8e0ea;
+  --grid: #e4ebf3;
+  --accent: #2748b8;
+  --accent-soft: #e3e9fb;
+  --ruled: linear-gradient(90deg, transparent 63px, #f0b4b0 63px, #f0b4b0 65px, transparent 65px), repeating-linear-gradient(0deg, transparent 0 27px, #d3e2ef 27px 28px);
+  --map-canvas: #fcfcf9;
+  --route-from: #2748b8;
+  --route-to: #c0392b;
+  --route-both: #7d8494;
+  --territory-ink: #2748b8;
+  color-scheme: light;
+  --reviewed: #2e7a58;
+  --machine: #5b6b7a;
+  --unverified: #a86f12;
+  --stale: #b0413e;
+  --cat-knowledge: #2748b8;
+  --cat-code: #1f7a5c;
+  --cat-reports: #7a3fa0;
+  --cat-agent: #c2366b;
+  --cat-other: #5b6273;
+  --g0: #2748b8;
+  --g1: #1f7a5c;
+  --g2: #b5461f;
+  --g3: #7a3fa0;
+  --g4: #9a7a12;
+  --g5: #c2366b;
+  --g6: #3c6e8f;
+  --g7: #5b6273;
+}
+
+:root[data-mode="dark"] {
+  --paper: #1f2a26;
+  --paper-raised: #26332e;
+  --paper-sunk: #19221f;
+  --ink: #ecefe6;
+  --ink-soft: #b9c2b6;
+  --ink-faint: #86917f;
+  --rule: #34443d;
+  --grid: #2a3732;
+  --accent: #f4d35e;
+  --accent-soft: #3b3a26;
+  --ruled: linear-gradient(90deg, transparent 63px, #6b4a4a 63px, #6b4a4a 65px, transparent 65px), repeating-linear-gradient(0deg, transparent 0 27px, #2c3b35 27px 28px);
+  --map-canvas: #1f2a26;
+  --route-from: #8fd3c8;
+  --route-to: #f29e9e;
+  --route-both: #a9b0a4;
+  --territory-ink: #f4d35e;
+  color-scheme: dark;
+  --reviewed: #5fbf8f;
+  --machine: #93a4b3;
+  --unverified: #e0a847;
+  --stale: #ec7a73;
+  --cat-knowledge: #f4d35e;
+  --cat-code: #8fd3c8;
+  --cat-reports: #b8a4e8;
+  --cat-agent: #f6b77c;
+  --cat-other: #c9ccc4;
+  --g0: #f4d35e;
+  --g1: #8fd3c8;
+  --g2: #f29e9e;
+  --g3: #b8a4e8;
+  --g4: #a8d88a;
+  --g5: #f6b77c;
+  --g6: #9ec5f0;
+  --g7: #c9ccc4;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mode="light"]):not([data-mode="dark"]) {
+    --paper: #1f2a26;
+    --paper-raised: #26332e;
+    --paper-sunk: #19221f;
+    --ink: #ecefe6;
+    --ink-soft: #b9c2b6;
+    --ink-faint: #86917f;
+    --rule: #34443d;
+    --grid: #2a3732;
+    --accent: #f4d35e;
+    --accent-soft: #3b3a26;
+    --ruled: linear-gradient(90deg, transparent 63px, #6b4a4a 63px, #6b4a4a 65px, transparent 65px), repeating-linear-gradient(0deg, transparent 0 27px, #2c3b35 27px 28px);
+    --map-canvas: #1f2a26;
+    --route-from: #8fd3c8;
+    --route-to: #f29e9e;
+    --route-both: #a9b0a4;
+    --territory-ink: #f4d35e;
+    color-scheme: dark;
+    --reviewed: #5fbf8f;
+    --machine: #93a4b3;
+    --unverified: #e0a847;
+    --stale: #ec7a73;
+    --cat-knowledge: #f4d35e;
+    --cat-code: #8fd3c8;
+    --cat-reports: #b8a4e8;
+    --cat-agent: #f6b77c;
+    --cat-other: #c9ccc4;
+    --g0: #f4d35e;
+    --g1: #8fd3c8;
+    --g2: #f29e9e;
+    --g3: #b8a4e8;
+    --g4: #a8d88a;
+    --g5: #f6b77c;
+    --g6: #9ec5f0;
+    --g7: #c9ccc4;
+  }
+}

rdstudio/web/themes/space.css

@@ -0,0 +1,135 @@
+/* Space: a star field. Folders are soft-edged nebulae, notes glowing stars, links faint constellation lines. Light is a celestial atlas. */
+
+:root {
+  --font-text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
+  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --text-size: 17px;
+  --radius: 10px;
+  --map-image: var(--stars);
+  --map-size: 260px 260px, 310px 310px, 370px 370px, 230px 230px, 410px 410px, 290px 290px, 100% 100%, 100% 100%;
+  --page-image: var(--page-stars, none);
+  --page-size: 260px 260px, 310px 310px, 370px 370px, 230px 230px;
+  --territory-font: "IBM Plex Mono", monospace;
+  --territory-weight: 500;
+  --territory-spacing: 0.22em;
+  --territory-size: 13px;
+  --place-font: "IBM Plex Sans", sans-serif;
+  --paper: #f6f7fb;
+  --paper-raised: #ffffff;
+  --paper-sunk: #eceff7;
+  --ink: #141b33;
+  --ink-soft: #46507a;
+  --ink-faint: #7f88a8;
+  --rule: #d9deed;
+  --grid: #e6e9f3;
+  --accent: #2b3a8f;
+  --accent-soft: #e2e6f7;
+  --stars: radial-gradient(1px 1px at 12% 18%, #2b3a8f55 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, #2b3a8f44 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 76%, #2b3a8f55 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, #2b3a8f33 50%, transparent 51%), repeating-radial-gradient(circle at 50% 50%, transparent 0 119px, rgb(43 58 143 / .08) 119px 120px);
+  --map-canvas: #f1f3fa;
+  --region-open-alpha: .05;
+  --region-closed-alpha: .12;
+  --route-from: #2b3a8f;
+  --route-to: #c2410c;
+  --route-both: #8c93ad;
+  color-scheme: light;
+  --reviewed: #2e7a58;
+  --machine: #5b6b7a;
+  --unverified: #a86f12;
+  --stale: #b0413e;
+  --cat-knowledge: #3b2fb0;
+  --cat-code: #1673b8;
+  --cat-reports: #a8660b;
+  --cat-agent: #6c3fb0;
+  --cat-other: #4a5578;
+  --g0: #3b2fb0;
+  --g1: #1673b8;
+  --g2: #b0306a;
+  --g3: #a8660b;
+  --g4: #138a6b;
+  --g5: #6c3fb0;
+  --g6: #b5461f;
+  --g7: #4a5578;
+}
+
+:root[data-mode="dark"] {
+  --paper: #0a0e1a;
+  --paper-raised: #10162a;
+  --paper-sunk: #070a14;
+  --ink: #e6e9f5;
+  --ink-soft: #a8b0cc;
+  --ink-faint: #6c7596;
+  --rule: #1e2640;
+  --grid: #111831;
+  --accent: #8ab4ff;
+  --accent-soft: #1a2548;
+  --stars: radial-gradient(1px 1px at 12% 18%, #ffffffcc 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, #ffffffaa 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 76%, #cfe0ff 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, #ffffff99 50%, transparent 51%), radial-gradient(1px 1px at 55% 8%, #ffe9c7aa 50%, transparent 51%), radial-gradient(1px 1px at 24% 52%, #ffffff77 50%, transparent 51%), radial-gradient(ellipse at 70% 30%, rgb(90 70 200 / .10), transparent 60%), radial-gradient(ellipse at 20% 80%, rgb(40 140 220 / .08), transparent 55%);
+  --map-canvas: #05070f;
+  --page-stars: radial-gradient(1px 1px at 12% 18%, #ffffffcc 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, #ffffffaa 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 76%, #cfe0ff 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, #ffffff99 50%, transparent 51%), radial-gradient(1px 1px at 55% 8%, #ffe9c7aa 50%, transparent 51%), radial-gradient(1px 1px at 24% 52%, #ffffff77 50%, transparent 51%);
+  --region-open-alpha: .10;
+  --region-closed-alpha: .22;
+  --route-from: #8ab4ff;
+  --route-to: #ffcf6b;
+  --route-both: #7a86a8;
+  --territory-ink: #c6cdea;
+  color-scheme: dark;
+  --reviewed: #5fbf8f;
+  --machine: #93a4b3;
+  --unverified: #e0a847;
+  --stale: #ec7a73;
+  --cat-knowledge: #7c5cff;
+  --cat-code: #3fb8ff;
+  --cat-reports: #ffb84d;
+  --cat-agent: #b07cff;
+  --cat-other: #9aa4c2;
+  --g0: #7c5cff;
+  --g1: #3fb8ff;
+  --g2: #ff5c9a;
+  --g3: #ffb84d;
+  --g4: #41e0b0;
+  --g5: #b07cff;
+  --g6: #ff7a45;
+  --g7: #9aa4c2;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mode="light"]):not([data-mode="dark"]) {
+    --paper: #0a0e1a;
+    --paper-raised: #10162a;
+    --paper-sunk: #070a14;
+    --ink: #e6e9f5;
+    --ink-soft: #a8b0cc;
+    --ink-faint: #6c7596;
+    --rule: #1e2640;
+    --grid: #111831;
+    --accent: #8ab4ff;
+    --accent-soft: #1a2548;
+    --stars: radial-gradient(1px 1px at 12% 18%, #ffffffcc 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, #ffffffaa 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 76%, #cfe0ff 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, #ffffff99 50%, transparent 51%), radial-gradient(1px 1px at 55% 8%, #ffe9c7aa 50%, transparent 51%), radial-gradient(1px 1px at 24% 52%, #ffffff77 50%, transparent 51%), radial-gradient(ellipse at 70% 30%, rgb(90 70 200 / .10), transparent 60%), radial-gradient(ellipse at 20% 80%, rgb(40 140 220 / .08), transparent 55%);
+    --map-canvas: #05070f;
+    --page-stars: radial-gradient(1px 1px at 12% 18%, #ffffffcc 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, #ffffffaa 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 76%, #cfe0ff 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, #ffffff99 50%, transparent 51%), radial-gradient(1px 1px at 55% 8%, #ffe9c7aa 50%, transparent 51%), radial-gradient(1px 1px at 24% 52%, #ffffff77 50%, transparent 51%);
+    --region-open-alpha: .10;
+    --region-closed-alpha: .22;
+    --route-from: #8ab4ff;
+    --route-to: #ffcf6b;
+    --route-both: #7a86a8;
+    --territory-ink: #c6cdea;
+    color-scheme: dark;
+    --reviewed: #5fbf8f;
+    --machine: #93a4b3;
+    --unverified: #e0a847;
+    --stale: #ec7a73;
+    --cat-knowledge: #7c5cff;
+    --cat-code: #3fb8ff;
+    --cat-reports: #ffb84d;
+    --cat-agent: #b07cff;
+    --cat-other: #9aa4c2;
+    --g0: #7c5cff;
+    --g1: #3fb8ff;
+    --g2: #ff5c9a;
+    --g3: #ffb84d;
+    --g4: #41e0b0;
+    --g5: #b07cff;
+    --g6: #ff7a45;
+    --g7: #9aa4c2;
+  }
+}