diff --git a/playground/src/editor.ts b/playground/src/editor.ts
index 6c6a3bf..0e30bd4 100644
--- a/playground/src/editor.ts
+++ b/playground/src/editor.ts
@@ -138,15 +138,15 @@ const posecodeStream = StreamLanguage.define<{ inStep: boolean }>({
 });
 
 const posecodeHighlight = HighlightStyle.define([
-  { tag: t.keyword, color: "var(--accent)", fontWeight: "600" },
-  { tag: t.typeName, color: "#79c0ff" },
-  { tag: t.operatorKeyword, color: "#ffcc66" },
-  { tag: t.variableName, color: "#c0a7ff" },
-  { tag: t.atom, color: "#5cd0c0" },
-  { tag: t.number, color: "#ff9d6b" },
-  { tag: t.string, color: "#d8b48a" },
-  { tag: t.lineComment, color: "#5b6675", fontStyle: "italic" },
-  { tag: t.punctuation, color: "#6b7785" },
+  { tag: t.keyword, color: "var(--t-kw)", fontWeight: "600" },
+  { tag: t.typeName, color: "var(--t-kind)" },
+  { tag: t.operatorKeyword, color: "var(--t-act)" },
+  { tag: t.variableName, color: "var(--t-joint)" },
+  { tag: t.atom, color: "var(--t-atom)" },
+  { tag: t.number, color: "var(--t-num)" },
+  { tag: t.string, color: "var(--t-str)" },
+  { tag: t.lineComment, color: "var(--muted)", fontStyle: "italic" },
+  { tag: t.punctuation, color: "var(--t-punct)" },
 ]);
 
 // --- Language service bridges ----------------------------------------------
diff --git a/playground/src/landing.css b/playground/src/landing.css
index 4ccc08a..2bf6003 100644
--- a/playground/src/landing.css
+++ b/playground/src/landing.css
@@ -1,44 +1,47 @@
 /* ============================================================================
-   Posecode — landing page. Extends the "Kinetic Lab" identity (studio-dark + a
-   single lime accent, Hanken Grotesk + JetBrains Mono) into a demo-forward
-   product page. Palette mirrors style.css so the landing and playground match.
+   Posecode — landing page. Extends the "Kinetic Lab" identity into a
+   premium, Apple-inspired experience. Using Inter + JetBrains Mono, vibrant
+   volumetric gradients, and true glassmorphic materials.
    ========================================================================== */
 
 :root {
-  --bg: #0a0d12;
-  --bg-viewer: #0c0f15;
-  --panel: #0f141b;
-  --panel-2: #141a23;
-  --panel-3: #1b222d;
-  --border: #1e2530;
-  --border-2: #2a323f;
-  --text: #e9eef4;
-  --text-2: #9aa6b4;
-  --muted: #616d7c;
-  --accent: #c6f24a;
-  --accent-2: #a9e02f;
-  --accent-ink: #0a0d12;
-  --accent-glow: rgba(198, 242, 74, 0.45);
-  --accent-veil: rgba(198, 242, 74, 0.16);
-  --accent-faint: rgba(198, 242, 74, 0.07);
+  --bg: #030406; /* Deep space black */
+  --bg-viewer: #06080b; /* Slightly lighter deep black for 3D stage */
+  --panel: rgba(10, 15, 30, 0.45); /* True glassmorphic panel base */
+  --panel-2: rgba(20, 28, 48, 0.6);
+  --panel-3: rgba(28, 40, 68, 0.75);
+  --border: rgba(255, 255, 255, 0.05); /* Reflective hairline edges */
+  --border-2: rgba(255, 255, 255, 0.12);
+  --text: #f3f4f6; /* Crisp off-white */
+  --text-2: #9ca3af;
+  --muted: #6b7280;
+
+  /* Premium Violet & Indigo Gradient Accent */
+  --accent: #6366f1; /* Electric Indigo */
+  --accent-2: #a855f7; /* Royal Purple */
+  --accent-3: #ec4899; /* Deep Pink */
+  --accent-ink: #ffffff;
+  --accent-glow: rgba(99, 102, 241, 0.4);
+  --accent-veil: rgba(99, 102, 241, 0.12);
+  --accent-faint: rgba(99, 102, 241, 0.04);
 
   --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
-  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --radius: 14px;
-  --radius-sm: 9px;
-  --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
-  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --radius: 16px;
+  --radius-sm: 10px;
+  --shadow-2: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
+  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Apple spring curve */
   --container: 1180px;
 
-  /* Syntax colors (match the editor) */
-  --t-kw: var(--accent);
-  --t-kind: #79c0ff;
-  --t-act: #ffcc66;
-  --t-joint: #c0a7ff;
-  --t-atom: #5cd0c0;
-  --t-num: #ff9d6b;
-  --t-str: #d8b48a;
-  --t-punct: #6b7785;
+  /* Syntax colors mapped to variables for flexible theme coordination */
+  --t-kw: #818cf8;
+  --t-kind: #22d3ee;
+  --t-act: #fbbf24;
+  --t-joint: #c084fc;
+  --t-atom: #34d399;
+  --t-num: #f97316;
+  --t-str: #f472b6;
+  --t-punct: #6b7280;
 }
 
 * {
@@ -59,20 +62,21 @@ body {
   overflow-x: hidden;
 }
 
+/* Atmospheric ambient backing glow */
 .bg-fx {
   position: fixed;
   inset: 0;
   z-index: -2;
   background:
-    radial-gradient(70vw 60vh at 85% -5%, rgba(198, 242, 74, 0.08), transparent 60%),
-    radial-gradient(60vw 50vh at 5% 105%, rgba(70, 110, 160, 0.08), transparent 55%),
+    radial-gradient(80vw 60vh at 85% -5%, rgba(99, 102, 241, 0.08), transparent 60%),
+    radial-gradient(70vw 50vh at 5% 105%, rgba(168, 85, 247, 0.07), transparent 55%),
     var(--bg);
 }
 .bg-fx::after {
   content: "";
   position: absolute;
   inset: 0;
-  opacity: 0.035;
+  opacity: 0.02;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
@@ -85,70 +89,83 @@ code {
   font-family: var(--mono);
   font-size: 0.88em;
   color: var(--text);
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
-  border-radius: 5px;
+  border-radius: 6px;
   padding: 1px 6px;
 }
 
-/* --- Buttons --------------------------------------------------------------- */
+/* --- Buttons (Apple rounded pill shape with elastic feel) ----------------- */
 .btn {
   font-family: var(--sans);
-  font-weight: 700;
+  font-weight: 600;
   font-size: 14px;
-  letter-spacing: 0.1px;
+  letter-spacing: -0.1px;
   color: var(--text);
   background: var(--panel-2);
   border: 1px solid var(--border-2);
-  border-radius: var(--radius-sm);
-  padding: 10px 18px;
+  border-radius: 999px; /* Pill */
+  padding: 11px 22px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   white-space: nowrap;
-  transition: transform 0.12s var(--ease), border-color 0.16s var(--ease),
-    background 0.16s var(--ease), box-shadow 0.16s var(--ease), color 0.16s var(--ease);
+  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
+    background 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
 }
 .btn:hover {
-  border-color: var(--accent);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: var(--panel-3);
   color: #fff;
-  box-shadow: 0 0 0 1px var(--accent-veil), 0 8px 22px -12px var(--accent-glow);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 .btn:active {
-  transform: translateY(1px);
+  transform: scale(0.96);
 }
 .btn.primary {
   color: var(--accent-ink);
-  background: linear-gradient(180deg, var(--accent), var(--accent-2));
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
   border-color: transparent;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 22px -10px var(--accent-glow);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 10px 25px -10px var(--accent-glow);
 }
 .btn.primary:hover {
   color: var(--accent-ink);
-  filter: brightness(1.06);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 30px -10px var(--accent-glow);
+  filter: brightness(1.08);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 30px -8px var(--accent-glow);
+}
+.btn.ghost {
+  background: transparent;
+  border-color: var(--border-2);
+}
+.btn.ghost:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.25);
 }
 .btn.lg {
-  padding: 13px 24px;
+  padding: 14px 28px;
   font-size: 15px;
 }
 
-/* --- Nav ------------------------------------------------------------------- */
+/* --- Floating Segmented Navigation Bar ------------------------------------- */
 .nav {
   position: sticky;
-  top: 0;
+  top: 16px;
   z-index: 20;
   display: flex;
   align-items: center;
   gap: 22px;
-  max-width: var(--container);
-  margin: 0 auto;
-  padding: 16px 28px;
-  background: linear-gradient(180deg, rgba(10, 13, 18, 0.85), rgba(10, 13, 18, 0.4));
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  max-width: calc(var(--container) - 32px);
+  margin: 16px auto;
+  padding: 12px 24px;
+  background: rgba(10, 14, 22, 0.55);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 999px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  transition: all 0.3s var(--ease);
 }
 .brand {
   display: inline-flex;
@@ -156,27 +173,30 @@ code {
   gap: 9px;
   font-weight: 800;
   font-size: 19px;
-  letter-spacing: -0.4px;
+  letter-spacing: -0.5px;
 }
 .brand .logo {
   color: var(--accent);
   align-self: center;
-  filter: drop-shadow(0 0 8px var(--accent-glow));
+  filter: drop-shadow(0 0 10px var(--accent-glow));
 }
 .nav-links {
   display: flex;
-  gap: 24px;
+  gap: 28px;
   margin-left: auto;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--text-2);
 }
+.nav-links a {
+  transition: color 0.2s var(--ease);
+}
 .nav-links a:hover {
   color: var(--text);
 }
 .nav-cta {
   font-size: 13px;
-  padding: 9px 16px;
+  padding: 9px 18px;
 }
 
 /* --- Layout helpers -------------------------------------------------------- */
@@ -199,70 +219,64 @@ code {
 }
 .eyebrow {
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
-  letter-spacing: 2px;
+  letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--accent);
   margin: 0 0 14px;
 }
 .section-head h2 {
-  font-size: clamp(28px, 4vw, 40px);
+  font-size: clamp(30px, 4vw, 42px);
   font-weight: 800;
-  letter-spacing: -1px;
+  letter-spacing: -1.2px;
   margin: 0;
-  line-height: 1.1;
+  line-height: 1.12;
 }
 .section-sub {
   color: var(--text-2);
   margin: 14px 0 0;
+  font-size: 17px;
+  font-weight: 400;
 }
 
 /* --- Hero ------------------------------------------------------------------ */
 .hero {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
-  gap: 56px;
+  gap: 64px;
   align-items: center;
   padding-top: clamp(48px, 7vw, 96px);
   padding-bottom: clamp(56px, 8vw, 110px);
 }
 .headline {
-  font-size: clamp(40px, 6vw, 68px);
+  font-size: clamp(44px, 6.2vw, 70px);
   font-weight: 900;
   line-height: 1.02;
-  letter-spacing: -2px;
-  margin: 0 0 22px;
+  letter-spacing: -2.4px;
+  margin: 0 0 24px;
 }
 .headline .hl {
-  color: var(--accent);
+  background: linear-gradient(135deg, #60a5fa 10%, #a78bfa 50%, #f472b6 90%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
   position: relative;
   white-space: nowrap;
 }
-.headline .hl::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0.06em;
-  height: 0.13em;
-  background: var(--accent);
-  opacity: 0.22;
-  border-radius: 2px;
-}
 .subhead {
   font-size: 18px;
   color: var(--text-2);
-  max-width: 50ch;
-  margin: 0 0 30px;
+  max-width: 48ch;
+  margin: 0 0 34px;
+  line-height: 1.65;
 }
 .hero-cta {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 16px;
 }
 .hero-meta {
-  margin: 26px 0 0;
+  margin: 28px 0 0;
   font-family: var(--mono);
   font-size: 12.5px;
   color: var(--muted);
@@ -281,26 +295,36 @@ code {
   background: var(--bg-viewer);
   box-shadow: var(--shadow-2);
 }
+.studio::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
+  pointer-events: none;
+  z-index: 3;
+}
 .studio-bar {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 11px 14px;
+  padding: 12px 16px;
   border-bottom: 1px solid var(--border);
-  background: var(--panel);
+  background: rgba(10, 14, 22, 0.5);
+  backdrop-filter: blur(8px);
 }
 .studio-bar .dots {
-  width: 9px;
-  height: 9px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
-  background: var(--border-2);
-  box-shadow: 15px 0 0 var(--border-2), 30px 0 0 var(--border-2);
+  background: #ff5f56;
+  box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f;
   margin-right: 26px;
 }
 .studio-title {
   font-family: var(--mono);
   font-size: 12px;
   color: var(--text-2);
+  font-weight: 500;
 }
 .studio-live {
   margin-left: auto;
@@ -311,13 +335,13 @@ code {
   font-size: 10px;
   letter-spacing: 1px;
   text-transform: uppercase;
-  color: var(--accent);
+  color: var(--accent-2);
 }
 .studio-live i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--accent-2);
   box-shadow: 0 0 8px var(--accent-glow);
   animation: pulse 1.8s ease-in-out infinite;
 }
@@ -328,9 +352,10 @@ code {
 }
 .studio-hud {
   position: absolute;
-  left: 16px;
-  bottom: 14px;
+  left: 20px;
+  bottom: 18px;
   pointer-events: none;
+  z-index: 2;
 }
 .studio-hud span {
   font-weight: 800;
@@ -340,11 +365,11 @@ code {
 .studio-hud span::before {
   content: "";
   display: inline-block;
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
   margin-right: 8px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--accent-2);
   box-shadow: 0 0 10px var(--accent-glow);
   vertical-align: middle;
 }
@@ -354,17 +379,18 @@ code {
   right: -18px;
   bottom: -22px;
   margin: 0;
-  padding: 14px 16px;
+  padding: 16px 20px;
   font-family: var(--mono);
   font-size: 11.5px;
-  line-height: 1.7;
+  line-height: 1.75;
   color: var(--text-2);
-  background: rgba(15, 20, 27, 0.92);
-  border: 1px solid var(--border-2);
-  border-radius: 10px;
-  box-shadow: var(--shadow-2);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  background: rgba(10, 14, 22, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  z-index: 4;
 }
 .t-kw { color: var(--t-kw); font-weight: 600; }
 .t-kind { color: var(--t-kind); }
@@ -379,43 +405,50 @@ code {
 .props {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
+  gap: 24px;
   padding-top: clamp(40px, 6vw, 72px);
   padding-bottom: clamp(40px, 6vw, 72px);
 }
 .prop {
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 26px 24px;
-  background: linear-gradient(180deg, var(--panel), rgba(15, 20, 27, 0.4));
-  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
+  padding: 30px 28px;
+  background: rgba(10, 15, 24, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
+    background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
 }
 .prop:hover {
-  border-color: var(--border-2);
-  transform: translateY(-3px);
+  border-color: rgba(255, 255, 255, 0.12);
+  background-color: rgba(18, 25, 42, 0.5);
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: 0 16px 35px -15px rgba(0,0,0,0.8), 0 0 1px rgba(99, 102, 241, 0.15);
 }
 .prop-mark {
-  font-size: 22px;
-  color: var(--accent);
+  font-size: 20px;
+  color: #fff;
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
-  border-radius: 11px;
-  background: var(--accent-faint);
-  border: 1px solid var(--accent-veil);
-  margin-bottom: 16px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+  box-shadow: 0 4px 12px -3px var(--accent-glow);
+  margin-bottom: 20px;
 }
 .prop h3 {
-  font-size: 18px;
+  font-size: 19px;
   font-weight: 700;
   margin: 0 0 8px;
-  letter-spacing: -0.3px;
+  letter-spacing: -0.4px;
 }
 .prop p {
-  font-size: 14.5px;
+  font-size: 15px;
   color: var(--text-2);
   margin: 0;
+  line-height: 1.6;
 }
 
 /* --- Examples -------------------------------------------------------------- */
@@ -426,56 +459,72 @@ code {
 .examples-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  gap: 20px;
 }
 .example-card {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  padding: 22px 22px 20px;
+  padding: 24px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  background: var(--panel);
+  background: rgba(10, 15, 24, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
   cursor: pointer;
-  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
-    box-shadow 0.18s var(--ease), background 0.18s var(--ease);
+  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
+    box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
 }
 .example-card:hover {
   border-color: var(--accent);
-  transform: translateY(-3px);
-  background: var(--panel-2);
-  box-shadow: 0 14px 30px -18px var(--accent-glow);
+  transform: translateY(-4px) scale(1.01);
+  background-color: rgba(18, 25, 42, 0.6);
+  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 0 0 20px -5px var(--accent-glow);
 }
 .example-kind {
   font-family: var(--mono);
-  font-size: 11px;
-  letter-spacing: 1px;
+  font-size: 10px;
+  letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--muted);
+  font-weight: 600;
 }
 .example-name {
-  font-size: 19px;
+  font-size: 20px;
   font-weight: 700;
-  letter-spacing: -0.3px;
+  letter-spacing: -0.4px;
 }
 .example-go {
-  margin-top: 10px;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--accent);
+  margin-top: 12px;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--accent-2);
+  transition: transform 0.3s var(--ease);
+}
+.example-card:hover .example-go {
+  transform: translateX(4px);
 }
 .example-more {
   border-style: dashed;
   border-color: var(--border-2);
   background: transparent;
   justify-content: center;
+  align-items: center;
+  text-align: center;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 .example-more .example-name {
-  color: var(--accent);
+  color: var(--text);
+}
+.example-more .example-go {
+  color: var(--accent-2);
 }
 .example-more:hover {
   border-style: solid;
-  background: var(--panel);
+  border-color: var(--accent);
+  background: rgba(10, 15, 24, 0.45);
 }
 
 /* --- How it works ---------------------------------------------------------- */
@@ -489,38 +538,43 @@ code {
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 22px;
+  gap: 24px;
   counter-reset: step;
 }
 .how-steps li {
   position: relative;
-  padding: 28px 24px;
+  padding: 30px 26px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  background: linear-gradient(180deg, var(--panel), transparent);
+  background: rgba(10, 15, 24, 0.3);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 .how-n {
   display: grid;
   place-items: center;
   width: 32px;
   height: 32px;
-  border-radius: 9px;
+  border-radius: 10px;
   font-family: var(--mono);
   font-weight: 700;
-  color: var(--accent-ink);
-  background: linear-gradient(180deg, var(--accent), var(--accent-2));
-  margin-bottom: 16px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+  box-shadow: 0 4px 10px -3px var(--accent-glow);
+  margin-bottom: 20px;
 }
 .how-steps h3 {
-  font-size: 17px;
+  font-size: 18px;
   font-weight: 700;
-  margin: 0 0 8px;
-  letter-spacing: -0.3px;
+  margin: 0 0 10px;
+  letter-spacing: -0.4px;
 }
 .how-steps p {
   font-size: 14.5px;
   color: var(--text-2);
   margin: 0;
+  line-height: 1.6;
 }
 
 /* --- Developers ------------------------------------------------------------ */
@@ -531,41 +585,51 @@ code {
 .dev-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
+  gap: 18px;
 }
 .dev-card {
   display: block;
-  padding: 22px 20px;
+  padding: 24px 20px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  background: var(--panel);
-  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
+  background: rgba(10, 15, 24, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
+    background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
 }
 .dev-card:hover {
-  border-color: var(--border-2);
-  transform: translateY(-3px);
+  border-color: rgba(255, 255, 255, 0.12);
+  background-color: rgba(18, 25, 42, 0.5);
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: 0 16px 35px -15px rgba(0,0,0,0.8);
 }
 a.dev-card:hover {
   border-color: var(--accent);
+  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.8), 0 0 20px -5px var(--accent-glow);
 }
 .dev-card h3 {
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 700;
-  margin: 0 0 8px;
-  letter-spacing: -0.2px;
+  margin: 0 0 10px;
+  letter-spacing: -0.3px;
 }
 .dev-card p {
-  font-size: 13.5px;
+  font-size: 14px;
   color: var(--text-2);
   margin: 0;
+  line-height: 1.55;
 }
 .dev-code {
   display: inline-block;
-  margin-top: 12px;
+  margin-top: 14px;
   font-size: 12px;
-  color: var(--accent);
-  background: var(--accent-faint);
-  border-color: var(--accent-veil);
+  color: var(--accent-2);
+  background: rgba(168, 85, 247, 0.07);
+  border: 1px solid rgba(168, 85, 247, 0.16);
+  padding: 2px 8px;
+  border-radius: 5px;
 }
 
 /* --- FAQ -------------------------------------------------------------------- */
@@ -578,28 +642,36 @@ a.dev-card:hover {
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16px;
 }
 .faq-item {
-  padding: 22px 24px;
+  padding: 24px 28px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  background: linear-gradient(180deg, var(--panel), transparent);
+  background: rgba(10, 15, 24, 0.35);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
+}
+.faq-item:hover {
+  border-color: rgba(255, 255, 255, 0.12);
+  background-color: rgba(18, 25, 42, 0.45);
 }
 .faq-item dt {
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 700;
-  letter-spacing: -0.2px;
-  margin: 0 0 8px;
+  letter-spacing: -0.3px;
+  margin: 0 0 10px;
 }
 .faq-item dd {
   margin: 0;
-  font-size: 14.5px;
-  line-height: 1.6;
+  font-size: 15px;
+  line-height: 1.65;
   color: var(--text-2);
 }
 .faq-item em {
-  color: var(--accent);
+  color: var(--accent-2);
   font-style: normal;
   font-weight: 600;
 }
@@ -607,16 +679,17 @@ a.dev-card:hover {
 /* --- Footer ---------------------------------------------------------------- */
 .footer {
   border-top: 1px solid var(--border);
-  margin-top: 40px;
-  padding-top: 40px;
-  padding-bottom: 56px;
+  margin-top: 60px;
+  padding-top: 48px;
+  padding-bottom: 64px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 .footer-brand {
   font-weight: 800;
-  font-size: 17px;
+  font-size: 18px;
+  letter-spacing: -0.4px;
 }
 .footer-brand .logo {
   color: var(--accent);
@@ -629,10 +702,11 @@ a.dev-card:hover {
   margin-left: 8px;
 }
 .footer-note {
-  font-size: 13px;
+  font-size: 13.5px;
   color: var(--muted);
   max-width: 70ch;
   margin: 0;
+  line-height: 1.6;
 }
 .footer-legal {
   font-family: var(--mono);
@@ -645,6 +719,7 @@ a.dev-card:hover {
   text-decoration: underline;
   text-decoration-color: var(--border-2);
   text-underline-offset: 2px;
+  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
 }
 .footer-legal a:hover {
   color: var(--accent);
@@ -653,13 +728,13 @@ a.dev-card:hover {
 
 /* --- Motion ---------------------------------------------------------------- */
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.9); }
 }
 .reveal {
   opacity: 0;
-  transform: translateY(18px);
-  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
+  transform: translateY(22px);
+  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
 }
 .reveal.in {
   opacity: 1;
@@ -679,7 +754,8 @@ a.dev-card:hover {
 @media (max-width: 920px) {
   .hero {
     grid-template-columns: 1fr;
-    gap: 40px;
+    gap: 48px;
+    padding-top: 32px;
   }
   .props,
   .examples-grid,
@@ -696,6 +772,12 @@ a.dev-card:hover {
   }
 }
 @media (max-width: 620px) {
+  .nav {
+    border-radius: 16px;
+    top: 8px;
+    margin: 8px;
+    width: auto;
+  }
   .nav-links {
     display: none;
   }
@@ -709,6 +791,6 @@ a.dev-card:hover {
     display: none;
   }
   .hero {
-    padding-top: 40px;
+    padding-top: 24px;
   }
 }
diff --git a/playground/src/style.css b/playground/src/style.css
index 7f8c11c..1bd8dfe 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -1,72 +1,75 @@
 /* ============================================================================
    Posecode Playground — "Kinetic Lab"
-   A cinematic motion-capture studio: deep slate that blends into the 3D
-   viewport, a single signature lime accent used like a tracking marker, and
-   one orchestrated page-load reveal. Type: Hanken Grotesk + JetBrains Mono.
+   A premium kinematic motion-capture studio. Overhauled with Apple-inspired 
+   glassmorphism, a futuristic violet-indigo palette, responsive segmented 
+   controls, and springy interactive details.
    ========================================================================== */
 
 :root {
-  /* Surfaces — tuned to flow into the Three.js scene (bg #0c0f15) */
-  --bg: #0a0d12;
-  --bg-viewer: #0c0f15;
-  --panel: #0f141b;
-  --panel-2: #141a23;
-  --panel-3: #1b222d;
-  --border: #1e2530;
-  --border-2: #2a323f;
+  /* Surfaces — tuned to flow into the Three.js scene (bg #06080b) */
+  --bg: #030406;
+  --bg-viewer: #06080b;
+  --panel: rgba(10, 15, 30, 0.45); /* True glassmorphic base */
+  --panel-2: rgba(20, 28, 48, 0.6);
+  --panel-3: rgba(28, 40, 68, 0.75);
+  --border: rgba(255, 255, 255, 0.05); /* Reflective hairline edges */
+  --border-2: rgba(255, 255, 255, 0.12);
 
   /* Ink */
-  --text: #e9eef4;
-  --text-2: #9aa6b4;
-  --muted: #616d7c;
+  --text: #f3f4f6;
+  --text-2: #9ca3af;
+  --muted: #6b7280;
 
-  /* Signature kinetic accent */
-  --accent: #c6f24a;
-  --accent-2: #a9e02f;
-  --accent-ink: #0a0d12;
-  --accent-glow: rgba(198, 242, 74, 0.45);
-  --accent-veil: rgba(198, 242, 74, 0.16);
-  --accent-faint: rgba(198, 242, 74, 0.07);
+  /* Signature kinetic violet/indigo accent */
+  --accent: #6366f1;
+  --accent-2: #a855f7;
+  --accent-ink: #ffffff;
+  --accent-glow: rgba(99, 102, 241, 0.4);
+  --accent-veil: rgba(99, 102, 241, 0.12);
+  --accent-faint: rgba(99, 102, 241, 0.04);
 
   /* Status */
-  --warn: #ffcc66;
-  --error: #ff6f6f;
+  --warn: #f59e0b; /* Amber */
+  --error: #ef4444; /* Coral Red */
 
   /* Track for the custom slider */
-  --track: #232b37;
+  --track: rgba(255, 255, 255, 0.08);
 
   --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
-  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
-  --radius: 10px;
-  --radius-sm: 8px;
-  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
-  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --radius: 14px;
+  --radius-sm: 10px;
+  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --shadow-2: 0 20px 50px rgba(0, 0, 0, 0.7);
+  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Elastic spring-out */
 
-  /* Material system — the light that separates a "flat panel" from a real,
-     machined surface. `--edge` is the hairline catch-light along a top edge;
-     `--sheen` a barely-there vertical gradient that gives panels a subtle
-     top-lit read. Used consistently so every chrome surface feels milled. */
-  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  --edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  /* Material systems */
+  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   --hairline: rgba(255, 255, 255, 0.06);
-  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0));
-  --shadow-float: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 34px -14px rgba(0, 0, 0, 0.8);
+  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
+  --shadow-float: 0 4px 20px rgba(0, 0, 0, 0.4), 0 20px 45px -10px rgba(0, 0, 0, 0.8);
 
-  /* Accent discipline: three tiers, brightest reserved. Signature moments only
-     get `--accent` at full strength; supporting states step down to line/wash
-     so the lime reads as a rare tracking marker, not a coat of paint. */
-  --accent-line: rgba(198, 242, 74, 0.35);
-  --accent-wash: rgba(198, 242, 74, 0.1);
+  /* Accent discipline */
+  --accent-line: rgba(99, 102, 241, 0.35);
+  --accent-wash: rgba(99, 102, 241, 0.1);
+
+  /* Syntax colors (mapped to editor.ts) */
+  --t-kw: #818cf8;
+  --t-kind: #22d3ee;
+  --t-act: #fbbf24;
+  --t-joint: #c084fc;
+  --t-atom: #34d399;
+  --t-num: #f97316;
+  --t-str: #f472b6;
+  --t-punct: #6b7280;
 }
 
 * {
   box-sizing: border-box;
 }
 
-/* Links inherit ink and stay undecorated unless a component opts in — no raw
-   UA blue anywhere. */
 a {
   color: inherit;
   text-decoration: none;
@@ -96,52 +99,50 @@ body {
   inset: 0;
   z-index: -2;
   background:
-    radial-gradient(120vw 80vh at 78% -10%, rgba(198, 242, 74, 0.06), transparent 60%),
-    radial-gradient(80vw 60vh at 8% 110%, rgba(70, 110, 160, 0.08), transparent 55%),
+    radial-gradient(100vw 70vh at 78% -10%, rgba(99, 102, 241, 0.07), transparent 60%),
+    radial-gradient(80vw 60vh at 8% 110%, rgba(168, 85, 247, 0.06), transparent 55%),
     var(--bg);
 }
 .bg-fx::after {
   content: "";
   position: absolute;
   inset: 0;
-  opacity: 0.035;
+  opacity: 0.02;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 
-/* --- Buttons (the thing that screamed "school project") ------------------ */
+/* --- Buttons (Premium Pill design) ---------------------------------------- */
 .btn {
   font-family: var(--sans);
   font-size: 13px;
   font-weight: 600;
-  letter-spacing: 0.1px;
+  letter-spacing: -0.1px;
   color: var(--text);
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-2);
-  border-radius: var(--radius-sm);
-  padding: 8px 14px;
+  border-radius: 999px; /* Pill */
+  padding: 8px 16px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   white-space: nowrap;
   transition:
-    transform 0.12s var(--ease),
-    border-color 0.16s var(--ease),
-    background 0.16s var(--ease),
-    box-shadow 0.16s var(--ease),
-    color 0.16s var(--ease);
-}
-/* Secondary buttons lift on a neutral surface — lime is reserved for the
-   primary CTA so it stays a signal, not decoration. */
+    transform 0.15s var(--ease),
+    border-color 0.2s var(--ease),
+    background 0.2s var(--ease),
+    box-shadow 0.2s var(--ease),
+    color 0.2s var(--ease);
+}
 .btn:hover {
-  border-color: var(--border-2);
-  background: var(--panel-3);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.08);
   color: #fff;
-  box-shadow: var(--edge-strong), var(--shadow-1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), var(--edge-strong);
 }
 .btn:active {
-  transform: translateY(1px);
+  transform: scale(0.96);
 }
 .btn:focus-visible {
   outline: none;
@@ -149,7 +150,7 @@ body {
   box-shadow: 0 0 0 2px var(--accent-wash);
 }
 .btn.sm {
-  padding: 5px 10px;
+  padding: 5px 12px;
   font-size: 12px;
 }
 
@@ -185,17 +186,17 @@ body {
 
 .btn.primary {
   color: var(--accent-ink);
-  background: linear-gradient(180deg, var(--accent), var(--accent-2));
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
   border-color: transparent;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 18px -8px var(--accent-glow);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 6px 18px -8px var(--accent-glow);
 }
 .btn.primary:hover {
   color: var(--accent-ink);
-  filter: brightness(1.06);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 10px 26px -8px var(--accent-glow);
+  filter: brightness(1.08);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 24px -6px var(--accent-glow);
 }
 
-/* --- Custom select -------------------------------------------------------- */
+/* --- Custom select (Pill styling) ----------------------------------------- */
 .select-wrap {
   position: relative;
   display: inline-flex;
@@ -203,18 +204,18 @@ body {
 .select-wrap::after {
   content: "";
   position: absolute;
-  right: 11px;
+  right: 13px;
   top: 50%;
-  width: 7px;
-  height: 7px;
+  width: 6px;
+  height: 6px;
   border-right: 1.5px solid var(--text-2);
   border-bottom: 1.5px solid var(--text-2);
   transform: translateY(-65%) rotate(45deg);
   pointer-events: none;
-  transition: border-color 0.16s var(--ease);
+  transition: border-color 0.2s var(--ease);
 }
 .select-wrap:hover::after {
-  border-color: var(--accent);
+  border-color: var(--accent-2);
 }
 select {
   appearance: none;
@@ -223,39 +224,40 @@ select {
   font-size: 13px;
   font-weight: 600;
   color: var(--text);
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-2);
-  border-radius: var(--radius-sm);
-  padding: 8px 32px 8px 12px;
+  border-radius: 999px; /* Pill */
+  padding: 6px 30px 6px 14px;
   cursor: pointer;
-  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
+  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
 }
 select:hover {
-  border-color: var(--accent);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.08);
 }
 .select-wrap.sm select {
-  padding: 5px 26px 5px 10px;
-  font-size: 12px;
+  padding: 4px 26px 4px 12px;
+  font-size: 11.5px;
 }
 .select-wrap.sm::after {
-  right: 9px;
-  width: 6px;
-  height: 6px;
+  right: 11px;
+  width: 5px;
+  height: 5px;
 }
 
-/* --- Top bar -------------------------------------------------------------- */
+/* --- Top bar (Floating Blur Header) --------------------------------------- */
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 20px;
+  padding: 10px 20px;
   border-bottom: 1px solid var(--border);
   background:
     var(--sheen),
-    linear-gradient(180deg, rgba(19, 24, 32, 0.94), rgba(11, 15, 21, 0.82));
+    rgba(10, 14, 22, 0.65);
   box-shadow: var(--edge);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
   z-index: 10;
 }
 
@@ -270,24 +272,25 @@ select:hover {
   color: var(--accent);
   font-size: 15px;
   align-self: center;
-  filter: drop-shadow(0 0 8px var(--accent-glow));
+  filter: drop-shadow(0 0 10px var(--accent-glow));
   animation: pulse 3.4s ease-in-out infinite;
 }
 .brand .wordmark {
   font-weight: 800;
   font-size: 18px;
-  letter-spacing: -0.4px;
+  letter-spacing: -0.5px;
 }
 .brand .tag {
   color: var(--muted);
   font-family: var(--mono);
-  font-weight: 500;
-  font-size: 11px;
-  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 10px;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
-  padding: 2px 7px;
+  padding: 1px 8px;
   border: 1px solid var(--border-2);
   border-radius: 999px;
+  background: rgba(255, 255, 255, 0.02);
 }
 
 .topbar-actions {
@@ -296,24 +299,23 @@ select:hover {
   align-items: center;
 }
 
-/* Movement-library trigger — the one content control in the topbar. Reads like
-   a select (kicker, current movement, caret) but opens the full browse panel. */
+/* Movement-library trigger */
 .lib-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--sans);
   color: var(--text);
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-2);
-  border-radius: var(--radius-sm);
-  padding: 8px 14px;
+  border-radius: 999px; /* Pill */
+  padding: 7px 16px;
   cursor: pointer;
-  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
+  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
 }
 .lib-btn:hover {
-  border-color: var(--accent-line);
-  background: var(--panel-3);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.08);
 }
 .lib-btn:focus-visible {
   outline: none;
@@ -321,9 +323,9 @@ select:hover {
   box-shadow: 0 0 0 2px var(--accent-wash);
 }
 .lib-btn-kicker {
-  font-size: 10px;
+  font-size: 9.5px;
   font-weight: 700;
-  letter-spacing: 0.7px;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
   color: var(--muted);
 }
@@ -336,33 +338,33 @@ select:hover {
   white-space: nowrap;
 }
 .lib-caret {
-  width: 7px;
-  height: 7px;
+  width: 6px;
+  height: 6px;
   margin-top: -3px;
   border-right: 1.5px solid var(--text-2);
   border-bottom: 1.5px solid var(--text-2);
   transform: rotate(45deg);
-  transition: border-color 0.16s var(--ease);
+  transition: border-color 0.2s var(--ease);
 }
 .lib-btn:hover .lib-caret {
-  border-color: var(--accent);
+  border-color: var(--accent-2);
 }
 .count {
-  color: var(--accent);
+  color: var(--accent-2);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
 
-/* Divider between content-selection controls and the action buttons. */
+/* Divider in the floating topbar */
 .tb-divider {
   align-self: stretch;
   width: 1px;
-  margin: 4px 4px;
+  margin: 6px 4px;
   background: linear-gradient(
     180deg,
     transparent,
-    var(--border-2) 25%,
-    var(--border-2) 75%,
+    rgba(255, 255, 255, 0.1) 25%,
+    rgba(255, 255, 255, 0.1) 75%,
     transparent
   );
 }
@@ -372,20 +374,19 @@ select:hover {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 9px 20px;
+  padding: 8px 20px;
   font-size: 13px;
   color: var(--text-2);
-  background: rgba(0, 0, 0, 0.16);
+  background: rgba(0, 0, 0, 0.25);
   border-bottom: 1px solid var(--border);
 }
-/* A small lime tick leads the strip instead of a full lime headline. */
 .intro::before {
   content: "";
   flex: none;
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--accent-2);
   box-shadow: 0 0 8px var(--accent-glow);
 }
 .intro b {
@@ -396,14 +397,14 @@ select:hover {
   margin-left: auto;
   background: none;
   border: none;
-  color: var(--accent);
+  color: var(--accent-2);
   padding: 0;
   font-family: var(--sans);
   font-weight: 700;
   font-size: 13px;
   cursor: pointer;
   white-space: nowrap;
-  transition: filter 0.15s var(--ease);
+  transition: filter 0.2s var(--ease);
 }
 .intro .link:hover {
   filter: brightness(1.2);
@@ -428,7 +429,7 @@ select:hover {
 .layout {
   flex: 1;
   display: grid;
-  grid-template-columns: minmax(340px, 0.85fr) 1.15fr;
+  grid-template-columns: minmax(340px, 0.82fr) 1.18fr;
   min-height: 0;
 }
 
@@ -446,15 +447,15 @@ select:hover {
   gap: 10px;
   padding: 9px 16px;
   border-bottom: 1px solid var(--border);
-  background: var(--sheen), var(--panel);
+  background: rgba(10, 14, 22, 0.45);
   box-shadow: var(--edge);
 }
 .traffic {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: var(--border-2);
-  box-shadow: 16px 0 0 var(--border-2), 32px 0 0 var(--border-2);
+  background: #ff5f56;
+  box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f;
   margin-right: 28px;
 }
 .file-name {
@@ -472,13 +473,13 @@ select:hover {
   font-size: 10px;
   letter-spacing: 1px;
   text-transform: uppercase;
-  color: var(--accent);
+  color: var(--accent-2);
 }
 .live i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--accent-2);
   box-shadow: 0 0 8px var(--accent-glow);
   animation: pulse 1.8s ease-in-out infinite;
 }
@@ -488,8 +489,8 @@ select:hover {
   min-height: 0;
   display: flex;
   position: relative;
+  transition: box-shadow 0.2s var(--ease);
 }
-/* CodeMirror host — fills the pane; the editor theme lives in editor.ts */
 #editor {
   flex: 1;
   min-height: 0;
@@ -502,13 +503,12 @@ select:hover {
 #editor .cm-editor.cm-focused {
   outline: none;
 }
-/* The step block driving the currently-animating phase (synced to playback). */
+/* The active phase block running inside the editor */
 #editor .cm-phase-active {
   background: var(--accent-faint);
-  box-shadow: inset 2px 0 0 0 var(--accent);
-  transition: background 0.2s var(--ease);
+  box-shadow: inset 3px 0 0 0 var(--accent-2);
+  transition: background 0.3s var(--ease);
 }
-/* Inset focus glow on the editor surface */
 .editor-wrap:focus-within {
   box-shadow: inset 0 0 0 1px var(--accent-veil), inset 0 14px 30px -28px var(--accent-glow);
 }
@@ -521,11 +521,11 @@ select:hover {
   font-family: var(--mono);
   font-size: 12px;
   line-height: 1.5;
-  background: var(--panel);
+  background: rgba(10, 14, 22, 0.4);
 }
 .warnings:empty::before {
   content: "✓  parses clean, no warnings";
-  color: var(--accent);
+  color: var(--t-atom); /* Clean green */
   opacity: 0.85;
 }
 .warnings .row {
@@ -557,7 +557,7 @@ select:hover {
   display: block;
   min-height: 0;
 }
-/* Top vignette so HUD text stays legible over bright poses */
+/* Visual vignette overlay */
 .viewer-veil {
   position: absolute;
   top: 0;
@@ -565,39 +565,47 @@ select:hover {
   right: 0;
   height: 130px;
   pointer-events: none;
-  background: linear-gradient(180deg, rgba(8, 10, 14, 0.6), transparent);
+  background: linear-gradient(180deg, rgba(3, 4, 6, 0.7), transparent);
 }
 
+/* visionOS-style floating HUD panels */
 .hud {
   position: absolute;
   top: 18px;
   left: 20px;
   pointer-events: none;
   max-width: 60ch;
+  background: rgba(10, 14, 22, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius);
+  padding: 10px 16px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: var(--shadow-1);
+  z-index: 5;
 }
 .phase {
   font-weight: 800;
-  font-size: 17px;
-  letter-spacing: -0.2px;
-  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
+  font-size: 16px;
+  letter-spacing: -0.3px;
+  display: flex;
+  align-items: center;
 }
 .phase:not(:empty)::before {
   content: "";
   display: inline-block;
   width: 7px;
   height: 7px;
-  margin-right: 9px;
+  margin-right: 8px;
   border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 10px var(--accent-glow);
-  vertical-align: middle;
+  background: var(--accent-2);
+  box-shadow: 0 0 8px var(--accent-glow);
 }
 .cue {
   color: var(--text-2);
-  font-size: 13px;
+  font-size: 12.5px;
   line-height: 1.45;
   margin-top: 4px;
-  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
 }
 
 .reps {
@@ -606,69 +614,73 @@ select:hover {
   right: 20px;
   font-family: var(--mono);
   font-size: 11px;
+  font-weight: 600;
   letter-spacing: 0.5px;
-  color: var(--text-2);
-  background: rgba(10, 13, 18, 0.55);
-  border: 1px solid var(--border-2);
+  color: var(--text);
+  background: rgba(10, 14, 22, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 999px;
-  padding: 5px 12px;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  padding: 6px 14px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   pointer-events: none;
+  z-index: 5;
+  box-shadow: var(--shadow-1);
 }
 .reps:empty {
   display: none;
 }
 
-/* --- Phase ribbon --------------------------------------------------------- */
+/* --- Phase ribbon (floating Dock elements) -------------------------------- */
 .ribbon {
   display: flex;
   gap: 7px;
-  padding: 12px 16px 4px;
+  padding: 14px 16px 6px;
   flex-wrap: wrap;
+  z-index: 4;
 }
 .ribbon .chip {
   font-family: var(--sans);
   font-size: 12px;
   font-weight: 600;
   color: var(--text-2);
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border-2);
-  border-radius: 999px;
-  padding: 5px 13px 5px 12px;
+  border-radius: 999px; /* Pill */
+  padding: 5px 12px 5px 10px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   transition:
-    color 0.15s var(--ease),
-    border-color 0.15s var(--ease),
-    background 0.15s var(--ease),
-    box-shadow 0.15s var(--ease);
+    color 0.2s var(--ease),
+    border-color 0.2s var(--ease),
+    background 0.2s var(--ease),
+    box-shadow 0.2s var(--ease),
+    transform 0.15s var(--ease);
 }
-/* A status dot on every chip: dim by default, lit lime when active. Carries the
-   "which phase is playing" signal without a loud solid fill. */
 .ribbon .chip::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--border-2);
-  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
+  background: rgba(255, 255, 255, 0.25);
+  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
 }
 .ribbon .chip:hover {
   color: var(--text);
-  border-color: var(--border-2);
-  background: var(--panel-3);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.06);
+  transform: translateY(-1px);
 }
 .ribbon .chip.active {
   color: var(--text);
   background: var(--accent-wash);
   border-color: var(--accent-line);
-  box-shadow: var(--edge);
+  box-shadow: 0 2px 10px -4px var(--accent-glow);
 }
 .ribbon .chip.active::before {
-  background: var(--accent);
+  background: var(--accent-2);
   box-shadow: 0 0 8px var(--accent-glow);
 }
 
@@ -677,59 +689,54 @@ select:hover {
   display: flex;
   align-items: center;
   gap: 16px;
-  padding: 13px 20px;
+  padding: 12px 20px;
   border-top: 1px solid var(--border);
   background:
     var(--sheen),
-    linear-gradient(180deg, rgba(17, 22, 30, 0.9), rgba(9, 12, 17, 0.96));
+    rgba(10, 14, 22, 0.65);
   box-shadow: var(--edge);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  z-index: 5;
 }
 
-/* Circular media-player transport — a single confident lime disc instead of a
-   wide, shouty pill. Reads as a precision control, not a toy button. */
+/* Circular media-player button */
 .btn-play {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
-  width: 40px;
-  height: 40px;
+  width: 38px;
+  height: 38px;
   color: var(--accent-ink);
-  background: radial-gradient(120% 120% at 50% 22%, var(--accent), var(--accent-2));
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.4),
-    inset 0 -1px 2px rgba(0, 0, 0, 0.15),
-    0 4px 14px -4px var(--accent-glow);
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 4px 12px -3px var(--accent-glow);
   transition:
-    transform 0.14s var(--ease),
-    filter 0.16s var(--ease),
+    transform 0.15s var(--ease),
+    filter 0.2s var(--ease),
     box-shadow 0.2s var(--ease);
 }
 .btn-play:hover {
-  filter: brightness(1.05);
+  filter: brightness(1.08);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.5),
-    inset 0 -1px 2px rgba(0, 0, 0, 0.15),
-    0 0 0 5px var(--accent-wash),
-    0 8px 22px -6px var(--accent-glow);
+    inset 0 1px 0 rgba(255, 255, 255, 0.4),
+    0 0 0 4px var(--accent-wash),
+    0 8px 18px -4px var(--accent-glow);
 }
 .btn-play:active {
-  transform: scale(0.94);
+  transform: scale(0.92);
 }
 .btn-play:focus-visible {
   outline: none;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.5),
     0 0 0 3px var(--bg),
     0 0 0 5px var(--accent);
 }
-/* The word label is redundant next to a universal glyph — hide it, keep it for
-   screen readers via aria-label on the button. */
 .btn-play .lbl {
   position: absolute;
   width: 1px;
@@ -739,13 +746,12 @@ select:hover {
   white-space: nowrap;
 }
 .btn-play .ico {
-  width: 15px;
-  height: 15px;
+  width: 14px;
+  height: 14px;
   background: currentColor;
   -webkit-mask: center / contain no-repeat var(--icon);
   mask: center / contain no-repeat var(--icon);
 }
-/* Optically center the play triangle in the disc. */
 .btn-play[data-playing="false"] .ico {
   transform: translateX(1px);
 }
@@ -756,7 +762,7 @@ select:hover {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
 }
 
-/* Custom scrubber — fill driven by --pct (set in main.ts) */
+/* Custom scrubber */
 .scrub-wrap {
   position: relative;
   flex: 1;
@@ -774,9 +780,9 @@ select:hover {
   z-index: 2;
 }
 #scrub::-webkit-slider-runnable-track {
-  height: 5px;
+  height: 4px;
   border-radius: 999px;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
   background: linear-gradient(
     90deg,
     var(--accent) 0%,
@@ -787,24 +793,24 @@ select:hover {
 }
 #scrub::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 13px;
-  height: 13px;
+  width: 12px;
+  height: 12px;
   margin-top: -4px;
   border-radius: 50%;
   background: #fff;
   box-shadow:
-    0 0 0 3px var(--accent),
-    0 1px 3px rgba(0, 0, 0, 0.5),
-    0 0 12px var(--accent-glow);
+    0 0 0 3px var(--accent-2),
+    0 1px 3px rgba(0, 0, 0, 0.4),
+    0 0 10px var(--accent-glow);
   transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
 }
 #scrub:hover::-webkit-slider-thumb {
-  transform: scale(1.12);
+  transform: scale(1.15);
   box-shadow:
-    0 0 0 3px var(--accent),
-    0 0 0 7px var(--accent-wash),
-    0 1px 3px rgba(0, 0, 0, 0.5),
-    0 0 16px var(--accent-glow);
+    0 0 0 3px var(--accent-2),
+    0 0 0 6px rgba(168, 85, 247, 0.15),
+    0 1px 3px rgba(0, 0, 0, 0.4),
+    0 0 14px var(--accent-glow);
 }
 #scrub::-moz-range-track {
   height: 4px;
@@ -814,15 +820,15 @@ select:hover {
 #scrub::-moz-range-progress {
   height: 4px;
   border-radius: 999px;
-  background: var(--accent);
+  background: var(--accent-2);
 }
 #scrub::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   border: none;
   border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 0 4px var(--accent-veil), 0 0 12px var(--accent-glow);
+  background: var(--accent-2);
+  box-shadow: 0 0 0 4px var(--accent-veil), 0 0 10px var(--accent-glow);
 }
 
 .markers {
@@ -830,7 +836,7 @@ select:hover {
   left: 0;
   right: 0;
   top: 50%;
-  height: 12px;
+  height: 10px;
   transform: translateY(-50%);
   pointer-events: none;
   z-index: 1;
@@ -839,9 +845,9 @@ select:hover {
   position: absolute;
   top: 0;
   width: 2px;
-  height: 12px;
+  height: 10px;
   background: var(--muted);
-  opacity: 0.6;
+  opacity: 0.5;
   border-radius: 1px;
 }
 
@@ -854,20 +860,23 @@ select:hover {
   font-variant-numeric: tabular-nums;
   letter-spacing: -0.2px;
   padding-left: 16px;
-  border-left: 1px solid var(--hairline);
+  border-left: 1px solid var(--border-2);
 }
+
 .loop,
 .speed {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 10.5px;
+  font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.6px;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
   color: var(--muted);
   user-select: none;
 }
+
+/* Custom iOS Snappy Switch for loops */
 .loop input {
   appearance: none;
   -webkit-appearance: none;
@@ -878,7 +887,7 @@ select:hover {
   border: 1px solid var(--border-2);
   position: relative;
   cursor: pointer;
-  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
+  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
 }
 .loop input::after {
   content: "";
@@ -889,24 +898,24 @@ select:hover {
   height: 12px;
   border-radius: 50%;
   background: var(--text-2);
-  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
+  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
 }
 .loop input:checked {
-  background: var(--accent-veil);
-  border-color: var(--accent);
+  background: rgba(168, 85, 247, 0.2);
+  border-color: var(--accent-2);
 }
 .loop input:checked::after {
   transform: translateX(14px);
-  background: var(--accent);
+  background: var(--accent-2);
 }
 
-/* --- Slide-over ----------------------------------------------------------- */
+/* --- Slide-over Panels (Glassmorphism) ------------------------------------ */
 .scrim {
   position: fixed;
   inset: 0;
-  background: rgba(4, 6, 9, 0.6);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  background: rgba(3, 4, 6, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
   z-index: 40;
   animation: fade 0.2s var(--ease);
 }
@@ -916,13 +925,15 @@ select:hover {
   right: 0;
   height: 100%;
   width: min(480px, 92vw);
-  background: linear-gradient(180deg, var(--panel), var(--bg));
+  background: rgba(10, 14, 22, 0.75);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border-left: 1px solid var(--border-2);
   z-index: 50;
   display: flex;
   flex-direction: column;
-  box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.7);
-  animation: slidein 0.32s var(--ease);
+  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
+  animation: slidein 0.35s var(--ease);
 }
 .slideover-head {
   display: flex;
@@ -961,7 +972,7 @@ select:hover {
   width: 26px;
   height: 26px;
   border-radius: 8px;
-  background: var(--accent-veil);
+  background: var(--accent-wash);
   border: 1px solid var(--accent);
   color: var(--accent);
   font-weight: 800;
@@ -974,7 +985,7 @@ select:hover {
   font-weight: 700;
 }
 .steps em {
-  color: var(--accent);
+  color: var(--accent-2);
   font-style: normal;
   font-weight: 600;
 }
@@ -984,7 +995,7 @@ select:hover {
 }
 .steps code {
   font-size: 12px;
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   padding: 1px 6px;
   border-radius: 5px;
@@ -1001,7 +1012,7 @@ select:hover {
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.02);
   font-size: 12px;
   color: var(--text-2);
   border-bottom: 1px solid var(--border);
@@ -1013,7 +1024,7 @@ select:hover {
   font-size: 11.5px;
   line-height: 1.55;
   color: var(--text-2);
-  background: var(--bg);
+  background: rgba(0, 0, 0, 0.2);
   max-height: 46vh;
   overflow: auto;
   white-space: pre-wrap;
@@ -1032,11 +1043,11 @@ select:hover {
   font-family: var(--sans);
   font-size: 13.5px;
   color: var(--text);
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border-2);
   border-radius: var(--radius-sm);
-  padding: 9px 12px;
-  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
+  padding: 9px 14px;
+  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
 }
 #lib-search::placeholder {
   color: var(--muted);
@@ -1046,12 +1057,11 @@ select:hover {
   border-color: var(--accent);
   box-shadow: 0 0 0 2px var(--accent-wash);
 }
-/* Chip rows scroll sideways instead of wrapping, so filters stay one glance tall. */
 .chip-row {
   display: flex;
   gap: 6px;
   overflow-x: auto;
-  padding-bottom: 2px;
+  padding-bottom: 4px;
   scrollbar-width: none;
 }
 .chip-row::-webkit-scrollbar {
@@ -1063,20 +1073,20 @@ select:hover {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-2);
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border-2);
   border-radius: 999px;
   padding: 5px 12px;
   cursor: pointer;
   white-space: nowrap;
   transition:
-    color 0.15s var(--ease),
-    border-color 0.15s var(--ease),
-    background 0.15s var(--ease);
+    color 0.2s var(--ease),
+    border-color 0.2s var(--ease),
+    background 0.2s var(--ease);
 }
 .fchip:hover {
   color: var(--text);
-  background: var(--panel-3);
+  background: rgba(255, 255, 255, 0.06);
 }
 .fchip[aria-pressed="true"] {
   color: var(--text);
@@ -1109,14 +1119,14 @@ select:hover {
   border-radius: var(--radius-sm);
   padding: 9px 10px;
   cursor: pointer;
-  transition: background 0.14s var(--ease);
+  transition: background 0.15s var(--ease);
 }
 .lib-item:hover {
-  background: var(--panel-2);
+  background: rgba(255, 255, 255, 0.04);
 }
 .lib-item[aria-current="true"] {
   background: var(--accent-wash);
-  box-shadow: inset 2px 0 0 0 var(--accent);
+  box-shadow: inset 2.5px 0 0 0 var(--accent-2);
 }
 .lib-item .li-name {
   font-family: var(--sans);
@@ -1146,23 +1156,20 @@ select:hover {
 
 /* --- Scrollbars ----------------------------------------------------------- */
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--border-2);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 999px;
-  border: 2px solid transparent;
-  background-clip: padding-box;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #38424f;
-  background-clip: padding-box;
+  background: rgba(255, 255, 255, 0.16);
 }
 
 /* --- Focus visibility ----------------------------------------------------- */
 :focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-2);
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -1197,7 +1204,7 @@ select:hover {
   to { opacity: 1; transform: scale(1); }
 }
 
-/* Orchestrated page-load reveal */
+/* Page loads visual reveals */
 @media (prefers-reduced-motion: no-preference) {
   .topbar { animation: rise 0.5s var(--ease) both; }
   .intro { animation: rise 0.5s var(--ease) 0.06s both; }
@@ -1206,41 +1213,43 @@ select:hover {
   .transport { animation: rise 0.5s var(--ease) 0.3s both; }
 }
 
-/* --- Mobile Editor/Viewer segmented control (hidden on desktop) ----------- */
+/* --- Segmented mobile controls (visionOS pill tabs) ----------------------- */
 .mobile-tabs {
   display: none;
-  gap: 5px;
-  padding: 8px 16px;
+  gap: 4px;
+  padding: 6px 12px;
   border-bottom: 1px solid var(--border);
-  background: var(--panel);
+  background: rgba(10, 14, 22, 0.4);
+  backdrop-filter: blur(8px);
+  margin: 8px 16px;
+  border-radius: 999px; /* Floating segmented bar */
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-1);
 }
 .mtab {
   flex: 1;
   font-family: var(--sans);
-  font-weight: 700;
-  font-size: 13px;
-  letter-spacing: 0.2px;
+  font-weight: 600;
+  font-size: 12.5px;
+  letter-spacing: -0.1px;
   color: var(--text-2);
-  background: var(--panel-2);
-  border: 1px solid var(--border-2);
-  border-radius: 8px;
-  padding: 10px;
+  background: transparent;
+  border: none;
+  border-radius: 999px;
+  padding: 8px;
   cursor: pointer;
-  transition: color 0.15s var(--ease), background 0.15s var(--ease),
-    border-color 0.15s var(--ease);
+  transition: color 0.2s var(--ease), background 0.2s var(--ease),
+    box-shadow 0.2s var(--ease);
 }
 .mtab[aria-selected="true"] {
-  color: var(--accent-ink);
-  background: linear-gradient(180deg, var(--accent), var(--accent-2));
-  border-color: transparent;
-  box-shadow: 0 4px 14px -6px var(--accent-glow);
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 /* --- Responsive ----------------------------------------------------------- */
 @media (max-width: 860px) {
-  /* Topbar: brand on its own line; below it one row with the Movement button
-     plus the two icon actions, then the primary CTA. Two dropdown-free rows
-     instead of the old three rows of selects. */
   .topbar {
     flex-wrap: wrap;
     gap: 10px 10px;
@@ -1258,17 +1267,15 @@ select:hover {
     justify-content: flex-start;
   }
   .lib-btn-kicker {
-    display: none; /* the caret already says "this opens a picker" */
+    display: none;
   }
   .lib-btn-name {
     flex: 1;
     max-width: none;
   }
-  /* The vertical divider only makes sense in the single-row desktop layout. */
   .tb-divider {
     display: none;
   }
-  /* Compact "How to use" + "Share" to icon-only so the controls fit one row. */
   #how-to,
   #share {
     flex: 0 0 auto;
@@ -1288,7 +1295,7 @@ select:hover {
     justify-content: center;
   }
 
-  /* The movement library becomes a bottom sheet on phones. */
+  /* Library bottom sheet on mobile */
   .slideover.library {
     top: auto;
     left: 0;
@@ -1299,7 +1306,7 @@ select:hover {
     border-left: none;
     border-top: 1px solid var(--border-2);
     border-radius: 16px 16px 0 0;
-    animation: sheetup 0.32s var(--ease);
+    animation: sheetup 0.35s var(--ease);
     padding-bottom: env(safe-area-inset-bottom, 0px);
   }
   .lib-tools {
@@ -1313,7 +1320,6 @@ select:hover {
     margin-left: 0;
   }
 
-  /* One pane at a time, full height, toggled by the segmented control. */
   .mobile-tabs {
     display: flex;
   }
@@ -1334,7 +1340,6 @@ select:hover {
   .hud {
     max-width: 80vw;
   }
-  /* Keep the transport clear of the iOS home indicator. */
   .transport {
     gap: 10px;
     padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));