/* manifest utilities: critical */

.text-50 { color: var(--color-50) }
.bg-50 { background-color: var(--color-50) }
.border-50 { border-color: var(--color-50) }
.text-100 { color: var(--color-100) }
.bg-100 { background-color: var(--color-100) }
.border-100 { border-color: var(--color-100) }
.text-200 { color: var(--color-200) }
.bg-200 { background-color: var(--color-200) }
.border-200 { border-color: var(--color-200) }
.text-300 { color: var(--color-300) }
.bg-300 { background-color: var(--color-300) }
.border-300 { border-color: var(--color-300) }
.text-400 { color: var(--color-400) }
.bg-400 { background-color: var(--color-400) }
.border-400 { border-color: var(--color-400) }
.text-500 { color: var(--color-500) }
.bg-500 { background-color: var(--color-500) }
.border-500 { border-color: var(--color-500) }
.text-600 { color: var(--color-600) }
.bg-600 { background-color: var(--color-600) }
.border-600 { border-color: var(--color-600) }
.text-700 { color: var(--color-700) }
.bg-700 { background-color: var(--color-700) }
.border-700 { border-color: var(--color-700) }
.text-800 { color: var(--color-800) }
.bg-800 { background-color: var(--color-800) }
.border-800 { border-color: var(--color-800) }
.text-900 { color: var(--color-900) }
.bg-900 { background-color: var(--color-900) }
.border-900 { border-color: var(--color-900) }
.text-950 { color: var(--color-950) }
.bg-950 { background-color: var(--color-950) }
.border-950 { border-color: var(--color-950) }
.text-page { color: var(--color-page) }
.bg-page { background-color: var(--color-page) }
.border-page { border-color: var(--color-page) }
.text-surface-1 { color: var(--color-surface-1) }
.bg-surface-1 { background-color: var(--color-surface-1) }
.border-surface-1 { border-color: var(--color-surface-1) }
.text-surface-2 { color: var(--color-surface-2) }
.bg-surface-2 { background-color: var(--color-surface-2) }
.border-surface-2 { border-color: var(--color-surface-2) }
.text-surface-3 { color: var(--color-surface-3) }
.bg-surface-3 { background-color: var(--color-surface-3) }
.border-surface-3 { border-color: var(--color-surface-3) }
.text-content-stark { color: var(--color-content-stark) }
.bg-content-stark { background-color: var(--color-content-stark) }
.border-content-stark { border-color: var(--color-content-stark) }
.text-content-neutral { color: var(--color-content-neutral) }
.bg-content-neutral { background-color: var(--color-content-neutral) }
.border-content-neutral { border-color: var(--color-content-neutral) }
.text-content-subtle { color: var(--color-content-subtle) }
.bg-content-subtle { background-color: var(--color-content-subtle) }
.border-content-subtle { border-color: var(--color-content-subtle) }
.text-field-surface { color: var(--color-field-surface) }
.bg-field-surface { background-color: var(--color-field-surface) }
.border-field-surface { border-color: var(--color-field-surface) }
.text-field-surface-hover { color: var(--color-field-surface-hover) }
.bg-field-surface-hover { background-color: var(--color-field-surface-hover) }
.border-field-surface-hover { border-color: var(--color-field-surface-hover) }
.text-field-inverse { color: var(--color-field-inverse) }
.bg-field-inverse { background-color: var(--color-field-inverse) }
.border-field-inverse { border-color: var(--color-field-inverse) }
.text-popover-surface { color: var(--color-popover-surface) }
.bg-popover-surface { background-color: var(--color-popover-surface) }
.border-popover-surface { border-color: var(--color-popover-surface) }
.text-line { color: var(--color-line) }
.bg-line { background-color: var(--color-line) }
.border-line { border-color: var(--color-line) }
.text-brand-surface { color: var(--color-brand-surface) }
.bg-brand-surface { background-color: var(--color-brand-surface) }
.border-brand-surface { border-color: var(--color-brand-surface) }
.text-brand-surface-hover { color: var(--color-brand-surface-hover) }
.bg-brand-surface-hover { background-color: var(--color-brand-surface-hover) }
.border-brand-surface-hover { border-color: var(--color-brand-surface-hover) }
.text-brand-inverse { color: var(--color-brand-inverse) }
.bg-brand-inverse { background-color: var(--color-brand-inverse) }
.border-brand-inverse { border-color: var(--color-brand-inverse) }
.text-brand-content { color: var(--color-brand-content) }
.bg-brand-content { background-color: var(--color-brand-content) }
.border-brand-content { border-color: var(--color-brand-content) }
.text-accent-surface { color: var(--color-accent-surface) }
.bg-accent-surface { background-color: var(--color-accent-surface) }
.border-accent-surface { border-color: var(--color-accent-surface) }
.text-accent-surface-hover { color: var(--color-accent-surface-hover) }
.bg-accent-surface-hover { background-color: var(--color-accent-surface-hover) }
.border-accent-surface-hover { border-color: var(--color-accent-surface-hover) }
.text-accent-inverse { color: var(--color-accent-inverse) }
.bg-accent-inverse { background-color: var(--color-accent-inverse) }
.border-accent-inverse { border-color: var(--color-accent-inverse) }
.text-accent-content { color: var(--color-accent-content) }
.bg-accent-content { background-color: var(--color-accent-content) }
.border-accent-content { border-color: var(--color-accent-content) }
.text-positive-surface { color: var(--color-positive-surface) }
.bg-positive-surface { background-color: var(--color-positive-surface) }
.border-positive-surface { border-color: var(--color-positive-surface) }
.text-positive-surface-hover { color: var(--color-positive-surface-hover) }
.bg-positive-surface-hover { background-color: var(--color-positive-surface-hover) }
.border-positive-surface-hover { border-color: var(--color-positive-surface-hover) }
.text-positive-inverse { color: var(--color-positive-inverse) }
.bg-positive-inverse { background-color: var(--color-positive-inverse) }
.border-positive-inverse { border-color: var(--color-positive-inverse) }
.text-positive-content { color: var(--color-positive-content) }
.bg-positive-content { background-color: var(--color-positive-content) }
.border-positive-content { border-color: var(--color-positive-content) }
.text-negative-surface { color: var(--color-negative-surface) }
.bg-negative-surface { background-color: var(--color-negative-surface) }
.border-negative-surface { border-color: var(--color-negative-surface) }
.text-negative-surface-hover { color: var(--color-negative-surface-hover) }
.bg-negative-surface-hover { background-color: var(--color-negative-surface-hover) }
.border-negative-surface-hover { border-color: var(--color-negative-surface-hover) }
.text-negative-inverse { color: var(--color-negative-inverse) }
.bg-negative-inverse { background-color: var(--color-negative-inverse) }
.border-negative-inverse { border-color: var(--color-negative-inverse) }
.text-negative-content { color: var(--color-negative-content) }
.bg-negative-content { background-color: var(--color-negative-content) }
.border-negative-content { border-color: var(--color-negative-content) }
.text-code-function { color: var(--color-code-function) }
.bg-code-function { background-color: var(--color-code-function) }
.border-code-function { border-color: var(--color-code-function) }
.text-code-important { color: var(--color-code-important) }
.bg-code-important { background-color: var(--color-code-important) }
.border-code-important { border-color: var(--color-code-important) }
.text-code-url { color: var(--color-code-url) }
.bg-code-url { background-color: var(--color-code-url) }
.border-code-url { border-color: var(--color-code-url) }
.text-code-deleted { color: var(--color-code-deleted) }
.bg-code-deleted { background-color: var(--color-code-deleted) }
.border-code-deleted { border-color: var(--color-code-deleted) }
.text-picker-swatch { color: var(--color-picker-swatch) }
.bg-picker-swatch { background-color: var(--color-picker-swatch) }
.border-picker-swatch { border-color: var(--color-picker-swatch) }
.text-code-tag { color: var(--color-code-tag) }
.bg-code-tag { background-color: var(--color-code-tag) }
.border-code-tag { border-color: var(--color-code-tag) }
.text-code-builtin { color: var(--color-code-builtin) }
.bg-code-builtin { background-color: var(--color-code-builtin) }
.border-code-builtin { border-color: var(--color-code-builtin) }
.text-code-comment { color: var(--color-code-comment) }
.bg-code-comment { background-color: var(--color-code-comment) }
.border-code-comment { border-color: var(--color-code-comment) }
.text-code-char { color: var(--color-code-char) }
.bg-code-char { background-color: var(--color-code-char) }
.border-code-char { border-color: var(--color-code-char) }
.text-code-operator { color: var(--color-code-operator) }
.bg-code-operator { background-color: var(--color-code-operator) }
.border-code-operator { border-color: var(--color-code-operator) }
.text-code-attr-name { color: var(--color-code-attr-name) }
.bg-code-attr-name { background-color: var(--color-code-attr-name) }
.border-code-attr-name { border-color: var(--color-code-attr-name) }
.text-code-regex { color: var(--color-code-regex) }
.bg-code-regex { background-color: var(--color-code-regex) }
.border-code-regex { border-color: var(--color-code-regex) }
.text-code-property { color: var(--color-code-property) }
.bg-code-property { background-color: var(--color-code-property) }
.border-code-property { border-color: var(--color-code-property) }
.text-code-prolog { color: var(--color-code-prolog) }
.bg-code-prolog { background-color: var(--color-code-prolog) }
.border-code-prolog { border-color: var(--color-code-prolog) }
.text-code-rule { color: var(--color-code-rule) }
.bg-code-rule { background-color: var(--color-code-rule) }
.border-code-rule { border-color: var(--color-code-rule) }
.text-code-number { color: var(--color-code-number) }
.bg-code-number { background-color: var(--color-code-number) }
.border-code-number { border-color: var(--color-code-number) }
.text-code-symbol { color: var(--color-code-symbol) }
.bg-code-symbol { background-color: var(--color-code-symbol) }
.border-code-symbol { border-color: var(--color-code-symbol) }
.text-code-cdata { color: var(--color-code-cdata) }
.bg-code-cdata { background-color: var(--color-code-cdata) }
.border-code-cdata { border-color: var(--color-code-cdata) }
.text-code-inserted { color: var(--color-code-inserted) }
.bg-code-inserted { background-color: var(--color-code-inserted) }
.border-code-inserted { border-color: var(--color-code-inserted) }
.text-code-punctuation { color: var(--color-code-punctuation) }
.bg-code-punctuation { background-color: var(--color-code-punctuation) }
.border-code-punctuation { border-color: var(--color-code-punctuation) }
.text-code-boolean { color: var(--color-code-boolean) }
.bg-code-boolean { background-color: var(--color-code-boolean) }
.border-code-boolean { border-color: var(--color-code-boolean) }
.text-code-keyword { color: var(--color-code-keyword) }
.bg-code-keyword { background-color: var(--color-code-keyword) }
.border-code-keyword { border-color: var(--color-code-keyword) }
.text-code-entity { color: var(--color-code-entity) }
.bg-code-entity { background-color: var(--color-code-entity) }
.border-code-entity { border-color: var(--color-code-entity) }
.text-code-atrule { color: var(--color-code-atrule) }
.bg-code-atrule { background-color: var(--color-code-atrule) }
.border-code-atrule { border-color: var(--color-code-atrule) }
.text-code-selector { color: var(--color-code-selector) }
.bg-code-selector { background-color: var(--color-code-selector) }
.border-code-selector { border-color: var(--color-code-selector) }
.text-code-class-name { color: var(--color-code-class-name) }
.bg-code-class-name { background-color: var(--color-code-class-name) }
.border-code-class-name { border-color: var(--color-code-class-name) }
.text-code-namespace { color: var(--color-code-namespace) }
.bg-code-namespace { background-color: var(--color-code-namespace) }
.border-code-namespace { border-color: var(--color-code-namespace) }
.text-code-string { color: var(--color-code-string) }
.bg-code-string { background-color: var(--color-code-string) }
.border-code-string { border-color: var(--color-code-string) }
.text-code-attr-value { color: var(--color-code-attr-value) }
.bg-code-attr-value { background-color: var(--color-code-attr-value) }
.border-code-attr-value { border-color: var(--color-code-attr-value) }
.text-code-doctype { color: var(--color-code-doctype) }
.bg-code-doctype { background-color: var(--color-code-doctype) }
.border-code-doctype { border-color: var(--color-code-doctype) }
.text-code-constant { color: var(--color-code-constant) }
.bg-code-constant { background-color: var(--color-code-constant) }
.border-code-constant { border-color: var(--color-code-constant) }
/* manifest utilities */

@layer utilities {
.bg-page { background-color: var(--color-page) }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.text-content-stark { color: var(--color-content-stark) }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.border-line { border-color: var(--color-line) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}

@layer utilities {
.bg-page { background-color: var(--color-page) }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.text-content-stark { color: var(--color-content-stark) }

.\!text-content-stark { color: var(--color-content-stark) !important }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.border-line { border-color: var(--color-line) }

.bg-brand-surface\/50 { background-color: color-mix(in oklch, var(--color-brand-surface) 50%, transparent) }

.dark\:bg-brand-surface\/35 { background-color: color-mix(in oklch, var(--color-brand-surface) 35%, transparent) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}

@layer utilities {
.text-content-stark { color: var(--color-content-stark) }

.\!text-content-stark { color: var(--color-content-stark) !important }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.bg-page { background-color: var(--color-page) }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.border-line { border-color: var(--color-line) }

.bg-brand-surface\/50 { background-color: color-mix(in oklch, var(--color-brand-surface) 50%, transparent) }

.dark\:bg-brand-surface\/35 { background-color: color-mix(in oklch, var(--color-brand-surface) 35%, transparent) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}

@layer utilities {
.bg-page { background-color: var(--color-page) }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.\[\&\_figure\]\:bg-surface-3 figure { background-color: var(--color-surface-3) }

.bg-surface-3\/50 { background-color: color-mix(in oklch, var(--color-surface-3) 50%, transparent) }

.text-content-stark { color: var(--color-content-stark) }

.\!text-content-stark { color: var(--color-content-stark) !important }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.border-line { border-color: var(--color-line) }

.\[\&\_figure\]\:border-line figure { border-color: var(--color-line) }

.bg-brand-surface\/50 { background-color: color-mix(in oklch, var(--color-brand-surface) 50%, transparent) }

.dark\:bg-brand-surface\/35 { background-color: color-mix(in oklch, var(--color-brand-surface) 35%, transparent) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}

@layer utilities {
.bg-page { background-color: var(--color-page) }

.\!bg-page { background-color: var(--color-page) !important }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.text-content-stark { color: var(--color-content-stark) }

.\!text-content-stark { color: var(--color-content-stark) !important }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.border-line { border-color: var(--color-line) }

.bg-brand-surface\/50 { background-color: color-mix(in oklch, var(--color-brand-surface) 50%, transparent) }

.dark\:bg-brand-surface\/35 { background-color: color-mix(in oklch, var(--color-brand-surface) 35%, transparent) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}

@layer utilities {
.bg-page { background-color: var(--color-page) }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.dark\:bg-surface-3 {
    &.dark {
        background-color: var(--color-surface-3)
    }
}

.text-content-stark { color: var(--color-content-stark) }

.\!text-content-stark { color: var(--color-content-stark) !important }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.border-line { border-color: var(--color-line) }

.bg-brand-surface\/50 { background-color: color-mix(in oklch, var(--color-brand-surface) 50%, transparent) }

.dark\:bg-brand-surface\/35 { background-color: color-mix(in oklch, var(--color-brand-surface) 35%, transparent) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}

@layer utilities {
.bg-page { background-color: var(--color-page) }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-2\/80 { background-color: color-mix(in oklch, var(--color-surface-2) 80%, transparent) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.text-content-stark { color: var(--color-content-stark) }

.\!text-content-stark { color: var(--color-content-stark) !important }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.border-line { border-color: var(--color-line) }

.bg-brand-surface\/50 { background-color: color-mix(in oklch, var(--color-brand-surface) 50%, transparent) }

.dark\:bg-brand-surface\/35 { background-color: color-mix(in oklch, var(--color-brand-surface) 35%, transparent) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}

@layer utilities {
.bg-page { background-color: var(--color-page) }

.bg-page\/65 { background-color: color-mix(in oklch, var(--color-page) 65%, transparent) }

.bg-surface-1 { background-color: var(--color-surface-1) }

.open\:bg-surface-1 {
    &:is([open], :popover-open, :open) {
        background-color: var(--color-surface-1)
    }
}

.\[\&\_tr\:hover\]\:bg-surface-1 tr:hover { background-color: var(--color-surface-1) }

.bg-surface-2 { background-color: var(--color-surface-2) }

.bg-surface-3 { background-color: var(--color-surface-3) }

.text-content-stark { color: var(--color-content-stark) }

.\!text-content-stark { color: var(--color-content-stark) !important }

.hover\:text-content-stark:hover { color: var(--color-content-stark) }

.text-content-neutral { color: var(--color-content-neutral) }

.hover\:text-content-neutral:hover { color: var(--color-content-neutral) }

.text-content-subtle { color: var(--color-content-subtle) }

.border-line { border-color: var(--color-line) }

.bg-brand-surface\/50 { background-color: color-mix(in oklch, var(--color-brand-surface) 50%, transparent) }

.dark\:bg-brand-surface\/35 { background-color: color-mix(in oklch, var(--color-brand-surface) 35%, transparent) }

.text-brand-content { color: var(--color-brand-content) }

.text-accent-content { color: var(--color-accent-content) }

.fill-accent-content { fill: var(--color-accent-content) }

.p-viewport-padding { padding: var(--spacing-viewport-padding) }

.px-viewport-padding { padding-left: var(--spacing-viewport-padding); padding-right: var(--spacing-viewport-padding) }

.peer-invalid\:disabled {
    &.peer:invalid ~ {
opacity: .5;
        cursor: default;
        pointer-events: none
    }
}

.peer-invalid\:disabled {
    &.peer:invalid ~ {
cursor:default;opacity:.5;pointer-events:none
    }
}

@media (min-width: 768px) { .md\:row {
display:flex
} }

@media (min-width: 1024px) { .lg\:row {
display:flex
} }

@media (min-width: 768px) { .md\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:row {
flex-flow:row nowrap
} }

@media (min-width: 1024px) { .lg\:col {
display:flex
} }

@media (min-width: 1024px) { .lg\:col {
flex-flow:column nowrap
} }
}