diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 43d2524..881f068 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -29,7 +29,7 @@ jobs:
         with:
           node-version-file: ".node-version"
           run-install: true
-          registry-url: 'https://registry.npmjs.org'
+          registry-url: "https://registry.npmjs.org"
 
       - name: Build package
         run: vp run @klinking/squircle#build
diff --git a/README.md b/README.md
index 2982457..716d17c 100644
--- a/README.md
+++ b/README.md
@@ -83,14 +83,14 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-amt-* {
   --squircle-amt: --value(--squircle-amt-*, number);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     corner-shape: superellipse(var(--squircle-amt));
   }
 }
 
 @utility squircle-* {
   border-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -105,7 +105,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-t-* {
   border-top-left-radius: --value(--radius-*);
   border-top-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -119,7 +119,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-r-* {
   border-top-right-radius: --value(--radius-*);
   border-bottom-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -133,7 +133,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-b-* {
   border-bottom-left-radius: --value(--radius-*);
   border-bottom-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -147,7 +147,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-l-* {
   border-top-left-radius: --value(--radius-*);
   border-bottom-left-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -163,7 +163,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-s-* {
   border-start-start-radius: --value(--radius-*);
   border-end-start-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -177,7 +177,7 @@ If you'd rather not add a dependency, copy the source directly:
 @utility squircle-e-* {
   border-start-end-radius: --value(--radius-*);
   border-end-end-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     --squircle-r: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -192,7 +192,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-tl-* {
   border-top-left-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-top-left-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -203,7 +203,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-tr-* {
   border-top-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-top-right-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -214,7 +214,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-br-* {
   border-bottom-right-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-bottom-right-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -225,7 +225,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-bl-* {
   border-bottom-left-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-bottom-left-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -238,7 +238,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-ss-* {
   border-start-start-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-start-start-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -249,7 +249,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-se-* {
   border-start-end-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-start-end-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -260,7 +260,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-es-* {
   border-end-start-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-end-start-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -271,7 +271,7 @@ If you'd rather not add a dependency, copy the source directly:
 
 @utility squircle-ee-* {
   border-end-end-radius: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  @supports (corner-shape: superellipse(2)) {
     border-end-end-radius: calc(
       --value(--radius- *) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 1.5))))
@@ -297,7 +297,7 @@ const correctedRadius = (value: string): string =>
 
 const cornerShape = "superellipse(var(--squircle-amt, 1.5))";
 
-const supportsCornerShape = "@supports (corner-shape: superellipse())";
+const supportsCornerShape = "@supports (corner-shape: superellipse(2))";
 
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const squirclePlugin: Parameters<typeof plugin>[0] = ({ matchUtilities, theme }) => {
diff --git a/package.json b/package.json
index 98c862b..fd16c20 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "ready": "vp fmt && vp lint && vp run -r test",
     "dev": "vp dev",
     "prepare": "vp config"
   },
diff --git a/package/.DS_Store b/package/.DS_Store
deleted file mode 100644
index 353a63c..0000000
Binary files a/package/.DS_Store and /dev/null differ
diff --git a/package/scripts/generate-squircle-css.ts b/package/scripts/generate-squircle-css.ts
index 5e9dfb7..ca340bc 100644
--- a/package/scripts/generate-squircle-css.ts
+++ b/package/scripts/generate-squircle-css.ts
@@ -10,6 +10,7 @@ import {
   isComment,
   usesIntermediateVar,
 } from "../src/variants";
+import { SUPPORTS_RULE } from "../src/variants";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -21,7 +22,7 @@ function multiPropUtility(name: string, props: string[]) {
   return `\
 @utility ${name} {
 ${fallbacks}
-  @supports (corner-shape: superellipse()) {
+  ${SUPPORTS_RULE} {
     --squircle-r: ${formula};
 ${corrected}
     corner-shape: ${getCornerShape()};
@@ -33,7 +34,7 @@ function singlePropUtility(name: string, prop: string) {
   return `\
 @utility ${name} {
   ${prop}: --value(--radius-*);
-  @supports (corner-shape: superellipse()) {
+  ${SUPPORTS_RULE} {
     ${prop}: ${formula};
     corner-shape: ${getCornerShape()};
   }
@@ -44,18 +45,13 @@ function generateCss(): string {
   const blocks: string[] = [];
 
   blocks.push(`\
-/* THIS FILE IS GENERATED — do not edit by hand.
- * Source: scripts/generate-squircle-css.ts
- * Formula: src/variants.ts
- * Run: vp run generate:css */
-
 /* ── Squircle utilities ─────────────────────────────────────── */
 /* squircle-amt-[n] sets the superellipse amount (default ${DEFAULT_AMT})    */
 /* squircle-* mirrors rounded-* variants: all, t, r, b, l, s, e, tl, tr, br, bl, ss, se, es, ee */
 
 @utility squircle-amt-* {
   --squircle-amt: --value(--squircle-amt-*, number);
-  @supports (corner-shape: superellipse()) {
+  ${SUPPORTS_RULE} {
     corner-shape: superellipse(var(--squircle-amt));
   }
 }`);
diff --git a/package/squircle/.DS_Store b/package/squircle/.DS_Store
deleted file mode 100644
index 353a63c..0000000
Binary files a/package/squircle/.DS_Store and /dev/null differ
diff --git a/package/src/__snapshots__/squircle-css.test.ts.snap b/package/src/__snapshots__/squircle-css.test.ts.snap
index d2d0d65..ac68048 100644
--- a/package/src/__snapshots__/squircle-css.test.ts.snap
+++ b/package/src/__snapshots__/squircle-css.test.ts.snap
@@ -4,7 +4,7 @@ exports[`squircle.css utilities > squircle-b-md snapshot 1`] = `
 ".squircle-b-md {
     border-bottom-left-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -19,7 +19,7 @@ exports[`squircle.css utilities > squircle-b-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-bl-md snapshot 1`] = `
 ".squircle-bl-md {
     border-bottom-left-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-bottom-left-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -29,7 +29,7 @@ exports[`squircle.css utilities > squircle-bl-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-br-md snapshot 1`] = `
 ".squircle-br-md {
     border-bottom-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-bottom-right-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -40,7 +40,7 @@ exports[`squircle.css utilities > squircle-e-md snapshot 1`] = `
 ".squircle-e-md {
     border-start-end-radius: var(--radius-md);
     border-end-end-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -55,7 +55,7 @@ exports[`squircle.css utilities > squircle-e-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-ee-md snapshot 1`] = `
 ".squircle-ee-md {
     border-end-end-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-end-end-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -65,7 +65,7 @@ exports[`squircle.css utilities > squircle-ee-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-es-md snapshot 1`] = `
 ".squircle-es-md {
     border-end-start-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-end-start-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -76,7 +76,7 @@ exports[`squircle.css utilities > squircle-l-md snapshot 1`] = `
 ".squircle-l-md {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -91,7 +91,7 @@ exports[`squircle.css utilities > squircle-l-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-md snapshot 1`] = `
 ".squircle-md {
     border-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -106,7 +106,7 @@ exports[`squircle.css utilities > squircle-r-md snapshot 1`] = `
 ".squircle-r-md {
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -122,7 +122,7 @@ exports[`squircle.css utilities > squircle-s-md snapshot 1`] = `
 ".squircle-s-md {
     border-start-start-radius: var(--radius-md);
     border-end-start-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -137,7 +137,7 @@ exports[`squircle.css utilities > squircle-s-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-se-md snapshot 1`] = `
 ".squircle-se-md {
     border-start-end-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-start-end-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -147,7 +147,7 @@ exports[`squircle.css utilities > squircle-se-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-ss-md snapshot 1`] = `
 ".squircle-ss-md {
     border-start-start-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-start-start-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -158,7 +158,7 @@ exports[`squircle.css utilities > squircle-t-md snapshot 1`] = `
 ".squircle-t-md {
     border-top-left-radius: var(--radius-md);
     border-top-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(
       var(--radius-md) * (1 - pow(2, -0.5)) /
         (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
@@ -173,7 +173,7 @@ exports[`squircle.css utilities > squircle-t-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-tl-md snapshot 1`] = `
 ".squircle-tl-md {
     border-top-left-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-top-left-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -183,7 +183,7 @@ exports[`squircle.css utilities > squircle-tl-md snapshot 1`] = `
 exports[`squircle.css utilities > squircle-tr-md snapshot 1`] = `
 ".squircle-tr-md {
     border-top-right-radius: var(--radius-md);
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-top-right-radius: calc( var(--radius-md) * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))) );
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
diff --git a/package/src/__snapshots__/tw-plugin.test.ts.snap b/package/src/__snapshots__/tw-plugin.test.ts.snap
index 7d3789d..9090b84 100644
--- a/package/src/__snapshots__/tw-plugin.test.ts.snap
+++ b/package/src/__snapshots__/tw-plugin.test.ts.snap
@@ -4,7 +4,7 @@ exports[`plugin.ts utilities > squircle-b-md snapshot 1`] = `
 ".squircle-b-md {
     border-bottom-left-radius: 0.375rem;
     border-bottom-right-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       border-bottom-left-radius: var(--squircle-r);
       border-bottom-right-radius: var(--squircle-r);
@@ -16,7 +16,7 @@ exports[`plugin.ts utilities > squircle-b-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-bl-md snapshot 1`] = `
 ".squircle-bl-md {
     border-bottom-left-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-bottom-left-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -26,7 +26,7 @@ exports[`plugin.ts utilities > squircle-bl-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-br-md snapshot 1`] = `
 ".squircle-br-md {
     border-bottom-right-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-bottom-right-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -37,7 +37,7 @@ exports[`plugin.ts utilities > squircle-e-md snapshot 1`] = `
 ".squircle-e-md {
     border-start-end-radius: 0.375rem;
     border-end-end-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       border-start-end-radius: var(--squircle-r);
       border-end-end-radius: var(--squircle-r);
@@ -49,7 +49,7 @@ exports[`plugin.ts utilities > squircle-e-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-ee-md snapshot 1`] = `
 ".squircle-ee-md {
     border-end-end-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-end-end-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -59,7 +59,7 @@ exports[`plugin.ts utilities > squircle-ee-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-es-md snapshot 1`] = `
 ".squircle-es-md {
     border-end-start-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-end-start-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -70,7 +70,7 @@ exports[`plugin.ts utilities > squircle-l-md snapshot 1`] = `
 ".squircle-l-md {
     border-top-left-radius: 0.375rem;
     border-bottom-left-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       border-top-left-radius: var(--squircle-r);
       border-bottom-left-radius: var(--squircle-r);
@@ -82,7 +82,7 @@ exports[`plugin.ts utilities > squircle-l-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-md snapshot 1`] = `
 ".squircle-md {
     border-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       border-radius: var(--squircle-r);
       corner-shape: superellipse(var(--squircle-amt, 2));
@@ -94,7 +94,7 @@ exports[`plugin.ts utilities > squircle-r-md snapshot 1`] = `
 ".squircle-r-md {
     border-top-right-radius: 0.375rem;
     border-bottom-right-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       border-top-right-radius: var(--squircle-r);
       border-bottom-right-radius: var(--squircle-r);
@@ -107,7 +107,7 @@ exports[`plugin.ts utilities > squircle-s-md snapshot 1`] = `
 ".squircle-s-md {
     border-start-start-radius: 0.375rem;
     border-end-start-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       border-start-start-radius: var(--squircle-r);
       border-end-start-radius: var(--squircle-r);
@@ -119,7 +119,7 @@ exports[`plugin.ts utilities > squircle-s-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-se-md snapshot 1`] = `
 ".squircle-se-md {
     border-start-end-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-start-end-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -129,7 +129,7 @@ exports[`plugin.ts utilities > squircle-se-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-ss-md snapshot 1`] = `
 ".squircle-ss-md {
     border-start-start-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-start-start-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -140,7 +140,7 @@ exports[`plugin.ts utilities > squircle-t-md snapshot 1`] = `
 ".squircle-t-md {
     border-top-left-radius: 0.375rem;
     border-top-right-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       --squircle-r: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       border-top-left-radius: var(--squircle-r);
       border-top-right-radius: var(--squircle-r);
@@ -152,7 +152,7 @@ exports[`plugin.ts utilities > squircle-t-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-tl-md snapshot 1`] = `
 ".squircle-tl-md {
     border-top-left-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-top-left-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
@@ -162,7 +162,7 @@ exports[`plugin.ts utilities > squircle-tl-md snapshot 1`] = `
 exports[`plugin.ts utilities > squircle-tr-md snapshot 1`] = `
 ".squircle-tr-md {
     border-top-right-radius: 0.375rem;
-    @supports (corner-shape: superellipse()) {
+    @supports (corner-shape: superellipse(2)) {
       border-top-right-radius: calc(0.375rem * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2)))));
       corner-shape: superellipse(var(--squircle-amt, 2));
     }
diff --git a/package/src/squircle-css.test.ts b/package/src/squircle-css.test.ts
index 9c48beb..20c22d5 100644
--- a/package/src/squircle-css.test.ts
+++ b/package/src/squircle-css.test.ts
@@ -22,7 +22,7 @@ describe("squircle.css utilities", () => {
 
     it(`${className} applies corrected radius in @supports block`, async () => {
       const css = await compileCss([className]);
-      expect(css).toContain("@supports (corner-shape: superellipse())");
+      expect(css).toContain("@supports (corner-shape: superellipse(2))");
       expect(css).toContain("corner-shape: superellipse(var(--squircle-amt, 2))");
       expect(css).toContain("pow(2, -0.5)");
     });
diff --git a/package/src/tw-plugin.test.ts b/package/src/tw-plugin.test.ts
index 505e584..5a336d6 100644
--- a/package/src/tw-plugin.test.ts
+++ b/package/src/tw-plugin.test.ts
@@ -22,7 +22,7 @@ describe("plugin.ts utilities", () => {
 
     it(`${className} applies corrected radius in @supports block`, async () => {
       const css = await compilePlugin([className]);
-      expect(css).toContain("@supports (corner-shape: superellipse())");
+      expect(css).toContain("@supports (corner-shape: superellipse(2))");
       expect(css).toContain("pow(2, -0.5)");
     });
 
diff --git a/package/src/tw-plugin.ts b/package/src/tw-plugin.ts
index 649ca6b..84c7b6c 100644
--- a/package/src/tw-plugin.ts
+++ b/package/src/tw-plugin.ts
@@ -6,6 +6,7 @@ import {
   usesIntermediateVar,
   variantEntries,
 } from "./variants";
+import { SUPPORTS_RULE } from "./variants";
 
 export interface SquirclePluginOptions {
   /** CSS custom property name for the superellipse amount (default: "--squircle-amt") */
@@ -26,13 +27,12 @@ const squircle: ReturnType<typeof plugin.withOptions<SquirclePluginOptions>> =
 
     const amtCss = `var(${amtVar}, 2)`;
     const cornerShape = getCornerShape(amtVar);
-    const supportsCornerShape: string = "@supports (corner-shape: superellipse())";
 
     matchUtilities(
       {
         [`${prefix}-amt`]: (value: string) => ({
           [amtVar]: value,
-          [supportsCornerShape]: {
+          [SUPPORTS_RULE]: {
             "corner-shape": `superellipse(var(${amtVar}))`,
           },
         }),
@@ -48,7 +48,7 @@ const squircle: ReturnType<typeof plugin.withOptions<SquirclePluginOptions>> =
           {
             [name]: (value: string) => ({
               ...Object.fromEntries(props.map((p) => [p, value])),
-              [supportsCornerShape]: {
+              [SUPPORTS_RULE]: {
                 "--squircle-r": correctedRadius(value, amtCss),
                 ...Object.fromEntries(props.map((p) => [p, "var(--squircle-r)"])),
                 "corner-shape": cornerShape,
@@ -65,7 +65,7 @@ const squircle: ReturnType<typeof plugin.withOptions<SquirclePluginOptions>> =
               const result: Record<string, string | Record<string, string>> = {
                 [prop]: value,
               };
-              result[supportsCornerShape] = {
+              result[SUPPORTS_RULE] = {
                 [prop]: correctedRadius(value, amtCss),
                 "corner-shape": cornerShape,
               };
diff --git a/package/src/variants.ts b/package/src/variants.ts
index 00a56c1..2299397 100644
--- a/package/src/variants.ts
+++ b/package/src/variants.ts
@@ -16,6 +16,8 @@ function isComment(entry: VariantEntry): entry is SectionComment {
   return !Array.isArray(entry);
 }
 
+export const SUPPORTS_RULE = "@supports (corner-shape: superellipse(2))";
+
 export const VARIANTS: Record<string, VariantEntry> & Record<`$comment-${string}`, SectionComment> =
   {
     "": ["border-radius"],
diff --git a/release.config.mjs b/release.config.mjs
index 6390cfa..1259f99 100644
--- a/release.config.mjs
+++ b/release.config.mjs
@@ -2,27 +2,27 @@
  * @type {import('semantic-release').GlobalConfig}
  */
 export default {
-  branches: ['main'],
+  branches: ["main"],
   plugins: [
     [
-      '@semantic-release/commit-analyzer',
+      "@semantic-release/commit-analyzer",
       {
-        preset: 'conventionalcommits',
+        preset: "conventionalcommits",
       },
     ],
     [
-      '@semantic-release/release-notes-generator',
+      "@semantic-release/release-notes-generator",
       {
-        preset: 'conventionalcommits',
+        preset: "conventionalcommits",
       },
     ],
     [
-      '@anolilab/semantic-release-pnpm',
+      "@anolilab/semantic-release-pnpm",
       {
-        pkgRoot: 'package',
+        pkgRoot: "package",
         npmPublish: true,
       },
     ],
-    '@semantic-release/github',
+    "@semantic-release/github",
   ],
-}
+};
diff --git a/vite.config.ts b/vite.config.ts
index 89f2c1a..a66c9ce 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,18 @@ export default defineConfig({
   run: {
     cache: true,
     tasks: {
+      fmt: {
+        command:
+          'bash -c \'OUT=$(vp fmt --check 2>&1); echo "$OUT"; ! echo "$OUT" | grep -q "Unable to load plugin"\'',
+        dependsOn: ["@klinking/squircle#build"],
+      },
+      lint: {
+        command: "vp lint",
+      },
+      ready: {
+        command: "echo 'All checks passed'",
+        dependsOn: ["fmt", "lint", "@klinking/squircle#test", "website#build"],
+      },
       "sync-readme": {
         command: "bash scripts/sync-readme.sh",
         dependsOn: ["@klinking/squircle#build"],
diff --git a/website/examples/react-basic/src/App.tsx b/website/examples/react-basic/src/App.tsx
index 8887a96..0ed18d0 100644
--- a/website/examples/react-basic/src/App.tsx
+++ b/website/examples/react-basic/src/App.tsx
@@ -62,20 +62,20 @@ export default function App() {
           <div className="flex flex-wrap gap-6">
             <Box
               label="squircle-3xl squircle-amt-1"
-              className="squircle-3xl squircle-amt-1 bg-emerald-600"
+              className="squircle-amt-1 squircle-3xl bg-emerald-600"
             />
             <Box
               label="squircle-3xl squircle-amt-1.5"
-              className="squircle-3xl squircle-amt-1.5 bg-emerald-600"
+              className="squircle-amt-1.5 squircle-3xl bg-emerald-600"
             />
             <Box label="squircle-3xl (default 2)" className="squircle-3xl bg-emerald-600" />
             <Box
               label="squircle-3xl squircle-amt-3"
-              className="squircle-3xl squircle-amt-3 bg-emerald-600"
+              className="squircle-amt-3 squircle-3xl bg-emerald-600"
             />
             <Box
               label="squircle-3xl squircle-amt-5"
-              className="squircle-3xl squircle-amt-5 bg-emerald-600"
+              className="squircle-amt-5 squircle-3xl bg-emerald-600"
             />
           </div>
         </section>
diff --git a/website/package.json b/website/package.json
index cec53ec..df8c548 100644
--- a/website/package.json
+++ b/website/package.json
@@ -4,8 +4,6 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
     "preview": "astro preview"
   },
   "dependencies": {
diff --git a/website/src/components/CodeGenerator.tsx b/website/src/components/CodeGenerator.tsx
index dfc8058..117f10d 100644
--- a/website/src/components/CodeGenerator.tsx
+++ b/website/src/components/CodeGenerator.tsx
@@ -94,7 +94,7 @@ export default function CodeGenerator() {
       cssOutput =
         `/* Fallback for browsers without corner-shape */\n` +
         `.your-selector {\n  border-radius: ${rv};\n}\n\n` +
-        `@supports (corner-shape: superellipse()) {\n` +
+        `@supports (corner-shape: superellipse(2)) {\n` +
         `  .your-selector {\n` +
         `    border-radius: ${corrRv};\n` +
         `    corner-shape: superellipse(${cssK});\n` +
diff --git a/website/src/demo.ts b/website/src/demo.ts
index 477ee6e..6597a01 100644
--- a/website/src/demo.ts
+++ b/website/src/demo.ts
@@ -323,7 +323,7 @@ function updateGenerator(): void {
     lines.push(`  border-radius: ${radius};`);
     lines.push(`}`);
     lines.push(``);
-    lines.push(`@supports (corner-shape: superellipse()) {`);
+    lines.push(`@supports (corner-shape: superellipse(2)) {`);
     lines.push(`  ${SEL} {`);
     lines.push(`    border-radius: ${correctedRadius};`);
     lines.push(`    corner-shape: superellipse(${cssK});`);
diff --git a/website/src/style.css b/website/src/style.css
deleted file mode 100644
index 2b49098..0000000
--- a/website/src/style.css
+++ /dev/null
@@ -1,58 +0,0 @@
-@import "tailwindcss";
-/* @source "../"; */
-/* @plugin "../../src/plugin.ts"; */
-
-@theme {
-  --color-rounded-border: oklch(0.67 0.17 257.57);
-  --color-rounded-border-hover: oklch(from var(--color-rounded-border) min(1, calc(l + 0.15)) c h);
-  --color-squircle-border: oklch(0.67 0.24 2.48);
-  --color-squircle-border-hover: oklch(
-    from var(--color-squircle-border) min(1, calc(l + 0.15)) c h
-  );
-  --color-adjusted-border: oklch(0.67 0.17 47.33);
-  --color-adjusted-border-hover: oklch(
-    from var(--color-adjusted-border) min(1, calc(l + 0.15)) c h
-  );
-}
-
-.slider-filled {
-  @apply flex-1 accent-indigo-500;
-}
-
-.slider-unfilled {
-  @apply flex-1 appearance-none accent-amber-500;
-  background: transparent;
-}
-
-.slider-unfilled::-webkit-slider-runnable-track {
-  background: theme(--color-zinc-700);
-  height: 6px;
-  border-radius: 3px;
-}
-
-.slider-unfilled::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: theme(--color-amber-500);
-  margin-top: -5px;
-}
-
-.slider-unfilled::-moz-range-track {
-  background: theme(--color-zinc-700);
-  height: 6px;
-  border-radius: 3px;
-}
-
-.slider-unfilled::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: none;
-  background: theme(--color-amber-500);
-}
-
-.slider-unfilled::-moz-range-progress {
-  background: theme(--color-zinc-700);
-}
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 192834a..08bdfad 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -1,6 +1,5 @@
 @import "tailwindcss";
-/* @source "../"; */
-/* @plugin "../../src/plugin.ts"; */
+@plugin "../../../package/dist/tw-plugin.mjs";
 
 @theme {
   --color-rounded-border: oklch(0.7 0.17 257.57);
diff --git a/website/vite.config.ts b/website/vite.config.ts
new file mode 100644
index 0000000..ae9ffe2
--- /dev/null
+++ b/website/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite-plus";
+
+export default defineConfig({
+  run: {
+    tasks: {
+      dev: {
+        command: "astro dev",
+        dependsOn: ["@klinking/squircle#build"],
+      },
+      build: {
+        command: "astro build",
+        dependsOn: ["@klinking/squircle#build"],
+      },
+    },
+  },
+});