Drop corner smoothing from the pills

apps/www/package.json

@@ -16,10 +16,9 @@
     "typecheck": "bun run check"
   },
   "dependencies": {
-    "@lisse/core": "0.7.2",
     "@lucide/svelte": "1.45.0",
-    "@powermove/player": "workspace:*",
-    "@powermove/tokens": "workspace:*"
+    "@powermove/tokens": "workspace:*",
+    "@powermove/player": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "3.0.10",

apps/www/src/app.css

@@ -39,17 +39,13 @@ main{overflow:clip}
 .cta.center{justify-content:center}
 
 /* Small solid pills: white on the gradient, ink on paper, frosted for the secondary. */
-.pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background var(--dur-3),color var(--dur-3),scale var(--dur-2) var(--ease)}
+.pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background var(--dur-3),color var(--dur-3),scale var(--dur-2) var(--ease)}
 .pill:active{scale:.98}
 .pill.light{background:#fff;color:#16110E}
 .pill.light:hover{background:rgb(255 255 255 / .86)}
 .pill.glass{background:rgb(255 255 255 / .13);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
 .pill.glass:hover{background:rgb(255 255 255 / .2)}
 .pill.dark{background:#16110E;color:#fff}
-/* Smoothed pills draw keyboard focus as a Lisse inner edge; a box-shadow ring would be clipped. */
-.pill.light{--squircle-focus:var(--accent)}
-.pill.glass{--squircle-focus:rgb(255 255 255 / .9)}
-.pill[data-squircle]:focus-visible{box-shadow:none}
 
 /* ---- header ---- */
 .site-header{position:absolute;inset:0 0 auto;z-index:50;color:var(--tx)}

apps/www/src/lib/Footer.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-  import { squircle } from '$lib/squircle';
-
-  // The site's marketing pills read flat at the app's 0.5 control smoothing.
-  const PILL = { smoothing: 0.8 };
   import { GITHUB, RELEASES } from '$lib/links';
   import { download, resolveDownload, stars } from '$lib/download.svelte';
 
@@ -50,8 +46,8 @@
       <a class="foot-mark" href="/#top" aria-label="Powermove home"><span aria-hidden="true"></span></a>
       <p class="foot-line">Powermove is free and open source, for Macs with Apple silicon.</p>
       <div class="foot-cta">
-        <a class="pill light" use:squircle={PILL} href={download.href}>Download for Mac</a>
-        <a class="pill glass" use:squircle={PILL} href={GITHUB} target="_blank" rel="noopener">Star on GitHub{#if stars.label} <span class="pill-count tabular">{stars.label}</span>{/if}</a>
+        <a class="pill light" href={download.href}>Download for Mac</a>
+        <a class="pill glass" href={GITHUB} target="_blank" rel="noopener">Star on GitHub{#if stars.label} <span class="pill-count tabular">{stars.label}</span>{/if}</a>
       </div>
     </div>
 

apps/www/src/lib/Hero.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-  import { squircle } from '$lib/squircle';
-
-  // The site's marketing pills read flat at the app's 0.5 control smoothing.
-  const PILL = { smoothing: 0.8 };
   import { onMount, untrack } from 'svelte';
   import { download, stars } from '$lib/download.svelte';
   import { GITHUB } from '$lib/links';
@@ -176,6 +172,6 @@
 </div>
 
 <div class="hero-cta">
-  <a class="pill light" use:squircle={PILL} href={download.href}>Download for Mac</a>
-  <a class="pill glass" use:squircle={PILL} href={GITHUB} target="_blank" rel="noopener">Star on GitHub{#if stars.label} <span class="pill-count tabular">{stars.label}</span>{/if}</a>
+  <a class="pill light" href={download.href}>Download for Mac</a>
+  <a class="pill glass" href={GITHUB} target="_blank" rel="noopener">Star on GitHub{#if stars.label} <span class="pill-count tabular">{stars.label}</span>{/if}</a>
 </div>