@birdapi/velinstyle 0.7.0 → 0.9.0

package/dist/velinstyle.css

@@ -1,8 +1,9 @@
 @layer tokens {
   :root {
-    --velin-color-primary: oklch(55% .15 250);
-    --velin-color-primary-hover: oklch(48% .15 250);
-    --velin-color-primary-active: oklch(42% .15 250);
+    --velin-color-primary: oklch(38% .18 250);
+    --velin-color-primary-text: oklch(38% .18 250);
+    --velin-color-primary-hover: oklch(32% .18 250);
+    --velin-color-primary-active: oklch(32% .18 250);
     --velin-color-primary-subtle: oklch(92% .04 250);
     --velin-color-on-primary: oklch(100% 0 0);
     --velin-color-secondary: oklch(55% .12 320);
@@ -13,18 +14,21 @@
     --velin-color-surface: oklch(98% .005 250);
     --velin-color-surface-dim: oklch(93% .005 250);
     --velin-color-surface-bright: oklch(100% 0 0);
-    --velin-color-text: oklch(15% .01 250);
-    --velin-color-text-muted: oklch(45% .01 250);
-    --velin-color-text-subtle: oklch(60% .005 250);
-    --velin-color-border: oklch(82% .01 250);
-    --velin-color-border-strong: oklch(65% .01 250);
+    --velin-color-text: oklch(8% .01 250);
+    --velin-color-text-muted: oklch(28% .01 250);
+    --velin-color-text-subtle: oklch(38% .005 250);
+    --velin-color-border: oklch(35% .01 250);
+    --velin-color-border-strong: oklch(20% .01 250);
     --velin-color-success: oklch(55% .16 145);
+    --velin-color-success-text: oklch(38% .16 145);
     --velin-color-success-subtle: oklch(92% .04 145);
     --velin-color-on-success: oklch(100% 0 0);
     --velin-color-warning: oklch(75% .15 85);
+    --velin-color-warning-text: oklch(42% .14 85);
     --velin-color-warning-subtle: oklch(95% .04 85);
     --velin-color-on-warning: oklch(20% .02 85);
     --velin-color-danger: oklch(55% .2 25);
+    --velin-color-danger-text: oklch(40% .2 25);
     --velin-color-danger-hover: oklch(48% .2 25);
     --velin-color-danger-subtle: oklch(92% .04 25);
     --velin-color-on-danger: oklch(100% 0 0);
@@ -32,16 +36,16 @@
     --velin-color-info-subtle: oklch(92% .04 240);
     --velin-color-on-info: oklch(100% 0 0);
     --velin-color-overlay: oklch(0% 0 0 / .4);
-    --velin-color-focus: oklch(60% .2 250);
+    --velin-color-focus: oklch(35% .22 250);
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not([data-velin-theme="light"]) {
-      --velin-color-primary: oklch(72% .12 250);
-      --velin-color-primary-hover: oklch(78% .12 250);
-      --velin-color-primary-active: oklch(65% .12 250);
+      --velin-color-primary: oklch(48% .14 250);
+      --velin-color-primary-hover: oklch(55% .14 250);
+      --velin-color-primary-active: oklch(42% .14 250);
       --velin-color-primary-subtle: oklch(25% .06 250);
-      --velin-color-on-primary: oklch(10% .01 250);
+      --velin-color-on-primary: oklch(98% 0 0);
       --velin-color-secondary: oklch(72% .1 320);
       --velin-color-secondary-hover: oklch(78% .1 320);
       --velin-color-secondary-active: oklch(65% .1 320);
@@ -51,20 +55,24 @@
       --velin-color-surface-dim: oklch(10% .01 250);
       --velin-color-surface-bright: oklch(22% .01 250);
       --velin-color-text: oklch(92% .005 250);
-      --velin-color-text-muted: oklch(70% .005 250);
-      --velin-color-text-subtle: oklch(55% .005 250);
+      --velin-color-text-muted: oklch(85% .005 250);
+      --velin-color-text-subtle: oklch(72% .005 250);
       --velin-color-border: oklch(30% .01 250);
       --velin-color-border-strong: oklch(45% .01 250);
+      --velin-color-primary-text: oklch(82% .12 250);
       --velin-color-success: oklch(72% .14 145);
+      --velin-color-success-text: oklch(82% .14 145);
       --velin-color-success-subtle: oklch(25% .06 145);
       --velin-color-on-success: oklch(10% .01 145);
       --velin-color-warning: oklch(80% .12 85);
+      --velin-color-warning-text: oklch(80% .12 85);
       --velin-color-warning-subtle: oklch(25% .06 85);
       --velin-color-on-warning: oklch(10% .02 85);
-      --velin-color-danger: oklch(70% .16 25);
-      --velin-color-danger-hover: oklch(76% .16 25);
+      --velin-color-danger: oklch(52% .16 25);
+      --velin-color-danger-text: oklch(82% .16 25);
+      --velin-color-danger-hover: oklch(58% .16 25);
       --velin-color-danger-subtle: oklch(25% .06 25);
-      --velin-color-on-danger: oklch(10% .01 25);
+      --velin-color-on-danger: oklch(98% 0 0);
       --velin-color-info: oklch(72% .1 240);
       --velin-color-info-subtle: oklch(25% .04 240);
       --velin-color-on-info: oklch(10% .01 240);
@@ -74,11 +82,12 @@
   }
 
   [data-velin-theme="dark"] {
-    --velin-color-primary: oklch(72% .12 250);
-    --velin-color-primary-hover: oklch(78% .12 250);
-    --velin-color-primary-active: oklch(65% .12 250);
+    --velin-color-primary: oklch(48% .12 250);
+    --velin-color-primary-text: oklch(82% .12 250);
+    --velin-color-primary-hover: oklch(55% .12 250);
+    --velin-color-primary-active: oklch(42% .12 250);
     --velin-color-primary-subtle: oklch(25% .06 250);
-    --velin-color-on-primary: oklch(10% .01 250);
+    --velin-color-on-primary: oklch(98% 0 0);
     --velin-color-secondary: oklch(72% .1 320);
     --velin-color-secondary-hover: oklch(78% .1 320);
     --velin-color-secondary-active: oklch(65% .1 320);
@@ -88,25 +97,28 @@
     --velin-color-surface-dim: oklch(10% .01 250);
     --velin-color-surface-bright: oklch(22% .01 250);
     --velin-color-text: oklch(92% .005 250);
-    --velin-color-text-muted: oklch(70% .005 250);
-    --velin-color-text-subtle: oklch(55% .005 250);
+    --velin-color-text-muted: oklch(88% .005 250);
+    --velin-color-text-subtle: oklch(78% .005 250);
     --velin-color-border: oklch(30% .01 250);
     --velin-color-border-strong: oklch(45% .01 250);
     --velin-color-success: oklch(72% .14 145);
+    --velin-color-success-text: oklch(82% .14 145);
     --velin-color-success-subtle: oklch(25% .06 145);
     --velin-color-on-success: oklch(10% .01 145);
     --velin-color-warning: oklch(80% .12 85);
+    --velin-color-warning-text: oklch(80% .12 85);
     --velin-color-warning-subtle: oklch(25% .06 85);
     --velin-color-on-warning: oklch(10% .02 85);
-    --velin-color-danger: oklch(70% .16 25);
+    --velin-color-danger: oklch(52% .16 25);
+    --velin-color-danger-text: oklch(82% .16 25);
     --velin-color-danger-hover: oklch(76% .16 25);
     --velin-color-danger-subtle: oklch(25% .06 25);
-    --velin-color-on-danger: oklch(10% .01 25);
+    --velin-color-on-danger: oklch(98% 0 0);
     --velin-color-info: oklch(72% .1 240);
     --velin-color-info-subtle: oklch(25% .04 240);
-    --velin-color-on-info: oklch(10% .01 240);
+    --velin-color-on-info: oklch(98% 0 0);
     --velin-color-overlay: oklch(0% 0 0 / .6);
-    --velin-color-focus: oklch(72% .18 250);
+    --velin-color-focus: oklch(82% .18 250);
   }
 
   :root {
@@ -128,11 +140,17 @@
     --velin-space-20: 5rem;
     --velin-space-24: 6rem;
     --velin-space-32: 8rem;
-    --velin-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --velin-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --velin-font-text: var(--velin-font-display);
+    --velin-font-code: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
+    --velin-font-features: "cv02", "ss01";
+    --velin-font-optical: auto;
+    --velin-font-size-adjust-fallback: .52;
+    --velin-font-sans: var(--velin-font-text, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
     --velin-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-    --velin-font-mono: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
-    --velin-font-heading: var(--velin-font-sans);
-    --velin-font-body: var(--velin-font-sans);
+    --velin-font-mono: var(--velin-font-code, "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace);
+    --velin-font-heading: var(--velin-font-display, var(--velin-font-sans));
+    --velin-font-body: var(--velin-font-text, var(--velin-font-sans));
     --velin-fluid-min-vw: 20;
     --velin-fluid-max-vw: 90;
     --velin-text-xs: clamp(.625rem, .6rem + .1vw, .75rem);
@@ -196,11 +214,18 @@
     --velin-duration-normal: .2s;
     --velin-duration-slow: .3s;
     --velin-duration-slower: .5s;
+    --velin-duration-slowest: .8s;
+    --velin-duration-cinematic: 1.2s;
     --velin-ease-default: cubic-bezier(.4, 0, .2, 1);
     --velin-ease-in: cubic-bezier(.4, 0, 1, 1);
     --velin-ease-out: cubic-bezier(0, 0, .2, 1);
     --velin-ease-in-out: cubic-bezier(.4, 0, .2, 1);
     --velin-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
+    --velin-ease-spring: cubic-bezier(.34, 1.56, .64, 1.4);
+    --velin-ease-elastic: cubic-bezier(.68, -.6, .32, 1.6);
+    --velin-ease-expo-out: cubic-bezier(.16, 1, .3, 1);
+    --velin-ease-back-out: cubic-bezier(.34, 1.4, .64, 1);
+    --velin-ease-snappy: cubic-bezier(.2, .8, .2, 1);
     --velin-transition-colors: color var(--velin-duration-normal) var(--velin-ease-default),
       background-color var(--velin-duration-normal) var(--velin-ease-default),
       border-color var(--velin-duration-normal) var(--velin-ease-default);
@@ -333,14 +358,75 @@
   [hidden] {
     display: none !important;
   }
+}
+
+@layer base {
+  velin-modal:not(:defined), velin-drawer:not(:defined), velin-dialog:not(:defined), velin-sheet:not(:defined), velin-lightbox:not(:defined), velin-command:not(:defined) {
+    opacity: 0;
+    visibility: hidden;
+    contain: layout style;
+    block-size: 0;
+    display: block;
+    overflow: hidden;
+  }
 
-  velin-modal:not(:defined), velin-drawer:not(:defined), velin-tabs:not(:defined), velin-accordion:not(:defined), velin-dropdown:not(:defined), velin-toast:not(:defined), velin-dialog:not(:defined), velin-popover:not(:defined), velin-tooltip-wc:not(:defined), velin-lightbox:not(:defined), velin-carousel:not(:defined), velin-collapse:not(:defined), velin-stepper-wc:not(:defined), velin-countdown:not(:defined), velin-progress-ring:not(:defined), velin-persist:not(:defined), velin-copy:not(:defined), velin-scroll-top:not(:defined), velin-scrollspy:not(:defined), velin-theme-toggle:not(:defined), velin-icon:not(:defined) {
+  velin-tabs:not(:defined), velin-accordion:not(:defined), velin-carousel:not(:defined), velin-collapse:not(:defined), velin-stepper:not(:defined), velin-stepper-wc:not(:defined), velin-bottom-nav:not(:defined), velin-menubar:not(:defined), velin-segmented-control:not(:defined), velin-code-block:not(:defined), velin-secure-field:not(:defined), velin-search:not(:defined) {
     opacity: 0;
     visibility: hidden;
+    contain: layout style;
+    min-block-size: 2.75rem;
+    display: block;
+  }
+
+  velin-dropdown:not(:defined), velin-combobox:not(:defined), velin-popover:not(:defined), velin-tooltip:not(:defined), velin-tooltip-wc:not(:defined), velin-rating:not(:defined), velin-copy:not(:defined), velin-email:not(:defined), velin-countdown:not(:defined), velin-counter:not(:defined), velin-live-dot:not(:defined), velin-progress-ring:not(:defined), velin-icon:not(:defined), velin-theme-toggle:not(:defined) {
+    vertical-align: middle;
+    opacity: 0;
+    visibility: hidden;
+    contain: layout style;
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+    display: inline-block;
+  }
+
+  velin-sparkline:not(:defined) {
+    vertical-align: middle;
+    opacity: 0;
+    visibility: hidden;
+    contain: layout style;
+    min-block-size: 1.5rem;
+    min-inline-size: 4rem;
+    display: inline-block;
+  }
+
+  velin-scroll-top:not(:defined) {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    contain: layout style;
+    block-size: 2.75rem;
+    inline-size: 2.75rem;
+    position: fixed;
+    inset-block-end: var(--velin-space-4, 1rem);
+    inset-inline-end: var(--velin-space-4, 1rem);
+  }
+
+  velin-toast:not(:defined), velin-announcer:not(:defined) {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    contain: strict;
+    block-size: 1px;
+    inline-size: 1px;
+    position: fixed;
+    overflow: hidden;
+  }
+
+  velin-persist:not(:defined), velin-scrollspy:not(:defined) {
+    opacity: 0;
+    visibility: hidden;
+    display: contents;
   }
-}
 
-@layer base {
   :focus-visible {
     outline: 3px solid var(--velin-color-focus);
     outline-offset: 2px;
@@ -531,7 +617,7 @@
     overflow: hidden;
   }
 
-  .velin-sr-only--focusable:focus, .velin-sr-only--focusable:active {
+  .velin-sr-only--focusable:focus-visible, .velin-sr-only--focusable:active {
     width: auto;
     height: auto;
     padding: inherit;
@@ -570,7 +656,9 @@
     inset-inline-start: var(--velin-space-4);
   }
 
-  .velin-skip-link:focus {
+  .velin-skip-link:focus-visible {
+    outline: 3px solid var(--velin-color-focus);
+    outline-offset: 2px;
     inset-block-start: var(--velin-space-4);
   }
 
@@ -836,32 +924,111 @@
     min-inline-size: 2.75rem;
   }
 
-  :root[data-velin-contrast="aaa"] {
-    --velin-color-text: oklch(8% .01 250);
-    --velin-color-text-muted: oklch(28% .01 250);
-    --velin-color-text-subtle: oklch(38% .01 250);
-    --velin-color-border: oklch(35% .01 250);
-    --velin-color-border-strong: oklch(20% .01 250);
-    --velin-color-primary: oklch(38% .18 250);
-    --velin-color-primary-hover: oklch(32% .18 250);
-    --velin-color-on-primary: oklch(100% 0 0);
-    --velin-color-focus: oklch(35% .22 250);
+  :root[data-velin-contrast="aa"] {
+    --velin-color-text: oklch(15% .01 250);
+    --velin-color-text-muted: oklch(45% .01 250);
+    --velin-color-text-subtle: oklch(60% .005 250);
+    --velin-color-primary: oklch(55% .15 250);
+    --velin-color-primary-text: oklch(42% .15 250);
+    --velin-color-border: oklch(82% .01 250);
+    --velin-color-focus: oklch(60% .2 250);
   }
 
-  :root[data-velin-contrast="aaa"][data-velin-theme="dark"], :root[data-velin-contrast="aaa"]:not([data-velin-theme="light"]) {
-    @media (prefers-color-scheme: dark) {
-      --velin-color-text: oklch(98% .005 250);
-      --velin-color-text-muted: oklch(82% .005 250);
-      --velin-color-text-subtle: oklch(72% .005 250);
-      --velin-color-border: oklch(55% .01 250);
-      --velin-color-border-strong: oklch(70% .01 250);
-      --velin-color-primary: oklch(78% .14 250);
-      --velin-color-on-primary: oklch(8% .01 250);
-    }
+  :root[data-velin-contrast="aaa"] .velin-btn, :root:not([data-velin-contrast="aa"]) .velin-btn, :root[data-velin-contrast="aaa"] .velin-input, :root[data-velin-contrast="aaa"] .velin-select, :root[data-velin-contrast="aaa"] .velin-textarea, :root:not([data-velin-contrast="aa"]) .velin-input, :root:not([data-velin-contrast="aa"]) .velin-select, :root:not([data-velin-contrast="aa"]) .velin-textarea {
+    border-width: 2px;
   }
 
-  :root[data-velin-contrast="aaa"] .velin-btn, :root[data-velin-contrast="aaa"] .velin-input, :root[data-velin-contrast="aaa"] .velin-select, :root[data-velin-contrast="aaa"] .velin-textarea {
-    border-width: 2px;
+  .velin-auth-form {
+    gap: var(--velin-space-4);
+    flex-direction: column;
+    max-width: 28rem;
+    display: flex;
+  }
+
+  .velin-auth-form .velin-field-error {
+    color: var(--velin-color-danger, #b91c1c);
+    font-size: var(--velin-text-sm);
+    align-items: flex-start;
+    gap: var(--velin-space-2);
+    display: flex;
+  }
+
+  .velin-auth-form .velin-field-error:before {
+    content: "";
+    background: currentColor;
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-block-start: .1em;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+
+  .velin-input[aria-invalid="true"], .velin-auth-form .velin-input:invalid:not(:placeholder-shown) {
+    border-color: var(--velin-color-danger, #b91c1c);
+    outline-color: var(--velin-color-danger, #b91c1c);
+  }
+
+  .velin-auth-form .velin-input[aria-invalid="true"] {
+    background-image: linear-gradient(#0000, #0000);
+  }
+
+  .velin-field-help {
+    font-size: var(--velin-text-sm);
+    color: var(--velin-color-text-muted);
+    line-height: var(--velin-leading-snug);
+    margin-block-start: var(--velin-space-1);
+  }
+
+  .velin-form-legend {
+    font-size: var(--velin-text-lg);
+    font-weight: var(--velin-weight-semibold);
+    margin-block-end: var(--velin-space-2);
+    padding: 0;
+  }
+
+  .velin-form-section-help {
+    font-size: var(--velin-text-sm);
+    color: var(--velin-color-text-muted);
+    margin-block-end: var(--velin-space-4);
+  }
+
+  .velin-drag-handle {
+    cursor: grab;
+    touch-action: none;
+    justify-content: center;
+    align-items: center;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+  }
+
+  .velin-drag-handle:active {
+    cursor: grabbing;
+  }
+
+  .velin-drag-keyboard-hint {
+    font-size: var(--velin-text-xs);
+    color: var(--velin-color-text-muted);
+    margin-block-start: var(--velin-space-1);
+  }
+
+  .velin-drag-keyboard-hint kbd {
+    font-family: var(--velin-font-mono);
+    border-radius: var(--velin-radius-sm);
+    border: 1px solid var(--velin-color-border);
+    background: var(--velin-color-surface-dim);
+    padding: .1em .35em;
+  }
+
+  :root {
+    --velin-focus-ring-width: 3px;
+    --velin-focus-ring-offset: 2px;
+    --velin-focus-ring-color: var(--velin-color-focus, oklch(55% .2 264));
+  }
+
+  :where(a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible) {
+    outline: var(--velin-focus-ring-width) solid var(--velin-focus-ring-color);
+    outline-offset: var(--velin-focus-ring-offset);
   }
 }
 
@@ -4396,110 +4563,416 @@
       transition: none;
     }
   }
-}
 
-@layer utilities {
-  .velin-text-primary {
-    color: var(--velin-color-primary);
+  .velin-search {
+    inline-size: 100%;
+    position: relative;
   }
 
-  .velin-text-secondary {
-    color: var(--velin-color-secondary);
+  .velin-search__input {
+    inline-size: 100%;
+    padding: var(--velin-space-2) var(--velin-space-3);
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+    background: var(--velin-color-surface);
+    color: var(--velin-color-text);
   }
 
-  .velin-text-muted {
-    color: var(--velin-color-text-muted);
+  .velin-search__results {
+    z-index: var(--velin-z-dropdown, 100);
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+    background: var(--velin-color-surface);
+    max-block-size: 20rem;
+    box-shadow: var(--velin-shadow-lg);
+    opacity: 0;
+    transition: opacity var(--velin-duration-fast, .15s) ease,
+      transform var(--velin-duration-fast, .15s) ease;
+    position: absolute;
+    inset-block-start: calc(100% + var(--velin-space-1));
+    inset-inline: 0;
+    overflow: auto;
+    transform: translateY(-.25rem);
   }
 
-  .velin-text-subtle {
-    color: var(--velin-color-text-subtle);
+  .velin-search__results--open {
+    opacity: 1;
+    transform: translateY(0);
   }
 
-  .velin-text-success {
-    color: var(--velin-color-success);
+  .velin-search__group-label {
+    padding: var(--velin-space-2) var(--velin-space-3);
+    font-size: var(--velin-text-xs, .75rem);
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    color: var(--velin-color-text-muted);
+    border-block-end: 1px solid var(--velin-color-border);
+    font-weight: 600;
   }
 
-  .velin-text-warning {
-    color: var(--velin-color-warning);
+  .velin-search__item {
+    gap: var(--velin-space-1);
+    padding: var(--velin-space-2) var(--velin-space-3);
+    color: inherit;
+    flex-direction: column;
+    text-decoration: none;
+    display: flex;
   }
 
-  .velin-text-danger {
-    color: var(--velin-color-danger);
+  .velin-search__item:hover, .velin-search__item--active {
+    background: var(--velin-color-surface-hover, color-mix(in oklch, var(--velin-color-primary) 12%, transparent));
   }
 
-  .velin-text-info {
-    color: var(--velin-color-info);
+  .velin-search__title {
+    font-weight: 600;
   }
 
-  .velin-text-inherit {
-    color: inherit;
+  .velin-search__excerpt {
+    font-size: var(--velin-text-sm, .875rem);
+    color: var(--velin-color-text-muted);
   }
 
-  .velin-bg-surface {
-    background-color: var(--velin-color-surface);
+  .velin-search-hit {
+    background: color-mix(in oklch, var(--velin-color-primary) 35%, transparent);
+    border-radius: 2px;
+    padding-inline: 1px;
   }
 
-  .velin-bg-surface-dim {
-    background-color: var(--velin-color-surface-dim);
+  @media (prefers-reduced-motion: reduce) {
+    .velin-search__results {
+      transition: none;
+    }
   }
 
-  .velin-bg-surface-bright {
-    background-color: var(--velin-color-surface-bright);
+  @media (width <= 640px) {
+    .velin-search {
+      min-inline-size: 0;
+    }
+
+    .velin-search__results {
+      box-sizing: border-box;
+      max-inline-size: min(100vw, 100%);
+      inset-inline: 0;
+    }
   }
 
-  .velin-bg-primary {
-    background-color: var(--velin-color-primary);
+  .velin-quote {
+    margin-block: var(--velin-space-4);
+    border-inline-start: 4px solid var(--velin-color-primary);
+    color: var(--velin-color-text-muted);
+    padding-inline-start: var(--velin-space-4);
+    font-style: italic;
   }
 
-  .velin-bg-primary-subtle {
-    background-color: var(--velin-color-primary-subtle);
+  .velin-code-block {
+    margin-block: var(--velin-space-4);
+    border-radius: var(--velin-radius-md);
+    background: var(--velin-color-surface-elevated, var(--velin-color-surface));
+    border: 1px solid var(--velin-color-border);
+    position: relative;
+    overflow: hidden;
   }
 
-  .velin-bg-secondary {
-    background-color: var(--velin-color-secondary);
+  .velin-code-block pre {
+    padding: var(--velin-space-4);
+    font-family: var(--velin-font-mono, ui-monospace, monospace);
+    font-size: var(--velin-text-sm, .875rem);
+    margin: 0;
+    overflow-x: auto;
   }
 
-  .velin-bg-secondary-subtle {
-    background-color: var(--velin-color-secondary-subtle);
+  .velin-code-block__copy {
+    position: absolute;
+    inset-block-start: var(--velin-space-2);
+    inset-inline-end: var(--velin-space-2);
   }
 
-  .velin-bg-success {
-    background-color: var(--velin-color-success);
+  .velin-highlight {
+    background: color-mix(in oklch, var(--velin-color-warning, #f59e0b) 35%, transparent);
+    border-radius: 2px;
+    padding-inline: 2px;
   }
 
-  .velin-bg-success-subtle {
-    background-color: var(--velin-color-success-subtle);
+  [velin-anchor] {
+    scroll-margin-block: var(--velin-space-16, 4rem);
   }
 
-  .velin-bg-warning {
-    background-color: var(--velin-color-warning);
+  pre.velin-syntax-pending code, code.velin-syntax-pending {
+    opacity: 0;
   }
 
-  .velin-bg-warning-subtle {
-    background-color: var(--velin-color-warning-subtle);
+  pre.velin-syntax-ready code, code.velin-syntax-ready {
+    opacity: 1;
+    transition: opacity var(--velin-duration-normal, .25s) var(--velin-ease-out, ease-out);
   }
 
-  .velin-bg-danger {
-    background-color: var(--velin-color-danger);
+  @media (prefers-reduced-motion: reduce) {
+    pre.velin-syntax-ready code, code.velin-syntax-ready {
+      transition: none;
+    }
   }
 
-  .velin-bg-danger-subtle {
-    background-color: var(--velin-color-danger-subtle);
+  .velin-token {
+    font-family: inherit;
   }
 
-  .velin-bg-info {
-    background-color: var(--velin-color-info);
+  .velin-token--keyword {
+    color: oklch(45% .2 265);
   }
 
-  .velin-bg-info-subtle {
-    background-color: var(--velin-color-info-subtle);
+  .velin-token--string {
+    color: oklch(42% .14 145);
   }
 
-  .velin-bg-transparent {
-    background-color: #0000;
+  .velin-token--comment {
+    color: oklch(55% .02 265);
+    font-style: italic;
   }
 
-  .velin-m-0 {
+  .velin-token--number {
+    color: oklch(48% .16 55);
+  }
+
+  .velin-token--operator {
+    color: oklch(50% .18 25);
+  }
+
+  .velin-token--punctuation {
+    color: oklch(52% .02 265);
+  }
+
+  .velin-token--identifier {
+    color: oklch(38% .04 265);
+  }
+
+  .velin-token--tag {
+    color: oklch(48% .18 25);
+  }
+
+  .velin-token--attr-name {
+    color: oklch(45% .16 265);
+  }
+
+  .velin-token--attr-value {
+    color: oklch(42% .14 145);
+  }
+
+  .velin-token--builtin {
+    color: oklch(46% .17 310);
+  }
+
+  .velin-token--regex {
+    color: oklch(50% .16 55);
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    .velin-token--keyword {
+      color: color(display-p3 .2 .35 .85);
+    }
+
+    .velin-token--string {
+      color: color(display-p3 .15 .55 .35);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-velin-theme="light"]) .velin-token--keyword {
+      color: oklch(78% .14 285);
+    }
+  }
+
+  [data-velin-theme="dark"] .velin-token--keyword {
+    color: oklch(78% .14 285);
+  }
+
+  [data-velin-theme="dark"] .velin-token--string {
+    color: oklch(78% .12 145);
+  }
+
+  [data-velin-theme="dark"] .velin-token--comment {
+    color: oklch(62% .03 285);
+  }
+
+  [data-velin-theme="dark"] .velin-token--number {
+    color: oklch(80% .12 75);
+  }
+
+  [data-velin-theme="dark"] .velin-token--operator, [data-velin-theme="dark"] .velin-token--tag {
+    color: oklch(78% .14 25);
+  }
+
+  [data-velin-theme="dark"] .velin-token--attr-name {
+    color: oklch(76% .12 285);
+  }
+
+  [data-velin-theme="dark"] .velin-token--identifier {
+    color: oklch(88% .02 285);
+  }
+
+  .velin-code-block__line--highlight {
+    background: color-mix(in oklch, var(--velin-color-primary, oklch(55% .2 265)) 18%, transparent);
+    margin-inline: calc(-1 * var(--velin-space-4, 1rem));
+    padding-inline: var(--velin-space-4, 1rem);
+    display: block;
+  }
+
+  velin-code-block {
+    display: block;
+    position: relative;
+  }
+
+  velin-code-block[data-collapsed] pre {
+    max-height: 12rem;
+    overflow: hidden;
+  }
+
+  velin-code-block .velin-code-block__gutter {
+    grid-template-columns: auto 1fr;
+    gap: 0;
+    display: grid;
+  }
+
+  velin-code-block .velin-code-block__line-numbers {
+    padding: var(--velin-space-4);
+    text-align: end;
+    user-select: none;
+    color: var(--velin-color-text-muted);
+    font-family: var(--velin-font-mono, ui-monospace, monospace);
+    font-size: var(--velin-text-sm, .875rem);
+    border-inline-end: 1px solid var(--velin-color-border);
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: flex-end;
+    padding-inline-end: var(--velin-space-2);
+    line-height: 1.55;
+    display: flex;
+  }
+
+  velin-code-block .velin-code-block__line-numbers > span {
+    min-height: 1.55em;
+    line-height: 1.55;
+    display: block;
+  }
+
+  velin-code-block .velin-code-block__gutter pre, velin-code-block .velin-code-block__gutter pre code {
+    white-space: pre;
+    tab-size: 2;
+    margin: 0;
+    line-height: 1.55;
+  }
+
+  velin-code-block .velin-code-block__toolbar {
+    gap: var(--velin-space-2);
+    z-index: 1;
+    display: flex;
+    position: absolute;
+    inset-block-start: var(--velin-space-2);
+    inset-inline-end: var(--velin-space-2);
+  }
+}
+
+@layer utilities {
+  .velin-text-primary {
+    color: var(--velin-color-primary);
+  }
+
+  .velin-text-secondary {
+    color: var(--velin-color-secondary);
+  }
+
+  .velin-text-muted {
+    color: var(--velin-color-text-muted);
+  }
+
+  .velin-text-subtle {
+    color: var(--velin-color-text-subtle);
+  }
+
+  .velin-text-success {
+    color: var(--velin-color-success);
+  }
+
+  .velin-text-warning {
+    color: var(--velin-color-warning);
+  }
+
+  .velin-text-danger {
+    color: var(--velin-color-danger);
+  }
+
+  .velin-text-info {
+    color: var(--velin-color-info);
+  }
+
+  .velin-text-inherit {
+    color: inherit;
+  }
+
+  .velin-bg-surface {
+    background-color: var(--velin-color-surface);
+  }
+
+  .velin-bg-surface-dim {
+    background-color: var(--velin-color-surface-dim);
+  }
+
+  .velin-bg-surface-bright {
+    background-color: var(--velin-color-surface-bright);
+  }
+
+  .velin-bg-primary {
+    background-color: var(--velin-color-primary);
+  }
+
+  .velin-bg-primary-subtle {
+    background-color: var(--velin-color-primary-subtle);
+  }
+
+  .velin-bg-secondary {
+    background-color: var(--velin-color-secondary);
+  }
+
+  .velin-bg-secondary-subtle {
+    background-color: var(--velin-color-secondary-subtle);
+  }
+
+  .velin-bg-success {
+    background-color: var(--velin-color-success);
+  }
+
+  .velin-bg-success-subtle {
+    background-color: var(--velin-color-success-subtle);
+  }
+
+  .velin-bg-warning {
+    background-color: var(--velin-color-warning);
+  }
+
+  .velin-bg-warning-subtle {
+    background-color: var(--velin-color-warning-subtle);
+  }
+
+  .velin-bg-danger {
+    background-color: var(--velin-color-danger);
+  }
+
+  .velin-bg-danger-subtle {
+    background-color: var(--velin-color-danger-subtle);
+  }
+
+  .velin-bg-info {
+    background-color: var(--velin-color-info);
+  }
+
+  .velin-bg-info-subtle {
+    background-color: var(--velin-color-info-subtle);
+  }
+
+  .velin-bg-transparent {
+    background-color: #0000;
+  }
+
+  .velin-m-0 {
     margin: var(--velin-space-0);
   }
 
@@ -4532,30 +5005,58 @@
   }
 
   .velin-mb-0 {
-    margin-block: var(--velin-space-0);
+    margin-bottom: var(--velin-space-0);
   }
 
   .velin-mb-1 {
-    margin-block: var(--velin-space-1);
+    margin-bottom: var(--velin-space-1);
   }
 
   .velin-mb-2 {
-    margin-block: var(--velin-space-2);
+    margin-bottom: var(--velin-space-2);
   }
 
   .velin-mb-3 {
-    margin-block: var(--velin-space-3);
+    margin-bottom: var(--velin-space-3);
   }
 
   .velin-mb-4 {
-    margin-block: var(--velin-space-4);
+    margin-bottom: var(--velin-space-4);
   }
 
   .velin-mb-6 {
-    margin-block: var(--velin-space-6);
+    margin-bottom: var(--velin-space-6);
   }
 
   .velin-mb-8 {
+    margin-bottom: var(--velin-space-8);
+  }
+
+  .velin-my-0 {
+    margin-block: var(--velin-space-0);
+  }
+
+  .velin-my-1 {
+    margin-block: var(--velin-space-1);
+  }
+
+  .velin-my-2 {
+    margin-block: var(--velin-space-2);
+  }
+
+  .velin-my-3 {
+    margin-block: var(--velin-space-3);
+  }
+
+  .velin-my-4 {
+    margin-block: var(--velin-space-4);
+  }
+
+  .velin-my-6 {
+    margin-block: var(--velin-space-6);
+  }
+
+  .velin-my-8 {
     margin-block: var(--velin-space-8);
   }
 
@@ -5049,6 +5550,18 @@
     font-family: var(--velin-font-mono);
   }
 
+  .velin-font-display {
+    font-family: var(--velin-font-display);
+  }
+
+  .velin-font-text {
+    font-family: var(--velin-font-text);
+  }
+
+  .velin-tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
+
   .velin-text-start {
     text-align: start;
   }
@@ -6183,251 +6696,657 @@
     }
   }
 
-  .velin-animate-flip {
-    animation: velin-flip var(--velin-duration-normal) var(--velin-ease-out) both;
+  .velin-animate-flip {
+    animation: velin-flip var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  .velin-animate-drop-in {
+    animation: velin-drop-in var(--velin-duration-normal) var(--velin-ease-bounce) both;
+  }
+
+  .velin-animate-rubber-band {
+    animation: velin-rubber-band 1s var(--velin-ease-default) both;
+  }
+
+  .velin-animate-jello {
+    animation: velin-jello 1s var(--velin-ease-default) both;
+  }
+
+  .velin-animate-heartbeat {
+    animation: velin-heartbeat 1.5s var(--velin-ease-in-out) infinite;
+  }
+
+  .velin-animate-swing {
+    animation: velin-swing 1s var(--velin-ease-default) both;
+    transform-origin: top;
+  }
+
+  .velin-animate-tada {
+    animation: velin-tada 1s var(--velin-ease-default) both;
+  }
+
+  @keyframes velin-flip {
+    from {
+      opacity: 0;
+      transform: perspective(400px) rotateY(90deg);
+    }
+
+    40% {
+      transform: perspective(400px) rotateY(-15deg);
+    }
+
+    70% {
+      transform: perspective(400px) rotateY(15deg);
+    }
+
+    to {
+      opacity: 1;
+      transform: perspective(400px) rotateY(0);
+    }
+  }
+
+  @keyframes velin-drop-in {
+    from {
+      opacity: 0;
+      transform: translateY(-3rem) scale(.9);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes velin-rubber-band {
+    0% {
+      transform: scaleX(1);
+    }
+
+    30% {
+      transform: scaleX(1.25) scaleY(.75);
+    }
+
+    40% {
+      transform: scaleX(.75) scaleY(1.25);
+    }
+
+    50% {
+      transform: scaleX(1.15) scaleY(.85);
+    }
+
+    65% {
+      transform: scaleX(.95) scaleY(1.05);
+    }
+
+    75% {
+      transform: scaleX(1.05) scaleY(.95);
+    }
+
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes velin-jello {
+    0%, 11.1%, 100% {
+      transform: none;
+    }
+
+    22.2% {
+      transform: skewX(-12.5deg) skewY(-12.5deg);
+    }
+
+    33.3% {
+      transform: skewX(6.25deg) skewY(6.25deg);
+    }
+
+    44.4% {
+      transform: skewX(-3.125deg) skewY(-3.125deg);
+    }
+
+    55.5% {
+      transform: skewX(1.5625deg) skewY(1.5625deg);
+    }
+
+    66.6% {
+      transform: skewX(-.78125deg) skewY(-.78125deg);
+    }
+
+    77.7% {
+      transform: skewX(.390625deg) skewY(.390625deg);
+    }
+
+    88.8% {
+      transform: skewX(-.195313deg) skewY(-.195313deg);
+    }
+  }
+
+  @keyframes velin-heartbeat {
+    0%, 100% {
+      transform: scale(1);
+    }
+
+    14% {
+      transform: scale(1.3);
+    }
+
+    28% {
+      transform: scale(1);
+    }
+
+    42% {
+      transform: scale(1.3);
+    }
+
+    70% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes velin-swing {
+    20% {
+      transform: rotate(15deg);
+    }
+
+    40% {
+      transform: rotate(-10deg);
+    }
+
+    60% {
+      transform: rotate(5deg);
+    }
+
+    80% {
+      transform: rotate(-5deg);
+    }
+
+    100% {
+      transform: rotate(0);
+    }
+  }
+
+  @keyframes velin-tada {
+    0% {
+      transform: scale(1) rotate(0);
+    }
+
+    10%, 20% {
+      transform: scale(.9) rotate(-3deg);
+    }
+
+    30%, 50%, 70%, 90% {
+      transform: scale(1.1) rotate(3deg);
+    }
+
+    40%, 60%, 80% {
+      transform: scale(1.1) rotate(-3deg);
+    }
+
+    100% {
+      transform: scale(1) rotate(0);
+    }
+  }
+
+  .velin-animate-stagger-1 > :first-child {
+    animation-delay: 0s;
+  }
+
+  .velin-animate-stagger-1 > :nth-child(2) {
+    animation-delay: .1s;
+  }
+
+  .velin-animate-stagger-1 > :nth-child(3) {
+    animation-delay: .2s;
+  }
+
+  .velin-animate-stagger-1 > :nth-child(4) {
+    animation-delay: .3s;
+  }
+
+  .velin-animate-stagger-1 > :nth-child(5) {
+    animation-delay: .4s;
+  }
+
+  .velin-animate-stagger-1 > :nth-child(6) {
+    animation-delay: .5s;
+  }
+
+  .velin-animate-stagger-1 > :nth-child(7) {
+    animation-delay: .6s;
+  }
+
+  .velin-animate-stagger-1 > :nth-child(8) {
+    animation-delay: .7s;
+  }
+
+  .velin-animate-stagger-2 > :first-child {
+    animation-delay: 0s;
+  }
+
+  .velin-animate-stagger-2 > :nth-child(2) {
+    animation-delay: .2s;
+  }
+
+  .velin-animate-stagger-2 > :nth-child(3) {
+    animation-delay: .4s;
+  }
+
+  .velin-animate-stagger-2 > :nth-child(4) {
+    animation-delay: .6s;
+  }
+
+  .velin-animate-hover {
+    animation-play-state: paused;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .velin-animate-hover:hover {
+      animation-play-state: running;
+    }
+  }
+
+  .velin-animate-blur-in {
+    animation: velin-blur-in var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  .velin-animate-blur-out {
+    animation: velin-blur-out var(--velin-duration-normal) var(--velin-ease-in) both;
+  }
+
+  .velin-animate-rotate-in {
+    animation: velin-rotate-in var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  .velin-animate-float {
+    animation: velin-float 3s var(--velin-ease-in-out) infinite;
+  }
+
+  .velin-animate-flash {
+    animation: velin-flash .6s var(--velin-ease-default) both;
+  }
+
+  .velin-animate-reveal-up {
+    animation: velin-reveal-up var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  .velin-animate-reveal-down {
+    animation: velin-reveal-down var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  .velin-animate-glow {
+    animation: velin-glow 2s var(--velin-ease-in-out) infinite;
+  }
+
+  .velin-animate-slide-fade-left {
+    animation: velin-slide-fade-left var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  .velin-animate-slide-fade-right {
+    animation: velin-slide-fade-right var(--velin-duration-normal) var(--velin-ease-out) both;
+  }
+
+  @keyframes velin-blur-in {
+    from {
+      opacity: 0;
+      filter: blur(8px);
+    }
+
+    to {
+      opacity: 1;
+      filter: blur();
+    }
+  }
+
+  @keyframes velin-blur-out {
+    from {
+      opacity: 1;
+      filter: blur();
+    }
+
+    to {
+      opacity: 0;
+      filter: blur(8px);
+    }
+  }
+
+  @keyframes velin-rotate-in {
+    from {
+      opacity: 0;
+      transform: rotate(-8deg) scale(.95);
+    }
+
+    to {
+      opacity: 1;
+      transform: rotate(0) scale(1);
+    }
+  }
+
+  @keyframes velin-float {
+    0%, 100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-.35rem);
+    }
+  }
+
+  @keyframes velin-flash {
+    0%, 50%, 100% {
+      opacity: 1;
+    }
+
+    25%, 75% {
+      opacity: .35;
+    }
+  }
+
+  @keyframes velin-reveal-up {
+    from {
+      clip-path: inset(100% 0 0);
+      opacity: 0;
+    }
+
+    to {
+      clip-path: inset(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes velin-reveal-down {
+    from {
+      clip-path: inset(0 0 100%);
+      opacity: 0;
+    }
+
+    to {
+      clip-path: inset(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes velin-glow {
+    0%, 100% {
+      box-shadow: 0 0 #0000;
+    }
+
+    50% {
+      box-shadow: 0 0 1rem 0 color-mix(in oklch, var(--velin-color-primary, #2563eb) 35%, transparent);
+    }
+  }
+
+  @keyframes velin-slide-fade-left {
+    from {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes velin-slide-fade-right {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .velin-animate-blur-in, .velin-animate-blur-out, .velin-animate-rotate-in, .velin-animate-reveal-up, .velin-animate-reveal-down, .velin-animate-slide-fade-left, .velin-animate-slide-fade-right {
+      opacity: 1;
+      filter: none;
+      clip-path: none;
+      animation: none;
+      transform: none;
+    }
+
+    .velin-animate-float, .velin-animate-glow, .velin-animate-flash {
+      animation: none;
+    }
+  }
+
+  .velin-saturate-0 {
+    filter: saturate(0);
+  }
+
+  .velin-saturate-50 {
+    filter: saturate(.5);
+  }
+
+  .velin-saturate-100 {
+    filter: saturate();
+  }
+
+  .velin-saturate-150 {
+    filter: saturate(1.5);
+  }
+
+  .velin-saturate-200 {
+    filter: saturate(2);
+  }
+
+  .velin-hue-rotate-15 {
+    filter: hue-rotate(15deg);
   }
 
-  .velin-animate-drop-in {
-    animation: velin-drop-in var(--velin-duration-normal) var(--velin-ease-bounce) both;
+  .velin-hue-rotate-30 {
+    filter: hue-rotate(30deg);
   }
 
-  .velin-animate-rubber-band {
-    animation: velin-rubber-band 1s var(--velin-ease-default) both;
+  .velin-hue-rotate-60 {
+    filter: hue-rotate(60deg);
   }
 
-  .velin-animate-jello {
-    animation: velin-jello 1s var(--velin-ease-default) both;
+  .velin-hue-rotate-90 {
+    filter: hue-rotate(90deg);
   }
 
-  .velin-animate-heartbeat {
-    animation: velin-heartbeat 1.5s var(--velin-ease-in-out) infinite;
+  .velin-hue-rotate-180 {
+    filter: hue-rotate(180deg);
   }
 
-  .velin-animate-swing {
-    animation: velin-swing 1s var(--velin-ease-default) both;
-    transform-origin: top;
+  .velin-contrast-50 {
+    filter: contrast(.5);
   }
 
-  .velin-animate-tada {
-    animation: velin-tada 1s var(--velin-ease-default) both;
+  .velin-contrast-75 {
+    filter: contrast(.75);
   }
 
-  @keyframes velin-flip {
-    from {
-      opacity: 0;
-      transform: perspective(400px) rotateY(90deg);
-    }
+  .velin-contrast-100 {
+    filter: contrast();
+  }
 
-    40% {
-      transform: perspective(400px) rotateY(-15deg);
-    }
+  .velin-contrast-125 {
+    filter: contrast(1.25);
+  }
 
-    70% {
-      transform: perspective(400px) rotateY(15deg);
-    }
+  .velin-contrast-150 {
+    filter: contrast(1.5);
+  }
 
-    to {
-      opacity: 1;
-      transform: perspective(400px) rotateY(0);
-    }
+  .velin-invert {
+    filter: invert();
   }
 
-  @keyframes velin-drop-in {
-    from {
-      opacity: 0;
-      transform: translateY(-3rem) scale(.9);
-    }
+  .velin-invert-0 {
+    filter: invert(0);
+  }
 
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
+  .velin-sepia {
+    filter: sepia();
   }
 
-  @keyframes velin-rubber-band {
-    0% {
-      transform: scaleX(1);
-    }
+  .velin-sepia-50 {
+    filter: sepia(.5);
+  }
 
-    30% {
-      transform: scaleX(1.25) scaleY(.75);
-    }
+  .velin-sepia-0 {
+    filter: sepia(0);
+  }
 
-    40% {
-      transform: scaleX(.75) scaleY(1.25);
-    }
+  .velin-drop-shadow-sm {
+    filter: drop-shadow(0 1px 1px oklch(0% 0 0 / .18));
+  }
 
-    50% {
-      transform: scaleX(1.15) scaleY(.85);
-    }
+  .velin-drop-shadow-md {
+    filter: drop-shadow(0 4px 6px oklch(0% 0 0 / .18));
+  }
 
-    65% {
-      transform: scaleX(.95) scaleY(1.05);
-    }
+  .velin-drop-shadow-lg {
+    filter: drop-shadow(0 12px 24px oklch(0% 0 0 / .22));
+  }
 
-    75% {
-      transform: scaleX(1.05) scaleY(.95);
-    }
+  .velin-drop-shadow-glow {
+    filter: drop-shadow(0 0 1.5rem color-mix(in oklch, var(--velin-color-primary, #2563eb) 60%, transparent));
+  }
 
-    100% {
-      transform: scaleX(1);
-    }
+  .velin-backdrop-saturate {
+    -webkit-backdrop-filter: saturate(180%);
   }
 
-  @keyframes velin-jello {
-    0%, 11.1%, 100% {
-      transform: none;
-    }
+  .velin-backdrop-brightness-90 {
+    -webkit-backdrop-filter: brightness(.9);
+  }
 
-    22.2% {
-      transform: skewX(-12.5deg) skewY(-12.5deg);
-    }
+  .velin-backdrop-brightness-110 {
+    -webkit-backdrop-filter: brightness(1.1);
+  }
 
-    33.3% {
-      transform: skewX(6.25deg) skewY(6.25deg);
-    }
+  .velin-backdrop-grayscale {
+    -webkit-backdrop-filter: grayscale();
+  }
 
-    44.4% {
-      transform: skewX(-3.125deg) skewY(-3.125deg);
-    }
+  .velin-glass {
+    background: color-mix(in oklch, var(--velin-color-surface-bright, #fff) 70%, transparent);
+    -webkit-backdrop-filter: blur(12px) saturate(160%);
+    border: 1px solid color-mix(in oklch, var(--velin-color-border, #ddd) 60%, transparent);
+  }
 
-    55.5% {
-      transform: skewX(1.5625deg) skewY(1.5625deg);
-    }
+  .velin-glass-strong {
+    background: color-mix(in oklch, var(--velin-color-surface-bright, #fff) 55%, transparent);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid color-mix(in oklch, var(--velin-color-border, #ddd) 70%, transparent);
+  }
 
-    66.6% {
-      transform: skewX(-.78125deg) skewY(-.78125deg);
+  @media (prefers-reduced-motion: reduce) {
+    .velin-saturate-0, .velin-saturate-50, .velin-saturate-100, .velin-saturate-150, .velin-saturate-200, .velin-hue-rotate-15, .velin-hue-rotate-30, .velin-hue-rotate-60, .velin-hue-rotate-90, .velin-hue-rotate-180 {
+      filter: none;
     }
+  }
 
-    77.7% {
-      transform: skewX(.390625deg) skewY(.390625deg);
+  @keyframes velin-stroke-draw {
+    from {
+      stroke-dashoffset: var(--velin-chart-len, 1000);
     }
 
-    88.8% {
-      transform: skewX(-.195313deg) skewY(-.195313deg);
+    to {
+      stroke-dashoffset: 0;
     }
   }
 
-  @keyframes velin-heartbeat {
+  @keyframes velin-sparkline-glow {
     0%, 100% {
-      transform: scale(1);
+      filter: drop-shadow(0 0 #0000);
     }
 
-    14% {
-      transform: scale(1.3);
+    50% {
+      filter: drop-shadow(0 0 .5rem color-mix(in oklch, var(--velin-chart-glow-color, var(--velin-color-primary, #2563eb)) 50%, transparent));
     }
+  }
 
-    28% {
+  @keyframes velin-value-bump {
+    0% {
       transform: scale(1);
     }
 
-    42% {
-      transform: scale(1.3);
+    35% {
+      color: var(--velin-chart-bump-color, var(--velin-color-primary, #2563eb));
+      transform: scale(1.06);
     }
 
-    70% {
+    100% {
       transform: scale(1);
     }
   }
 
-  @keyframes velin-swing {
-    20% {
-      transform: rotate(15deg);
-    }
-
-    40% {
-      transform: rotate(-10deg);
-    }
-
-    60% {
-      transform: rotate(5deg);
+  @keyframes velin-live-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, var(--velin-live-color, var(--velin-color-success, oklch(60% .16 145))) 65%, transparent);
     }
 
-    80% {
-      transform: rotate(-5deg);
+    70% {
+      box-shadow: 0 0 0 .65rem color-mix(in oklch, var(--velin-live-color, var(--velin-color-success, oklch(60% .16 145))) 0%, transparent);
     }
 
     100% {
-      transform: rotate(0);
+      box-shadow: 0 0 #0000;
     }
   }
 
-  @keyframes velin-tada {
-    0% {
-      transform: scale(1) rotate(0);
-    }
-
-    10%, 20% {
-      transform: scale(.9) rotate(-3deg);
-    }
-
-    30%, 50%, 70%, 90% {
-      transform: scale(1.1) rotate(3deg);
-    }
-
-    40%, 60%, 80% {
-      transform: scale(1.1) rotate(-3deg);
+  @keyframes velin-count-fade {
+    from {
+      opacity: 0;
+      transform: translateY(.4rem);
     }
 
-    100% {
-      transform: scale(1) rotate(0);
+    to {
+      opacity: 1;
+      transform: translateY(0);
     }
   }
 
-  .velin-animate-stagger-1 > :first-child {
-    animation-delay: 0s;
-  }
-
-  .velin-animate-stagger-1 > :nth-child(2) {
-    animation-delay: .1s;
-  }
-
-  .velin-animate-stagger-1 > :nth-child(3) {
-    animation-delay: .2s;
-  }
-
-  .velin-animate-stagger-1 > :nth-child(4) {
-    animation-delay: .3s;
-  }
-
-  .velin-animate-stagger-1 > :nth-child(5) {
-    animation-delay: .4s;
-  }
-
-  .velin-animate-stagger-1 > :nth-child(6) {
-    animation-delay: .5s;
-  }
-
-  .velin-animate-stagger-1 > :nth-child(7) {
-    animation-delay: .6s;
-  }
-
-  .velin-animate-stagger-1 > :nth-child(8) {
-    animation-delay: .7s;
+  .velin-chart-line {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: var(--velin-chart-len, 1000);
+    stroke-dashoffset: 0;
+    animation: velin-stroke-draw var(--velin-duration-cinematic, 1.2s) var(--velin-ease-expo-out, ease-out) both;
   }
 
-  .velin-animate-stagger-2 > :first-child {
-    animation-delay: 0s;
+  .velin-chart-area {
+    fill: var(--velin-chart-area-fill, currentColor);
+    opacity: 0;
+    animation: velin-count-fade var(--velin-duration-slowest, .8s) var(--velin-ease-expo-out, ease-out) .2s forwards;
   }
 
-  .velin-animate-stagger-2 > :nth-child(2) {
-    animation-delay: .2s;
+  .velin-chart-glow {
+    animation: velin-sparkline-glow 2.4s var(--velin-ease-in-out, ease-in-out) infinite;
   }
 
-  .velin-animate-stagger-2 > :nth-child(3) {
-    animation-delay: .4s;
+  .velin-spark-tick {
+    animation: velin-value-bump var(--velin-duration-slow, .3s) var(--velin-ease-spring, ease-out) both;
   }
 
-  .velin-animate-stagger-2 > :nth-child(4) {
-    animation-delay: .6s;
+  .velin-live-pulse {
+    animation: velin-live-pulse 1.8s var(--velin-ease-out, ease-out) infinite;
+    border-radius: 50%;
   }
 
-  .velin-animate-hover {
-    animation-play-state: paused;
+  .velin-count-fade {
+    animation: velin-count-fade var(--velin-duration-slow, .3s) var(--velin-ease-expo-out, ease-out) both;
   }
 
-  .velin-animate-hover:hover {
-    animation-play-state: running;
+  @media (prefers-reduced-motion: reduce) {
+    .velin-chart-line, .velin-chart-area, .velin-chart-glow, .velin-spark-tick, .velin-live-pulse, .velin-count-fade {
+      stroke-dashoffset: 0;
+      opacity: 1;
+      filter: none;
+      box-shadow: none;
+      animation: none;
+      transform: none;
+    }
   }
 
   .velin-gradient-primary {
@@ -7488,6 +8407,44 @@
     }
   }
 
+  .velin-pt-safe {
+    padding-block-start: max(var(--velin-space-4, 1rem), env(safe-area-inset-top, 0px));
+  }
+
+  .velin-pb-safe {
+    padding-block-end: max(var(--velin-space-4, 1rem), env(safe-area-inset-bottom, 0px));
+  }
+
+  .velin-px-safe {
+    padding-inline: max(var(--velin-space-4, 1rem), env(safe-area-inset-left, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-right, 0px));
+  }
+
+  .velin-p-safe {
+    padding-block: max(var(--velin-space-4, 1rem), env(safe-area-inset-top, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--velin-space-4, 1rem), env(safe-area-inset-left, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-right, 0px));
+  }
+
+  .velin-mobile-only {
+    display: block;
+  }
+
+  .velin-desktop-only {
+    display: none;
+  }
+
+  @media (width >= 48rem) {
+    .velin-mobile-only {
+      display: none;
+    }
+
+    .velin-desktop-only {
+      display: block;
+    }
+  }
+
   .velin-divide-y > * + * {
     border-block-start: 1px solid var(--velin-color-border);
   }
@@ -7845,6 +8802,39 @@
     }
   }
 
+  @supports not (animation-timeline: view()) {
+    .velin-animate-on-scroll:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(1.5rem);
+    }
+
+    .velin-animate-on-scroll--fade:not(.velin-in-view) {
+      opacity: 0;
+      transform: none;
+    }
+
+    .velin-animate-on-scroll--slide-up:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(2rem);
+    }
+
+    .velin-animate-on-scroll--scale:not(.velin-in-view) {
+      opacity: 0;
+      transform: scale(.92);
+    }
+
+    .velin-animate-on-scroll.velin-in-view, .velin-animate-on-scroll--fade.velin-in-view, .velin-animate-on-scroll--slide-up.velin-in-view, .velin-animate-on-scroll--scale.velin-in-view {
+      opacity: 1;
+      transition: opacity var(--velin-duration-normal, .4s) var(--velin-ease-out, ease-out),
+        transform var(--velin-duration-normal, .4s) var(--velin-ease-out, ease-out);
+      transform: none;
+    }
+  }
+
+  .velin-stagger-item {
+    transition-delay: var(--velin-stagger-delay, 0s);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .velin-animate-on-scroll, .velin-animate-on-scroll--fade, .velin-animate-on-scroll--slide-up, .velin-animate-on-scroll--scale, .velin-parallax, .velin-parallax--slow {
       opacity: 1;
@@ -8682,6 +9672,24 @@
     -webkit-text-fill-color: var(--velin-color-text, #1a1a2e);
     transition: background-color 600000s, color 600000s;
   }
+
+  .velin-isolate {
+    isolation: isolate;
+    contain: layout style paint;
+  }
+
+  .velin-sensitive {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .velin-overlay-lock {
+    overscroll-behavior: contain;
+  }
+
+  .velin-user-content img[src^="data:"] {
+    max-inline-size: 100%;
+  }
 }
 
 @layer themes;