six-degrees 0.2.0 → 0.2.1

package/.next/standalone/scripts/gen-synthetic.mjs

@@ -179,6 +179,21 @@ function main() {
     const circle = Array.from({ length: size }, () => person(2, b.id));
     degree2.push(...circle);
   }
+  // In a real network some people are known by more than one of your
+  // connections: that is what "reachable 2+ ways" counts, and what makes
+  // sorting Degrees by ways in worth doing. About one in seven gets a second
+  // route, and some of those a third. Same person, same profile, another bridge.
+  const shared = [];
+  for (const p of degree2) {
+    if (rand() >= 0.15) continue;
+    const others = bridges.filter((b) => b.id !== p.source_connection_id);
+    const routes = rand() < 0.3 ? 2 : 1;
+    for (let k = 0; k < routes; k++) {
+      const b = others.splice(Math.floor(rand() * others.length), 1)[0];
+      shared.push({ ...p, id: `${p.id}-via${k + 1}`, source_connection_id: b.id, influence_signals: {} });
+    }
+  }
+  degree2.push(...shared);
   // Everyone again, together: circles now exist, so bridges get their boost.
   scoreRows([...degree1, ...degree2]);
   degree1.sort((a, b) => b.power_score - a.power_score);
@@ -205,7 +220,7 @@ function main() {
   const kb = Math.round(JSON.stringify(payload).length / 1024);
   console.log(`wrote ${out}  (${kb} KB, seed ${seed})`);
   console.log(`  1st degree : ${degree1.length}`);
-  console.log(`  2nd degree : ${degree2.length} across ${BRIDGE_COUNT} bridges`);
+  console.log(`  2nd degree : ${degree2.length - shared.length} people across ${BRIDGE_COUNT} bridges, ${new Set(shared.map((r) => r.profile_url)).size} of them reachable 2+ ways`);
   console.log(`  catalysts  : ${bridges.filter((b) => b.is_catalyst).length}`);
   console.log(`  tier mix   : ${['S','A','B','C','D'].map((t) => `${t}:${tiers[t] || 0}`).join('  ')}`);
 }

package/.next/standalone/scripts/readme_buttons.py

@@ -0,0 +1,89 @@
+#!/usr/bin/env python3
+"""Draw the README's download buttons.
+
+A GitHub README can't style links, so the buttons are pictures: drawn here from
+HTML in Chrome, with the app icon inside, and saved at twice their shown size so
+they stay sharp. Each has its own background, so it reads on GitHub's light and
+dark themes alike. No server needed:
+
+    python3 scripts/readme_buttons.py
+
+Requires playwright (pip3 install playwright) and Google Chrome. Redraw whenever
+the icon (desktop/icon/icon.svg) or the wording changes.
+"""
+import pathlib
+import re
+import sys
+
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+OUT = ROOT / "docs" / "img"
+ICON = (ROOT / "desktop" / "icon" / "icon.svg").read_text()
+# The icon's artwork sits in its 1024 canvas with a margin (the macOS grid).
+# Cropping to the rounded square lets it fill its spot in the button. A new
+# icon with another canvas needs a new crop, so stop rather than draw it wrong.
+CROP = "100 100 824 824"
+root = re.search(r"<svg\b[^>]*>", ICON)
+if not root or 'viewBox="0 0 1024 1024"' not in root.group(0):
+    sys.exit('desktop/icon/icon.svg is no longer a 1024 canvas (viewBox="0 0 1024 1024"): '
+             "update CROP in scripts/readme_buttons.py, then look at docs/img/download-*.png")
+tag = re.sub(r'\s(?:viewBox|width|height)="[^"]*"', "", root.group(0))
+ICON = ICON[:root.start()] + tag.replace("<svg", f'<svg viewBox="{CROP}"', 1) + ICON[root.end():]
+
+ARROW = """<svg class="arrow" viewBox="0 0 24 24" width="30" height="30" aria-hidden="true">
+  <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.6" opacity=".55"/>
+  <path d="M12 6.5v9M7.8 11.6 12 15.8l4.2-4.2" fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round"/></svg>"""
+
+# (file, top line, big line, bottom line, style)
+BUTTONS = [
+    ("download-apple-silicon.png", "Click to download for Mac", "Apple Silicon", "M1 or newer", "green"),
+    ("download-intel.png",         "Click to download for Mac", "Intel",         "Macs with an Intel chip", "slate"),
+]
+
+CSS = """
+* { box-sizing: border-box; margin: 0; }
+body { background: transparent; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+       -webkit-font-smoothing: antialiased; }
+.pad { display: inline-block; padding: 6px 8px 12px; }
+.btn { display: flex; align-items: center; gap: 16px; width: 330px; padding: 13px 18px 13px 14px;
+       border-radius: 16px; color: #fff; }
+/* Dark enough that white text passes WCAG AA (4.5:1) everywhere on it. */
+.green { background: linear-gradient(180deg, #1f883d 0%, #1a7f37 55%, #116329 100%);
+         box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 1px rgba(0,0,0,.12), 0 6px 16px rgba(17,99,41,.35); }
+.slate { background: linear-gradient(180deg, #3a414a 0%, #2b3137 55%, #24292f 100%);
+         box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 0 0 1px rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.28); }
+.icon { flex: none; width: 56px; height: 56px; border-radius: 13px; overflow: hidden;
+        box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.35); }
+.icon svg { display: block; width: 56px; height: 56px; }
+.text { flex: 1; min-width: 0; line-height: 1.15; }
+.top { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
+.big { font-size: 25px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 3px; }
+.sub { font-size: 13.5px; font-weight: 500; }
+.arrow { flex: none; color: #fff; }
+"""
+
+
+def button_html(top, big, sub, style):
+    return f"""<!doctype html><html><head><style>{CSS}</style></head><body>
+<div class="pad" id="shot"><div class="btn {style}">
+  <div class="icon">{ICON}</div>
+  <div class="text"><div class="top">{top}</div><div class="big">{big}</div><div class="sub">{sub}</div></div>
+  {ARROW}
+</div></div></body></html>"""
+
+
+def main():
+    from playwright.sync_api import sync_playwright
+
+    with sync_playwright() as p:
+        browser = p.chromium.launch(channel="chrome")
+        page = browser.new_page(viewport={"width": 600, "height": 200}, device_scale_factor=2)
+        for name, top, big, sub, style in BUTTONS:
+            page.set_content(button_html(top, big, sub, style))
+            page.locator("#shot").screenshot(path=str(OUT / name), omit_background=True)
+            print(f"  wrote docs/img/{name}")
+        browser.close()
+
+
+if __name__ == "__main__":
+    main()

package/.next/standalone/scripts/screenshots.py

@@ -102,6 +102,8 @@ def main():
             if script:
                 page.evaluate(script)
                 page.wait_for_timeout(1500)
+            # The dev server's own badge (Next.js's "N" in a corner) isn't part of the app.
+            page.add_style_tag(content="nextjs-portal { display: none !important; }")
             page.screenshot(path=str(OUT / name))
             print(f"  wrote docs/img/{name}")
 

package/.next/standalone/site/app.js

@@ -0,0 +1,84 @@
+// The download page's small helpers. The page works fully without them.
+//   1. Not on a Mac: say so plainly, with the Linux route.
+//   2. A likely chip: if the graphics card name gives it away (Chrome shows
+//      "Apple M…", or "Intel"), point at that download. Safari hides it; then
+//      nothing is guessed and both buttons stay equal.
+//   3. The latest version and its size, asked of GitHub once. If that fails,
+//      the page keeps its fallback line.
+//   4. A Copy button for the Terminal line.
+
+(() => {
+  const $ = (id) => document.getElementById(id);
+  const ua = navigator.userAgent || '';
+  // iPadOS Safari says "Macintosh", so an iPad is a "Mac" with a touch screen.
+  const isPhone = /iPhone|iPad|Android/.test(ua) || (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1);
+  const isMac = /Macintosh|Mac OS X/.test(ua) && !isPhone;
+  let chip = null;
+
+  if (!isMac) {
+    if (isPhone) {
+      $('not-mac').textContent = "You're on a phone or tablet. Six Degrees is a Mac app: open this page on your Mac to download it.";
+    }
+    $('not-mac').hidden = false;
+  } else {
+    chip = guessChip();
+    if (chip) {
+      const pick = chip === 'silicon' ? $('dl-silicon') : $('dl-intel');
+      pick.classList.add('suggested');
+      $('chip-guess').textContent = chip === 'silicon'
+        ? 'This looks like an Apple Silicon Mac: take the Apple Silicon download.'
+        : 'This looks like an Intel Mac: take the Intel download.';
+      $('chip-guess').hidden = false;
+    }
+  }
+
+  function guessChip() {
+    try {
+      const gl = document.createElement('canvas').getContext('webgl');
+      const info = gl && gl.getExtension('WEBGL_debug_renderer_info');
+      const name = info ? String(gl.getParameter(info.UNMASKED_RENDERER_WEBGL)) : '';
+      if (/Apple M\d/.test(name)) return 'silicon';
+      if (/Intel|AMD|Radeon/.test(name)) return 'intel';
+    } catch { /* no WebGL: no guess */ }
+    return null;
+  }
+
+  fetch('https://api.github.com/repos/blakeb056/six-degrees/releases/latest', { headers: { Accept: 'application/vnd.github+json' } })
+    .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
+    .then((release) => {
+      const version = String(release.tag_name || '').replace(/^v/, '');
+      if (!version) return;
+      const mb = (name) => {
+        const a = (release.assets || []).find((x) => x.name === name);
+        return a ? Math.round(a.size / 1e6) : null;
+      };
+      const silicon = mb('Six-Degrees-Mac-Apple-Silicon.dmg');
+      const intel = mb('Six-Degrees-Mac-Intel.dmg');
+      // The size of the download this Mac needs, when we know which; else both.
+      let size = '';
+      if (chip === 'silicon' && silicon) size = ` · ${silicon} MB`;
+      else if (chip === 'intel' && intel) size = ` · ${intel} MB`;
+      else if (silicon && intel) size = ` · ${silicon} MB (Apple Silicon), ${intel} MB (Intel)`;
+      $('version-line').textContent = `Version ${version} · macOS 13.5 or later${size} · free and open source`;
+    })
+    .catch(() => { /* keep the fallback line */ });
+
+  const copy = $('copy');
+  copy.addEventListener('click', async () => {
+    const text = $('cmd').textContent.trim();
+    try {
+      await navigator.clipboard.writeText(text);
+      copy.textContent = 'Copied';
+      $('copy-status').textContent = 'Install command copied.';
+    } catch {
+      const range = document.createRange();
+      range.selectNodeContents($('cmd'));
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+      copy.textContent = 'Press ⌘C';
+      $('copy-status').textContent = 'Install command selected. Press Command C to copy it.';
+    }
+    setTimeout(() => { copy.textContent = 'Copy'; }, 1800);
+  });
+})();

package/.next/standalone/site/index.html

@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Six Degrees — see your LinkedIn network as a galaxy</title>
+  <meta name="description" content="A free Mac app that maps your LinkedIn network: who you know, who they know, and the shortest path to someone you haven't met. Runs on your own computer; nothing is uploaded.">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self'; style-src 'self'; script-src 'self'; connect-src https://api.github.com; base-uri 'none'; form-action 'none'">
+  <meta name="referrer" content="no-referrer">
+  <meta property="og:title" content="Six Degrees">
+  <meta property="og:description" content="A free Mac app that maps your LinkedIn network as a galaxy. Runs on your own computer.">
+  <meta property="og:image" content="https://blakeb056.github.io/six-degrees/img/app-window.png">
+  <meta name="theme-color" content="#0b0a1c">
+  <link rel="icon" href="img/icon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="style.css?v=2026-09-25">
+  <script src="app.js?v=2026-09-25" defer></script>
+</head>
+<body>
+  <header class="top">
+    <a class="brand" href="./"><img src="img/icon.svg" alt="" width="32" height="32"> Six Degrees</a>
+    <nav>
+      <a href="#install">Install</a>
+      <a href="#what">What it does</a>
+      <a href="#privacy">Privacy</a>
+      <a href="https://github.com/blakeb056/six-degrees">GitHub</a>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero">
+      <img class="app-icon" src="img/icon.svg" alt="" width="96" height="96">
+      <h1>See your LinkedIn network <br>as a galaxy.</h1>
+      <p class="lede">Who you know, who <em>they</em> know, and the shortest path to someone you haven't met.
+        A free Mac app that runs on your own computer. Nothing is uploaded.</p>
+
+      <p class="not-mac" id="not-mac" role="status" hidden>
+        Six Degrees is a Mac app. On Linux, run <code>npx six-degrees</code> (Node 22.13 or later;
+        <a href="#linux">details</a>).
+        Windows isn't supported yet.
+      </p>
+
+      <div class="downloads" id="download">
+        <a class="dl primary" id="dl-silicon" href="https://github.com/blakeb056/six-degrees/releases/latest/download/Six-Degrees-Mac-Apple-Silicon.dmg">
+          <span class="dl-title">Download for Mac</span>
+          <span class="dl-sub">Apple Silicon (M1 or newer)</span>
+        </a>
+        <a class="dl" id="dl-intel" href="https://github.com/blakeb056/six-degrees/releases/latest/download/Six-Degrees-Mac-Intel.dmg">
+          <span class="dl-title">Download for Mac</span>
+          <span class="dl-sub">Intel</span>
+        </a>
+      </div>
+      <p class="fine" id="version-line">macOS 13.5 or later · about 185–190 MB · free and open source</p>
+      <p class="guess" id="chip-guess" hidden></p>
+      <p class="fine watch"><a href="#install">New here? Watch how to install it (about a minute)</a></p>
+
+      <img class="shot" src="img/app-window.png" srcset="img/app-window-1200.png 1200w, img/app-window.png 3136w" sizes="(max-width: 1120px) calc(100vw - 32px), 1072px" alt="Six Degrees on a Mac: your network drawn as circles around you, the most powerful people closest" width="3136" height="2118">
+      <p class="caption">Every person shown on this page is invented.</p>
+    </section>
+
+    <section class="install" id="install">
+      <h2>Install it in a minute</h2>
+      <figure class="video">
+        <video controls muted playsinline preload="metadata" poster="video/install-mac-poster.jpg" width="1920" height="1080" aria-label="Video: installing Six Degrees on a Mac">
+          <source src="video/install-mac.mp4" type="video/mp4">
+        </video>
+        <figcaption><strong>Installing on a Mac, step by step</strong> (about a minute): the download, the one-time macOS
+          warning and Open Anyway, or the one-line Terminal install, then a first look.</figcaption>
+      </figure>
+      <div class="which">
+        <strong>Which download?</strong> Apple menu → <strong>About This Mac</strong>.
+        "Chip: Apple M…" means <strong>Apple Silicon</strong>. "Processor: …Intel…" means <strong>Intel</strong>.
+      </div>
+
+      <ol class="steps" role="list">
+        <li>
+          <h3>Drag it into Applications</h3>
+          <p>Open the file you downloaded (<strong>Six-Degrees-Mac-….dmg</strong>, in your Downloads folder).
+            In the window that opens, drag <strong>Six Degrees</strong> onto the <strong>Applications</strong> folder.</p>
+        </li>
+        <li>
+          <h3>Open it once, and close the warning</h3>
+          <p>Open <strong>Six Degrees</strong> from Applications. macOS says it can't check the app for malware,
+            because it isn't signed with a paid Apple certificate yet. Close that message with <strong>Done</strong>
+            (on macOS 13 or 14: <strong>OK</strong> or <strong>Cancel</strong>). Anything except <em>Move to Trash</em>.</p>
+        </li>
+        <li>
+          <h3>Allow it in System Settings</h3>
+          <p>Open <strong>System Settings → Privacy &amp; Security</strong>, scroll down to
+            <em>"Six Degrees" was blocked</em>, and click <strong>Open Anyway</strong>. Confirm with
+            <strong>Open Anyway</strong> again (on macOS 13 or 14: <strong>Open</strong>), and your password if asked. That's once per download; after that it opens like any app.</p>
+        </li>
+      </ol>
+
+      <div class="terminal">
+        <h3>Or skip those steps with Terminal</h3>
+        <p>Press <kbd>⌘</kbd> <kbd>Space</kbd>, type <em>Terminal</em> and press Return. Paste this line and press Return:</p>
+        <div class="cmd">
+          <code id="cmd">curl -fsSL https://raw.githubusercontent.com/blakeb056/six-degrees/main/install.sh | bash</code>
+          <button type="button" id="copy" aria-label="Copy the install command">Copy</button>
+        </div>
+        <span id="copy-status" class="sr-only" role="status"></span>
+        <p class="fine">It downloads the right version for your Mac, checks the file is exactly the one published,
+          puts Six Degrees in Applications and opens it. Running it again updates the app.
+          <a href="https://github.com/blakeb056/six-degrees/blob/main/install.sh">Read the script</a>.</p>
+      </div>
+    </section>
+
+    <section class="linux" id="linux">
+      <h2>On Linux</h2>
+      <figure class="video">
+        <video controls muted playsinline preload="metadata" poster="video/linux-poster.jpg" width="1920" height="1080" aria-label="Video: running Six Degrees on Linux">
+          <source src="video/linux.mp4" type="video/mp4">
+        </video>
+        <figcaption><strong>Running it on Linux</strong> (half a minute): one command, then the same app in your browser.</figcaption>
+      </figure>
+      <div class="terminal">
+        <h3>One command</h3>
+        <p>Install <strong>Node 22.13 or later</strong> (from nodejs.org or nvm; Ubuntu's own <code>nodejs</code> package is
+          too old), then run:</p>
+        <div class="cmd"><code>npx six-degrees</code></div>
+        <p class="fine">It opens <code>http://127.0.0.1:6363</code> in your browser and keeps your data in
+          <code>~/.six-degrees</code>. Stop it with Ctrl-C; update it with <code>npx six-degrees@latest</code>. Scanning
+          also needs Google Chrome (not Chromium) and Python 3.9 or later with venv (on Ubuntu:
+          <code>sudo apt install python3-venv</code>). Windows isn't supported yet.</p>
+      </div>
+    </section>
+
+    <section class="what" id="what">
+      <h2>What it shows you</h2>
+      <div class="features">
+        <article>
+          <h3>Network Circle</h3>
+          <p>Everyone you know on rings by how much they can open up for you, the most powerful closest to you.</p>
+        </article>
+        <article>
+          <h3>Degrees</h3>
+          <p>The people two steps away, ranked, each with every way in: which of your connections can introduce you.
+            Needs a scan, or try it with the sample.</p>
+        </article>
+        <article>
+          <h3>Paths</h3>
+          <p>Your network by company and industry: who you know at each company, who you can reach, and the warmest way in.</p>
+        </article>
+        <article>
+          <h3>Outlink</h3>
+          <p>Getting introduced, as a game: work through each connection's circle five people at a time. Needs a scan.</p>
+        </article>
+      </div>
+
+      <figure>
+        <img src="img/degrees.png" srcset="img/degrees-1200.png 1200w, img/degrees.png 2880w" sizes="(max-width: 1120px) calc(100vw - 32px), 1072px" alt="Screenshot of the Degrees view" width="2880" height="1800" loading="lazy">
+        <figcaption><strong>Degrees.</strong> Everyone two steps away, ranked, with the connection who can introduce you.</figcaption>
+      </figure>
+      <figure>
+        <img src="img/paths.png" srcset="img/paths-1200.png 1200w, img/paths.png 2880w" sizes="(max-width: 1120px) calc(100vw - 32px), 1072px" alt="Screenshot of the Paths view" width="2880" height="1800" loading="lazy">
+        <figcaption><strong>Paths.</strong> Companies grouped by industry, and for any one of them, who's there and how to reach them.</figcaption>
+      </figure>
+    </section>
+
+    <section class="ways">
+      <h2>Three ways to bring your network in</h2>
+      <div class="cards">
+        <article>
+          <h3>Explore a sample</h3>
+          <p>150 invented connections and the 598 people they know. Every view except Outlink, which needs your own scan.</p>
+        </article>
+        <article>
+          <h3>Import LinkedIn's export</h3>
+          <p>LinkedIn's own <code>Connections.csv</code>, read on your Mac. It shows the people you know, not who they
+            know (so no Degrees or Outlink), and there's no risk to your LinkedIn account.</p>
+        </article>
+        <article>
+          <h3>Scan your LinkedIn</h3>
+          <p>The only way to see who <em>your connections</em> know. The app opens Google Chrome with a profile of its
+            own, you sign into LinkedIn there yourself, and it reads slowly with daily limits. Needs Google Chrome (in
+            Applications) and Python 3.9 or later.</p>
+        </article>
+      </div>
+      <p class="warning"><strong>Scanning uses your own LinkedIn account, and LinkedIn may restrict accounts that
+        automate it.</strong> Automating LinkedIn may break its User Agreement. It happened twice while building this
+        app. The scanner now reads slowly, keeps to a budget and stops at the first push-back, but the risk is yours.
+        The sample and the CSV import carry no LinkedIn risk at all.</p>
+      <figure class="video" id="scanning">
+        <video controls muted playsinline preload="metadata" poster="video/scan-poster.jpg" width="1920" height="1080" aria-label="Video: how scanning works">
+          <source src="video/scan.mp4" type="video/mp4">
+        </video>
+        <figcaption><strong>How scanning works</strong> (under a minute): install what it needs, sign into LinkedIn in the Chrome
+          window it opens, scan the people you know, then map who they know a few at a time.</figcaption>
+      </figure>
+    </section>
+
+    <section class="privacy" id="privacy">
+      <h2>Your network stays on your Mac</h2>
+      <ul role="list">
+        <li><strong>No account, no server.</strong> Everything stays on your computer: your network in a hidden
+          <code>.six-degrees</code> folder, and the app window's own storage (including an imported CSV) in
+          <code>~/Library/Application Support/Six Degrees</code>.</li>
+        <li><strong>Nothing is uploaded.</strong> No telemetry, no analytics, no crash reports.</li>
+        <li><strong>It only goes online when you act:</strong> LinkedIn while you scan (and for profile photos
+          until they're saved on your Mac), PyPI once to set up the scanner, and GitHub when you check for updates.</li>
+        <li><strong>Open source.</strong> Every line is on <a href="https://github.com/blakeb056/six-degrees">GitHub</a>,
+          under the MIT licence.</li>
+      </ul>
+      <p class="fine">This page has no trackers either. To show the latest version number, it asks GitHub once.</p>
+    </section>
+
+    <section class="again">
+      <a class="dl primary" href="#download">
+        <span class="dl-title">Get Six Degrees</span>
+        <span class="dl-sub">Free for Mac</span>
+      </a>
+    </section>
+  </main>
+
+  <footer>
+    <p>Six Degrees · MIT licence · <a href="https://github.com/blakeb056/six-degrees">Source on GitHub</a> ·
+      <a href="https://github.com/blakeb056/six-degrees/releases">All releases</a></p>
+    <p class="fine">It estimates network position, not what anyone is worth as a person.</p>
+  </footer>
+</body>
+</html>

package/.next/standalone/site/style.css

@@ -0,0 +1,155 @@
+/* The Six Degrees download page. System fonts, no external requests. */
+
+:root {
+  --bg: #0b0a1c;
+  --bg-2: #12102a;
+  --panel: rgba(255, 255, 255, 0.04);
+  --line: rgba(255, 255, 255, 0.1);
+  --text: #eef0f6;
+  --muted: #a9aec4;
+  --faint: #9297ad;
+  --green: #1a7f37;
+  --green-2: #238636;
+  --gold: #ffd700;
+  --purple: #9b59b6;
+  --blue: #3498db;
+  --orange: #ff8a3d;
+  --radius: 14px;
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  background: radial-gradient(ellipse 120% 60% at 50% 0%, #2a2350 0%, var(--bg-2) 45%, var(--bg) 80%) no-repeat, var(--bg);
+  color: var(--text);
+  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: #8fc7ff; }
+a:hover { color: #b9dcff; }
+:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
+img, video { max-width: 100%; height: auto; }
+code, kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }
+kbd { padding: 1px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--panel); }
+
+.top {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
+}
+.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; }
+.top nav { display: flex; gap: 22px; flex-wrap: wrap; }
+.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
+.top nav a:hover { color: var(--text); }
+
+main { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
+section { padding: 56px 0; }
+h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
+h2 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 20px; text-align: center; }
+h3 { font-size: 19px; margin: 0 0 6px; }
+.fine { color: var(--faint); font-size: 14px; }
+
+/* hero */
+.hero { text-align: center; padding-top: 32px; }
+.app-icon { display: block; margin: 0 auto 18px; filter: drop-shadow(0 10px 30px rgba(155, 89, 182, 0.35)); }
+.hero h1 { font-size: clamp(34px, 6vw, 58px); margin: 0 0 16px; font-weight: 800; }
+.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 640px; margin: 0 auto 28px; }
+
+.downloads { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
+.dl {
+  display: inline-flex; flex-direction: column; align-items: center; min-width: 250px;
+  padding: 14px 26px; border-radius: 12px; text-decoration: none; color: var(--text);
+  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line);
+  transition: transform 0.12s ease, background 0.12s ease;
+}
+.dl:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.11); color: var(--text); }
+.dl.primary { background: linear-gradient(180deg, var(--green-2), var(--green)); border-color: transparent; color: #fff; box-shadow: 0 10px 30px rgba(46, 164, 79, 0.3); }
+.dl.primary:hover { background: linear-gradient(180deg, #1f883d, #196c2e); }
+.dl.primary .dl-sub { opacity: 1; }
+.dl.suggested { outline: 2px solid var(--gold); outline-offset: 3px; }
+.dl.suggested:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
+.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.dl-title { font-weight: 700; font-size: 18px; }
+.dl-sub { font-size: 14px; opacity: 0.85; }
+.hero .fine { margin: 14px 0 0; }
+.guess { color: var(--gold); font-size: 14px; margin: 6px 0 0; }
+.not-mac { max-width: 560px; margin: 0 auto 18px; padding: 12px 16px; border-radius: 10px; background: rgba(255, 138, 61, 0.1); border: 1px solid rgba(255, 138, 61, 0.35); color: var(--text); font-size: 15px; }
+.shot { display: block; margin: 44px auto 6px; border-radius: 12px; }
+.caption { color: var(--faint); font-size: 13px; margin: 0; }
+
+/* install */
+.which { max-width: 760px; margin: 0 auto 24px; padding: 14px 18px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); text-align: center; color: var(--muted); }
+.which strong { color: var(--text); }
+.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 0 0 24px; }
+.steps li { counter-increment: step; position: relative; padding: 22px 20px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
+.steps li::before {
+  content: counter(step); position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; border-radius: 50%;
+  display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #0b0a1c; background: var(--gold);
+}
+.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }
+.steps strong { color: var(--text); }
+.terminal { max-width: 860px; margin: 0 auto; padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
+.terminal p { color: var(--muted); margin: 6px 0; }
+.cmd { display: flex; gap: 10px; align-items: stretch; margin: 12px 0; }
+.cmd code { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 10px; background: #05040f; border: 1px solid var(--line); color: #d8f5dc; }
+.cmd button {
+  flex: none; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer;
+  background: rgba(255, 255, 255, 0.08); color: var(--text); font: inherit; font-weight: 600; font-size: 15px;
+}
+.cmd button:hover { background: rgba(255, 255, 255, 0.14); }
+
+/* the tutorial videos (silent: the captions are in the picture). index.html asks for
+   this file by version (style.css?v=…): a browser holding the old copy drew them at
+   their full 1920px, off-centre. Bump the version whenever the page's layout changes. */
+.watch { margin: 8px 0 0; }
+.video { max-width: 860px; margin: 0 auto 32px; }
+.video video { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #05040f; }
+.ways .video { margin: 32px auto 0; }
+
+/* what it does */
+.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
+.features article, .cards article { padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
+.features article:nth-child(1) h3 { color: var(--gold); }
+.features article:nth-child(2) h3 { color: var(--orange); }
+.features article:nth-child(3) h3 { color: #3ee08f; }
+.features article:nth-child(4) h3 { color: #ff9f5a; }
+.features p, .cards p { margin: 0; color: var(--muted); font-size: 15.5px; }
+figure { margin: 0 0 28px; }
+figure img { display: block; border-radius: 12px; border: 1px solid var(--line); }
+figcaption { color: var(--muted); font-size: 15px; margin-top: 10px; text-align: center; }
+figcaption strong { color: var(--text); }
+
+/* ways in */
+.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.warning { max-width: 860px; margin: 22px auto 0; padding: 14px 18px; border-radius: 10px; background: rgba(255, 215, 0, 0.07); border: 1px solid rgba(255, 215, 0, 0.3); color: var(--muted); font-size: 15px; }
+.warning strong { color: var(--text); }
+
+/* privacy */
+.privacy ul { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 10px; }
+.privacy li { padding: 14px 18px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
+.privacy li strong { color: var(--text); }
+.privacy .fine { text-align: center; }
+
+.again { text-align: center; padding-top: 8px; }
+
+footer { max-width: 1120px; margin: 0 auto; padding: 40px 24px 56px; text-align: center; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
+
+@media (max-width: 860px) {
+  .steps, .features, .cards { grid-template-columns: 1fr; }
+  .steps { gap: 26px; }
+  section { padding: 40px 0; }
+}
+@media (max-width: 520px) {
+  body { font-size: 16px; }
+  .hero h1 br { display: none; }
+  .top nav { gap: 16px; }
+  .top nav a:not(:last-child) { display: none; }
+  .dl { min-width: 0; width: 100%; }
+  .cmd { flex-direction: column; }
+  .cmd button { padding: 10px; }
+  .top, main { padding-left: 16px; padding-right: 16px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  .dl { transition: none; }
+}