six-degrees 0.6.0 → 0.7.0

package/.next/standalone/app/components/ui.js

@@ -4,7 +4,7 @@
 // (UpdatePanel uses them). The Scan page still keeps its own private copies;
 // new screens should use these rather than adding another.
 
-export const LINE = '1px solid rgba(255,255,255,0.1)';
+export const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 // The theme's font (lib/themes.js), Standard's until one is applied.
 export const FONT = 'var(--sd-font)';
 
@@ -21,7 +21,7 @@ export function Section({ id, title, intro, children }) {
 
 export function Body({ children, style }) {
   return (
-    <div style={{ fontSize: 13.5, color: '#8b9a9a', lineHeight: 1.6, marginTop: 4, ...style }}>
+    <div style={{ fontSize: 13.5, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6, marginTop: 4, ...style }}>
       {children}
     </div>
   );
@@ -29,7 +29,7 @@ export function Body({ children, style }) {
 
 export function Mono({ children }) {
   return (
-    <code style={{ background: 'rgba(255,255,255,0.08)', padding: '1px 5px', borderRadius: 4, wordBreak: 'break-all' }}>
+    <code style={{ background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', padding: '1px 5px', borderRadius: 4, wordBreak: 'break-all' }}>
       {children}
     </code>
   );
@@ -38,8 +38,8 @@ export function Mono({ children }) {
 /** The answer to an action, where it can't be missed. tone: 'ok' | 'bad' | undefined. */
 export function Status({ children, tone }) {
   const color = tone === 'ok' ? '#00ff88' : tone === 'bad' ? '#ff7676' : '#e8e8ee';
-  const bg = tone === 'ok' ? 'rgba(0,255,136,0.08)' : tone === 'bad' ? 'rgba(255,80,80,0.08)' : 'rgba(255,255,255,0.05)';
-  const border = tone === 'ok' ? 'rgba(0,255,136,0.3)' : tone === 'bad' ? 'rgba(255,80,80,0.3)' : 'rgba(255,255,255,0.12)';
+  const bg = tone === 'ok' ? 'rgba(0,255,136,0.08)' : tone === 'bad' ? 'rgba(255,80,80,0.08)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.05)';
+  const border = tone === 'ok' ? 'rgba(0,255,136,0.3)' : tone === 'bad' ? 'rgba(255,80,80,0.3)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.12)';
   return (
     <div role="status" style={{
       marginTop: 10, padding: '10px 14px', borderRadius: 8, fontSize: 13.5, lineHeight: 1.6,
@@ -51,12 +51,12 @@ export function Status({ children, tone }) {
 export function Btn({ children, onClick, disabled, primary, tone, type = 'button' }) {
   const bg = tone === 'bad' ? 'rgba(255,80,80,0.15)'
     : primary ? 'linear-gradient(135deg, #9B59B6, #3498DB)'
-    : 'rgba(255,255,255,0.08)';
+    : 'rgba(var(--sd-ink, 255, 255, 255), 0.08)';
   return (
     <button type={type} onClick={onClick} disabled={disabled} style={{
       padding: '9px 18px', borderRadius: 7, fontSize: 13.5, fontWeight: 650,
-      color: disabled ? '#667' : '#fff', border: LINE,
-      background: disabled ? 'rgba(255,255,255,0.05)' : bg,
+      color: disabled ? 'var(--sd-fg-4, #667)' : 'var(--sd-fg-1, #fff)', border: LINE,
+      background: disabled ? 'rgba(var(--sd-ink, 255, 255, 255), 0.05)' : bg,
       cursor: disabled ? 'not-allowed' : 'pointer',
     }}>{children}</button>
   );

package/.next/standalone/app/globals.css

@@ -21,7 +21,7 @@
 
 body {
   background: var(--sd-bg);
-  color: #fff;
+  color: var(--sd-fg-1, #fff);
   font-family: var(--sd-font);
 }
 
@@ -103,7 +103,7 @@ html:has([data-field-question]) {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(var(--sd-ink, 255, 255, 255), 0.15);
   border-radius: 3px;
 }
 
@@ -125,3 +125,160 @@ html:has([data-field-question]) {
   .crm-grid { grid-template-columns: minmax(0, 1fr); }
   .crm-board { grid-template-columns: minmax(0, 1fr); }
 }
+
+/* ---- How a look draws its buttons (lib/themes.js BUTTONS; html[data-buttons]) ----
+   Buttons carry their own colours inline, so a look adds what they don't set:
+   shadow, frost, glow, outline, and the corner where a look has its own shape.
+   Round buttons (50%) stay round. The tab row's links count as buttons. */
+/* Flat: Obsidian, Paper. No depth, a quiet hover. */
+html[data-buttons="flat"] :is(button, #main-tabs > a) { box-shadow: none !important; text-shadow: none !important; }
+html[data-buttons="flat"] :is(button, #main-tabs > a):not(:disabled):hover { filter: brightness(1.12); }
+html[data-buttons="flat"] :is(button, select, input[type="search"], input[type="text"], #main-tabs > a):not([style*="border-radius: 50%"]) { border-radius: 5px !important; }
+
+/* Square: Analyst. Crisp corners, hairline borders, no depth. */
+html[data-buttons="square"] :is(button, select, input[type="search"], input[type="text"], #main-tabs, #main-tabs > a):not([style*="border-radius: 50%"]) { border-radius: 2px !important; }
+html[data-buttons="square"] :is(button, #main-tabs > a) { box-shadow: none !important; letter-spacing: 0.02em; }
+html[data-buttons="square"] :is(button, #main-tabs > a):not(:disabled):hover { outline: 1px solid color-mix(in srgb, var(--sd-accent) 70%, transparent); outline-offset: -1px; }
+
+/* Frosted: Glass, as Apple's Liquid Glass (WWDC25 "Meet Liquid Glass"; HIG →
+   Materials). Not a frosted blur: glass that bends light at its edges (the
+   lensing comes from app/components/LiquidGlass.js, as --lg-lens), with a
+   specular rim lit from the top left, a bright top edge, and a soft shadow
+   under it. Panels full of words use the "regular" glass: a dark tint under
+   the blur so the words read (lib/themes.js --sd-panel). Controls are capsules
+   of clearer glass; the tab bar is one capsule with plain segments in it,
+   never glass on glass. */
+html[data-buttons="frosted"] [data-glass-panel] {
+  position: relative;
+  isolation: isolate;
+  -webkit-backdrop-filter: var(--sd-panel-blur) var(--lg-lens, ) !important;
+  backdrop-filter: var(--sd-panel-blur) var(--lg-lens, ) !important;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0)) !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.25) !important;
+}
+html[data-buttons="frosted"] [data-glass-panel="bar"] { border-radius: 999px !important; }
+html[data-buttons="frosted"] .glass-rim, html[data-buttons="frosted"] [data-glass-panel]::before,
+html[data-buttons="frosted"] :is(button, #main-tabs > a):not(.radar-go):not(#main-tabs *)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  pointer-events: none;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.22));
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+/* Controls: capsules of clear glass that spring when pressed. */
+html[data-buttons="frosted"] :is(button):not(.radar-go):not(#main-tabs *) {
+  position: relative;
+  isolation: isolate;
+  -webkit-backdrop-filter: blur(4px) saturate(170%);
+  backdrop-filter: blur(4px) saturate(170%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.24) !important;
+}
+html[data-buttons="frosted"] :is(button, select, input[type="search"], input[type="text"]):not([style*="border-radius: 50%"]):not(.radar-go):not(#main-tabs *) { border-radius: 14px !important; }
+html[data-buttons="frosted"] :is(button):not(:disabled):not(#main-tabs *):hover { filter: brightness(1.14); }
+@media (prefers-reduced-motion: no-preference) {
+  html[data-buttons="frosted"] :is(button):not(#main-tabs *) { transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.2s; }
+  html[data-buttons="frosted"] :is(button):not(:disabled):not(#main-tabs *):active { transform: scale(1.04); }
+}
+/* The tab bar's segments: the picked one is a lit thumb inside the glass. */
+html[data-buttons="frosted"] #main-tabs > :is(a, button) { border-radius: 999px !important; }
+html[data-buttons="frosted"] #main-tabs > :is(a, button)[aria-current="page"],
+html[data-buttons="frosted"] #main-tabs > button[style*="background: rgb(255, 255, 255)"] {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
+}
+/* Reduce Transparency: solid panels, no lensing. More contrast: a darker tint and a plain rim. */
+@media (prefers-reduced-transparency: reduce) {
+  html[data-buttons="frosted"] [data-glass-panel] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(28, 28, 36, 0.97) !important; }
+}
+@media (prefers-contrast: more) {
+  html[data-buttons="frosted"] [data-glass-panel] { background-color: rgba(10, 10, 14, 0.85) !important; }
+  html[data-buttons="frosted"] [data-glass-panel]::before { background: rgba(255, 255, 255, 0.6); }
+}
+
+/* Neon: Synthwave. A glow in the accent, brighter on hover. */
+html[data-buttons="neon"] :is(button, #main-tabs > a):not(:disabled) {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-accent) 55%, transparent), 0 0 12px color-mix(in srgb, var(--sd-accent) 26%, transparent) !important;
+  text-shadow: 0 0 8px color-mix(in srgb, var(--sd-accent) 45%, transparent);
+}
+html[data-buttons="neon"] :is(button, #main-tabs > a):not(:disabled):hover {
+  box-shadow: 0 0 0 1px var(--sd-accent), 0 0 20px color-mix(in srgb, var(--sd-accent) 50%, transparent) !important;
+}
+
+/* Bold: High contrast. A clear outline on every control, and a thick focus ring. */
+html[data-buttons="bold"] :is(button, select, input[type="search"], input[type="text"], #main-tabs > a) { outline: 1.5px solid rgba(var(--sd-ink, 255, 255, 255), 0.55); outline-offset: -1.5px; font-weight: 700; }
+html[data-buttons="bold"] :is(button, a, select, input):focus-visible { outline: 3px solid var(--sd-accent) !important; outline-offset: 2px; }
+
+@media (prefers-reduced-motion: no-preference) {
+  html:not([data-buttons="soft"]) :is(button, #main-tabs > a) { transition: box-shadow 0.15s, filter 0.15s, outline-color 0.15s; }
+}
+
+/* ---- Analyst: nothing decorative (lib/themes.js) ----
+   An analysis tool's restraint: no gradients, glows or shadows anywhere, the
+   name in plain ink, the picked tab and the main buttons a flat accent, and
+   every number in even columns. Only in this look; the colours inline stay
+   the same in every other. */
+html[data-theme="analyst"] body { font-variant-numeric: tabular-nums; }
+html[data-theme="analyst"] [style*="box-shadow"] { box-shadow: none !important; }
+html[data-theme="analyst"] [style*="text-shadow"] { text-shadow: none !important; }
+html[data-theme="analyst"] header h1, html[data-theme="analyst"] header :is(span, a) > h1, html[data-theme="analyst"] [style*="-webkit-text-fill-color"] {
+  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--sd-fg-1, #111) !important;
+}
+html[data-theme="analyst"] :is(button, a)[style*="gradient"] { background: var(--sd-accent) !important; color: #fff !important; border-color: transparent !important; }
+html[data-theme="analyst"] div[style*="radial-gradient"], html[data-theme="analyst"] div[style*="linear-gradient(1"] { background-image: none !important; }
+html[data-theme="analyst"] [style*="backdrop-filter"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
+html[data-theme="analyst"] :is(.galaxy-ring-pulse, .cluster-hub, .seed) { animation: none !important; }
+
+/* ---- A look's dots, on every map (Blake, 2026-10-03: "liquid glass for even
+   path dots etc all things of nature … the same for the others") ----
+   The Galaxy paints its own (app/components/ForceGraph.js); everywhere else a
+   dot is .sd-dot (SVG) or .sd-dot-html, and takes its look's style here, with
+   app/components/ThemeDefs.js's filters: Degrees' bridges, clusters and hover
+   previews, Separation, Paths' bubbles, the Scan cluster, circle previews, the
+   header's scan dots, Check for new's spinner, legends, tier dots, avatars. */
+html[data-dots="droplet"] :is(.sd-dot, .pv-d3, .pv-d4) { filter: url(#sd-droplet); }
+html[data-dots="glow"] :is(.sd-dot, .pv-d3, .pv-d4) { filter: url(#sd-glow); }
+html[data-dots="plain"] .sd-dot:is(:not([stroke]), [stroke="none"]) { stroke: #2b2b2b; stroke-width: 0.8px; stroke-opacity: 0.75; }
+html[data-dots="droplet"] .sd-dot-html {
+  background-image: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 22%, rgba(255, 255, 255, 0) 55%) !important;
+  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35) !important;
+}
+html[data-dots="glow"] .sd-dot-html { filter: saturate(1.25) brightness(1.08) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
+html[data-dots="plain"] .sd-dot-html { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6) !important; }
+
+/* ---- Each look's panels, tab bar, notch and the map's tooltips ----
+   [data-glass-panel] marks the side panels, the tab bar and the notch; the
+   tooltips are the Galaxy's .graph-tooltip. Glass's are above. */
+/* Obsidian: graphite panels with fine borders, no depth, square-ish tooltips */
+html[data-theme="obsidian"] [data-glass-panel] { box-shadow: none !important; border-color: #363636 !important; }
+html[data-theme="obsidian"] [data-glass-panel="side"] { border-right: 1px solid #363636 !important; border-left: 1px solid #363636 !important; }
+html[data-theme="obsidian"] #main-tabs { background: #262626 !important; box-shadow: inset 0 0 0 1px #363636; }
+html[data-theme="obsidian"] .graph-tooltip { background: #262626 !important; border: 1px solid #3f3f3f !important; border-radius: 4px !important; color: #dcddde !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
+/* Synthwave: neon edges in the accent */
+html[data-theme="synthwave"] [data-glass-panel] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sd-accent) 45%, transparent), 0 0 26px color-mix(in srgb, var(--sd-accent) 16%, transparent) !important; }
+html[data-theme="synthwave"] #main-tabs { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--sd-accent) 22%, transparent); }
+html[data-theme="synthwave"] .graph-tooltip { background: rgba(36, 16, 63, 0.94) !important; border: 1px solid var(--sd-accent) !important; box-shadow: 0 0 16px color-mix(in srgb, var(--sd-accent) 35%, transparent); color: #fff5ff !important; }
+/* Space: deep panels with a cool rim of starlight */
+html[data-theme="space"] [data-glass-panel] { box-shadow: inset 0 1px 0 rgba(205, 218, 255, 0.14), inset 0 0 0 1px rgba(150, 170, 255, 0.1), 0 18px 50px rgba(0, 0, 0, 0.5) !important; }
+html[data-theme="space"] .graph-tooltip { background: rgba(8, 10, 28, 0.94) !important; border: 1px solid rgba(150, 170, 255, 0.28) !important; color: #eef2ff !important; }
+/* High contrast: hard outlines everywhere */
+html[data-theme="contrast"] [data-glass-panel] { box-shadow: inset 0 0 0 1.5px #ffffff !important; }
+html[data-theme="contrast"] .graph-tooltip { background: #000 !important; border: 1.5px solid #fff !important; color: #fff !important; }
+/* Daylight: white panels with soft, layered shadows, as light Mac apps draw them */
+html[data-theme="daylight"] [data-glass-panel] { box-shadow: 0 0 0 1px rgba(18, 22, 40, 0.07), 0 1px 2px rgba(18, 22, 40, 0.06), 0 10px 30px rgba(18, 22, 40, 0.08) !important; }
+html[data-theme="daylight"] #main-tabs { background: #ffffff !important; }
+/* Paper: ruled, flat, warm */
+html[data-theme="paper"] [data-glass-panel] { box-shadow: inset 0 0 0 1px #d8cdb8 !important; }
+html[data-theme="paper"] #main-tabs { background: #efe7d6 !important; }
+/* Analyst: grey, flat, hairlines */
+html[data-theme="analyst"] [data-glass-panel] { box-shadow: inset 0 0 0 1px #d0d0d0 !important; }
+html[data-theme="analyst"] #main-tabs { background: #ececec !important; }
+/* Light looks: the map's tooltip is a light card with ink words */
+html[data-mode="light"] .graph-tooltip { background: rgba(255, 255, 255, 0.98) !important; color: #11141c !important; border: 1px solid rgba(18, 22, 40, 0.12) !important; box-shadow: 0 6px 20px rgba(18, 22, 40, 0.14); }
+html[data-theme="paper"] .graph-tooltip { background: #fbf8f1 !important; border-color: #d8cdb8 !important; font-family: var(--sd-font); }
+html[data-theme="analyst"] .graph-tooltip { border-radius: 2px !important; box-shadow: none; }
+/* Glass: the tooltip is a pane of glass too */
+html[data-buttons="frosted"] .graph-tooltip { background: rgba(18, 18, 30, 0.45) !important; -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 30px rgba(0, 0, 0, 0.35); }

package/.next/standalone/app/import/page.js

@@ -1,15 +1,17 @@
 'use client';
 
-import { useState, useRef } from 'react';
-import { parseConnectionsCsv, saveCsvNetwork, ConnectionsCsvError, CSV_USER } from '../../lib/csv';
+import { useState, useRef, useEffect } from 'react';
+import {
+  parseConnectionsCsv, saveCsvNetwork, ConnectionsCsvError, CSV_USER, keptBehindScan, closeCsvNetwork, REMOVE_CSV_QUESTION,
+} from '../../lib/csv';
 import { setUser } from '../../lib/user';
 import Link from 'next/link';
 import { TIER_COLORS } from '../../lib/themes';
 
 
 const card = {
-  background: 'rgba(255,255,255,0.03)',
-  border: '1px solid rgba(255,255,255,0.08)',
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+  border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
   borderRadius: 16,
   padding: 24,
 };
@@ -19,20 +21,36 @@ export default function ImportPage() {
   const [error, setError] = useState('');
   const [result, setResult] = useState(null);
   const [busy, setBusy] = useState(false);
+  // A CSV kept here that the map doesn't show, because you have scanned your
+  // own connections (lib/csv.js openNetworkSource).
+  const [behindScan, setBehindScan] = useState(null);
   const inputRef = useRef(null);
 
-  function handleText(text) {
+  useEffect(() => {
+    let off = false;
+    keptBehindScan().then((k) => { if (!off) setBehindScan(k); });
+    return () => { off = true; };
+  }, []);
+
+  async function handleText(text) {
     setBusy(true);
     setError('');
     try {
       const { connections, skipped } = parseConnectionsCsv(text);
-      if (!saveCsvNetwork(connections)) {
-        setError('That network is too large to hold in this window. LinkedIn allows up to 30,000 connections and this app holds that many, so please report it with your connection count: github.com/blakeb056/six-degrees/issues');
+      // Kept in the data folder (lib/csv-store.js), so it's still here after
+      // the window closes. If it can't be kept, nothing opens: a map that
+      // vanished on the next start would look kept when it wasn't.
+      const saved = await saveCsvNetwork(connections);
+      if (!saved.ok) {
+        setError(saved.error);
         setBusy(false);
         return;
       }
-      // Local-only identity so the app opens without creating an account.
-      setUser(CSV_USER.id, CSV_USER.name);
+      const behind = await keptBehindScan();
+      setBehindScan(behind);
+      // Local-only identity so the app opens without creating an account,
+      // unless the map opens on your scanned network instead.
+      if (!behind) setUser(CSV_USER.id, CSV_USER.name);
       const tiers = {};
       connections.forEach((c) => { tiers[c.tier] = (tiers[c.tier] || 0) + 1; });
       setResult({ count: connections.length, skipped, tiers });
@@ -58,32 +76,36 @@ export default function ImportPage() {
           <h1 style={{ fontSize: 38, fontWeight: 800, margin: '0 0 8px' }}>
             {result.count.toLocaleString()} connections mapped
           </h1>
-          <p style={{ color: 'rgba(255,255,255,0.45)', margin: '0 0 28px', lineHeight: 1.6 }}>
+          <p style={{ color: 'rgba(var(--sd-ink, 255, 255, 255), 0.45)', margin: '0 0 28px', lineHeight: 1.6 }}>
             Scored on seniority and company, sorted into tiers.
             {result.skipped > 0 && ` ${result.skipped} row${result.skipped === 1 ? '' : 's'} skipped (blank or duplicate).`}
           </p>
 
           <div style={{ ...card, marginBottom: 20 }}>
-            <div style={{ fontSize: 11, fontWeight: 700, color: '#666', letterSpacing: 2, marginBottom: 14 }}>YOUR TIERS</div>
+            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--sd-fg-4, #666)', letterSpacing: 2, marginBottom: 14 }}>YOUR TIERS</div>
             {['S', 'A', 'B', 'C', 'D'].map((t) => {
               const n = result.tiers[t] || 0;
               const pct = result.count ? (n / result.count) * 100 : 0;
               return (
                 <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                   <span style={{ width: 16, color: TIER_COLORS[t], fontWeight: 800 }}>{t}</span>
-                  <div style={{ flex: 1, height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.05)', overflow: 'hidden' }}>
+                  <div style={{ flex: 1, height: 8, borderRadius: 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', overflow: 'hidden' }}>
                     <div style={{ width: `${pct}%`, height: '100%', background: TIER_COLORS[t], borderRadius: 4 }} />
                   </div>
-                  <span style={{ width: 46, textAlign: 'right', color: 'rgba(255,255,255,0.6)', fontSize: 13 }}>{n}</span>
+                  <span style={{ width: 46, textAlign: 'right', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.6)', fontSize: 13 }}>{n}</span>
                 </div>
               );
             })}
           </div>
 
+          {behindScan && <BehindScan onRemoved={() => { setBehindScan(null); setResult(null); }} />}
           <Link href="/" style={primaryBtn}>See your galaxy →</Link>
-          <p style={{ color: '#555', fontSize: 12, marginTop: 18, lineHeight: 1.6 }}>
-            Nothing was uploaded or saved: this lives only in this window (or browser tab), and closing it clears it.
-          </p>
+          {!behindScan && (
+            <p style={{ color: 'var(--sd-fg-5, #555)', fontSize: 12, marginTop: 18, lineHeight: 1.6 }}>
+              Kept on this computer, in your data folder, so it&rsquo;s still here after you close the window. Nothing was
+              sent anywhere. To remove it, click &times; next to Your CSV at the top of the map.
+            </p>
+          )}
         </div>
       </div>
     );
@@ -95,11 +117,13 @@ export default function ImportPage() {
         <h1 style={{ fontSize: 40, fontWeight: 800, margin: '0 0 10px', letterSpacing: -1 }}>
           Map <span style={{ background: 'linear-gradient(135deg,#FFD700,#9B59B6,#3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>your</span> network
         </h1>
-        <p style={{ color: 'rgba(255,255,255,0.45)', margin: '0 0 30px', lineHeight: 1.6, fontSize: 16 }}>
-          Drop LinkedIn&rsquo;s official <code style={code}>Connections.csv</code> below. It is read in your browser,
-          scored, and drawn as a galaxy — no account, no upload, nothing stored.
+        <p style={{ color: 'rgba(var(--sd-ink, 255, 255, 255), 0.45)', margin: '0 0 30px', lineHeight: 1.6, fontSize: 16 }}>
+          Drop LinkedIn&rsquo;s official <code style={code}>Connections.csv</code> below. It is read on this computer,
+          scored, drawn as a galaxy, and kept in your data folder. No account, and nothing leaves this computer.
         </p>
 
+        {behindScan && <BehindScan onRemoved={() => setBehindScan(null)} />}
+
         <div
           onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
           onDragLeave={() => setDragging(false)}
@@ -109,7 +133,7 @@ export default function ImportPage() {
             ...card,
             padding: '48px 24px', textAlign: 'center', cursor: 'pointer', marginBottom: 16,
             borderStyle: 'dashed',
-            borderColor: dragging ? '#FFD700' : 'rgba(255,255,255,0.12)',
+            borderColor: dragging ? '#FFD700' : 'rgba(var(--sd-ink, 255, 255, 255), 0.12)',
             background: dragging ? 'rgba(255,215,0,0.05)' : card.background,
             transition: 'all 0.15s ease',
           }}
@@ -118,7 +142,7 @@ export default function ImportPage() {
           <div style={{ fontWeight: 700, fontSize: 17, marginBottom: 6 }}>
             {busy ? 'Reading…' : 'Drop Connections.csv here'}
           </div>
-          <div style={{ color: '#666', fontSize: 13 }}>or click to choose the file</div>
+          <div style={{ color: 'var(--sd-fg-4, #666)', fontSize: 13 }}>or click to choose the file</div>
           <input
             ref={inputRef} type="file" accept=".csv,text/csv" style={{ display: 'none' }}
             onChange={(e) => handleFile(e.target.files?.[0])}
@@ -132,10 +156,10 @@ export default function ImportPage() {
         )}
 
         <div style={{ ...card, marginBottom: 16 }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#666', letterSpacing: 2, marginBottom: 14 }}>HOW TO GET THE FILE</div>
-          <ol style={{ margin: 0, paddingLeft: 20, color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 2 }}>
-            <li>LinkedIn → <strong style={{ color: '#fff' }}>Settings &amp; Privacy → Data privacy → Get a copy of your data</strong></li>
-            <li>Pick <strong style={{ color: '#fff' }}>Connections</strong> and request the archive</li>
+          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--sd-fg-4, #666)', letterSpacing: 2, marginBottom: 14 }}>HOW TO GET THE FILE</div>
+          <ol style={{ margin: 0, paddingLeft: 20, color: 'rgba(var(--sd-ink, 255, 255, 255), 0.6)', fontSize: 14, lineHeight: 2 }}>
+            <li>LinkedIn → <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Settings &amp; Privacy → Data privacy → Get a copy of your data</strong></li>
+            <li>Pick <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Connections</strong> and request the archive</li>
             <li>LinkedIn emails a download link, usually within ~10 minutes</li>
             <li>Unzip it and drop <code style={code}>Connections.csv</code> above</li>
           </ol>
@@ -143,42 +167,74 @@ export default function ImportPage() {
 
         <div style={{ ...card, marginBottom: 16 }}>
           <div style={{ fontSize: 11, fontWeight: 700, color: '#2ecc71', letterSpacing: 2, marginBottom: 10 }}>PRIVATE BY DESIGN</div>
-          <p style={{ margin: 0, color: 'rgba(255,255,255,0.55)', fontSize: 14, lineHeight: 1.7 }}>
-            Your file never leaves this browser. It is parsed locally, held for this tab only, and never written to any
-            database. The <strong style={{ color: '#fff' }}>Email Address column is ignored entirely</strong>.
+          <p style={{ margin: 0, color: 'rgba(var(--sd-ink, 255, 255, 255), 0.55)', fontSize: 14, lineHeight: 1.7 }}>
+            Your file never leaves this computer. It is read here, and only what the map needs (names, positions,
+            companies, profile links and when you connected) is kept, in your data folder, apart from any network you
+            scan. The <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Email Address column is ignored entirely</strong>.
           </p>
         </div>
 
         <div style={{ ...card, borderColor: 'rgba(255,215,0,0.15)' }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#FFD700', letterSpacing: 2, marginBottom: 10 }}>HONEST CAVEAT</div>
-          <p style={{ margin: '0 0 12px', color: 'rgba(255,255,255,0.55)', fontSize: 14, lineHeight: 1.7 }}>
+          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--sd-gold, #FFD700)', letterSpacing: 2, marginBottom: 10 }}>HONEST CAVEAT</div>
+          <p style={{ margin: '0 0 12px', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.55)', fontSize: 14, lineHeight: 1.7 }}>
             LinkedIn&rsquo;s export contains no profile photos, so everyone renders as initials on a tier-colored circle.
-            It also only covers people you are <em>already</em> connected to — so <strong style={{ color: '#fff' }}>Degrees</strong> and
-            the <strong style={{ color: '#fff' }}>Outlink queue</strong> stay empty, because those map the people you
+            It also only covers people you are <em>already</em> connected to, so <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Degrees</strong> and
+            the <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Outlink queue</strong> stay empty, because those map the people you
             haven&rsquo;t met yet.
           </p>
-          <p style={{ margin: 0, color: '#666', fontSize: 13, lineHeight: 1.7 }}>
-            Want those? Run the local scanner — it captures 2nd-degree circles and real photos.{' '}
-            <Link href="/setup" style={{ color: '#3498DB', textDecoration: 'none' }}>See setup →</Link>
+          <p style={{ margin: 0, color: 'var(--sd-fg-4, #666)', fontSize: 13, lineHeight: 1.7 }}>
+            Want those? Run the local scanner: it captures 2nd-degree circles and real photos.{' '}
+            <Link href="/setup" style={{ color: 'var(--sd-blue, #3498DB)', textDecoration: 'none' }}>See setup →</Link>
           </p>
         </div>
 
         <div style={{ textAlign: 'center', marginTop: 26 }}>
-          <Link href="/" style={{ color: '#555', fontSize: 13, textDecoration: 'none' }}>← Back</Link>
+          <Link href="/" style={{ color: 'var(--sd-fg-5, #555)', fontSize: 13, textDecoration: 'none' }}>← Back</Link>
         </div>
       </div>
     </div>
   );
 }
 
+// A CSV kept here that the map doesn't show: your scan wins (lib/csv.js
+// openNetworkSource). The file is never deleted for you, so this says it's
+// there and offers to remove it.
+function BehindScan({ onRemoved }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  async function remove() {
+    if (!window.confirm(REMOVE_CSV_QUESTION)) return;
+    setBusy(true);
+    setError('');
+    const closed = await closeCsvNetwork('csv');
+    setBusy(false);
+    if (closed.ok) onRemoved();
+    else setError(closed.error);
+  }
+  return (
+    <div style={{ ...card, padding: '14px 18px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
+      <span style={{ flex: '1 1 260px', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.65)', fontSize: 14, lineHeight: 1.6 }}>
+        Your map shows the network you scanned. A CSV import is still kept on this computer.
+      </span>
+      <button onClick={remove} disabled={busy} style={{
+        padding: '8px 14px', borderRadius: 8, cursor: busy ? 'default' : 'pointer', font: 'inherit', fontSize: 13, fontWeight: 700,
+        border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.2)', background: 'transparent', color: 'var(--sd-fg-1, #fff)',
+      }}>
+        {busy ? 'Removing…' : 'Remove it'}
+      </button>
+      {error && <div style={{ width: '100%', color: '#ff8080', fontSize: 13, lineHeight: 1.6 }}>{error}</div>}
+    </div>
+  );
+}
+
 const wrap = {
-  minHeight: '100vh', background: 'var(--sd-page)', color: '#fff', padding: '56px 24px',
+  minHeight: '100vh', background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)', padding: '56px 24px',
   fontFamily: 'var(--sd-font)',
   display: 'flex', justifyContent: 'center',
 };
 
 const code = {
-  background: 'rgba(255,255,255,0.07)', padding: '2px 6px', borderRadius: 5,
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)', padding: '2px 6px', borderRadius: 5,
   fontSize: 13, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
 };
 

package/.next/standalone/app/launch/page.js

@@ -244,7 +244,7 @@ function GalaxySection() {
           </h2>
           <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.5)', lineHeight: 1.7, marginTop: 20, maxWidth: 440 }}>
             Every connection orbits you by power tier. S-Tier innermost, D-Tier outermost.
-            A living galaxy of influence — zoom, filter, and explore your entire professional universe.
+            A living galaxy of influence. Zoom, filter, and explore your entire professional universe.
           </p>
           {/* Tier legend */}
           <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
@@ -321,7 +321,7 @@ function ChainSection() {
   const [ref, inView] = useInView();
   const degrees = [
     // The sample's counts; it maps two degrees.
-    { d: 1, label: 'Your Connections', desc: 'Direct network — scored & tiered', color: '#3498DB', count: SAMPLE_STATS.degree1 },
+    { d: 1, label: 'Your Connections', desc: 'Direct network, scored & tiered', color: '#3498DB', count: SAMPLE_STATS.degree1 },
     { d: 2, label: 'Bridge Connections', desc: 'Friends of your bridges', color: '#9B59B6', count: SAMPLE_STATS.degree2 },
     { d: 3, label: 'Extended Reach', desc: 'Bridged from promoted D2s', color: '#FFD700', count: null },
     { d: 4, label: 'Industry Layer', desc: 'Company & sector intelligence', color: '#FF6B35', count: null },
@@ -515,7 +515,7 @@ function FeaturesGrid() {
     {
       title: 'Bridge Clusters',
       subtitle: 'Deep Network Mining',
-      desc: 'Select any D1 connection as a bridge. Automatically discover and score all their connections — your D2 layer.',
+      desc: 'Select any D1 connection as a bridge. Automatically discover and score all their connections: your D2 layer.',
       color: '#9B59B6',
       icon: '🔗',
       stat: `${SAMPLE_STATS.bridges} bridges in the sample`,
@@ -700,7 +700,7 @@ function TheorySection() {
             proximity, and shared experience.
           </p>
           <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.45)', lineHeight: 1.8, marginTop: 16, maxWidth: 560, margin: '16px auto 0' }}>
-            Six degrees of separation isn&rsquo;t just a theory &mdash; it&rsquo;s the architecture of human connection.
+            Six degrees of separation isn&rsquo;t just a theory. It&rsquo;s the architecture of human connection.
             Every string vibrates with potential. Every bridge shortens the distance.
           </p>
 
@@ -712,7 +712,7 @@ function TheorySection() {
             opacity: inView ? 1 : 0, transition: 'opacity 1.5s ease 0.5s',
           }}>
             &ldquo;Everyone is connected to everyone else by six degrees or fewer.
-            The question isn&rsquo;t <em>if</em> &mdash; it&rsquo;s <em>through whom</em>.&rdquo;
+            The question isn&rsquo;t <em>if</em>, it&rsquo;s <em>through whom</em>.&rdquo;
           </div>
         </div>
       </div>

package/.next/standalone/app/layout.js

@@ -22,12 +22,14 @@ import StaleServerBanner from './components/StaleServerBanner';
 import ScanStatusBar from './components/ScanStatusBar';
 import SocialAutoSync from './components/SocialAutoSync';
 import ThemeLoader from './components/ThemeLoader';
+import LiquidGlass from './components/LiquidGlass';
+import ThemeDefs from './components/ThemeDefs';
 
-const THEME_FIRST = `try{var t=JSON.parse(localStorage.getItem('six-degrees-theme-vars')||'null');if(t&&t.vars){var r=document.documentElement;for(var k in t.vars){var v=String(t.vars[k]);if(/^--sd-[a-z0-9-]+$/.test(k)&&!/[;{}<>]/.test(v))r.style.setProperty(k,v)}var a=t.attrs||{};if(/^[a-z]+$/.test(a.theme||''))r.dataset.theme=a.theme;if(/^[a-z]+$/.test(a.backdrop||''))r.dataset.backdrop=a.backdrop}}catch(e){}`;
+const THEME_FIRST = `try{var t=JSON.parse(localStorage.getItem('six-degrees-theme-vars')||'null');if(t&&t.vars){var r=document.documentElement;for(var k in t.vars){var v=String(t.vars[k]);if(/^--sd-[a-z0-9-]+$/.test(k)&&!/[;{}<>]/.test(v))r.style.setProperty(k,v)}var a=t.attrs||{};['theme','backdrop','mode','buttons','dots'].forEach(function(n){if(/^[a-z]+$/.test(a[n]||''))r.dataset[n]=a[n]});r.style.colorScheme=a.mode==='light'?'light':'dark'}}catch(e){}`;
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" data-backdrop="none" className={`${geistSans.variable} ${geistMono.variable}`} suppressHydrationWarning>
+    <html lang="en" data-backdrop="none" data-mode="dark" data-buttons="soft" data-dots="solid" className={`${geistSans.variable} ${geistMono.variable}`} suppressHydrationWarning>
       <head>
         {/* The theme (lib/theme-store.js), on the page before it paints. Only
             --sd- variables, and only values with nothing that could end one. */}
@@ -35,6 +37,8 @@ export default function RootLayout({ children }) {
       </head>
       <body style={{ margin: 0, padding: 0, background: 'var(--sd-bg, #0a0a1a)' }}>
         <ThemeLoader />
+        <LiquidGlass />
+        <ThemeDefs />
         <UserProvider>
           {children}
           {/* Says so when the files on disk have moved past what this server