@sigx/zero-daisyui 0.2.0-beta.6 → 0.4.0

package/dist/css/index.css

@@ -66,6 +66,12 @@
         --space-lg: 0.75rem;
         --space-xl: 1rem;
         --space-2xl: 1.25rem;
+        --measure-xs: 20rem;
+        --measure-sm: 24rem;
+        --measure-md: 28rem;
+        --measure-lg: 32rem;
+        --measure-xl: 36rem;
+        --measure-prose: 65ch;
         --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.08);
         --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.15);
         --shadow-md: 0 1px 2px oklch(0% 0 0 / 0.2);
@@ -83,6 +89,9 @@
         --depth-sheen: oklch(100% 0 0 / calc(var(--depth) * 0.1));
         --noise: 0;
         --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+        --breakpoint-sm: 40rem;
+        --breakpoint-md: 48rem;
+        --breakpoint-lg: 64rem;
     }
 
     [data-theme="light"] {
@@ -265,6 +274,187 @@
     }
 }
 
+@layer zero.recipes {
+    [data-scope="stack"][data-part="root"] {
+        --l-gap: 0;
+        --l-gap-x: var(--l-gap);
+        --l-gap-y: var(--l-gap);
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+        --l-align: stretch;
+        --l-justify: flex-start;
+        --l-wrap: nowrap;
+    }
+
+    [data-scope="stack"][data-part="root"] {
+        display: flex;
+        min-inline-size: 0;
+        column-gap: var(--l-gap-x);
+        row-gap: var(--l-gap-y);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+        align-items: var(--l-align);
+        justify-content: var(--l-justify);
+        flex-wrap: var(--l-wrap);
+    }
+
+    [data-scope="stack"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+    }
+
+    [data-scope="stack"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+    }
+
+    [data-scope="stack"][data-part="item"] {
+        --l-grow: 0;
+        flex-grow: var(--l-grow);
+        min-inline-size: 0;
+    }
+}
+
+@layer zero.recipes {
+    [data-scope="spacer"][data-part="root"] {
+        --l-space: 0;
+        --l-space-grow: 1;
+    }
+
+    [data-scope="spacer"][data-part="root"] {
+        flex-grow: var(--l-space-grow);
+        flex-shrink: 0;
+        flex-basis: var(--l-space);
+        align-self: stretch;
+    }
+}
+
+@layer zero.recipes {
+    [data-scope="grid"][data-part="root"] {
+        --l-cols: none;
+        --l-track: 16rem;
+        --l-gap: 0;
+        --l-gap-x: var(--l-gap);
+        --l-gap-y: var(--l-gap);
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+        --l-align: stretch;
+        --l-justify: stretch;
+    }
+
+    [data-scope="grid"][data-part="root"] {
+        display: grid;
+        min-inline-size: 0;
+        grid-template-columns: var(--l-cols);
+        column-gap: var(--l-gap-x);
+        row-gap: var(--l-gap-y);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+        align-items: var(--l-align);
+        justify-items: var(--l-justify);
+    }
+
+    [data-scope="grid"][data-part="cell"] {
+        --l-span: auto;
+        grid-column: var(--l-span);
+        min-inline-size: 0;
+    }
+}
+
+@layer zero.recipes {
+    [data-scope="center"][data-part="root"] {
+        --l-axis: center;
+        --l-gap: 0;
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+    }
+
+    [data-scope="center"][data-part="root"] {
+        display: grid;
+        place-items: var(--l-axis);
+        gap: var(--l-gap);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+    }
+}
+
+@layer zero.recipes {
+    [data-scope="box"][data-part="root"] {
+        --box-surface: var(--color-base-100);
+        --box-ink: var(--color-base-content);
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+    }
+
+    [data-scope="box"][data-part="root"] {
+        display: flow-root;
+        background: var(--box-surface);
+        color: var(--box-ink);
+        border-radius: var(--radius-box);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="primary"] {
+        --box-surface: var(--color-primary-soft);
+        --box-ink: var(--color-primary);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="secondary"] {
+        --box-surface: var(--color-secondary-soft);
+        --box-ink: var(--color-secondary);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="accent"] {
+        --box-surface: var(--color-accent-soft);
+        --box-ink: var(--color-accent);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="neutral"] {
+        --box-surface: var(--color-neutral-soft);
+        --box-ink: var(--color-neutral);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="info"] {
+        --box-surface: var(--color-info-soft);
+        --box-ink: var(--color-info);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="success"] {
+        --box-surface: var(--color-success-soft);
+        --box-ink: var(--color-success);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="warning"] {
+        --box-surface: var(--color-warning-soft);
+        --box-ink: var(--color-warning);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="error"] {
+        --box-surface: var(--color-error-soft);
+        --box-ink: var(--color-error);
+    }
+}
+
+@layer zero.recipes {
+    [data-scope="container"][data-part="root"] {
+        --l-measure: none;
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+    }
+
+    [data-scope="container"][data-part="root"] {
+        inline-size: 100%;
+        max-inline-size: var(--l-measure);
+        margin-inline: auto;
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+    }
+}
+
 @layer zero.recipes {
     [data-scope="tabs"][data-part="root"] {
         display: flex;
@@ -898,7 +1088,8 @@
         opacity: 0;
         transform: translateY(8px) scale(0.97);
         transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
-        padding: 1.5rem;
+        box-sizing: border-box;
+        padding: var(--space-2xl);
         max-width: 32rem;
         width: calc(100% - 2rem);
         background: var(--color-base-100);
@@ -934,7 +1125,7 @@
         display: flex;
         justify-content: flex-end;
         gap: var(--space-md);
-        margin-block-start: 1.5rem;
+        margin-block-start: var(--space-2xl);
     }
 
     [data-scope="dialog"][data-part="close"] {
@@ -1724,7 +1915,7 @@
     [data-scope="menu"][data-part="item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -1746,7 +1937,7 @@
     [data-scope="menu"][data-part="checkbox-item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -1768,7 +1959,7 @@
     [data-scope="menu"][data-part="radio-item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -1801,7 +1992,7 @@
     [data-scope="menu"][data-part="sub-trigger"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -2171,7 +2362,7 @@
     [data-scope="checkbox"][data-part="root"] {
         display: inline-flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         cursor: pointer;
     }
 
@@ -2416,7 +2607,7 @@
     [data-scope="radio-group"][data-part="root"] {
         display: flex;
         flex-direction: column;
-        gap: 0.625rem;
+        gap: var(--space-md);
     }
 
     [data-scope="radio-group"][data-part="root"][data-invalid] [data-part="item-control"] {
@@ -2435,7 +2626,7 @@
     [data-scope="radio-group"][data-part="item"] {
         display: inline-flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         cursor: pointer;
     }
 
@@ -3155,7 +3346,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -3293,8 +3484,20 @@
         --btn-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
 
+    [data-scope="button"][data-part="spinner"] {
+        box-sizing: border-box;
+        inline-size: 1em;
+        block-size: 1em;
+        flex: none;
+        border-radius: 9999px;
+        border: calc(var(--border) * 2) solid currentColor;
+        border-block-start-color: transparent;
+        animation: zero-daisyui-btn-spin 0.7s linear infinite;
+    }
+
     [data-scope="button"][data-part="root"] {
         appearance: none;
+        text-decoration: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -3309,6 +3512,10 @@
         transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
     }
 
+    [data-scope="button"][data-part="root"][data-state="loading"] {
+        cursor: progress;
+    }
+
     [data-scope="button"][data-part="root"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -3518,24 +3725,8 @@
         filter: brightness(0.92);
     }
 
-    [data-scope="button"][data-part="root"][data-mod-loading] {
-        cursor: progress;
-    }
-
-    [data-scope="button"][data-part="root"][data-mod-loading]::before {
-        content: "";
-        box-sizing: border-box;
-        inline-size: 1em;
-        block-size: 1em;
-        flex: none;
-        border-radius: 9999px;
-        border: calc(var(--border) * 2) solid currentColor;
-        border-block-start-color: transparent;
-        animation: zero-daisyui-btn-spin 0.7s linear infinite;
-    }
-
     @media (prefers-reduced-motion: reduce) {
-        [data-scope="button"][data-part="root"][data-mod-loading]::before {
+        [data-scope="button"][data-part="spinner"] {
             animation: none;
         }
     }
@@ -3586,6 +3777,18 @@
         display: grid;
     }
 
+    [data-scope="avatar"][data-part="root"][data-shape="circle"] {
+        border-radius: 9999px;
+    }
+
+    [data-scope="avatar"][data-part="root"][data-shape="square"] {
+        border-radius: 0;
+    }
+
+    [data-scope="avatar"][data-part="root"][data-shape="rounded"] {
+        border-radius: var(--radius-selector);
+    }
+
     [data-scope="avatar"][data-part="root"][data-color="primary"] {
         --avatar-ring: var(--color-primary);
     }
@@ -3887,6 +4090,7 @@
     [data-scope="combobox"][data-part="control"] {
         display: inline-flex;
         align-items: stretch;
+        flex-wrap: wrap;
         min-width: 13rem;
         box-sizing: border-box;
         height: calc(var(--size-field) * 12);
@@ -3940,6 +4144,56 @@
         color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
     }
 
+    [data-scope="combobox"][data-part="tag"] {
+        display: inline-flex;
+        align-items: center;
+        align-self: center;
+        gap: var(--space-2xs);
+        margin: var(--space-2xs);
+        padding: var(--space-2xs) var(--space-sm);
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+        border-radius: var(--radius-selector);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-medium);
+        line-height: var(--leading-none);
+    }
+
+    [data-scope="combobox"][data-part="tag-label"] {
+        white-space: nowrap;
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"] {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        border-radius: var(--radius-selector);
+        padding: 0 var(--space-2xs);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"]:hover:not([data-disabled]) {
+        background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="combobox"][data-part="tag-remove"][data-pressed]:not([data-disabled]) {
+        background: color-mix(in oklab, var(--color-base-content) 18%, transparent);
+    }
+
     [data-scope="combobox"][data-part="trigger"] {
         appearance: none;
         border: none;
@@ -3988,7 +4242,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);
@@ -4055,7 +4309,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="xs"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 8);
+            min-height: calc(var(--size-field) * 8);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -4066,7 +4320,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="sm"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 10);
+            min-height: calc(var(--size-field) * 10);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -4077,7 +4331,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="md"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 12);
+            min-height: calc(var(--size-field) * 12);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -4088,7 +4342,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="lg"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 14);
+            min-height: calc(var(--size-field) * 14);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -4099,7 +4353,7 @@
 
     @scope ([data-scope="combobox"][data-part="root"][data-size="xl"]) to ([data-scope="combobox"][data-part="root"]) {
         [data-scope="combobox"][data-part="control"] {
-            height: calc(var(--size-field) * 16);
+            min-height: calc(var(--size-field) * 16);
         }
 
         [data-scope="combobox"][data-part="input"] {
@@ -4818,7 +5072,7 @@
     [data-scope="tree-view"][data-part="item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-sm) var(--space-md);
         font-size: var(--tree-text);
         font-weight: var(--weight-medium);
@@ -4864,7 +5118,7 @@
     [data-scope="tree-view"][data-part="branch-trigger"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-sm) var(--space-md);
         font-size: var(--tree-text);
         font-weight: var(--weight-medium);
@@ -5269,135 +5523,6 @@
     }
 }
 
-@layer zero.recipes {
-    [data-scope="native-select"][data-part="root"] {
-        --native-select-accent: var(--color-base-content);
-    }
-
-    [data-scope="native-select"][data-part="root"] {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    [data-scope="native-select"][data-part="control"] {
-        appearance: none;
-        width: 100%;
-        min-width: 12rem;
-        box-sizing: border-box;
-        height: calc(var(--size-field) * 12);
-        background: var(--color-base-100);
-        border: var(--border) solid var(--color-base-300);
-        border-radius: var(--radius-field);
-        box-shadow: var(--shadow-xs);
-        color: var(--color-base-content);
-        font: inherit;
-        font-size: var(--text-sm);
-        padding: var(--space-sm) var(--space-md);
-        padding-inline-end: calc(var(--space-md) + 1.25em);
-        cursor: pointer;
-        transition: border-color var(--duration-fast) var(--ease-standard);
-    }
-
-    [data-scope="native-select"][data-part="control"]:hover:not([data-disabled]) {
-        border-color: var(--color-base-content);
-    }
-
-    [data-scope="native-select"][data-part="control"][data-invalid] {
-        border-color: var(--color-error);
-    }
-
-    [data-scope="native-select"][data-part="control"][data-disabled] {
-        opacity: var(--disabled-opacity);
-        cursor: not-allowed;
-    }
-
-    [data-scope="native-select"][data-part="control"][data-placeholder] {
-        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-    }
-
-    [data-scope="native-select"][data-part="control"][data-focus-visible] {
-        outline: 2px solid var(--native-select-accent);
-        outline-offset: 2px;
-    }
-
-    [data-scope="native-select"][data-part="indicator"] {
-        position: absolute;
-        inset-inline-end: var(--space-md);
-        pointer-events: none;
-        opacity: 0.6;
-        font-size: var(--text-sm);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="primary"] {
-        --native-select-accent: var(--color-primary);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="secondary"] {
-        --native-select-accent: var(--color-secondary);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="accent"] {
-        --native-select-accent: var(--color-accent);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="neutral"] {
-        --native-select-accent: var(--color-neutral);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="info"] {
-        --native-select-accent: var(--color-info);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="success"] {
-        --native-select-accent: var(--color-success);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="warning"] {
-        --native-select-accent: var(--color-warning);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="error"] {
-        --native-select-accent: var(--color-error);
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="xs"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 8);
-            font-size: var(--text-xs);
-            padding: var(--space-2xs) var(--space-xs);
-            padding-inline-end: calc(var(--space-xs) + 1.25em);
-        }
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="sm"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 10);
-            font-size: var(--text-xs);
-            padding: var(--space-xs) var(--space-sm);
-            padding-inline-end: calc(var(--space-sm) + 1.25em);
-        }
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="lg"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 14);
-            font-size: var(--text-md);
-            padding: var(--space-md) var(--space-lg);
-            padding-inline-end: calc(var(--space-lg) + 1.25em);
-        }
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="xl"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 16);
-            font-size: var(--text-lg);
-            padding: var(--space-lg) var(--space-xl);
-            padding-inline-end: calc(var(--space-xl) + 1.25em);
-        }
-    }
-}
-
 @layer zero.recipes {
     [data-scope="card"][data-part="root"] {
         --card-pad: var(--space-xl);
@@ -5624,20 +5749,187 @@
 }
 
 @layer zero.recipes {
-    [data-scope="badge"][data-part="root"] {
-        --badge-fill: var(--color-base-200);
-        --badge-ink: var(--color-base-content);
+    [data-scope="empty-state"][data-part="root"] {
+        --empty-accent: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+        --empty-tint: var(--color-base-200);
     }
 
-    [data-scope="badge"][data-part="root"] {
-        display: inline-flex;
+    [data-scope="empty-state"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
         align-items: center;
-        gap: 0.375em;
-        background: var(--badge-fill);
+        text-align: center;
+        gap: var(--space-sm);
+        padding: var(--space-2xl) var(--space-xl);
+        background: var(--empty-tint);
+        color: var(--color-base-content);
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="empty-state"][data-part="icon"] {
+        display: inline-flex;
+        color: var(--empty-accent);
+        font-size: var(--text-2xl);
+        line-height: var(--leading-none);
+        margin-block-end: var(--space-xs);
+    }
+
+    [data-scope="empty-state"][data-part="title"] {
+        margin: 0;
+        font-size: var(--text-lg);
+        font-weight: var(--weight-bold);
+        line-height: var(--leading-tight);
+    }
+
+    [data-scope="empty-state"][data-part="description"] {
+        max-inline-size: 36ch;
+        font-size: var(--text-sm);
+        line-height: var(--leading-normal);
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="empty-state"][data-part="actions"] {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--space-sm);
+        margin-block-start: var(--space-sm);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="primary"] {
+        --empty-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --empty-tint: var(--color-primary-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="secondary"] {
+        --empty-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        --empty-tint: var(--color-secondary-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="accent"] {
+        --empty-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        --empty-tint: var(--color-accent-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="neutral"] {
+        --empty-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        --empty-tint: var(--color-neutral-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="info"] {
+        --empty-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        --empty-tint: var(--color-info-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="success"] {
+        --empty-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        --empty-tint: var(--color-success-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="warning"] {
+        --empty-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        --empty-tint: var(--color-warning-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-color="error"] {
+        --empty-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        --empty-tint: var(--color-error-soft);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="xs"] {
+        padding: var(--space-md);
+        gap: var(--space-2xs);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="sm"] {
+        padding: var(--space-lg);
+        gap: var(--space-xs);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="lg"] {
+        padding: calc(var(--space-2xl) * 1.5) var(--space-2xl);
+        gap: var(--space-md);
+    }
+
+    [data-scope="empty-state"][data-part="root"][data-size="xl"] {
+        padding: calc(var(--space-2xl) * 2) var(--space-2xl);
+        gap: var(--space-lg);
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="xs"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-sm);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="sm"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-md);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="lg"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-xl);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="empty-state"][data-part="root"][data-size="xl"]) to ([data-scope="empty-state"][data-part="root"]) {
+        [data-scope="empty-state"][data-part="icon"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="title"] {
+            font-size: var(--text-2xl);
+        }
+
+        [data-scope="empty-state"][data-part="description"] {
+            font-size: var(--text-md);
+        }
+    }
+}
+
+@layer zero.recipes {
+    [data-scope="badge"][data-part="root"] {
+        --badge-dot: currentColor;
+        --badge-dot-ring: currentColor;
+        --badge-fill: var(--color-base-200);
+        --badge-ink: var(--color-base-content);
+    }
+
+    [data-scope="badge"][data-part="root"] {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375em;
+        background: var(--badge-fill);
         color: var(--badge-ink);
         border: var(--border) solid transparent;
         border-radius: var(--radius-selector);
-        padding: 0.125rem 0.625rem;
+        padding: var(--space-2xs) var(--space-lg);
         font-size: var(--text-xs);
         font-weight: var(--weight-semibold);
         line-height: var(--leading-normal);
@@ -5645,6 +5937,22 @@
         text-decoration: none;
     }
 
+    [data-scope="badge"][data-part="dot"] {
+        display: inline-block;
+        flex: none;
+        inline-size: 0.5em;
+        block-size: 0.5em;
+        box-sizing: border-box;
+        border-radius: 50%;
+        background: var(--badge-dot);
+        border: 0.1em solid var(--badge-dot-ring);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-state="running"] {
+        box-shadow: 0 0 0 0.2em color-mix(in oklch, var(--badge-dot) 35%, transparent);
+        animation: zero-daisy-badge-pulse 1.6s ease-out infinite;
+    }
+
     [data-scope="badge"][data-part="root"][data-color="primary"] {
         --badge-fill: var(--color-primary);
         --badge-ink: var(--color-primary-content);
@@ -5704,6 +6012,117 @@
         font-size: var(--text-md);
         padding: var(--space-xs) var(--space-xl);
     }
+
+    [data-scope="badge"][data-part="dot"][data-color="primary"] {
+        --badge-dot: var(--color-primary);
+        --badge-dot-ring: var(--color-primary-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="secondary"] {
+        --badge-dot: var(--color-secondary);
+        --badge-dot-ring: var(--color-secondary-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="accent"] {
+        --badge-dot: var(--color-accent);
+        --badge-dot-ring: var(--color-accent-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="neutral"] {
+        --badge-dot: var(--color-neutral);
+        --badge-dot-ring: var(--color-neutral-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="info"] {
+        --badge-dot: var(--color-info);
+        --badge-dot-ring: var(--color-info-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="success"] {
+        --badge-dot: var(--color-success);
+        --badge-dot-ring: var(--color-success-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="warning"] {
+        --badge-dot: var(--color-warning);
+        --badge-dot-ring: var(--color-warning-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="error"] {
+        --badge-dot: var(--color-error);
+        --badge-dot-ring: var(--color-error-content);
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="primary"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-primary);
+            --badge-dot-ring: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="secondary"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-secondary);
+            --badge-dot-ring: var(--color-secondary-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="accent"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-accent);
+            --badge-dot-ring: var(--color-accent-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="neutral"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-neutral);
+            --badge-dot-ring: var(--color-neutral-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="info"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-info);
+            --badge-dot-ring: var(--color-info-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="success"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-success);
+            --badge-dot-ring: var(--color-success-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="warning"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-warning);
+            --badge-dot-ring: var(--color-warning-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="error"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-error);
+            --badge-dot-ring: var(--color-error-content);
+        }
+    }
+
+    @media (forced-colors: active) {
+        [data-scope="badge"][data-part="dot"] {
+            border-width: 0.25em;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="badge"][data-part="dot"][data-state="running"] {
+            animation: none;
+        }
+    }
+}
+@keyframes zero-daisy-badge-pulse {
+    from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--badge-dot) 45%, transparent); } to { box-shadow: 0 0 0 0.5em transparent; }
 }
 
 @layer zero.recipes {
@@ -5939,7 +6358,7 @@
         align-items: center;
         justify-content: center;
         min-inline-size: 1.75em;
-        padding: 0.0625rem 0.4375rem;
+        padding: calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border));
         background: var(--kbd-fill);
         color: var(--kbd-ink);
         border: var(--border) solid var(--color-base-300);
@@ -6366,6 +6785,7 @@
 @layer zero.recipes {
     [data-scope="timeline"][data-part="root"] {
         --timeline-accent: var(--color-base-content);
+        --timeline-ring: var(--timeline-accent);
         --timeline-marker-size: calc(var(--size-selector) * 3);
     }
 
@@ -6397,13 +6817,21 @@
         flex: 1 1 0%;
     }
 
+    [data-scope="timeline"][data-part="root"]:not(:has(> [data-scope="timeline"][data-part="item"] > [data-scope="timeline"][data-part="content"][data-placement="start"])) > [data-scope="timeline"][data-part="item"][data-orientation="vertical"] {
+        grid-template-columns: 0 auto 1fr;
+    }
+
+    [data-scope="timeline"][data-part="root"]:not(:has(> [data-scope="timeline"][data-part="item"] > [data-scope="timeline"][data-part="content"][data-placement="start"])) > [data-scope="timeline"][data-part="item"][data-orientation="horizontal"] {
+        grid-template-rows: 0 auto 1fr;
+    }
+
     [data-scope="timeline"][data-part="marker"] {
         inline-size: var(--timeline-marker-size);
         block-size: var(--timeline-marker-size);
         box-sizing: border-box;
         border-radius: 9999px;
         background: var(--timeline-accent);
-        border: calc(var(--timeline-marker-size) / 2) solid var(--timeline-accent);
+        border: calc(var(--timeline-marker-size) / 6) solid var(--timeline-ring);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -6479,51 +6907,99 @@
         align-self: start;
     }
 
+    [data-scope="timeline"][data-part="marker"][data-color="primary"] {
+        --timeline-accent: var(--color-primary);
+        --timeline-ring: var(--color-primary-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="secondary"] {
+        --timeline-accent: var(--color-secondary);
+        --timeline-ring: var(--color-secondary-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="accent"] {
+        --timeline-accent: var(--color-accent);
+        --timeline-ring: var(--color-accent-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="neutral"] {
+        --timeline-accent: var(--color-neutral);
+        --timeline-ring: var(--color-neutral-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="info"] {
+        --timeline-accent: var(--color-info);
+        --timeline-ring: var(--color-info-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="success"] {
+        --timeline-accent: var(--color-success);
+        --timeline-ring: var(--color-success-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="warning"] {
+        --timeline-accent: var(--color-warning);
+        --timeline-ring: var(--color-warning-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="error"] {
+        --timeline-accent: var(--color-error);
+        --timeline-ring: var(--color-error-content);
+    }
+
     @scope ([data-scope="timeline"][data-part="root"][data-color="primary"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-primary);
+            --timeline-ring: var(--color-primary-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="secondary"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-secondary);
+            --timeline-ring: var(--color-secondary-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="accent"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-accent);
+            --timeline-ring: var(--color-accent-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="neutral"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-neutral);
+            --timeline-ring: var(--color-neutral-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="info"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-info);
+            --timeline-ring: var(--color-info-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="success"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-success);
+            --timeline-ring: var(--color-success-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="warning"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-warning);
+            --timeline-ring: var(--color-warning-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="error"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-error);
+            --timeline-ring: var(--color-error-content);
         }
     }
 
@@ -6566,6 +7042,12 @@
             font-size: var(--text-md);
         }
     }
+
+    @media (forced-colors: active) {
+        [data-scope="timeline"][data-part="marker"] {
+            border-width: calc(var(--timeline-marker-size) / 2);
+        }
+    }
 }
 
 @layer zero.recipes {
@@ -7084,64 +7566,230 @@
 }
 
 @layer zero.recipes {
-    [data-scope="breadcrumbs"][data-part="root"] {
-        --bc-accent: var(--color-base-content);
+    [data-scope="nav-list"][data-part="root"] {
+        --nav-accent: var(--color-base-content);
+        --nav-tint: var(--color-base-300);
+        --nav-ink: var(--color-base-content);
     }
 
-    [data-scope="breadcrumbs"][data-part="root"] {
+    [data-scope="nav-list"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-lg);
         font-size: var(--text-sm);
         color: var(--color-base-content);
     }
 
-    [data-scope="breadcrumbs"][data-part="list"] {
+    [data-scope="nav-list"][data-part="group"] {
         display: flex;
-        flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
         gap: var(--space-xs);
+    }
+
+    [data-scope="nav-list"][data-part="heading"] {
+        padding: 0 var(--space-lg);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-bold);
+        opacity: 0.6;
+    }
+
+    [data-scope="nav-list"][data-part="list"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2xs);
         list-style: none;
         margin: 0;
-        padding: var(--space-xs) 0;
+        padding: 0;
     }
 
-    [data-scope="breadcrumbs"][data-part="item"] {
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
+    [data-scope="nav-list"][data-part="item"] {
+        display: block;
     }
 
-    [data-scope="breadcrumbs"][data-part="link"] {
-        color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
+    [data-scope="nav-list"][data-part="link"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
         text-decoration: none;
-        border-radius: var(--radius-selector);
-        transition: color var(--duration-fast) var(--ease-standard);
+        color: var(--nav-ink);
+        padding: var(--space-sm) var(--space-lg);
+        border-radius: var(--radius-field);
+        font-weight: var(--weight-medium);
+        line-height: var(--leading-tight);
+        transition: background var(--duration-fast) var(--ease-standard);
     }
 
-    [data-scope="breadcrumbs"][data-part="link"]:hover:not([data-disabled]) {
-        color: var(--color-base-content);
-        text-decoration: underline;
+    [data-scope="nav-list"][data-part="link"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
     }
 
-    [data-scope="breadcrumbs"][data-part="link"][data-state="active"] {
-        color: var(--bc-accent);
-        font-weight: var(--weight-semibold);
-        text-decoration: none;
+    [data-scope="nav-list"][data-part="link"][data-state="active"] {
+        background: var(--nav-tint);
+        color: var(--nav-accent);
     }
 
-    [data-scope="breadcrumbs"][data-part="link"]:focus-visible {
-        outline: 2px solid var(--color-primary);
+    [data-scope="nav-list"][data-part="link"]:focus-visible {
+        outline: 2px solid var(--color-base-content);
         outline-offset: 2px;
     }
 
-    [data-scope="breadcrumbs"][data-part="separator"] {
-        color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
-        user-select: none;
+    [data-scope="nav-list"][data-part="icon"] {
+        display: inline-flex;
+        inline-size: 1.25em;
+        justify-content: center;
+        flex: none;
+        line-height: var(--leading-none);
     }
 
-    [data-scope="breadcrumbs"][data-part="root"][data-color="primary"] {
-        --bc-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    [data-scope="nav-list"][data-part="meta"] {
+        margin-inline-start: auto;
+        display: inline-flex;
+        align-items: center;
+        font-size: var(--text-xs);
+        font-variant-numeric: tabular-nums;
+        opacity: 0.7;
     }
 
-    [data-scope="breadcrumbs"][data-part="root"][data-color="secondary"] {
+    [data-scope="nav-list"][data-part="root"][data-color="primary"] {
+        --nav-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --nav-tint: var(--color-primary-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="secondary"] {
+        --nav-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        --nav-tint: var(--color-secondary-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="accent"] {
+        --nav-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        --nav-tint: var(--color-accent-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="neutral"] {
+        --nav-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        --nav-tint: var(--color-neutral-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="info"] {
+        --nav-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        --nav-tint: var(--color-info-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="success"] {
+        --nav-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        --nav-tint: var(--color-success-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="warning"] {
+        --nav-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        --nav-tint: var(--color-warning-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="error"] {
+        --nav-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        --nav-tint: var(--color-error-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="xs"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="sm"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="lg"] {
+        font-size: var(--text-md);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="xl"] {
+        font-size: var(--text-lg);
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="xs"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-2xs) var(--space-md);
+        }
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="sm"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-xs) var(--space-md);
+        }
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="lg"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-md) var(--space-lg);
+        }
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="xl"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-lg) var(--space-xl);
+        }
+    }
+}
+
+@layer zero.recipes {
+    [data-scope="breadcrumbs"][data-part="root"] {
+        --bc-accent: var(--color-base-content);
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"] {
+        font-size: var(--text-sm);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="breadcrumbs"][data-part="list"] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-xs);
+        list-style: none;
+        margin: 0;
+        padding: var(--space-xs) 0;
+    }
+
+    [data-scope="breadcrumbs"][data-part="item"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"] {
+        color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
+        text-decoration: none;
+        border-radius: var(--radius-selector);
+        transition: color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"]:hover:not([data-disabled]) {
+        color: var(--color-base-content);
+        text-decoration: underline;
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"][data-state="active"] {
+        color: var(--bc-accent);
+        font-weight: var(--weight-semibold);
+        text-decoration: none;
+    }
+
+    [data-scope="breadcrumbs"][data-part="link"]:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    [data-scope="breadcrumbs"][data-part="separator"] {
+        color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
+        user-select: none;
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="primary"] {
+        --bc-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="breadcrumbs"][data-part="root"][data-color="secondary"] {
         --bc-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
     }
 
@@ -7395,6 +8043,7 @@
         --steps-accent: var(--color-primary);
         --steps-accent-content: var(--color-primary-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--steps-accent) 70%, var(--color-base-content));
         --steps-ind: calc(var(--size-selector) * 7);
         --steps-font: var(--text-sm);
     }
@@ -7485,8 +8134,8 @@
     }
 
     [data-scope="steps"][data-part="indicator"][data-state="complete"] {
-        background: color-mix(in oklch, var(--steps-accent) 20%, var(--color-base-100));
-        color: var(--steps-accent-ink);
+        background: color-mix(in oklab, var(--steps-accent) 20%, var(--color-base-100));
+        color: var(--steps-complete-ink);
     }
 
     [data-scope="steps"][data-part="indicator"][data-state="inactive"] {
@@ -7532,70 +8181,150 @@
         font-weight: var(--weight-normal);
     }
 
-    [data-scope="steps"][data-part="root"][data-color="primary"] {
+    [data-scope="steps"][data-part="root"][data-size="xs"] {
+        --steps-ind: calc(var(--size-selector) * 5);
+        --steps-font: var(--text-xs);
+    }
+
+    [data-scope="steps"][data-part="root"][data-size="sm"] {
+        --steps-ind: calc(var(--size-selector) * 6);
+    }
+
+    [data-scope="steps"][data-part="root"][data-size="lg"] {
+        --steps-ind: calc(var(--size-selector) * 8);
+    }
+
+    [data-scope="steps"][data-part="root"][data-size="xl"] {
+        --steps-ind: calc(var(--size-selector) * 9);
+        --steps-font: var(--text-md);
+    }
+
+    [data-scope="steps"][data-part="item"][data-color="primary"] {
         --steps-accent: var(--color-primary);
         --steps-accent-content: var(--color-primary-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-primary) 70%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="secondary"] {
+    [data-scope="steps"][data-part="item"][data-color="secondary"] {
         --steps-accent: var(--color-secondary);
         --steps-accent-content: var(--color-secondary-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="accent"] {
+    [data-scope="steps"][data-part="item"][data-color="accent"] {
         --steps-accent: var(--color-accent);
         --steps-accent-content: var(--color-accent-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="neutral"] {
+    [data-scope="steps"][data-part="item"][data-color="neutral"] {
         --steps-accent: var(--color-neutral);
         --steps-accent-content: var(--color-neutral-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="info"] {
+    [data-scope="steps"][data-part="item"][data-color="info"] {
         --steps-accent: var(--color-info);
         --steps-accent-content: var(--color-info-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="success"] {
+    [data-scope="steps"][data-part="item"][data-color="success"] {
         --steps-accent: var(--color-success);
         --steps-accent-content: var(--color-success-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="warning"] {
+    [data-scope="steps"][data-part="item"][data-color="warning"] {
         --steps-accent: var(--color-warning);
         --steps-accent-content: var(--color-warning-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="error"] {
+    [data-scope="steps"][data-part="item"][data-color="error"] {
         --steps-accent: var(--color-error);
         --steps-accent-content: var(--color-error-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-error) 70%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-size="xs"] {
-        --steps-ind: calc(var(--size-selector) * 5);
-        --steps-font: var(--text-xs);
+    @scope ([data-scope="steps"][data-part="root"][data-color="primary"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-primary);
+            --steps-accent-content: var(--color-primary-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-primary) 70%, var(--color-base-content));
+        }
     }
 
-    [data-scope="steps"][data-part="root"][data-size="sm"] {
-        --steps-ind: calc(var(--size-selector) * 6);
+    @scope ([data-scope="steps"][data-part="root"][data-color="secondary"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-secondary);
+            --steps-accent-content: var(--color-secondary-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        }
     }
 
-    [data-scope="steps"][data-part="root"][data-size="lg"] {
-        --steps-ind: calc(var(--size-selector) * 8);
+    @scope ([data-scope="steps"][data-part="root"][data-color="accent"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-accent);
+            --steps-accent-content: var(--color-accent-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        }
     }
 
-    [data-scope="steps"][data-part="root"][data-size="xl"] {
-        --steps-ind: calc(var(--size-selector) * 9);
-        --steps-font: var(--text-md);
+    @scope ([data-scope="steps"][data-part="root"][data-color="neutral"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-neutral);
+            --steps-accent-content: var(--color-neutral-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="info"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-info);
+            --steps-accent-content: var(--color-info-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="success"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-success);
+            --steps-accent-content: var(--color-success-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="warning"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-warning);
+            --steps-accent-content: var(--color-warning-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="error"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-error);
+            --steps-accent-content: var(--color-error-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-error) 70%, var(--color-base-content));
+        }
     }
 }
 
@@ -7637,13 +8366,17 @@
         opacity: 0;
         transform: none;
         transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+        --drawer-travel: -100%;
         padding: var(--space-lg);
         background: var(--color-base-100);
         color: var(--color-base-content);
         border: none;
         border-radius: var(--radius-box);
         box-shadow: var(--shadow-xl);
-        inline-size: min(20rem, 85vw);
+        box-sizing: border-box;
+        --l-measure: min(20rem, 85vw);
+        inline-size: 100%;
+        max-inline-size: var(--l-measure);
     }
 
     [data-scope="drawer"][data-part="panel"][data-state="open"] {
@@ -7651,24 +8384,42 @@
         transform: none;
     }
 
-    [data-scope="drawer"][data-part="panel"]:modal {
+    [data-scope="drawer"][data-part="panel"][data-placement="end"] {
+        --drawer-travel: 100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        --drawer-travel: 100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        --drawer-travel: -100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
+        opacity: 1;
+        translate: var(--drawer-travel) 0;
+        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
         position: fixed;
         inset-block-start: 0;
         inset-block-end: 0;
         block-size: 100dvh;
         max-block-size: 100dvh;
-        inline-size: min(20rem, 85vw);
-        max-inline-size: none;
         margin: 0;
         border-radius: 0;
     }
 
-    [data-scope="drawer"][data-part="panel"][data-placement="start"]:modal {
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
+        translate: none;
+        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="start"][data-l-dock="sheet"] {
         inset-inline-start: 0;
         inset-inline-end: auto;
     }
 
-    [data-scope="drawer"][data-part="panel"][data-placement="end"]:modal {
+    [data-scope="drawer"][data-part="panel"][data-placement="end"][data-l-dock="sheet"] {
         inset-inline-start: auto;
         inset-inline-end: 0;
     }
@@ -7875,6 +8626,14 @@
         [data-scope="drawer"][data-part="panel"][data-state="open"] {
             transform: none;
         }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
+            transition: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
+            transition: none;
+        }
     }
 
     @starting-style {
@@ -7882,11 +8641,77 @@
             opacity: 0;
             transform: none;
         }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
+            opacity: 1;
+            translate: var(--drawer-travel) 0;
+        }
     }
 }
 
+/* Responsive Drawer structure (`modal={{ below }}`) — generated by @sigx/zero-kit
+   per declared breakpoint; see compileDockCss. */
+@layer zero.structure {
+    @media (min-width: 40rem) {
+        [data-scope="drawer"][data-part="trigger"][data-l-dock-above="sm"],
+        [data-scope="drawer"][data-part="close"][data-l-dock-above="sm"] {
+            display: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="sm"] {
+            position: relative;
+            inset: auto;
+            margin: 0;
+        }
+    }
+
+    @media (width < 40rem) {
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="sm"]:not(:modal) {
+            display: none;
+        }
+    }
+
+    @media (min-width: 48rem) {
+        [data-scope="drawer"][data-part="trigger"][data-l-dock-above="md"],
+        [data-scope="drawer"][data-part="close"][data-l-dock-above="md"] {
+            display: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="md"] {
+            position: relative;
+            inset: auto;
+            margin: 0;
+        }
+    }
+
+    @media (width < 48rem) {
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="md"]:not(:modal) {
+            display: none;
+        }
+    }
+
+    @media (min-width: 64rem) {
+        [data-scope="drawer"][data-part="trigger"][data-l-dock-above="lg"],
+        [data-scope="drawer"][data-part="close"][data-l-dock-above="lg"] {
+            display: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="lg"] {
+            position: relative;
+            inset: auto;
+            margin: 0;
+        }
+    }
+
+    @media (width < 64rem) {
+        [data-scope="drawer"][data-part="panel"][data-l-dock-above="lg"]:not(:modal) {
+            display: none;
+        }
+    }
+}
 @layer zero.recipes {
     [data-scope="table"][data-part="root"] {
+        --table-cell-align: start;
         --table-accent: var(--color-base-content);
         --table-pad-block: var(--space-sm);
         --table-pad-inline: var(--space-md);
@@ -7930,7 +8755,7 @@
 
     [data-scope="table"][data-part="header-cell"] {
         padding: var(--table-pad-block) var(--table-pad-inline);
-        text-align: start;
+        text-align: var(--table-cell-align);
         font-weight: var(--weight-semibold);
         font-size: var(--text-xs);
         color: color-mix(in oklab, var(--table-accent) 60%, transparent);
@@ -7938,7 +8763,13 @@
 
     [data-scope="table"][data-part="cell"] {
         padding: var(--table-pad-block) var(--table-pad-inline);
-        text-align: start;
+        text-align: var(--table-cell-align);
+    }
+
+    [data-scope="table"][data-part="cell-label"] {
+        font-weight: var(--weight-semibold);
+        font-size: var(--text-xs);
+        color: color-mix(in oklab, var(--table-accent) 60%, transparent);
     }
 
     [data-scope="table"][data-part="root"][data-color="primary"] {
@@ -8008,63 +8839,329 @@
             background: var(--color-base-200);
         }
     }
-}
 
-@layer zero.recipes {
-    [data-scope="file-upload"][data-part="root"] {
-        --fu-accent: var(--color-primary);
-        --fu-pad: var(--space-lg);
-        --fu-font: var(--text-sm);
-    }
+    @media (width < 64rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] {
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
 
-    [data-scope="file-upload"][data-part="root"] {
-        display: grid;
-        gap: var(--space-sm);
-        justify-items: start;
-    }
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="caption"] {
+            padding-inline: 0;
+        }
 
-    [data-scope="file-upload"][data-part="label"] {
-        font-size: var(--text-sm);
-        font-weight: var(--weight-semibold);
-    }
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="body"] {
+            row-gap: var(--space-md);
+        }
 
-    [data-scope="file-upload"][data-part="label"][data-disabled] {
-        opacity: var(--disabled-opacity);
-    }
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="foot"] {
+            row-gap: var(--space-md);
+            margin-block-start: var(--space-md);
+        }
 
-    [data-scope="file-upload"][data-part="trigger"] {
-        appearance: none;
-        display: inline-flex;
-        align-items: center;
-        gap: var(--space-xs);
-        padding: var(--space-xs) var(--space-lg);
-        font-size: var(--fu-font);
-        font-weight: var(--weight-semibold);
-        line-height: var(--leading-none);
-        color: var(--color-base-content);
-        background: var(--color-base-200);
-        border: var(--border) solid var(--color-base-300);
-        border-radius: var(--radius-field);
-        cursor: pointer;
-    }
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"]) > [data-scope="table"][data-part="row"] {
+            border: var(--border) solid var(--color-base-200);
+            border-radius: var(--radius-box);
+            background: var(--color-base-100);
+            padding: var(--table-pad-block) var(--table-pad-inline);
+        }
 
-    [data-scope="file-upload"][data-part="trigger"]:hover:not([data-disabled]) {
-        background: var(--color-base-300);
-    }
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="header-cell"] {
+            padding-inline: 0;
+        }
 
-    [data-scope="file-upload"][data-part="trigger"][data-disabled] {
-        opacity: var(--disabled-opacity);
-        cursor: not-allowed;
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="cell"] {
+            padding-inline: 0;
+            padding-block: var(--space-xs);
+        }
     }
 
-    [data-scope="file-upload"][data-part="trigger"][data-invalid] {
-        border-color: var(--color-error);
-    }
+    @media (width < 48rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="md"] {
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
 
-    [data-scope="file-upload"][data-part="trigger"][data-focus-visible] {
-        outline: 2px solid var(--color-base-content);
-        outline-offset: 2px;
-    }
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="caption"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="body"] {
+            row-gap: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="foot"] {
+            row-gap: var(--space-md);
+            margin-block-start: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"]) > [data-scope="table"][data-part="row"] {
+            border: var(--border) solid var(--color-base-200);
+            border-radius: var(--radius-box);
+            background: var(--color-base-100);
+            padding: var(--table-pad-block) var(--table-pad-inline);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="header-cell"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="cell"] {
+            padding-inline: 0;
+            padding-block: var(--space-xs);
+        }
+    }
+
+    @media (width < 40rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] {
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="caption"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="body"] {
+            row-gap: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="foot"] {
+            row-gap: var(--space-md);
+            margin-block-start: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"]) > [data-scope="table"][data-part="row"] {
+            border: var(--border) solid var(--color-base-200);
+            border-radius: var(--radius-box);
+            background: var(--color-base-100);
+            padding: var(--table-pad-block) var(--table-pad-inline);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="header-cell"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="cell"] {
+            padding-inline: 0;
+            padding-block: var(--space-xs);
+        }
+    }
+}
+
+@layer zero.structure {
+    [data-scope="table"][data-part="cell-label"] {
+        display: none;
+    }
+    @media (width < 40rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"],
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="caption"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] {
+            display: none;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] > [data-scope="table"][data-part="column"] {
+            width: auto;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="head"] {
+            position: absolute;
+            inline-size: 1px;
+            block-size: 1px;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="body"],
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="foot"] {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="header-cell"],
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] {
+            display: flow-root;
+            text-align: start;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"]:has(> [data-scope="table"][data-part="cell-label"]) {
+            padding-inline-start: calc(var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem)));
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] > [data-scope="table"][data-part="cell-label"] {
+            display: block;
+            float: inline-start;
+            box-sizing: border-box;
+            inline-size: var(--table-stack-label-size, 8rem);
+            margin-inline-start: calc(-1 * (var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem))));
+            margin-inline-end: var(--table-stack-label-gap, var(--space-md, 0.5rem));
+        }
+    }
+    @media (width < 48rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"],
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="caption"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] {
+            display: none;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] > [data-scope="table"][data-part="column"] {
+            width: auto;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="head"] {
+            position: absolute;
+            inline-size: 1px;
+            block-size: 1px;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="body"],
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="foot"] {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="header-cell"],
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] {
+            display: flow-root;
+            text-align: start;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"]:has(> [data-scope="table"][data-part="cell-label"]) {
+            padding-inline-start: calc(var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem)));
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] > [data-scope="table"][data-part="cell-label"] {
+            display: block;
+            float: inline-start;
+            box-sizing: border-box;
+            inline-size: var(--table-stack-label-size, 8rem);
+            margin-inline-start: calc(-1 * (var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem))));
+            margin-inline-end: var(--table-stack-label-gap, var(--space-md, 0.5rem));
+        }
+    }
+    @media (width < 64rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"],
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="caption"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] {
+            display: none;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] > [data-scope="table"][data-part="column"] {
+            width: auto;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="head"] {
+            position: absolute;
+            inline-size: 1px;
+            block-size: 1px;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="body"],
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="foot"] {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="header-cell"],
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] {
+            display: flow-root;
+            text-align: start;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"]:has(> [data-scope="table"][data-part="cell-label"]) {
+            padding-inline-start: calc(var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem)));
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] > [data-scope="table"][data-part="cell-label"] {
+            display: block;
+            float: inline-start;
+            box-sizing: border-box;
+            inline-size: var(--table-stack-label-size, 8rem);
+            margin-inline-start: calc(-1 * (var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem))));
+            margin-inline-end: var(--table-stack-label-gap, var(--space-md, 0.5rem));
+        }
+    }
+}
+@layer zero.recipes {
+    [data-scope="file-upload"][data-part="root"] {
+        --fu-accent: var(--color-primary);
+        --fu-pad: var(--space-lg);
+        --fu-font: var(--text-sm);
+    }
+
+    [data-scope="file-upload"][data-part="root"] {
+        display: grid;
+        gap: var(--space-sm);
+        justify-items: start;
+    }
+
+    [data-scope="file-upload"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="file-upload"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="file-upload"][data-part="trigger"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        padding: var(--space-xs) var(--space-lg);
+        font-size: var(--fu-font);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        cursor: pointer;
+    }
+
+    [data-scope="file-upload"][data-part="trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="file-upload"][data-part="trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="file-upload"][data-part="trigger"][data-invalid] {
+        border-color: var(--color-error);
+    }
+
+    [data-scope="file-upload"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
 
     [data-scope="file-upload"][data-part="trigger"][data-pressed]:not([data-disabled]) {
         translate: 0 1px;
@@ -8597,6 +9694,11 @@
         --countdown-font: var(--text-3xl);
     }
 
+    [data-scope="countdown"][data-part="root"][data-mod-inline] {
+        font-size: inherit;
+        font-weight: inherit;
+    }
+
     @media (prefers-reduced-motion: reduce) {
         [data-scope="countdown"][data-part="digits"] {
             animation: none;
@@ -8727,3 +9829,842 @@
         --diff-hit: 2.75rem;
     }
 }
+
+@layer zero.recipes {
+/* The layout step table — generated by @sigx/zero-kit (layoutCss).
+   Scope-agnostic on purpose: `data-l-*` is a namespace zero owns and only
+   layout parts carry, the same reasoning that makes the lynx class grammar's
+   state and flag classes scope-agnostic. The `[data-scope][data-part]` prefix
+   is for SPECIFICITY, not for matching — it lifts these to (0,3,0) so they
+   beat the (0,2,0) component-token block that declares each default. */
+[data-scope][data-part][data-l-gap="none"] {
+    --l-gap: 0;
+}
+[data-scope][data-part][data-l-gap="2xs"] {
+    --l-gap: var(--space-2xs);
+}
+[data-scope][data-part][data-l-gap="xs"] {
+    --l-gap: var(--space-xs);
+}
+[data-scope][data-part][data-l-gap="sm"] {
+    --l-gap: var(--space-sm);
+}
+[data-scope][data-part][data-l-gap="md"] {
+    --l-gap: var(--space-md);
+}
+[data-scope][data-part][data-l-gap="lg"] {
+    --l-gap: var(--space-lg);
+}
+[data-scope][data-part][data-l-gap="xl"] {
+    --l-gap: var(--space-xl);
+}
+[data-scope][data-part][data-l-gap="2xl"] {
+    --l-gap: var(--space-2xl);
+}
+[data-scope][data-part][data-l-gap-x="none"] {
+    --l-gap-x: 0;
+}
+[data-scope][data-part][data-l-gap-x="2xs"] {
+    --l-gap-x: var(--space-2xs);
+}
+[data-scope][data-part][data-l-gap-x="xs"] {
+    --l-gap-x: var(--space-xs);
+}
+[data-scope][data-part][data-l-gap-x="sm"] {
+    --l-gap-x: var(--space-sm);
+}
+[data-scope][data-part][data-l-gap-x="md"] {
+    --l-gap-x: var(--space-md);
+}
+[data-scope][data-part][data-l-gap-x="lg"] {
+    --l-gap-x: var(--space-lg);
+}
+[data-scope][data-part][data-l-gap-x="xl"] {
+    --l-gap-x: var(--space-xl);
+}
+[data-scope][data-part][data-l-gap-x="2xl"] {
+    --l-gap-x: var(--space-2xl);
+}
+[data-scope][data-part][data-l-gap-y="none"] {
+    --l-gap-y: 0;
+}
+[data-scope][data-part][data-l-gap-y="2xs"] {
+    --l-gap-y: var(--space-2xs);
+}
+[data-scope][data-part][data-l-gap-y="xs"] {
+    --l-gap-y: var(--space-xs);
+}
+[data-scope][data-part][data-l-gap-y="sm"] {
+    --l-gap-y: var(--space-sm);
+}
+[data-scope][data-part][data-l-gap-y="md"] {
+    --l-gap-y: var(--space-md);
+}
+[data-scope][data-part][data-l-gap-y="lg"] {
+    --l-gap-y: var(--space-lg);
+}
+[data-scope][data-part][data-l-gap-y="xl"] {
+    --l-gap-y: var(--space-xl);
+}
+[data-scope][data-part][data-l-gap-y="2xl"] {
+    --l-gap-y: var(--space-2xl);
+}
+[data-scope][data-part][data-l-pad="none"] {
+    --l-pad: 0;
+}
+[data-scope][data-part][data-l-pad="2xs"] {
+    --l-pad: var(--space-2xs);
+}
+[data-scope][data-part][data-l-pad="xs"] {
+    --l-pad: var(--space-xs);
+}
+[data-scope][data-part][data-l-pad="sm"] {
+    --l-pad: var(--space-sm);
+}
+[data-scope][data-part][data-l-pad="md"] {
+    --l-pad: var(--space-md);
+}
+[data-scope][data-part][data-l-pad="lg"] {
+    --l-pad: var(--space-lg);
+}
+[data-scope][data-part][data-l-pad="xl"] {
+    --l-pad: var(--space-xl);
+}
+[data-scope][data-part][data-l-pad="2xl"] {
+    --l-pad: var(--space-2xl);
+}
+[data-scope][data-part][data-l-pad-x="none"] {
+    --l-pad-x: 0;
+}
+[data-scope][data-part][data-l-pad-x="2xs"] {
+    --l-pad-x: var(--space-2xs);
+}
+[data-scope][data-part][data-l-pad-x="xs"] {
+    --l-pad-x: var(--space-xs);
+}
+[data-scope][data-part][data-l-pad-x="sm"] {
+    --l-pad-x: var(--space-sm);
+}
+[data-scope][data-part][data-l-pad-x="md"] {
+    --l-pad-x: var(--space-md);
+}
+[data-scope][data-part][data-l-pad-x="lg"] {
+    --l-pad-x: var(--space-lg);
+}
+[data-scope][data-part][data-l-pad-x="xl"] {
+    --l-pad-x: var(--space-xl);
+}
+[data-scope][data-part][data-l-pad-x="2xl"] {
+    --l-pad-x: var(--space-2xl);
+}
+[data-scope][data-part][data-l-pad-y="none"] {
+    --l-pad-y: 0;
+}
+[data-scope][data-part][data-l-pad-y="2xs"] {
+    --l-pad-y: var(--space-2xs);
+}
+[data-scope][data-part][data-l-pad-y="xs"] {
+    --l-pad-y: var(--space-xs);
+}
+[data-scope][data-part][data-l-pad-y="sm"] {
+    --l-pad-y: var(--space-sm);
+}
+[data-scope][data-part][data-l-pad-y="md"] {
+    --l-pad-y: var(--space-md);
+}
+[data-scope][data-part][data-l-pad-y="lg"] {
+    --l-pad-y: var(--space-lg);
+}
+[data-scope][data-part][data-l-pad-y="xl"] {
+    --l-pad-y: var(--space-xl);
+}
+[data-scope][data-part][data-l-pad-y="2xl"] {
+    --l-pad-y: var(--space-2xl);
+}
+[data-scope][data-part][data-l-align="start"] {
+    --l-align: flex-start;
+}
+[data-scope][data-part][data-l-align="center"] {
+    --l-align: center;
+}
+[data-scope][data-part][data-l-align="end"] {
+    --l-align: flex-end;
+}
+[data-scope][data-part][data-l-align="stretch"] {
+    --l-align: stretch;
+}
+[data-scope][data-part][data-l-align="baseline"] {
+    --l-align: baseline;
+}
+[data-scope][data-part][data-l-justify="start"] {
+    --l-justify: flex-start;
+}
+[data-scope][data-part][data-l-justify="center"] {
+    --l-justify: center;
+}
+[data-scope][data-part][data-l-justify="end"] {
+    --l-justify: flex-end;
+}
+[data-scope][data-part][data-l-justify="between"] {
+    --l-justify: space-between;
+}
+[data-scope][data-part][data-l-justify="around"] {
+    --l-justify: space-around;
+}
+[data-scope][data-part][data-l-justify="evenly"] {
+    --l-justify: space-evenly;
+}
+[data-scope][data-part][data-l-wrap="wrap"] {
+    --l-wrap: wrap;
+}
+[data-scope][data-part][data-l-wrap="nowrap"] {
+    --l-wrap: nowrap;
+}
+[data-scope][data-part][data-l-wrap="wrap-reverse"] {
+    --l-wrap: wrap-reverse;
+}
+[data-scope][data-part][data-l-grow="0"] {
+    --l-grow: 0;
+}
+[data-scope][data-part][data-l-grow="1"] {
+    --l-grow: 1;
+}
+[data-scope][data-part][data-l-space="none"] {
+    --l-space: 0;
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-space="2xs"] {
+    --l-space: var(--space-2xs);
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-space="xs"] {
+    --l-space: var(--space-xs);
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-space="sm"] {
+    --l-space: var(--space-sm);
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-space="md"] {
+    --l-space: var(--space-md);
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-space="lg"] {
+    --l-space: var(--space-lg);
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-space="xl"] {
+    --l-space: var(--space-xl);
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-space="2xl"] {
+    --l-space: var(--space-2xl);
+    --l-space-grow: 0;
+}
+[data-scope][data-part][data-l-cols="1"] {
+    --l-cols: repeat(1, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="2"] {
+    --l-cols: repeat(2, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="3"] {
+    --l-cols: repeat(3, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="4"] {
+    --l-cols: repeat(4, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="5"] {
+    --l-cols: repeat(5, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="6"] {
+    --l-cols: repeat(6, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="7"] {
+    --l-cols: repeat(7, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="8"] {
+    --l-cols: repeat(8, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="9"] {
+    --l-cols: repeat(9, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="10"] {
+    --l-cols: repeat(10, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="11"] {
+    --l-cols: repeat(11, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="12"] {
+    --l-cols: repeat(12, minmax(0, 1fr));
+}
+[data-scope][data-part][data-l-cols="auto"] {
+    --l-cols: repeat(auto-fit, minmax(min(100%, var(--l-track)), 1fr));
+}
+[data-scope][data-part][data-l-span="1"] {
+    --l-span: span 1;
+}
+[data-scope][data-part][data-l-span="2"] {
+    --l-span: span 2;
+}
+[data-scope][data-part][data-l-span="3"] {
+    --l-span: span 3;
+}
+[data-scope][data-part][data-l-span="4"] {
+    --l-span: span 4;
+}
+[data-scope][data-part][data-l-span="5"] {
+    --l-span: span 5;
+}
+[data-scope][data-part][data-l-span="6"] {
+    --l-span: span 6;
+}
+[data-scope][data-part][data-l-span="7"] {
+    --l-span: span 7;
+}
+[data-scope][data-part][data-l-span="8"] {
+    --l-span: span 8;
+}
+[data-scope][data-part][data-l-span="9"] {
+    --l-span: span 9;
+}
+[data-scope][data-part][data-l-span="10"] {
+    --l-span: span 10;
+}
+[data-scope][data-part][data-l-span="11"] {
+    --l-span: span 11;
+}
+[data-scope][data-part][data-l-span="12"] {
+    --l-span: span 12;
+}
+[data-scope][data-part][data-l-span="full"] {
+    --l-span: 1 / -1;
+}
+[data-scope][data-part][data-l-track="xs"] {
+    --l-track: 8rem;
+}
+[data-scope][data-part][data-l-track="sm"] {
+    --l-track: 12rem;
+}
+[data-scope][data-part][data-l-track="md"] {
+    --l-track: 16rem;
+}
+[data-scope][data-part][data-l-track="lg"] {
+    --l-track: 20rem;
+}
+[data-scope][data-part][data-l-track="xl"] {
+    --l-track: 24rem;
+}
+[data-scope][data-part][data-l-axis="both"] {
+    --l-axis: center;
+}
+[data-scope][data-part][data-l-axis="inline"] {
+    --l-axis: stretch center;
+}
+[data-scope][data-part][data-l-axis="block"] {
+    --l-axis: center stretch;
+}
+[data-scope][data-part][data-l-measure="xs"] {
+    --l-measure: var(--measure-xs);
+}
+[data-scope][data-part][data-l-measure="sm"] {
+    --l-measure: var(--measure-sm);
+}
+[data-scope][data-part][data-l-measure="md"] {
+    --l-measure: var(--measure-md);
+}
+[data-scope][data-part][data-l-measure="lg"] {
+    --l-measure: var(--measure-lg);
+}
+[data-scope][data-part][data-l-measure="xl"] {
+    --l-measure: var(--measure-xl);
+}
+[data-scope][data-part][data-l-measure="prose"] {
+    --l-measure: var(--measure-prose);
+}
+[data-scope][data-part][data-l-measure="full"] {
+    --l-measure: none;
+}
+@media (min-width: 40rem) {
+    [data-scope][data-part][data-l-sm-gap="none"] {
+        --l-gap: 0;
+    }
+    [data-scope][data-part][data-l-sm-gap="2xs"] {
+        --l-gap: var(--space-2xs);
+    }
+    [data-scope][data-part][data-l-sm-gap="xs"] {
+        --l-gap: var(--space-xs);
+    }
+    [data-scope][data-part][data-l-sm-gap="sm"] {
+        --l-gap: var(--space-sm);
+    }
+    [data-scope][data-part][data-l-sm-gap="md"] {
+        --l-gap: var(--space-md);
+    }
+    [data-scope][data-part][data-l-sm-gap="lg"] {
+        --l-gap: var(--space-lg);
+    }
+    [data-scope][data-part][data-l-sm-gap="xl"] {
+        --l-gap: var(--space-xl);
+    }
+    [data-scope][data-part][data-l-sm-gap="2xl"] {
+        --l-gap: var(--space-2xl);
+    }
+    [data-scope][data-part][data-l-sm-pad="none"] {
+        --l-pad: 0;
+    }
+    [data-scope][data-part][data-l-sm-pad="2xs"] {
+        --l-pad: var(--space-2xs);
+    }
+    [data-scope][data-part][data-l-sm-pad="xs"] {
+        --l-pad: var(--space-xs);
+    }
+    [data-scope][data-part][data-l-sm-pad="sm"] {
+        --l-pad: var(--space-sm);
+    }
+    [data-scope][data-part][data-l-sm-pad="md"] {
+        --l-pad: var(--space-md);
+    }
+    [data-scope][data-part][data-l-sm-pad="lg"] {
+        --l-pad: var(--space-lg);
+    }
+    [data-scope][data-part][data-l-sm-pad="xl"] {
+        --l-pad: var(--space-xl);
+    }
+    [data-scope][data-part][data-l-sm-pad="2xl"] {
+        --l-pad: var(--space-2xl);
+    }
+    [data-scope][data-part][data-l-sm-align="start"] {
+        --l-align: flex-start;
+    }
+    [data-scope][data-part][data-l-sm-align="center"] {
+        --l-align: center;
+    }
+    [data-scope][data-part][data-l-sm-align="end"] {
+        --l-align: flex-end;
+    }
+    [data-scope][data-part][data-l-sm-align="stretch"] {
+        --l-align: stretch;
+    }
+    [data-scope][data-part][data-l-sm-align="baseline"] {
+        --l-align: baseline;
+    }
+    [data-scope][data-part][data-l-sm-justify="start"] {
+        --l-justify: flex-start;
+    }
+    [data-scope][data-part][data-l-sm-justify="center"] {
+        --l-justify: center;
+    }
+    [data-scope][data-part][data-l-sm-justify="end"] {
+        --l-justify: flex-end;
+    }
+    [data-scope][data-part][data-l-sm-justify="between"] {
+        --l-justify: space-between;
+    }
+    [data-scope][data-part][data-l-sm-justify="around"] {
+        --l-justify: space-around;
+    }
+    [data-scope][data-part][data-l-sm-justify="evenly"] {
+        --l-justify: space-evenly;
+    }
+    [data-scope][data-part][data-l-sm-cols="1"] {
+        --l-cols: repeat(1, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="2"] {
+        --l-cols: repeat(2, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="3"] {
+        --l-cols: repeat(3, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="4"] {
+        --l-cols: repeat(4, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="5"] {
+        --l-cols: repeat(5, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="6"] {
+        --l-cols: repeat(6, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="7"] {
+        --l-cols: repeat(7, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="8"] {
+        --l-cols: repeat(8, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="9"] {
+        --l-cols: repeat(9, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="10"] {
+        --l-cols: repeat(10, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="11"] {
+        --l-cols: repeat(11, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="12"] {
+        --l-cols: repeat(12, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-sm-cols="auto"] {
+        --l-cols: repeat(auto-fit, minmax(min(100%, var(--l-track)), 1fr));
+    }
+    [data-scope][data-part][data-l-sm-span="1"] {
+        --l-span: span 1;
+    }
+    [data-scope][data-part][data-l-sm-span="2"] {
+        --l-span: span 2;
+    }
+    [data-scope][data-part][data-l-sm-span="3"] {
+        --l-span: span 3;
+    }
+    [data-scope][data-part][data-l-sm-span="4"] {
+        --l-span: span 4;
+    }
+    [data-scope][data-part][data-l-sm-span="5"] {
+        --l-span: span 5;
+    }
+    [data-scope][data-part][data-l-sm-span="6"] {
+        --l-span: span 6;
+    }
+    [data-scope][data-part][data-l-sm-span="7"] {
+        --l-span: span 7;
+    }
+    [data-scope][data-part][data-l-sm-span="8"] {
+        --l-span: span 8;
+    }
+    [data-scope][data-part][data-l-sm-span="9"] {
+        --l-span: span 9;
+    }
+    [data-scope][data-part][data-l-sm-span="10"] {
+        --l-span: span 10;
+    }
+    [data-scope][data-part][data-l-sm-span="11"] {
+        --l-span: span 11;
+    }
+    [data-scope][data-part][data-l-sm-span="12"] {
+        --l-span: span 12;
+    }
+    [data-scope][data-part][data-l-sm-span="full"] {
+        --l-span: 1 / -1;
+    }
+}
+@media (min-width: 48rem) {
+    [data-scope][data-part][data-l-md-gap="none"] {
+        --l-gap: 0;
+    }
+    [data-scope][data-part][data-l-md-gap="2xs"] {
+        --l-gap: var(--space-2xs);
+    }
+    [data-scope][data-part][data-l-md-gap="xs"] {
+        --l-gap: var(--space-xs);
+    }
+    [data-scope][data-part][data-l-md-gap="sm"] {
+        --l-gap: var(--space-sm);
+    }
+    [data-scope][data-part][data-l-md-gap="md"] {
+        --l-gap: var(--space-md);
+    }
+    [data-scope][data-part][data-l-md-gap="lg"] {
+        --l-gap: var(--space-lg);
+    }
+    [data-scope][data-part][data-l-md-gap="xl"] {
+        --l-gap: var(--space-xl);
+    }
+    [data-scope][data-part][data-l-md-gap="2xl"] {
+        --l-gap: var(--space-2xl);
+    }
+    [data-scope][data-part][data-l-md-pad="none"] {
+        --l-pad: 0;
+    }
+    [data-scope][data-part][data-l-md-pad="2xs"] {
+        --l-pad: var(--space-2xs);
+    }
+    [data-scope][data-part][data-l-md-pad="xs"] {
+        --l-pad: var(--space-xs);
+    }
+    [data-scope][data-part][data-l-md-pad="sm"] {
+        --l-pad: var(--space-sm);
+    }
+    [data-scope][data-part][data-l-md-pad="md"] {
+        --l-pad: var(--space-md);
+    }
+    [data-scope][data-part][data-l-md-pad="lg"] {
+        --l-pad: var(--space-lg);
+    }
+    [data-scope][data-part][data-l-md-pad="xl"] {
+        --l-pad: var(--space-xl);
+    }
+    [data-scope][data-part][data-l-md-pad="2xl"] {
+        --l-pad: var(--space-2xl);
+    }
+    [data-scope][data-part][data-l-md-align="start"] {
+        --l-align: flex-start;
+    }
+    [data-scope][data-part][data-l-md-align="center"] {
+        --l-align: center;
+    }
+    [data-scope][data-part][data-l-md-align="end"] {
+        --l-align: flex-end;
+    }
+    [data-scope][data-part][data-l-md-align="stretch"] {
+        --l-align: stretch;
+    }
+    [data-scope][data-part][data-l-md-align="baseline"] {
+        --l-align: baseline;
+    }
+    [data-scope][data-part][data-l-md-justify="start"] {
+        --l-justify: flex-start;
+    }
+    [data-scope][data-part][data-l-md-justify="center"] {
+        --l-justify: center;
+    }
+    [data-scope][data-part][data-l-md-justify="end"] {
+        --l-justify: flex-end;
+    }
+    [data-scope][data-part][data-l-md-justify="between"] {
+        --l-justify: space-between;
+    }
+    [data-scope][data-part][data-l-md-justify="around"] {
+        --l-justify: space-around;
+    }
+    [data-scope][data-part][data-l-md-justify="evenly"] {
+        --l-justify: space-evenly;
+    }
+    [data-scope][data-part][data-l-md-cols="1"] {
+        --l-cols: repeat(1, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="2"] {
+        --l-cols: repeat(2, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="3"] {
+        --l-cols: repeat(3, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="4"] {
+        --l-cols: repeat(4, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="5"] {
+        --l-cols: repeat(5, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="6"] {
+        --l-cols: repeat(6, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="7"] {
+        --l-cols: repeat(7, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="8"] {
+        --l-cols: repeat(8, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="9"] {
+        --l-cols: repeat(9, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="10"] {
+        --l-cols: repeat(10, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="11"] {
+        --l-cols: repeat(11, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="12"] {
+        --l-cols: repeat(12, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-md-cols="auto"] {
+        --l-cols: repeat(auto-fit, minmax(min(100%, var(--l-track)), 1fr));
+    }
+    [data-scope][data-part][data-l-md-span="1"] {
+        --l-span: span 1;
+    }
+    [data-scope][data-part][data-l-md-span="2"] {
+        --l-span: span 2;
+    }
+    [data-scope][data-part][data-l-md-span="3"] {
+        --l-span: span 3;
+    }
+    [data-scope][data-part][data-l-md-span="4"] {
+        --l-span: span 4;
+    }
+    [data-scope][data-part][data-l-md-span="5"] {
+        --l-span: span 5;
+    }
+    [data-scope][data-part][data-l-md-span="6"] {
+        --l-span: span 6;
+    }
+    [data-scope][data-part][data-l-md-span="7"] {
+        --l-span: span 7;
+    }
+    [data-scope][data-part][data-l-md-span="8"] {
+        --l-span: span 8;
+    }
+    [data-scope][data-part][data-l-md-span="9"] {
+        --l-span: span 9;
+    }
+    [data-scope][data-part][data-l-md-span="10"] {
+        --l-span: span 10;
+    }
+    [data-scope][data-part][data-l-md-span="11"] {
+        --l-span: span 11;
+    }
+    [data-scope][data-part][data-l-md-span="12"] {
+        --l-span: span 12;
+    }
+    [data-scope][data-part][data-l-md-span="full"] {
+        --l-span: 1 / -1;
+    }
+}
+@media (min-width: 64rem) {
+    [data-scope][data-part][data-l-lg-gap="none"] {
+        --l-gap: 0;
+    }
+    [data-scope][data-part][data-l-lg-gap="2xs"] {
+        --l-gap: var(--space-2xs);
+    }
+    [data-scope][data-part][data-l-lg-gap="xs"] {
+        --l-gap: var(--space-xs);
+    }
+    [data-scope][data-part][data-l-lg-gap="sm"] {
+        --l-gap: var(--space-sm);
+    }
+    [data-scope][data-part][data-l-lg-gap="md"] {
+        --l-gap: var(--space-md);
+    }
+    [data-scope][data-part][data-l-lg-gap="lg"] {
+        --l-gap: var(--space-lg);
+    }
+    [data-scope][data-part][data-l-lg-gap="xl"] {
+        --l-gap: var(--space-xl);
+    }
+    [data-scope][data-part][data-l-lg-gap="2xl"] {
+        --l-gap: var(--space-2xl);
+    }
+    [data-scope][data-part][data-l-lg-pad="none"] {
+        --l-pad: 0;
+    }
+    [data-scope][data-part][data-l-lg-pad="2xs"] {
+        --l-pad: var(--space-2xs);
+    }
+    [data-scope][data-part][data-l-lg-pad="xs"] {
+        --l-pad: var(--space-xs);
+    }
+    [data-scope][data-part][data-l-lg-pad="sm"] {
+        --l-pad: var(--space-sm);
+    }
+    [data-scope][data-part][data-l-lg-pad="md"] {
+        --l-pad: var(--space-md);
+    }
+    [data-scope][data-part][data-l-lg-pad="lg"] {
+        --l-pad: var(--space-lg);
+    }
+    [data-scope][data-part][data-l-lg-pad="xl"] {
+        --l-pad: var(--space-xl);
+    }
+    [data-scope][data-part][data-l-lg-pad="2xl"] {
+        --l-pad: var(--space-2xl);
+    }
+    [data-scope][data-part][data-l-lg-align="start"] {
+        --l-align: flex-start;
+    }
+    [data-scope][data-part][data-l-lg-align="center"] {
+        --l-align: center;
+    }
+    [data-scope][data-part][data-l-lg-align="end"] {
+        --l-align: flex-end;
+    }
+    [data-scope][data-part][data-l-lg-align="stretch"] {
+        --l-align: stretch;
+    }
+    [data-scope][data-part][data-l-lg-align="baseline"] {
+        --l-align: baseline;
+    }
+    [data-scope][data-part][data-l-lg-justify="start"] {
+        --l-justify: flex-start;
+    }
+    [data-scope][data-part][data-l-lg-justify="center"] {
+        --l-justify: center;
+    }
+    [data-scope][data-part][data-l-lg-justify="end"] {
+        --l-justify: flex-end;
+    }
+    [data-scope][data-part][data-l-lg-justify="between"] {
+        --l-justify: space-between;
+    }
+    [data-scope][data-part][data-l-lg-justify="around"] {
+        --l-justify: space-around;
+    }
+    [data-scope][data-part][data-l-lg-justify="evenly"] {
+        --l-justify: space-evenly;
+    }
+    [data-scope][data-part][data-l-lg-cols="1"] {
+        --l-cols: repeat(1, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="2"] {
+        --l-cols: repeat(2, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="3"] {
+        --l-cols: repeat(3, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="4"] {
+        --l-cols: repeat(4, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="5"] {
+        --l-cols: repeat(5, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="6"] {
+        --l-cols: repeat(6, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="7"] {
+        --l-cols: repeat(7, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="8"] {
+        --l-cols: repeat(8, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="9"] {
+        --l-cols: repeat(9, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="10"] {
+        --l-cols: repeat(10, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="11"] {
+        --l-cols: repeat(11, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="12"] {
+        --l-cols: repeat(12, minmax(0, 1fr));
+    }
+    [data-scope][data-part][data-l-lg-cols="auto"] {
+        --l-cols: repeat(auto-fit, minmax(min(100%, var(--l-track)), 1fr));
+    }
+    [data-scope][data-part][data-l-lg-span="1"] {
+        --l-span: span 1;
+    }
+    [data-scope][data-part][data-l-lg-span="2"] {
+        --l-span: span 2;
+    }
+    [data-scope][data-part][data-l-lg-span="3"] {
+        --l-span: span 3;
+    }
+    [data-scope][data-part][data-l-lg-span="4"] {
+        --l-span: span 4;
+    }
+    [data-scope][data-part][data-l-lg-span="5"] {
+        --l-span: span 5;
+    }
+    [data-scope][data-part][data-l-lg-span="6"] {
+        --l-span: span 6;
+    }
+    [data-scope][data-part][data-l-lg-span="7"] {
+        --l-span: span 7;
+    }
+    [data-scope][data-part][data-l-lg-span="8"] {
+        --l-span: span 8;
+    }
+    [data-scope][data-part][data-l-lg-span="9"] {
+        --l-span: span 9;
+    }
+    [data-scope][data-part][data-l-lg-span="10"] {
+        --l-span: span 10;
+    }
+    [data-scope][data-part][data-l-lg-span="11"] {
+        --l-span: span 11;
+    }
+    [data-scope][data-part][data-l-lg-span="12"] {
+        --l-span: span 12;
+    }
+    [data-scope][data-part][data-l-lg-span="full"] {
+        --l-span: 1 / -1;
+    }
+}
+}