Polish website navigation, connect features, and enhance visuals

web/app/arith/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { loadArithCorpus, arithmeticTopK, type ArithCorpus, type Term } from "@/lib/arith";
 
 const DEFAULT_TERMS: Term[] = [
@@ -36,11 +37,19 @@ const EXAMPLES: { label: string; terms: Term[] }[] = [
 
 const ARITH_YEAR = 2025;
 
-export default function ArithPage() {
+function ArithPageInner() {
+  const searchParams = useSearchParams();
+  const w = searchParams.get("w");
   const [terms, setTerms] = useState<Term[]>(DEFAULT_TERMS);
   const [corpus, setCorpus] = useState<ArithCorpus | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (w) {
+      setTerms([{ sign: 1, word: w }]);
+    }
+  }, [w]);
+
   useEffect(() => {
     loadArithCorpus().then((c) => {
       if (!c) setError("corpus not available — run scripts/precompute_arithmetic.py");
@@ -358,3 +367,19 @@ function WordInput({
     </div>
   );
 }
+
+export default function ArithPage() {
+  return (
+    <Suspense
+      fallback={
+        <main className="relative min-h-dvh w-full overflow-hidden bg-[#070707] pt-20 pb-16 px-5 sm:px-6 lg:px-10">
+          <div className="relative max-w-4xl mx-auto flex items-center gap-2.5 text-muted text-sm font-mono">
+            loading math space…
+          </div>
+        </main>
+      }
+    >
+      <ArithPageInner />
+    </Suspense>
+  );
+}

web/app/explore/page.tsx

@@ -88,6 +88,17 @@ function ExplorePageInner() {
         style={{ height: `${nYears * 100}vh` }}
       >
         <div className="sticky top-0 h-screen w-full">
+          {/* background atmosphere */}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0 overflow-hidden"
+          >
+            <div
+              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full blur-[140px]"
+              style={{ background: "radial-gradient(circle, rgba(244,184,96,0.06), rgba(139,108,255,0.03) 50%, transparent 70%)" }}
+            />
+          </div>
+
           {data ? (
             <Constellation
               data={data}

web/app/space/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import Link from "next/link";
 import { motion, AnimatePresence } from "framer-motion";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { loadManifest } from "@/lib/data";
@@ -643,16 +644,38 @@ function MarkedList({
           key={w}
           onMouseEnter={onHoverChip ? () => onHoverChip(i) : undefined}
           onMouseLeave={onHoverChip ? () => onHoverChip(null) : undefined}
-          className="group flex items-center gap-2 backdrop-blur-md bg-black/35 hover:bg-black/55 border border-white/10 rounded px-2 py-1.5 text-xs font-mono transition-colors"
+          className="group flex items-center gap-2 backdrop-blur-md bg-black/35 hover:bg-black/55 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs font-mono transition-all duration-200"
         >
           <span
-            className="inline-block w-2.5 h-2.5 rounded-full flex-shrink-0 shadow-[0_0_8px_currentColor]"
+            className="inline-block w-2 h-2 rounded-full flex-shrink-0 shadow-[0_0_8px_currentColor]"
             style={{ background: hex[i], color: hex[i] }}
           />
           <span className="flex-1 text-foreground truncate">{w}</span>
+          <div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+            <Link
+              href={`/explore?w=${w}`}
+              title={`View '${w}' neighborhood`}
+              className="text-muted hover:text-accent transition-colors p-0.5"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <circle cx="12" cy="12" r="10" />
+                <polygon points="16.24,7.76 14.12,14.12 7.76,16.24 9.88,9.88" />
+              </svg>
+            </Link>
+            <Link
+              href={`/arith?w=${w}`}
+              title={`Use '${w}' in word math`}
+              className="text-muted hover:text-accent transition-colors p-0.5"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="12" y1="5" x2="12" y2="19" />
+              </svg>
+            </Link>
+          </div>
           <button
             onClick={() => onUnmark(w)}
-            className="text-muted hover:text-foreground transition-colors leading-none w-6 h-6 -my-1 grid place-items-center text-sm opacity-60 group-hover:opacity-100"
+            className="text-muted hover:text-red-400 transition-colors leading-none w-5 h-5 -my-1 grid place-items-center text-sm opacity-50 group-hover:opacity-100"
             aria-label={`remove ${w}`}
           >
             ×

web/app/ternary/page.tsx

@@ -120,8 +120,19 @@ export default function TernaryPage() {
   }
 
   return (
-    <main className="h-screen pt-16 lg:pt-20 px-6 lg:px-10 pb-6 flex flex-col">
-      <header className="mb-3 flex items-baseline justify-between gap-4">
+    <main className="relative h-screen pt-16 lg:pt-20 px-6 lg:px-10 pb-6 flex flex-col">
+      {/* background atmosphere */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 overflow-hidden"
+      >
+        <div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full blur-[140px]"
+          style={{ background: "radial-gradient(circle, rgba(139,108,255,0.06), rgba(244,184,96,0.03) 50%, transparent 70%)" }}
+        />
+      </div>
+
+      <header className="relative mb-3 flex items-baseline justify-between gap-4">
         <div>
           <div className="text-[10px] uppercase tracking-[0.18em] text-muted font-mono mb-1">
             ternary