carfdevcss 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carfdevcss",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Tailwind CSS adapter for carfdev design system",
   "style": "./src/index.css",
   "exports": {

package/src/index.css

@@ -601,6 +601,47 @@
     border: 0 solid; /* 3 */
   }
 
+  ::selection {
+    background-color: var(--color-secondary);
+    color: var(--color-neutral);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  input:focus-visible,
+  button:focus-visible,
+  a:focus-visible {
+    outline-color: var(--color-accent);
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-base);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(
+      in oklab,
+      var(--color-neutral) 25%,
+      transparent
+    );
+    border-radius: 9999px;
+    border: 2px solid var(--color-base);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-primary);
+  }
+
   html,
   :host {
     line-height: 1.5; /* 1 */
@@ -610,6 +651,10 @@
     font-feature-settings: normal; /* 5 */
     font-variation-settings: normal; /* 6 */
     -webkit-tap-highlight-color: transparent; /* 7 */
+
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--color-neutral) 25%, transparent)
+      var(--color-base);
   }
 
   hr {
@@ -1059,455 +1104,936 @@
      ============================================ */
 
   @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   @keyframes fade-out {
-    0% { opacity: 1; }
-    100% { opacity: 0; }
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
   }
 
   @keyframes slide-in-top {
-    0% { transform: translateY(-20px); }
-    100% { transform: translateY(0); }
+    0% {
+      transform: translateY(-20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
   }
 
   @keyframes slide-in-bottom {
-    0% { transform: translateY(20px); }
-    100% { transform: translateY(0); }
+    0% {
+      transform: translateY(20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
   }
 
   @keyframes slide-out-top {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(-20px); }
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-20px);
+    }
   }
 
   @keyframes slide-out-bottom {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(20px); }
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(20px);
+    }
   }
 
   @keyframes zoom-in {
-    0% { opacity: 0; transform: scale(.5); }
-    100% { opacity: 1; transform: scale(1); }
+    0% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 
   @keyframes zoom-out {
-    0% { opacity: 1; transform: scale(1); }
-    100% { opacity: 0; transform: scale(.5); }
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
   }
 
   @keyframes rotate-90 {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(90deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(90deg);
+    }
   }
 
   @keyframes rotate-180 {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(180deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(180deg);
+    }
   }
 
   @keyframes rotate-360 {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
   @keyframes flip-horizontal {
-    0% { transform: rotateY(0deg); }
-    100% { transform: rotateY(180deg); }
+    0% {
+      transform: rotateY(0deg);
+    }
+    100% {
+      transform: rotateY(180deg);
+    }
   }
 
   @keyframes flip-vertical {
-    0% { transform: rotateX(0deg); }
-    100% { transform: rotateX(180deg); }
+    0% {
+      transform: rotateX(0deg);
+    }
+    100% {
+      transform: rotateX(180deg);
+    }
   }
 
   @keyframes bouncing {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-    100% { transform: translateY(0); }
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+    100% {
+      transform: translateY(0);
+    }
   }
 
   @keyframes swing {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(15deg); }
-    100% { transform: rotate(0deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(15deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
   }
 
   @keyframes wobble {
-    0% { transform: translateX(0); }
-    15% { transform: translateX(-20px); }
-    30% { transform: translateX(20%); }
-    45% { transform: translateX(-15%); }
-    60% { transform: translateX(20px); }
-    75% { transform: translateX(-5%); }
-    100% { transform: translateX(0); }
+    0% {
+      transform: translateX(0);
+    }
+    15% {
+      transform: translateX(-20px);
+    }
+    30% {
+      transform: translateX(20%);
+    }
+    45% {
+      transform: translateX(-15%);
+    }
+    60% {
+      transform: translateX(20px);
+    }
+    75% {
+      transform: translateX(-5%);
+    }
+    100% {
+      transform: translateX(0);
+    }
   }
 
   @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
   }
 
   @keyframes pulsing {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
 
   @keyframes shake {
-    0% { transform: translateX(0); }
-    25% { transform: translateX(-10px); }
-    50% { transform: translateX(10px); }
-    75% { transform: translateX(-10px); }
-    100% { transform: translateX(0); }
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-10px);
+    }
+    50% {
+      transform: translateX(10px);
+    }
+    75% {
+      transform: translateX(-10px);
+    }
+    100% {
+      transform: translateX(0);
+    }
   }
 
   @keyframes tada {
-    0% { transform: scale(1); }
-    10% { transform: scale(0.9) rotate(-3deg); }
-    20% { transform: scale(0.9) rotate(-3deg); }
-    30% { transform: scale(1.1) rotate(3deg); }
-    40% { transform: scale(1.1) rotate(-3deg); }
-    50% { transform: scale(1.1) rotate(3deg); }
-    60% { transform: scale(1.1) rotate(-3deg); }
-    70% { transform: scale(1.1) rotate(3deg); }
-    80% { transform: scale(1.1) rotate(3deg); }
-    90% { transform: scale(1.1) rotate(3deg); }
-    100% { transform: scale(1) rotate(0); }
+    0% {
+      transform: scale(1);
+    }
+    10% {
+      transform: scale(0.9) rotate(-3deg);
+    }
+    20% {
+      transform: scale(0.9) rotate(-3deg);
+    }
+    30% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    40% {
+      transform: scale(1.1) rotate(-3deg);
+    }
+    50% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    60% {
+      transform: scale(1.1) rotate(-3deg);
+    }
+    70% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    80% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    90% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    100% {
+      transform: scale(1) rotate(0);
+    }
   }
 
   @keyframes jump {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-20px); }
-    100% { transform: translateY(0); }
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
   }
 
   @keyframes hang {
-    0% { transform: translateY(-20px); }
-    50% { transform: translateY(0); }
-    100% { transform: translateY(-20px); }
+    0% {
+      transform: translateY(-20px);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-20px);
+    }
   }
 
   @keyframes roll-in {
-    0% { transform: translateX(-20px) rotate(-120deg); }
-    100% { transform: translateX(0) rotate(0); }
+    0% {
+      transform: translateX(-20px) rotate(-120deg);
+    }
+    100% {
+      transform: translateX(0) rotate(0);
+    }
   }
 
   @keyframes roll-out {
-    0% { transform: translateX(0) rotate(0); }
-    100% { transform: translateX(20px) rotate(120deg); }
+    0% {
+      transform: translateX(0) rotate(0);
+    }
+    100% {
+      transform: translateX(20px) rotate(120deg);
+    }
   }
 
   @keyframes float {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-    100% { transform: translateY(0); }
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+    100% {
+      transform: translateY(0);
+    }
   }
 
   @keyframes sink {
-    0% { transform: translateY(-10px); }
-    50% { transform: translateY(0); }
-    100% { transform: translateY(-10px); }
+    0% {
+      transform: translateY(-10px);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-10px);
+    }
   }
 
   @keyframes flash {
-    0% { opacity: 1; }
-    50% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   @keyframes jiggle {
-    0% { transform: rotate(-3deg); }
-    50% { transform: rotate(3deg); }
-    100% { transform: rotate(-3deg); }
+    0% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+    100% {
+      transform: rotate(-3deg);
+    }
   }
 
   @keyframes rubber-band {
-    0% { transform: scale(1); }
-    30% { transform: scale(1.25); }
-    40% { transform: scale(0.75); }
-    50% { transform: scale(1.15); }
-    65% { transform: scale(0.95); }
-    75% { transform: scale(1.05); }
-    100% { transform: scale(1); }
+    0% {
+      transform: scale(1);
+    }
+    30% {
+      transform: scale(1.25);
+    }
+    40% {
+      transform: scale(0.75);
+    }
+    50% {
+      transform: scale(1.15);
+    }
+    65% {
+      transform: scale(0.95);
+    }
+    75% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
 
   @keyframes scale {
-    0% { transform: scale(1); }
-    100% { transform: scale(1.10); }
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(1.1);
+    }
   }
 
   @keyframes slide-in-left {
-    0% { transform: translateX(-20px); }
-    100% { transform: translateX(0); }
+    0% {
+      transform: translateX(-20px);
+    }
+    100% {
+      transform: translateX(0);
+    }
   }
 
   @keyframes slide-in-right {
-    0% { transform: translateX(20px); }
-    100% { transform: translateX(0); }
+    0% {
+      transform: translateX(20px);
+    }
+    100% {
+      transform: translateX(0);
+    }
   }
 
   @keyframes slide-out-left {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-20px); }
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-20px);
+    }
   }
 
   @keyframes slide-out-right {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(20px); }
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(20px);
+    }
   }
 
   @keyframes spin-clockwise {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
   @keyframes spin-counter-clockwise {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(-360deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
   }
 
   @keyframes flip-x {
-    0% { transform: scaleX(1); }
-    50% { transform: scaleX(-1); }
-    100% { transform: scaleX(1); }
+    0% {
+      transform: scaleX(1);
+    }
+    50% {
+      transform: scaleX(-1);
+    }
+    100% {
+      transform: scaleX(1);
+    }
   }
 
   @keyframes flip-y {
-    0% { transform: scaleY(1); }
-    50% { transform: scaleY(-1); }
-    100% { transform: scaleY(1); }
+    0% {
+      transform: scaleY(1);
+    }
+    50% {
+      transform: scaleY(-1);
+    }
+    100% {
+      transform: scaleY(1);
+    }
   }
 
   @keyframes blink {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   @keyframes pop {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
 
   @keyframes expand-horizontally {
-    0% { transform: scaleX(0); }
-    100% { transform: scaleX(1); }
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(1);
+    }
   }
 
   @keyframes contract-horizontally {
-    0% { transform: scaleX(1); }
-    100% { transform: scaleX(0); }
+    0% {
+      transform: scaleX(1);
+    }
+    100% {
+      transform: scaleX(0);
+    }
   }
 
   @keyframes expand-vertically {
-    0% { transform: scaleY(0); }
-    100% { transform: scaleY(1); }
+    0% {
+      transform: scaleY(0);
+    }
+    100% {
+      transform: scaleY(1);
+    }
   }
 
   @keyframes contract-vertically {
-    0% { transform: scaleY(1); }
-    100% { transform: scaleY(0); }
+    0% {
+      transform: scaleY(1);
+    }
+    100% {
+      transform: scaleY(0);
+    }
   }
 
   @keyframes fade-in-up {
-    0% { opacity: 0; transform: translateY(20px); }
-    100% { opacity: 1; transform: translateY(0); }
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   @keyframes fade-in-down {
-    0% { opacity: 0; transform: translateY(-20px); }
-    100% { opacity: 1; transform: translateY(0); }
+    0% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   @keyframes fade-in-left {
-    0% { opacity: 0; transform: translateX(20px); }
-    100% { opacity: 1; transform: translateX(0); }
+    0% {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 
   @keyframes fade-in-right {
-    0% { opacity: 0; transform: translateX(-20px); }
-    100% { opacity: 1; transform: translateX(0); }
+    0% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 
   @keyframes fade-out-up {
-    0% { opacity: 1; transform: translateY(0); }
-    100% { opacity: 0; transform: translateY(-20px); }
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
   }
 
   @keyframes fade-out-down {
-    0% { opacity: 1; transform: translateY(0); }
-    100% { opacity: 0; transform: translateY(20px); }
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
   }
 
   @keyframes fade-out-left {
-    0% { opacity: 1; transform: translateX(0); }
-    100% { opacity: 0; transform: translateX(-20px); }
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
   }
 
   @keyframes fade-out-right {
-    0% { opacity: 1; transform: translateX(0); }
-    100% { opacity: 0; transform: translateX(20px); }
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(20px);
+    }
   }
 
   @keyframes sway {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(15deg); }
-    100% { transform: rotate(0deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(15deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
   }
 
   @keyframes flip-in-x {
-    0% { opacity: 0; transform: rotateY(90deg); }
-    100% { opacity: 1; transform: rotateY(0deg); }
+    0% {
+      opacity: 0;
+      transform: rotateY(90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: rotateY(0deg);
+    }
   }
 
   @keyframes flip-in-y {
-    0% { opacity: 0; transform: rotateX(90deg); }
-    100% { opacity: 1; transform: rotateX(0deg); }
+    0% {
+      opacity: 0;
+      transform: rotateX(90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: rotateX(0deg);
+    }
   }
 
   @keyframes flip-out-x {
-    0% { opacity: 1; transform: rotateY(0deg); }
-    100% { opacity: 0; transform: rotateY(90deg); }
+    0% {
+      opacity: 1;
+      transform: rotateY(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: rotateY(90deg);
+    }
   }
 
   @keyframes flip-out-y {
-    0% { opacity: 1; transform: rotateX(0deg); }
-    100% { opacity: 0; transform: rotateX(90deg); }
+    0% {
+      opacity: 1;
+      transform: rotateX(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: rotateX(90deg);
+    }
   }
 
   @keyframes rotate-in {
-    0% { opacity: 0; transform: rotate(-90deg); }
-    100% { opacity: 1; transform: rotate(0deg); }
+    0% {
+      opacity: 0;
+      transform: rotate(-90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
   }
 
   @keyframes rotate-out {
-    0% { opacity: 1; transform: rotate(0deg); }
-    100% { opacity: 0; transform: rotate(90deg); }
+    0% {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(90deg);
+    }
   }
 
   @keyframes slide-rotate-in {
-    0% { opacity: 0; transform: translateX(-20px) rotate(-90deg); }
-    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
+    0% {
+      opacity: 0;
+      transform: translateX(-20px) rotate(-90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0) rotate(0deg);
+    }
   }
 
   @keyframes slide-rotate-out {
-    0% { opacity: 1; transform: translateX(0) rotate(0deg); }
-    100% { opacity: 0; transform: translateX(20px) rotate(90deg); }
+    0% {
+      opacity: 1;
+      transform: translateX(0) rotate(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(20px) rotate(90deg);
+    }
   }
 
   @keyframes heartbeat {
-    0% { transform: scale(1); }
-    25% { transform: scale(1.1); }
-    50% { transform: scale(1); }
-    75% { transform: scale(0.9); }
-    100% { transform: scale(1); }
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(1.1);
+    }
+    50% {
+      transform: scale(1);
+    }
+    75% {
+      transform: scale(0.9);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
 
   @keyframes blurred-fade-in {
-    0% { filter: blur(5px); opacity: 0; }
-    100% { filter: blur(0); opacity: 1; }
+    0% {
+      filter: blur(5px);
+      opacity: 0;
+    }
+    100% {
+      filter: blur(0);
+      opacity: 1;
+    }
   }
 
   @keyframes horizontal-vibration {
-    0% { transform: translateX(0); }
-    25% { transform: translateX(5px); }
-    50% { transform: translateX(-5px); }
-    75% { transform: translateX(5px); }
-    100% { transform: translateX(0); }
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(5px);
+    }
+    50% {
+      transform: translateX(-5px);
+    }
+    75% {
+      transform: translateX(5px);
+    }
+    100% {
+      transform: translateX(0);
+    }
   }
 
   @keyframes rotational-wave {
-    0% { transform: rotate(0deg); }
-    25% { transform: rotate(10deg); }
-    50% { transform: rotate(-10deg); }
-    75% { transform: rotate(10deg); }
-    100% { transform: rotate(0deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(-10deg);
+    }
+    75% {
+      transform: rotate(10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
   }
 
   @keyframes skew {
-    0% { transform: skew(0deg); }
-    100% { transform: skew(20deg); }
+    0% {
+      transform: skew(0deg);
+    }
+    100% {
+      transform: skew(20deg);
+    }
   }
 
   @keyframes skew-right {
-    0% { transform: skew(0deg); }
-    100% { transform: skew(-20deg); }
+    0% {
+      transform: skew(0deg);
+    }
+    100% {
+      transform: skew(-20deg);
+    }
   }
 
   @keyframes vertical-bounce {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-20px); }
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
   }
 
   @keyframes horizontal-bounce {
-    0%, 100% { transform: translateX(0); }
-    50% { transform: translateX(20px); }
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    50% {
+      transform: translateX(20px);
+    }
   }
 
   @keyframes tilt {
-    0% { transform: rotateY(0deg); }
-    50% { transform: rotateY(20deg); }
-    100% { transform: rotateY(0deg); }
+    0% {
+      transform: rotateY(0deg);
+    }
+    50% {
+      transform: rotateY(20deg);
+    }
+    100% {
+      transform: rotateY(0deg);
+    }
   }
 
   @keyframes squeeze {
-    0%, 100% { transform: scale(1, 1); }
-    50% { transform: scale(1.1, 0.9); }
+    0%,
+    100% {
+      transform: scale(1, 1);
+    }
+    50% {
+      transform: scale(1.1, 0.9);
+    }
   }
 
   @keyframes slide-up-fade {
-    0% { opacity: 0; transform: translateY(50px); }
-    100% { opacity: 1; transform: translateY(0); }
+    0% {
+      opacity: 0;
+      transform: translateY(50px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   @keyframes bounce-fade-in {
-    0% { transform: scale(0.5); opacity: 0; }
-    100% { transform: scale(1); opacity: 1; }
+    0% {
+      transform: scale(0.5);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
 
   @keyframes swing-drop-in {
-    0% { transform: rotate(-30deg) translateY(-50px); opacity: 0; }
-    100% { transform: rotate(0deg) translateY(0); opacity: 1; }
+    0% {
+      transform: rotate(-30deg) translateY(-50px);
+      opacity: 0;
+    }
+    100% {
+      transform: rotate(0deg) translateY(0);
+      opacity: 1;
+    }
   }
 
   @keyframes pulse-fade-in {
-    0% { transform: scale(0.9); opacity: 0; }
-    50% { transform: scale(1.05); opacity: 0.5; }
-    100% { transform: scale(1); opacity: 1; }
+    0% {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
 
   @keyframes impulse-rotation-right {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(-40deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(-40deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
   @keyframes impulse-rotation-left {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(40deg); }
-    100% { transform: rotate(-360deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(40deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
   }
 
   @keyframes dancing {
-    0% { transform: skew(0deg); }
-    25% { transform: skew(-40deg); }
-    50% { transform: skew(40deg); }
-    75% { transform: skew(-40deg); }
-    100% { transform: skew(0deg); }
+    0% {
+      transform: skew(0deg);
+    }
+    25% {
+      transform: skew(-40deg);
+    }
+    50% {
+      transform: skew(40deg);
+    }
+    75% {
+      transform: skew(-40deg);
+    }
+    100% {
+      transform: skew(0deg);
+    }
   }
 
   @keyframes jelly {
-    0% { transform: scale(1, 1); }
-    20% { transform: scale(1.25, 0.75); }
-    40% { transform: scale(0.75, 1.25); }
-    60% { transform: scale(1.15, 0.85); }
-    75% { transform: scale(0.95, 1.05); }
-    85% { transform: scale(1.05, 0.95); }
-    92% { transform: scale(1, 1.02); }
-    100% { transform: scale(1, 1); }
+    0% {
+      transform: scale(1, 1);
+    }
+    20% {
+      transform: scale(1.25, 0.75);
+    }
+    40% {
+      transform: scale(0.75, 1.25);
+    }
+    60% {
+      transform: scale(1.15, 0.85);
+    }
+    75% {
+      transform: scale(0.95, 1.05);
+    }
+    85% {
+      transform: scale(1.05, 0.95);
+    }
+    92% {
+      transform: scale(1, 1.02);
+    }
+    100% {
+      transform: scale(1, 1);
+    }
   }
 }
 
@@ -1534,7 +2060,7 @@
    ============================================ */
 
 @utility animate-iteration-count-* {
-  animation-iteration-count: --value(--tw-anim-iteration-count-*, number, [number], [*]);
+  animation-iteration-count: --value(--tw-anim-iteration-count-*, [number]);
 }
 
 /* ============================================
@@ -1650,3 +2176,38 @@
 @utility animate-range-* {
   animation-range: --value(--tw-anim-range-*, [*]);
 }
+
+@utility bg-grid-* {
+  --mixed: color-mix(
+    in oklab,
+    --value(--color-*, [color]) calc(--modifier(integer) * 1%),
+    transparent
+  );
+  --grid-color: var(--mixed, --value(--color-*, [color]));
+
+  --grid-width: calc(var(--spacing) * 8);
+  --grid-height: calc(var(--spacing) * 8);
+
+  background-image:
+    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
+
+  background-size: var(--grid-width) var(--grid-height);
+
+  mask-image: radial-gradient(
+    ellipse 70% 60% at 50% 0%,
+    #000 60%,
+    transparent 100%
+  );
+  -webkit-mask-image: radial-gradient(
+    ellipse 70% 60% at 50% 0%,
+    #000 60%,
+    transparent 100%
+  );
+}
+
+@utility grid-size-* {
+  --width: calc(var(--spacing) * --modifier(integer));
+  --grid-width: var(--width, calc(var(--spacing) * --value(integer)));
+  --grid-height: calc(var(--spacing) * --value(integer));
+}