@master/css-preset 0.0.0-site.1793659883.g69c9aebcf628

package/src/utilities.css

@@ -0,0 +1,2103 @@
+/* Explicit on-demand utility classes and token families. */
+@utility sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@utility truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Fixed native expressions. Each emits exactly one declaration. */
+@utility block {
+  display: block;
+}
+
+@utility inline {
+  display: inline;
+}
+
+@utility inline-block {
+  display: inline-block;
+}
+
+@utility flow-root {
+  display: flow-root;
+}
+
+@utility flex {
+  display: flex;
+}
+
+@utility inline-flex {
+  display: inline-flex;
+}
+
+@utility grid {
+  display: grid;
+}
+
+@utility inline-grid {
+  display: inline-grid;
+}
+
+@utility contents {
+  display: contents;
+}
+
+@utility list-item {
+  display: list-item;
+}
+
+@utility table {
+  display: table;
+}
+
+@utility inline-table {
+  display: inline-table;
+}
+
+@utility table-caption {
+  display: table-caption;
+}
+
+@utility table-cell {
+  display: table-cell;
+}
+
+@utility table-column {
+  display: table-column;
+}
+
+@utility table-column-group {
+  display: table-column-group;
+}
+
+@utility table-header-group {
+  display: table-header-group;
+}
+
+@utility table-footer-group {
+  display: table-footer-group;
+}
+
+@utility table-row {
+  display: table-row;
+}
+
+@utility table-row-group {
+  display: table-row-group;
+}
+
+@utility hidden {
+  display: none;
+}
+
+@utility static {
+  position: static;
+}
+
+@utility relative {
+  position: relative;
+}
+
+@utility absolute {
+  position: absolute;
+}
+
+@utility fixed {
+  position: fixed;
+}
+
+@utility sticky {
+  position: sticky;
+}
+
+@utility visible {
+  visibility: visible;
+}
+
+@utility invisible {
+  visibility: hidden;
+}
+
+@utility isolate {
+  isolation: isolate;
+}
+
+@utility box-border {
+  box-sizing: border-box;
+}
+
+@utility box-content {
+  box-sizing: content-box;
+}
+
+@utility italic {
+  font-style: italic;
+}
+
+@utility oblique {
+  font-style: oblique;
+}
+
+@utility uppercase {
+  text-transform: uppercase;
+}
+
+@utility lowercase {
+  text-transform: lowercase;
+}
+
+@utility capitalize {
+  text-transform: capitalize;
+}
+
+@utility underline {
+  text-decoration-line: underline;
+}
+
+@utility overline {
+  text-decoration-line: overline;
+}
+
+@utility line-through {
+  text-decoration-line: line-through;
+}
+
+@utility flex-row {
+  flex-direction: row;
+}
+
+@utility flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+@utility flex-col {
+  flex-direction: column;
+}
+
+@utility flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+@utility flex-wrap {
+  flex-wrap: wrap;
+}
+
+@utility flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@utility flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+@utility items-normal {
+  align-items: normal;
+}
+
+@utility items-start {
+  align-items: start;
+}
+
+@utility items-end {
+  align-items: end;
+}
+
+@utility items-flex-start {
+  align-items: flex-start;
+}
+
+@utility items-flex-end {
+  align-items: flex-end;
+}
+
+@utility items-center {
+  align-items: center;
+}
+
+@utility items-baseline {
+  align-items: baseline;
+}
+
+@utility items-stretch {
+  align-items: stretch;
+}
+
+@utility content-normal {
+  align-content: normal;
+}
+
+@utility content-start {
+  align-content: start;
+}
+
+@utility content-end {
+  align-content: end;
+}
+
+@utility content-flex-start {
+  align-content: flex-start;
+}
+
+@utility content-flex-end {
+  align-content: flex-end;
+}
+
+@utility content-center {
+  align-content: center;
+}
+
+@utility content-baseline {
+  align-content: baseline;
+}
+
+@utility content-stretch {
+  align-content: stretch;
+}
+
+@utility content-between {
+  align-content: space-between;
+}
+
+@utility content-around {
+  align-content: space-around;
+}
+
+@utility content-evenly {
+  align-content: space-evenly;
+}
+
+@utility self-auto {
+  align-self: auto;
+}
+
+@utility self-normal {
+  align-self: normal;
+}
+
+@utility self-start {
+  align-self: start;
+}
+
+@utility self-end {
+  align-self: end;
+}
+
+@utility self-flex-start {
+  align-self: flex-start;
+}
+
+@utility self-flex-end {
+  align-self: flex-end;
+}
+
+@utility self-center {
+  align-self: center;
+}
+
+@utility self-baseline {
+  align-self: baseline;
+}
+
+@utility self-stretch {
+  align-self: stretch;
+}
+
+@utility justify-normal {
+  justify-content: normal;
+}
+
+@utility justify-start {
+  justify-content: start;
+}
+
+@utility justify-end {
+  justify-content: end;
+}
+
+@utility justify-flex-start {
+  justify-content: flex-start;
+}
+
+@utility justify-flex-end {
+  justify-content: flex-end;
+}
+
+@utility justify-center {
+  justify-content: center;
+}
+
+@utility justify-between {
+  justify-content: space-between;
+}
+
+@utility justify-around {
+  justify-content: space-around;
+}
+
+@utility justify-evenly {
+  justify-content: space-evenly;
+}
+
+@utility justify-stretch {
+  justify-content: stretch;
+}
+
+@utility object-cover {
+  object-fit: cover;
+}
+
+@utility object-contain {
+  object-fit: contain;
+}
+
+@utility object-fill {
+  object-fit: fill;
+}
+
+@utility object-none {
+  object-fit: none;
+}
+
+@utility object-scale-down {
+  object-fit: scale-down;
+}
+
+@utility object-center {
+  object-position: center;
+}
+
+@utility object-top {
+  object-position: top;
+}
+
+@utility object-bottom {
+  object-position: bottom;
+}
+
+@utility object-left {
+  object-position: left;
+}
+
+@utility object-right {
+  object-position: right;
+}
+
+/* Automatic margins, insets and sizes. */
+@utility m-auto {
+  margin: auto;
+}
+
+@utility mt-auto {
+  margin-top: auto;
+}
+
+@utility mr-auto {
+  margin-right: auto;
+}
+
+@utility mb-auto {
+  margin-bottom: auto;
+}
+
+@utility ml-auto {
+  margin-left: auto;
+}
+
+@utility mx-auto {
+  margin-inline: auto;
+}
+
+@utility mxs-auto {
+  margin-inline-start: auto;
+}
+
+@utility mxe-auto {
+  margin-inline-end: auto;
+}
+
+@utility my-auto {
+  margin-block: auto;
+}
+
+@utility mys-auto {
+  margin-block-start: auto;
+}
+
+@utility mye-auto {
+  margin-block-end: auto;
+}
+
+@utility top-auto {
+  top: auto;
+}
+
+@utility right-auto {
+  right: auto;
+}
+
+@utility bottom-auto {
+  bottom: auto;
+}
+
+@utility left-auto {
+  left: auto;
+}
+
+@utility inset-auto {
+  inset: auto;
+}
+
+@utility ix-auto {
+  inset-inline: auto;
+}
+
+@utility ixs-auto {
+  inset-inline-start: auto;
+}
+
+@utility ixe-auto {
+  inset-inline-end: auto;
+}
+
+@utility iy-auto {
+  inset-block: auto;
+}
+
+@utility iys-auto {
+  inset-block-start: auto;
+}
+
+@utility iye-auto {
+  inset-block-end: auto;
+}
+
+@utility w-auto {
+  width: auto;
+}
+
+@utility h-auto {
+  height: auto;
+}
+
+@utility size-x-auto {
+  inline-size: auto;
+}
+
+@utility size-y-auto {
+  block-size: auto;
+}
+
+@utility min-w-auto {
+  min-width: auto;
+}
+
+@utility min-h-auto {
+  min-height: auto;
+}
+
+@utility min-size-x-auto {
+  min-inline-size: auto;
+}
+
+@utility min-size-y-auto {
+  min-block-size: auto;
+}
+
+@utility basis-auto {
+  flex-basis: auto;
+}
+
+/* Unbounded maximum sizes. */
+@utility max-w-none {
+  max-width: none;
+}
+
+@utility max-h-none {
+  max-height: none;
+}
+
+@utility max-size-x-none {
+  max-inline-size: none;
+}
+
+@utility max-size-y-none {
+  max-block-size: none;
+}
+
+/* Full and intrinsic sizes. */
+@utility w-full {
+  width: 100%;
+}
+
+@utility w-fit {
+  width: fit-content;
+}
+
+@utility w-max {
+  width: max-content;
+}
+
+@utility w-min {
+  width: min-content;
+}
+
+@utility h-full {
+  height: 100%;
+}
+
+@utility h-fit {
+  height: fit-content;
+}
+
+@utility h-max {
+  height: max-content;
+}
+
+@utility h-min {
+  height: min-content;
+}
+
+@utility size-x-full {
+  inline-size: 100%;
+}
+
+@utility size-x-fit {
+  inline-size: fit-content;
+}
+
+@utility size-x-max {
+  inline-size: max-content;
+}
+
+@utility size-x-min {
+  inline-size: min-content;
+}
+
+@utility size-y-full {
+  block-size: 100%;
+}
+
+@utility size-y-fit {
+  block-size: fit-content;
+}
+
+@utility size-y-max {
+  block-size: max-content;
+}
+
+@utility size-y-min {
+  block-size: min-content;
+}
+
+@utility min-w-full {
+  min-width: 100%;
+}
+
+@utility min-w-fit {
+  min-width: fit-content;
+}
+
+@utility min-w-max {
+  min-width: max-content;
+}
+
+@utility min-w-min {
+  min-width: min-content;
+}
+
+@utility min-h-full {
+  min-height: 100%;
+}
+
+@utility min-h-fit {
+  min-height: fit-content;
+}
+
+@utility min-h-max {
+  min-height: max-content;
+}
+
+@utility min-h-min {
+  min-height: min-content;
+}
+
+@utility min-size-x-full {
+  min-inline-size: 100%;
+}
+
+@utility min-size-x-fit {
+  min-inline-size: fit-content;
+}
+
+@utility min-size-x-max {
+  min-inline-size: max-content;
+}
+
+@utility min-size-x-min {
+  min-inline-size: min-content;
+}
+
+@utility min-size-y-full {
+  min-block-size: 100%;
+}
+
+@utility min-size-y-fit {
+  min-block-size: fit-content;
+}
+
+@utility min-size-y-max {
+  min-block-size: max-content;
+}
+
+@utility min-size-y-min {
+  min-block-size: min-content;
+}
+
+@utility max-w-full {
+  max-width: 100%;
+}
+
+@utility max-w-fit {
+  max-width: fit-content;
+}
+
+@utility max-w-max {
+  max-width: max-content;
+}
+
+@utility max-w-min {
+  max-width: min-content;
+}
+
+@utility max-h-full {
+  max-height: 100%;
+}
+
+@utility max-h-fit {
+  max-height: fit-content;
+}
+
+@utility max-h-max {
+  max-height: max-content;
+}
+
+@utility max-h-min {
+  max-height: min-content;
+}
+
+@utility max-size-x-full {
+  max-inline-size: 100%;
+}
+
+@utility max-size-x-fit {
+  max-inline-size: fit-content;
+}
+
+@utility max-size-x-max {
+  max-inline-size: max-content;
+}
+
+@utility max-size-x-min {
+  max-inline-size: min-content;
+}
+
+@utility max-size-y-full {
+  max-block-size: 100%;
+}
+
+@utility max-size-y-fit {
+  max-block-size: fit-content;
+}
+
+@utility max-size-y-max {
+  max-block-size: max-content;
+}
+
+@utility max-size-y-min {
+  max-block-size: min-content;
+}
+
+@utility basis-full {
+  flex-basis: 100%;
+}
+
+@utility basis-fit {
+  flex-basis: fit-content;
+}
+
+@utility basis-max {
+  flex-basis: max-content;
+}
+
+@utility basis-min {
+  flex-basis: min-content;
+}
+
+/* Flex and grid ordering. */
+@utility order-first {
+  order: -999999;
+}
+
+@utility order-last {
+  order: 999999;
+}
+
+/* Fully rounded corners; only the radius, never a size or ratio. */
+@utility pill {
+  border-radius: calc(infinity * 1px);
+}
+
+/* Border and outline styles; widths and colors stay independent. */
+@utility b-solid {
+  border-style: solid;
+}
+
+@utility b-dashed {
+  border-style: dashed;
+}
+
+@utility b-dotted {
+  border-style: dotted;
+}
+
+@utility b-double {
+  border-style: double;
+}
+
+@utility b-none {
+  border-style: none;
+}
+
+@utility bt-solid {
+  border-top-style: solid;
+}
+
+@utility bt-dashed {
+  border-top-style: dashed;
+}
+
+@utility bt-dotted {
+  border-top-style: dotted;
+}
+
+@utility bt-double {
+  border-top-style: double;
+}
+
+@utility bt-none {
+  border-top-style: none;
+}
+
+@utility br-solid {
+  border-right-style: solid;
+}
+
+@utility br-dashed {
+  border-right-style: dashed;
+}
+
+@utility br-dotted {
+  border-right-style: dotted;
+}
+
+@utility br-double {
+  border-right-style: double;
+}
+
+@utility br-none {
+  border-right-style: none;
+}
+
+@utility bb-solid {
+  border-bottom-style: solid;
+}
+
+@utility bb-dashed {
+  border-bottom-style: dashed;
+}
+
+@utility bb-dotted {
+  border-bottom-style: dotted;
+}
+
+@utility bb-double {
+  border-bottom-style: double;
+}
+
+@utility bb-none {
+  border-bottom-style: none;
+}
+
+@utility bl-solid {
+  border-left-style: solid;
+}
+
+@utility bl-dashed {
+  border-left-style: dashed;
+}
+
+@utility bl-dotted {
+  border-left-style: dotted;
+}
+
+@utility bl-double {
+  border-left-style: double;
+}
+
+@utility bl-none {
+  border-left-style: none;
+}
+
+@utility bx-solid {
+  border-inline-style: solid;
+}
+
+@utility bx-dashed {
+  border-inline-style: dashed;
+}
+
+@utility bx-dotted {
+  border-inline-style: dotted;
+}
+
+@utility bx-double {
+  border-inline-style: double;
+}
+
+@utility bx-none {
+  border-inline-style: none;
+}
+
+@utility bxs-solid {
+  border-inline-start-style: solid;
+}
+
+@utility bxs-dashed {
+  border-inline-start-style: dashed;
+}
+
+@utility bxs-dotted {
+  border-inline-start-style: dotted;
+}
+
+@utility bxs-double {
+  border-inline-start-style: double;
+}
+
+@utility bxs-none {
+  border-inline-start-style: none;
+}
+
+@utility bxe-solid {
+  border-inline-end-style: solid;
+}
+
+@utility bxe-dashed {
+  border-inline-end-style: dashed;
+}
+
+@utility bxe-dotted {
+  border-inline-end-style: dotted;
+}
+
+@utility bxe-double {
+  border-inline-end-style: double;
+}
+
+@utility bxe-none {
+  border-inline-end-style: none;
+}
+
+@utility by-solid {
+  border-block-style: solid;
+}
+
+@utility by-dashed {
+  border-block-style: dashed;
+}
+
+@utility by-dotted {
+  border-block-style: dotted;
+}
+
+@utility by-double {
+  border-block-style: double;
+}
+
+@utility by-none {
+  border-block-style: none;
+}
+
+@utility bys-solid {
+  border-block-start-style: solid;
+}
+
+@utility bys-dashed {
+  border-block-start-style: dashed;
+}
+
+@utility bys-dotted {
+  border-block-start-style: dotted;
+}
+
+@utility bys-double {
+  border-block-start-style: double;
+}
+
+@utility bys-none {
+  border-block-start-style: none;
+}
+
+@utility bye-solid {
+  border-block-end-style: solid;
+}
+
+@utility bye-dashed {
+  border-block-end-style: dashed;
+}
+
+@utility bye-dotted {
+  border-block-end-style: dotted;
+}
+
+@utility bye-double {
+  border-block-end-style: double;
+}
+
+@utility bye-none {
+  border-block-end-style: none;
+}
+
+@utility outline-solid {
+  outline-style: solid;
+}
+
+@utility outline-dashed {
+  outline-style: dashed;
+}
+
+@utility outline-dotted {
+  outline-style: dotted;
+}
+
+@utility outline-double {
+  outline-style: double;
+}
+
+@utility outline-none {
+  outline-style: none;
+}
+
+/* Text alignment. */
+@utility text-left {
+  text-align: left;
+}
+
+@utility text-center {
+  text-align: center;
+}
+
+@utility text-right {
+  text-align: right;
+}
+
+@utility text-start {
+  text-align: start;
+}
+
+@utility text-end {
+  text-align: end;
+}
+
+@utility text-justify {
+  text-align: justify;
+}
+
+/* Overflow. */
+@utility overflow-auto {
+  overflow: auto;
+}
+
+@utility overflow-hidden {
+  overflow: hidden;
+}
+
+@utility overflow-clip {
+  overflow: clip;
+}
+
+@utility overflow-visible {
+  overflow: visible;
+}
+
+@utility overflow-scroll {
+  overflow: scroll;
+}
+
+@utility overflow-x-auto {
+  overflow-x: auto;
+}
+
+@utility overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+@utility overflow-x-clip {
+  overflow-x: clip;
+}
+
+@utility overflow-x-visible {
+  overflow-x: visible;
+}
+
+@utility overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+@utility overflow-y-auto {
+  overflow-y: auto;
+}
+
+@utility overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+@utility overflow-y-clip {
+  overflow-y: clip;
+}
+
+@utility overflow-y-visible {
+  overflow-y: visible;
+}
+
+@utility overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+/* White space. */
+@utility whitespace-normal {
+  white-space: normal;
+}
+
+@utility whitespace-nowrap {
+  white-space: nowrap;
+}
+
+@utility whitespace-pre {
+  white-space: pre;
+}
+
+@utility whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+@utility whitespace-pre-line {
+  white-space: pre-line;
+}
+
+@utility whitespace-break-spaces {
+  white-space: break-spaces;
+}
+
+/* Selection and pointer events. */
+@utility select-none {
+  user-select: none;
+}
+
+@utility select-text {
+  user-select: text;
+}
+
+@utility select-all {
+  user-select: all;
+}
+
+@utility select-auto {
+  user-select: auto;
+}
+
+@utility pointer-none {
+  pointer-events: none;
+}
+
+@utility pointer-auto {
+  pointer-events: auto;
+}
+
+/* Vertical alignment. */
+@utility vertical-baseline {
+  vertical-align: baseline;
+}
+
+@utility vertical-top {
+  vertical-align: top;
+}
+
+@utility vertical-middle {
+  vertical-align: middle;
+}
+
+@utility vertical-bottom {
+  vertical-align: bottom;
+}
+
+@utility vertical-text-top {
+  vertical-align: text-top;
+}
+
+@utility vertical-text-bottom {
+  vertical-align: text-bottom;
+}
+
+@utility vertical-sub {
+  vertical-align: sub;
+}
+
+@utility vertical-super {
+  vertical-align: super;
+}
+
+/* Container types. */
+@utility container-inline {
+  container-type: inline-size;
+}
+
+@utility container-size {
+  container-type: size;
+}
+
+@utility container-normal {
+  container-type: normal;
+}
+
+/* Overflow wrapping and ellipsis. */
+@utility wrap-anywhere {
+  overflow-wrap: anywhere;
+}
+
+@utility wrap-break-word {
+  overflow-wrap: break-word;
+}
+
+@utility wrap-normal {
+  overflow-wrap: normal;
+}
+
+@utility ellipsis {
+  text-overflow: ellipsis;
+}
+
+@utility grid-cols(--n <integer>) {
+  display: grid;
+  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
+}
+
+@utility grid-rows(--n <integer>) {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
+}
+
+@utility grid-col-span(--n <integer>) {
+  grid-column: span var(--n)/span var(--n);
+}
+
+@utility grid-row-span(--n <integer>) {
+  grid-row: span var(--n)/span var(--n);
+}
+
+@utility clamp-lines(--n <integer>) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--n);
+  overflow: hidden;
+  overflow-wrap: break-word;
+  text-overflow: ellipsis;
+}
+
+/* Direct numeric values: lengths are pixels; other units and dynamic values use native declarations. */
+@utility m(--value <number>) {
+  margin: calc(var(--value) * 1px);
+}
+
+@utility mt(--value <number>) {
+  margin-top: calc(var(--value) * 1px);
+}
+
+@utility mr(--value <number>) {
+  margin-right: calc(var(--value) * 1px);
+}
+
+@utility mb(--value <number>) {
+  margin-bottom: calc(var(--value) * 1px);
+}
+
+@utility ml(--value <number>) {
+  margin-left: calc(var(--value) * 1px);
+}
+
+@utility mx(--value <number>) {
+  margin-inline: calc(var(--value) * 1px);
+}
+
+@utility mxs(--value <number>) {
+  margin-inline-start: calc(var(--value) * 1px);
+}
+
+@utility mxe(--value <number>) {
+  margin-inline-end: calc(var(--value) * 1px);
+}
+
+@utility my(--value <number>) {
+  margin-block: calc(var(--value) * 1px);
+}
+
+@utility mys(--value <number>) {
+  margin-block-start: calc(var(--value) * 1px);
+}
+
+@utility mye(--value <number>) {
+  margin-block-end: calc(var(--value) * 1px);
+}
+
+@utility p(--value <number>) {
+  padding: calc(var(--value) * 1px);
+}
+
+@utility pt(--value <number>) {
+  padding-top: calc(var(--value) * 1px);
+}
+
+@utility pr(--value <number>) {
+  padding-right: calc(var(--value) * 1px);
+}
+
+@utility pb(--value <number>) {
+  padding-bottom: calc(var(--value) * 1px);
+}
+
+@utility pl(--value <number>) {
+  padding-left: calc(var(--value) * 1px);
+}
+
+@utility px(--value <number>) {
+  padding-inline: calc(var(--value) * 1px);
+}
+
+@utility pxs(--value <number>) {
+  padding-inline-start: calc(var(--value) * 1px);
+}
+
+@utility pxe(--value <number>) {
+  padding-inline-end: calc(var(--value) * 1px);
+}
+
+@utility py(--value <number>) {
+  padding-block: calc(var(--value) * 1px);
+}
+
+@utility pys(--value <number>) {
+  padding-block-start: calc(var(--value) * 1px);
+}
+
+@utility pye(--value <number>) {
+  padding-block-end: calc(var(--value) * 1px);
+}
+
+@utility scroll-m(--value <number>) {
+  scroll-margin: calc(var(--value) * 1px);
+}
+
+@utility scroll-mt(--value <number>) {
+  scroll-margin-top: calc(var(--value) * 1px);
+}
+
+@utility scroll-mr(--value <number>) {
+  scroll-margin-right: calc(var(--value) * 1px);
+}
+
+@utility scroll-mb(--value <number>) {
+  scroll-margin-bottom: calc(var(--value) * 1px);
+}
+
+@utility scroll-ml(--value <number>) {
+  scroll-margin-left: calc(var(--value) * 1px);
+}
+
+@utility scroll-mx(--value <number>) {
+  scroll-margin-inline: calc(var(--value) * 1px);
+}
+
+@utility scroll-mxs(--value <number>) {
+  scroll-margin-inline-start: calc(var(--value) * 1px);
+}
+
+@utility scroll-mxe(--value <number>) {
+  scroll-margin-inline-end: calc(var(--value) * 1px);
+}
+
+@utility scroll-my(--value <number>) {
+  scroll-margin-block: calc(var(--value) * 1px);
+}
+
+@utility scroll-mys(--value <number>) {
+  scroll-margin-block-start: calc(var(--value) * 1px);
+}
+
+@utility scroll-mye(--value <number>) {
+  scroll-margin-block-end: calc(var(--value) * 1px);
+}
+
+@utility scroll-p(--value <number>) {
+  scroll-padding: calc(var(--value) * 1px);
+}
+
+@utility scroll-pt(--value <number>) {
+  scroll-padding-top: calc(var(--value) * 1px);
+}
+
+@utility scroll-pr(--value <number>) {
+  scroll-padding-right: calc(var(--value) * 1px);
+}
+
+@utility scroll-pb(--value <number>) {
+  scroll-padding-bottom: calc(var(--value) * 1px);
+}
+
+@utility scroll-pl(--value <number>) {
+  scroll-padding-left: calc(var(--value) * 1px);
+}
+
+@utility scroll-px(--value <number>) {
+  scroll-padding-inline: calc(var(--value) * 1px);
+}
+
+@utility scroll-pxs(--value <number>) {
+  scroll-padding-inline-start: calc(var(--value) * 1px);
+}
+
+@utility scroll-pxe(--value <number>) {
+  scroll-padding-inline-end: calc(var(--value) * 1px);
+}
+
+@utility scroll-py(--value <number>) {
+  scroll-padding-block: calc(var(--value) * 1px);
+}
+
+@utility scroll-pys(--value <number>) {
+  scroll-padding-block-start: calc(var(--value) * 1px);
+}
+
+@utility scroll-pye(--value <number>) {
+  scroll-padding-block-end: calc(var(--value) * 1px);
+}
+
+@utility top(--value <number>) {
+  top: calc(var(--value) * 1px);
+}
+
+@utility right(--value <number>) {
+  right: calc(var(--value) * 1px);
+}
+
+@utility bottom(--value <number>) {
+  bottom: calc(var(--value) * 1px);
+}
+
+@utility left(--value <number>) {
+  left: calc(var(--value) * 1px);
+}
+
+@utility inset(--value <number>) {
+  inset: calc(var(--value) * 1px);
+}
+
+@utility ix(--value <number>) {
+  inset-inline: calc(var(--value) * 1px);
+}
+
+@utility ixs(--value <number>) {
+  inset-inline-start: calc(var(--value) * 1px);
+}
+
+@utility ixe(--value <number>) {
+  inset-inline-end: calc(var(--value) * 1px);
+}
+
+@utility iy(--value <number>) {
+  inset-block: calc(var(--value) * 1px);
+}
+
+@utility iys(--value <number>) {
+  inset-block-start: calc(var(--value) * 1px);
+}
+
+@utility iye(--value <number>) {
+  inset-block-end: calc(var(--value) * 1px);
+}
+
+@utility gap(--value <number>) {
+  gap: calc(var(--value) * 1px);
+}
+
+@utility col-gap(--value <number>) {
+  column-gap: calc(var(--value) * 1px);
+}
+
+@utility row-gap(--value <number>) {
+  row-gap: calc(var(--value) * 1px);
+}
+
+@utility border-spacing(--value <number>) {
+  border-spacing: calc(var(--value) * 1px);
+}
+
+@utility outline-offset(--value <number>) {
+  outline-offset: calc(var(--value) * 1px);
+}
+
+@utility shape-margin(--value <number>) {
+  shape-margin: calc(var(--value) * 1px);
+}
+
+@utility translate(--value <number>) {
+  translate: calc(var(--value) * 1px);
+}
+
+@utility word-spacing(--value <number>) {
+  word-spacing: calc(var(--value) * 1px);
+}
+
+@utility w(--value <number>) {
+  width: calc(var(--value) * 1px);
+}
+
+@utility h(--value <number>) {
+  height: calc(var(--value) * 1px);
+}
+
+@utility size-x(--value <number>) {
+  inline-size: calc(var(--value) * 1px);
+}
+
+@utility size-y(--value <number>) {
+  block-size: calc(var(--value) * 1px);
+}
+
+@utility min-w(--value <number>) {
+  min-width: calc(var(--value) * 1px);
+}
+
+@utility min-h(--value <number>) {
+  min-height: calc(var(--value) * 1px);
+}
+
+@utility min-size-x(--value <number>) {
+  min-inline-size: calc(var(--value) * 1px);
+}
+
+@utility min-size-y(--value <number>) {
+  min-block-size: calc(var(--value) * 1px);
+}
+
+@utility max-w(--value <number>) {
+  max-width: calc(var(--value) * 1px);
+}
+
+@utility max-h(--value <number>) {
+  max-height: calc(var(--value) * 1px);
+}
+
+@utility max-size-x(--value <number>) {
+  max-inline-size: calc(var(--value) * 1px);
+}
+
+@utility max-size-y(--value <number>) {
+  max-block-size: calc(var(--value) * 1px);
+}
+
+@utility basis(--value <number>) {
+  flex-basis: calc(var(--value) * 1px);
+}
+
+@utility r(--value <number>) {
+  border-radius: calc(var(--value) * 1px);
+}
+
+@utility rtl(--value <number>) {
+  border-top-left-radius: calc(var(--value) * 1px);
+}
+
+@utility rtr(--value <number>) {
+  border-top-right-radius: calc(var(--value) * 1px);
+}
+
+@utility rbl(--value <number>) {
+  border-bottom-left-radius: calc(var(--value) * 1px);
+}
+
+@utility rbr(--value <number>) {
+  border-bottom-right-radius: calc(var(--value) * 1px);
+}
+
+@utility rss(--value <number>) {
+  border-start-start-radius: calc(var(--value) * 1px);
+}
+
+@utility rse(--value <number>) {
+  border-start-end-radius: calc(var(--value) * 1px);
+}
+
+@utility res(--value <number>) {
+  border-end-start-radius: calc(var(--value) * 1px);
+}
+
+@utility ree(--value <number>) {
+  border-end-end-radius: calc(var(--value) * 1px);
+}
+
+@utility b(--value <number>) {
+  border-width: calc(var(--value) * 1px);
+}
+
+@utility bt(--value <number>) {
+  border-top-width: calc(var(--value) * 1px);
+}
+
+@utility br(--value <number>) {
+  border-right-width: calc(var(--value) * 1px);
+}
+
+@utility bb(--value <number>) {
+  border-bottom-width: calc(var(--value) * 1px);
+}
+
+@utility bl(--value <number>) {
+  border-left-width: calc(var(--value) * 1px);
+}
+
+@utility bx(--value <number>) {
+  border-inline-width: calc(var(--value) * 1px);
+}
+
+@utility bxs(--value <number>) {
+  border-inline-start-width: calc(var(--value) * 1px);
+}
+
+@utility bxe(--value <number>) {
+  border-inline-end-width: calc(var(--value) * 1px);
+}
+
+@utility by(--value <number>) {
+  border-block-width: calc(var(--value) * 1px);
+}
+
+@utility bys(--value <number>) {
+  border-block-start-width: calc(var(--value) * 1px);
+}
+
+@utility bye(--value <number>) {
+  border-block-end-width: calc(var(--value) * 1px);
+}
+
+@utility outline(--value <number>) {
+  outline-width: calc(var(--value) * 1px);
+}
+@utility grow(--value <number>) {
+  flex-grow: var(--value);
+}
+
+@utility shrink(--value <number>) {
+  flex-shrink: var(--value);
+}
+
+@utility order(--value <integer>) {
+  order: var(--value);
+}
+
+@utility text-(--text <string>) {
+  font-size: var(ident("--text-" var(--text)));
+  line-height: var(ident("--text-" var(--text) "--line-height"), normal);
+  letter-spacing: var(ident("--text-" var(--text) "--letter-spacing"), normal);
+}
+
+/* Token patterns bind values from the declared namespace. */
+@utility bottom-(--spacing) {
+  bottom: var(--spacing);
+}
+
+@utility border-spacing-(--spacing) {
+  border-spacing: var(--spacing);
+}
+
+@utility col-gap-(--spacing) {
+  column-gap: var(--spacing);
+}
+
+@utility gap-(--spacing) {
+  gap: var(--spacing);
+}
+
+@utility inset-(--spacing) {
+  inset: var(--spacing);
+}
+
+@utility iy-(--spacing) {
+  inset-block: var(--spacing);
+}
+
+@utility iye-(--spacing) {
+  inset-block-end: var(--spacing);
+}
+
+@utility iys-(--spacing) {
+  inset-block-start: var(--spacing);
+}
+
+@utility ix-(--spacing) {
+  inset-inline: var(--spacing);
+}
+
+@utility ixe-(--spacing) {
+  inset-inline-end: var(--spacing);
+}
+
+@utility ixs-(--spacing) {
+  inset-inline-start: var(--spacing);
+}
+
+@utility left-(--spacing) {
+  left: var(--spacing);
+}
+
+@utility m-(--spacing) {
+  margin: var(--spacing);
+}
+
+@utility my-(--spacing) {
+  margin-block: var(--spacing);
+}
+
+@utility mye-(--spacing) {
+  margin-block-end: var(--spacing);
+}
+
+@utility mys-(--spacing) {
+  margin-block-start: var(--spacing);
+}
+
+@utility mb-(--spacing) {
+  margin-bottom: var(--spacing);
+}
+
+@utility mx-(--spacing) {
+  margin-inline: var(--spacing);
+}
+
+@utility mxe-(--spacing) {
+  margin-inline-end: var(--spacing);
+}
+
+@utility mxs-(--spacing) {
+  margin-inline-start: var(--spacing);
+}
+
+@utility ml-(--spacing) {
+  margin-left: var(--spacing);
+}
+
+@utility mr-(--spacing) {
+  margin-right: var(--spacing);
+}
+
+@utility mt-(--spacing) {
+  margin-top: var(--spacing);
+}
+
+@utility outline-offset-(--spacing) {
+  outline-offset: var(--spacing);
+}
+
+@utility p-(--spacing) {
+  padding: var(--spacing);
+}
+
+@utility py-(--spacing) {
+  padding-block: var(--spacing);
+}
+
+@utility pye-(--spacing) {
+  padding-block-end: var(--spacing);
+}
+
+@utility pys-(--spacing) {
+  padding-block-start: var(--spacing);
+}
+
+@utility pb-(--spacing) {
+  padding-bottom: var(--spacing);
+}
+
+@utility px-(--spacing) {
+  padding-inline: var(--spacing);
+}
+
+@utility pxe-(--spacing) {
+  padding-inline-end: var(--spacing);
+}
+
+@utility pxs-(--spacing) {
+  padding-inline-start: var(--spacing);
+}
+
+@utility pl-(--spacing) {
+  padding-left: var(--spacing);
+}
+
+@utility pr-(--spacing) {
+  padding-right: var(--spacing);
+}
+
+@utility pt-(--spacing) {
+  padding-top: var(--spacing);
+}
+
+@utility right-(--spacing) {
+  right: var(--spacing);
+}
+
+@utility row-gap-(--spacing) {
+  row-gap: var(--spacing);
+}
+
+@utility scroll-m-(--spacing) {
+  scroll-margin: var(--spacing);
+}
+
+@utility scroll-my-(--spacing) {
+  scroll-margin-block: var(--spacing);
+}
+
+@utility scroll-mye-(--spacing) {
+  scroll-margin-block-end: var(--spacing);
+}
+
+@utility scroll-mys-(--spacing) {
+  scroll-margin-block-start: var(--spacing);
+}
+
+@utility scroll-mb-(--spacing) {
+  scroll-margin-bottom: var(--spacing);
+}
+
+@utility scroll-mx-(--spacing) {
+  scroll-margin-inline: var(--spacing);
+}
+
+@utility scroll-mxe-(--spacing) {
+  scroll-margin-inline-end: var(--spacing);
+}
+
+@utility scroll-mxs-(--spacing) {
+  scroll-margin-inline-start: var(--spacing);
+}
+
+@utility scroll-ml-(--spacing) {
+  scroll-margin-left: var(--spacing);
+}
+
+@utility scroll-mr-(--spacing) {
+  scroll-margin-right: var(--spacing);
+}
+
+@utility scroll-mt-(--spacing) {
+  scroll-margin-top: var(--spacing);
+}
+
+@utility scroll-p-(--spacing) {
+  scroll-padding: var(--spacing);
+}
+
+@utility scroll-py-(--spacing) {
+  scroll-padding-block: var(--spacing);
+}
+
+@utility scroll-pye-(--spacing) {
+  scroll-padding-block-end: var(--spacing);
+}
+
+@utility scroll-pys-(--spacing) {
+  scroll-padding-block-start: var(--spacing);
+}
+
+@utility scroll-pb-(--spacing) {
+  scroll-padding-bottom: var(--spacing);
+}
+
+@utility scroll-px-(--spacing) {
+  scroll-padding-inline: var(--spacing);
+}
+
+@utility scroll-pxe-(--spacing) {
+  scroll-padding-inline-end: var(--spacing);
+}
+
+@utility scroll-pxs-(--spacing) {
+  scroll-padding-inline-start: var(--spacing);
+}
+
+@utility scroll-pl-(--spacing) {
+  scroll-padding-left: var(--spacing);
+}
+
+@utility scroll-pr-(--spacing) {
+  scroll-padding-right: var(--spacing);
+}
+
+@utility scroll-pt-(--spacing) {
+  scroll-padding-top: var(--spacing);
+}
+
+@utility shape-margin-(--spacing) {
+  shape-margin: var(--spacing);
+}
+
+@utility top-(--spacing) {
+  top: var(--spacing);
+}
+
+@utility translate-(--spacing) {
+  translate: var(--spacing);
+}
+
+@utility word-spacing-(--spacing) {
+  word-spacing: var(--spacing);
+}
+
+@utility size-y-(--container) {
+  block-size: var(--container);
+}
+
+@utility basis-(--container) {
+  flex-basis: var(--container);
+}
+
+@utility h-(--container) {
+  height: var(--container);
+}
+
+@utility size-x-(--container) {
+  inline-size: var(--container);
+}
+
+@utility max-size-y-(--container) {
+  max-block-size: var(--container);
+}
+
+@utility max-h-(--container) {
+  max-height: var(--container);
+}
+
+@utility max-size-x-(--container) {
+  max-inline-size: var(--container);
+}
+
+@utility max-w-(--container) {
+  max-width: var(--container);
+}
+
+@utility min-size-y-(--container) {
+  min-block-size: var(--container);
+}
+
+@utility min-h-(--container) {
+  min-height: var(--container);
+}
+
+@utility min-size-x-(--container) {
+  min-inline-size: var(--container);
+}
+
+@utility min-w-(--container) {
+  min-width: var(--container);
+}
+
+@utility w-(--container) {
+  width: var(--container);
+}
+
+@utility rbl-(--radius) {
+  border-bottom-left-radius: var(--radius);
+}
+
+@utility rbr-(--radius) {
+  border-bottom-right-radius: var(--radius);
+}
+
+@utility ree-(--radius) {
+  border-end-end-radius: var(--radius);
+}
+
+@utility res-(--radius) {
+  border-end-start-radius: var(--radius);
+}
+
+@utility r-(--radius) {
+  border-radius: var(--radius);
+}
+
+@utility rse-(--radius) {
+  border-start-end-radius: var(--radius);
+}
+
+@utility rss-(--radius) {
+  border-start-start-radius: var(--radius);
+}
+
+@utility rtl-(--radius) {
+  border-top-left-radius: var(--radius);
+}
+
+@utility rtr-(--radius) {
+  border-top-right-radius: var(--radius);
+}
+
+@utility by-(--color) {
+  border-block-color: var(--color);
+}
+
+@utility bye-(--color) {
+  border-block-end-color: var(--color);
+}
+
+@utility bys-(--color) {
+  border-block-start-color: var(--color);
+}
+
+@utility bb-(--color) {
+  border-bottom-color: var(--color);
+}
+
+@utility b-(--color) {
+  border-color: var(--color);
+}
+
+@utility bx-(--color) {
+  border-inline-color: var(--color);
+}
+
+@utility bxe-(--color) {
+  border-inline-end-color: var(--color);
+}
+
+@utility bxs-(--color) {
+  border-inline-start-color: var(--color);
+}
+
+@utility bl-(--color) {
+  border-left-color: var(--color);
+}
+
+@utility br-(--color) {
+  border-right-color: var(--color);
+}
+
+@utility bt-(--color) {
+  border-top-color: var(--color);
+}
+
+@utility outline-(--color) {
+  outline-color: var(--color);
+}
+
+@utility accent-(--color) {
+  accent-color: var(--color);
+}
+
+@utility bg-(--color) {
+  background-color: var(--color);
+}
+
+@utility fill-(--color) {
+  fill: var(--color);
+}
+
+@utility caret-(--color) {
+  caret-color: var(--color);
+}
+
+@utility stroke-(--color) {
+  stroke: var(--color);
+}
+
+@utility fg-(--color) {
+  color: var(--color);
+}
+
+@utility text-fill-color-(--color) {
+  -webkit-text-fill-color: var(--color);
+}
+
+@utility shadow-(--shadow) {
+  box-shadow: var(--shadow);
+}
+
+@utility animate-(--animate) {
+  animation: var(--animate);
+}
+
+@utility animation-delay-(--duration) {
+  animation-delay: var(--duration);
+}
+
+@utility animation-(--duration) {
+  animation-duration: var(--duration);
+}
+
+@utility transition-delay-(--duration) {
+  transition-delay: var(--duration);
+}
+
+@utility transition-(--duration) {
+  transition-duration: var(--duration);
+}
+
+@utility animation-(--easing) {
+  animation-timing-function: var(--easing);
+}
+
+@utility transition-(--easing) {
+  transition-timing-function: var(--easing);
+}
+
+@utility font-(--font-family) {
+  font-family: var(--font-family);
+}
+
+@utility font-(--font-size) {
+  font-size: var(--font-size);
+}
+
+@utility font-(--font-weight) {
+  font-weight: var(--font-weight);
+}
+
+@utility tracking-(--tracking) {
+  letter-spacing: var(--tracking);
+}
+
+@utility leading-(--leading) {
+  line-height: var(--leading);
+}