/* Faunder UI 0.2.15 */
/* src/reset.css */
:where(*) {
  box-sizing: border-box;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  text-decoration: none;
}

:where(body) {
  background: var(--white);
  color: var(--neutral-900);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

/* src/color.css */
:root {
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --focus: oklch(51.1% .262 276.966);
  --neutral-50: oklch(98.5% .001 106.423);
  --neutral-100: oklch(97% .001 106.424);
  --neutral-150: oklch(94.65% .002 77.571);
  --neutral-200: oklch(92.3% .003 48.717);
  --neutral-250: oklch(89.6% .004 52.541);
  --neutral-300: oklch(86.9% .005 56.366);
  --neutral-350: oklch(78.9% .007 56.313);
  --neutral-400: oklch(70.9% .01 56.259);
  --neutral-450: oklch(63.1% .011 57.165);
  --neutral-500: oklch(55.3% .013 58.071);
  --neutral-550: oklch(49.85% .012 65.855);
  --neutral-600: oklch(44.4% .011 73.639);
  --neutral-650: oklch(40.9% .01 70.599);
  --neutral-700: oklch(37.4% .01 67.558);
  --neutral-750: oklch(32.1% .009 50.928);
  --neutral-800: oklch(26.8% .007 34.298);
  --neutral-850: oklch(24.2% .007 45.171);
  --neutral-900: oklch(21.6% .006 56.043);
  --neutral-950: oklch(14.7% .004 49.25);
   --primary-50: oklch(96.2% .018 272.314);
   --primary-100: oklch(93% .034 272.788);
   --primary-150: oklch(90% .05 273.413);
   --primary-200: oklch(87% .065 274.039);
   --primary-250: oklch(82.75% .09 274.376);
   --primary-300: oklch(78.5% .115 274.713);
   --primary-350: oklch(72.9% .148 275.824);
   --primary-400: oklch(67.3% .182 276.935);
   --primary-450: oklch(62.9% .208 277.026);
   --primary-500: oklch(58.5% .233 277.117);
   --primary-550: oklch(54.8% .247 277.042);
   --primary-600: oklch(51.1% .262 276.966);
   --primary-650: oklch(48.4% .251 276.995);
   --primary-700: oklch(45.7% .24 277.023);
   --primary-750: oklch(42.75% .217 277.195);
   --primary-800: oklch(39.8% .195 277.366);
   --primary-850: oklch(37.85% .169 278.032);
   --primary-900: oklch(35.9% .144 278.697);
   --primary-950: oklch(25.7% .09 281.288);
   --secondary-50: oklch(98% .015 65);
   --secondary-100: oklch(95% .035 65);
   --secondary-150: oklch(92% .052 65);
   --secondary-200: oklch(89% .068 65);
   --secondary-250: oklch(85% .09 65);
   --secondary-300: oklch(81% .112 65);
   --secondary-350: oklch(76% .14 65);
   --secondary-400: oklch(71% .168 65);
   --secondary-450: oklch(67% .19 65);
   --secondary-500: oklch(63% .212 65);
   --secondary-550: oklch(60% .22 65);
   --secondary-600: oklch(57% .228 65);
   --secondary-650: oklch(54% .22 65);
   --secondary-700: oklch(51% .212 65);
   --secondary-750: oklch(48% .195 65);
   --secondary-800: oklch(45% .178 65);
   --secondary-850: oklch(42% .161 65);
   --secondary-900: oklch(39% .144 65);
   --secondary-950: oklch(28% .1 65);
  --error-50: oklch(97.1% .013 17.38);
  --error-100: oklch(93.6% .032 17.717);
  --error-150: oklch(91.05% .047 18.025);
  --error-200: oklch(88.5% .062 18.334);
  --error-250: oklch(84.65% .088 18.952);
  --error-300: oklch(80.8% .114 19.571);
  --error-350: oklch(75.6% .152 20.894);
  --error-400: oklch(70.4% .191 22.216);
  --error-450: oklch(67.05% .214 23.774);
  --error-500: oklch(63.7% .237 25.331);
  --error-550: oklch(60.7% .241 26.328);
  --error-600: oklch(57.7% .245 27.325);
  --error-650: oklch(54.1% .229 27.421);
  --error-700: oklch(50.5% .213 27.518);
  --error-750: oklch(47.45% .195 27.208);
  --error-800: oklch(44.4% .177 26.899);
  --error-850: oklch(42% .159 26.311);
  --error-900: oklch(39.6% .141 25.723);
  --error-950: oklch(25.8% .092 26.042);
  --warning-50: oklch(98.7% .022 95.277);
  --warning-100: oklch(96.2% .059 95.617);
  --warning-150: oklch(94.3% .089 95.682);
  --warning-200: oklch(92.4% .12 95.746);
  --warning-250: oklch(90.15% .145 93.675);
  --warning-300: oklch(87.9% .169 91.605);
  --warning-350: oklch(85.35% .179 88.017);
  --warning-400: oklch(82.8% .189 84.429);
  --warning-450: oklch(79.85% .189 77.255);
  --warning-500: oklch(76.9% .188 70.08);
  --warning-550: oklch(73.1% .18 65.5);
  --warning-600: oklch(69.3% .172 60.92);
  --warning-650: oklch(64.2% .16 58.5);
  --warning-700: oklch(59.1% .148 56.08);
  --warning-750: oklch(54.5% .135 54.2);
  --warning-800: oklch(49.9% .122 52.32);
  --warning-850: oklch(46.5% .11 51.1);
  --warning-900: oklch(43.1% .098 49.88);
  --warning-950: oklch(28.2% .064 48.5);
  --success-50: oklch(97.5% .015 145.5);
  --success-100: oklch(94.2% .035 146.2);
  --success-150: oklch(91.5% .052 146.8);
  --success-200: oklch(88.8% .069 147.4);
  --success-250: oklch(85.2% .092 148.1);
  --success-300: oklch(81.6% .115 148.8);
  --success-350: oklch(76.8% .145 149.5);
  --success-400: oklch(72% .175 150.2);
  --success-450: oklch(68.5% .198 150.8);
  --success-500: oklch(65% .221 151.4);
  --success-550: oklch(61.8% .235 151.9);
  --success-600: oklch(58.6% .249 152.4);
  --success-650: oklch(55.1% .238 152.2);
  --success-700: oklch(51.6% .227 152);
  --success-750: oklch(48.2% .205 151.5);
  --success-800: oklch(44.8% .183 151);
  --success-850: oklch(42.3% .165 150.6);
  --success-900: oklch(39.8% .147 150.2);
  --success-950: oklch(25.9% .096 149.5);
}

/* src/focus.css */
:where(:focus-visible) {
  --focus-outline: 2px solid var(--focus);
  --focus-outline-offset: 2px;
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* src/hr.css */
:where(hr:not([ui-off])) {
  border: none;
  background: var(--grey-200);
  height: 1px;
}

/* src/icon.css */
:root {
  --ui-icon-spinner: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M136%2C32V64a8%2C8%2C0%2C0%2C1-16%2C0V32a8%2C8%2C0%2C0%2C1%2C16%2C0Zm37.25%2C58.75a8%2C8%2C0%2C0%2C0%2C5.66-2.35l22.63-22.62a8%2C8%2C0%2C0%2C0-11.32-11.32L167.6%2C77.09a8%2C8%2C0%2C0%2C0%2C5.65%2C13.66ZM224%2C120H192a8%2C8%2C0%2C0%2C0%2C0%2C16h32a8%2C8%2C0%2C0%2C0%2C0-16Zm-45.09%2C47.6a8%2C8%2C0%2C0%2C0-11.31%2C11.31l22.62%2C22.63a8%2C8%2C0%2C0%2C0%2C11.32-11.32ZM128%2C184a8%2C8%2C0%2C0%2C0-8%2C8v32a8%2C8%2C0%2C0%2C0%2C16%2C0V192A8%2C8%2C0%2C0%2C0%2C128%2C184ZM77.09%2C167.6%2C54.46%2C190.22a8%2C8%2C0%2C0%2C0%2C11.32%2C11.32L88.4%2C178.91A8%2C8%2C0%2C0%2C0%2C77.09%2C167.6ZM72%2C128a8%2C8%2C0%2C0%2C0-8-8H32a8%2C8%2C0%2C0%2C0%2C0%2C16H64A8%2C8%2C0%2C0%2C0%2C72%2C128ZM65.78%2C54.46A8%2C8%2C0%2C0%2C0%2C54.46%2C65.78L77.09%2C88.4A8%2C8%2C0%2C0%2C0%2C88.4%2C77.09Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

:where([ui-icon~="caret-down"]) {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
}

:where([ui-icon~="heart"]) {
  --ui-icon-open-rotate: 90deg;
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z'%3E%3C/path%3E%3C/svg%3E");
}

:where([ui-icon~="star"]) {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E");
}

:where([ui-icon~="plus"]) {
  --ui-icon-open-rotate: 135deg;
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'%3E%3C/path%3E%3C/svg%3E");
}

:where([ui-icon~="x"]) {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'%3E%3C/path%3E%3C/svg%3E");
}

:where([ui-icon~="spinner"]) {
  --ui-icon: var(--ui-icon-spinner);
  animation: ui-loading 1s linear infinite;
}

:where([ui-icon~="download-simple"]) {
  --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M228%2C144v64a12%2C12%2C0%2C0%2C1-12%2C12H40a12%2C12%2C0%2C0%2C1-12-12V144a12%2C12%2C0%2C0%2C1%2C24%2C0v52H204V144a12%2C12%2C0%2C0%2C1%2C24%2C0Zm-108.49%2C8.49a12%2C12%2C0%2C0%2C0%2C17%2C0l40-40a12%2C12%2C0%2C0%2C0-17-17L140%2C115V32a12%2C12%2C0%2C0%2C0-24%2C0v83L96.49%2C95.51a12%2C12%2C0%2C0%2C0-17%2C17Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

@keyframes ui-loading {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

:where([ui-icon]):where(i) {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  mask-image: var(--ui-icon, none);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
  width: var(--ui-icon-size, 20px);
  height: var(--ui-icon-size, 20px);
  line-height: 0;
}

:where([ui-icon]):where(svg) {
  fill: currentColor;
  width: var(--ui-icon-size, 20px);
  height: var(--ui-icon-size, 20px);
}

:where([ui-icon]):where(img) {
  width: var(--ui-icon-size, 20px);
  height: var(--ui-icon-size, 20px);
  object-fit: contain;
}

:where([ui-icon]):where(span) {
  width: var(--ui-icon-size, 20px);
  height: var(--ui-icon-size, 20px);
  font-size: var(--ui-icon-size, 20px);
  line-height: 1;
}

:where([ui-icon]):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]):before {
  display: inline-block;
  flex-shrink: 0;
  mask-image: var(--ui-icon, none);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
  width: var(--ui-icon-size, 20px);
  height: var(--ui-icon-size, 20px);
  content: "";
}

:where([ui-icon]):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]):where([ui-icon~="-"]):before {
  background-color: #0000;
}

:where([ui-icon]):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"])[ui-icon~="trailing"]:before {
  order: 1;
}

:where([ui-icon]):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]):where([ui-button~="xs"]):before {
  --ui-icon-size: 12px;
}

:where([ui-icon]):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]):where([ui-button~="sm"]):before {
  --ui-icon-size: 16px;
}

:where([ui-icon]):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]):where([ui-button~="lg"]):before {
  --ui-icon-size: 24px;
}

:where([ui-icon]):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]):where([ui-button~="xl"]):before {
  --ui-icon-size: 32px;
}

:where([ui-icon]):where([ui-icon~="xs"]) {
  --ui-icon-size: 12px;
}

:where([ui-icon]):where([ui-icon~="sm"]) {
  --ui-icon-size: 16px;
}

:where([ui-icon]):where([ui-icon~="lg"]) {
  --ui-icon-size: 24px;
}

:where([ui-icon]):where([ui-icon~="xl"]) {
  --ui-icon-size: 32px;
}

:where([ui-icon]):where([ui-icon~="2xl"]) {
  --ui-icon-size: 40px;
}

:where([ui-icon]):where([ui-icon~="3xl"]) {
  --ui-icon-size: 48px;
}

:where([ui-icon]):where([ui-icon~="4xl"]) {
  --ui-icon-size: 56px;
}

:where([ui-icon]):where([ui-icon~="5xl"]) {
  --ui-icon-size: 64px;
}

:where([ui-icon]):where([ui-icon~="6xl"]) {
  --ui-icon-size: 80px;
}

/* src/inline.css */
:where(strong:not([ui-off])) {
  font-weight: 600;
}

:where(b:not([ui-off])) {
  font-weight: 600;
}

:where(em:not([ui-off])) {
  font-style: italic;
}

:where(i:not([ui-off])) {
  font-style: italic;
}

:where(small:not([ui-off])) {
  font-size: .875rem;
}

:where(mark:not([ui-off])) {
  background-color: var(--neutral-100);
  padding: 2px 4px;
}

:where(del:not([ui-off])) {
  text-decoration: line-through;
}

:where(s:not([ui-off])) {
  text-decoration: line-through;
}

:where(ins:not([ui-off])) {
  text-decoration: underline;
}

:where(u:not([ui-off])) {
  text-decoration: underline;
}

:where(sub:not([ui-off])) {
  vertical-align: sub;
  font-size: .75em;
  line-height: 0;
}

:where(sup:not([ui-off])) {
  vertical-align: super;
  font-size: .75em;
  line-height: 0;
}

:where(kbd:not([ui-off])) {
  box-shadow: 0 1px 0 oklch(from var(--neutral-900) l c h / 10%);
  border: 1px solid var(--neutral-300);
  border-radius: 4px;
  background-color: var(--neutral-50);
  padding: 2px 6px;
  font-size: .875em;
  font-family: ui-monospace, monospace;
}

:where(abbr:not([ui-off])) {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
}

:where(q:not([ui-off])) {
  quotes: "«" "»" "‹" "›";
}

:where(q:not([ui-off])):before {
  content: open-quote;
}

:where(q:not([ui-off])):after {
  content: close-quote;
}

:where(cite:not([ui-off])) {
  font-style: italic;
}

:where(samp:not([ui-off])) {
  font-size: .875em;
  font-family: ui-monospace, monospace;
}

:where(var:not([ui-off])) {
  font-style: italic;
  font-size: .875em;
  font-family: ui-monospace, monospace;
}

/* src/code.css */
:where(code:not([ui-off]):not(pre > code)) {
  border-radius: 4px;
  background-color: var(--neutral-900);
  padding: 2px 6px;
  color: var(--white);
  font-size: .875em;
  font-family: ui-monospace, monospace;
}

:where(pre:not([ui-off]):has( > code)) {
  border-radius: 12px;
  background-color: var(--neutral-900);
  padding: 8px 16px;
  color: var(--white);
  font-size: .875em;
  font-family: ui-monospace, monospace;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

:where(pre:not([ui-off]):has( > code)) > :where(code) {
  display: block;
}

:where(pre:not([ui-off]):has( > code)):where([ui-code~="scroll"]) {
  overflow: auto;
  white-space: pre;
}

/* src/link.css */
:where(a:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card]), [ui-link]:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card])) {
  color: var( --primary-800);
  text-decoration: underline;
}

:where(a:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card]), [ui-link]:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card])):where(:hover) {
  color: var( --primary-600);
}

:where(a:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card]), [ui-link]:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card])):where(:active) {
  color: var( --primary-500);
}

:where(a:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card]), [ui-link]:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card])):where([ui-link~="inherit"]) {
  color: inherit;
}

:where(a:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card]), [ui-link]:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card])):where([ui-link~="inherit"]):where(:hover) {
  color: var( --primary-600);
}

:where(a:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card]), [ui-link]:not([ui-off]):not([ui-button]):not([ui-badge]):not([ui-card])):where([ui-link~="inherit"]):where(:active) {
  color: var( --primary-500);
}

/* src/heading.css */
:where([ui-heading], h1, h2, h3, h4, h5, h6, legend):where(:not([ui-off])) {
  display: block;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
}

:where([ui-heading], h1, h2, h3, h4, h5, h6, legend):where(:not([ui-off])):where([ui-heading~="xs"]) {
  font-size: .75rem;
  line-height: 1.5;
}

:where([ui-heading], h1, h2, h3, h4, h5, h6, legend):where(:not([ui-off])):where([ui-heading~="sm"]) {
  font-size: .875rem;
  line-height: 1.4;
}

:where([ui-heading], h1, h2, h3, h4, h5, h6, legend):where(:not([ui-off])):where([ui-heading~="lg"]) {
  font-size: 1.375rem;
  line-height: 1.25;
}

:where([ui-heading], h1, h2, h3, h4, h5, h6, legend):where(:not([ui-off])):where([ui-heading~="xl"]) {
  font-size: 1.75rem;
  line-height: 1.2;
}

:where([ui-heading], h1, h2, h3, h4, h5, h6, legend):where(:not([ui-off])):where([ui-heading~="xxl"]) {
  font-size: 2.25rem;
  line-height: 1.1;
}

/* src/list.css */
:where(ul:not([ui-off]), ol:not([ui-off])) {
  padding-left: 40px;
}

:where(ul[ui-off], ol[ui-off]) {
  padding: 0;
  list-style: none;
}

/* src/input.css */
:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select) {
  display: inline-block;
  box-sizing: border-box;
  box-shadow: inset 0 4px 8px -4px var(--neutral-200), 0 4px 12px -4px oklch(from var(--black) l c h / 5%);
  border: 1px solid var(--neutral-400);
  border-radius: 8px;
  background: var(--white);
  padding: 8px 12px;
  width: 100%;
  max-width: 100%;
  color: var(--neutral-900);
  font-size: 16px;
  font-family: inherit;
  text-decoration: none;
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where(:hover) {
  border-color: var(--neutral-400);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where(:user-valid) {
  border-color: var(--success-700);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where([aria-invalid="false"]) {
  border-color: var(--success-700);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where(:user-invalid) {
  border-color: var(--error-700);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where([aria-invalid="true"]) {
  border-color: var(--error-700);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
  color: var(--neutral-500);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select)::placeholder {
  color: var(--neutral-500);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where(:disabled)::placeholder {
  color: var(--neutral-500);
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where([ui-input~="xs"]) {
  border-radius: 4px;
  padding: 2px 6px;
  min-height: 20px;
  font-size: .75rem;
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where([ui-input~="sm"]) {
  border-radius: 6px;
  padding: 4px 8px;
  min-height: 24px;
  font-size: .875rem;
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where([ui-input~="lg"]) {
  border-radius: 10px;
  padding: 12px 16px;
  min-height: 48px;
  font-size: 1.125rem;
}

:where(:not([ui-button]):not([ui-off])):where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[list="datalist"], textarea, select):where([ui-input~="xl"]) {
  border-radius: 10px;
  padding: 16px 20px;
  min-height: 60px;
  font-size: 1.125rem;
}

/* src/select.css */
:where(select:not([ui-off])) {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='0' y='0' width='28' height='28' fill='%23E9E9E9' rx='4'/%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 6px center;
  background-size: 28px 28px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

:where(select:not([ui-off])):where(:hover) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='0' y='0' width='28' height='28' fill='%23EEEEEE' rx='4'/%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:where(select:not([ui-off])):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M10 12 L14 16 L18 12' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 6px center;
  background-size: 28px 28px;
  background-repeat: no-repeat;
  background-color: var(--neutral-200);
  color: var(--neutral-500);
}

/* src/accordion.css */
:where([ui-accordion] details) {
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}

:where([ui-accordion] details):where(:first-child) {
  padding-top: 0;
}

:where([ui-accordion] details):where(:last-child) {
  padding-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
  :where([ui-accordion] details) {
    interpolate-size: allow-keywords;
  }
}

:where([ui-accordion] details)::details-content {
  opacity: 0;
  transition: content-visibility .25s ease-out allow-discrete, opacity .25s ease-out, block-size .25s ease-out;
  block-size: 0;
  overflow-y: clip;
}

:where([ui-accordion] details)[open]::details-content {
  opacity: 1;
  block-size: auto;
}

:where([ui-accordion] details):where(:not(:first-child)) {
  border-top: 1px solid var(--neutral-200);
}

:where([ui-accordion] details) :where(summary) {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
  cursor: pointer;
  font-weight: 600;
}

:where([ui-accordion] details) :where(summary):before {
  display: inline-block;
  flex-shrink: 0;
  order: 1;
  transform-origin: center;
  mask-image: var(--ui-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"));
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: rotate .2s;
  background-color: currentColor;
  width: var(--ui-icon-size, 20px);
  height: var(--ui-icon-size, 20px);
  content: "";
}

:where([ui-accordion] details) :where(details[open] > summary):before {
  rotate: var(--ui-icon-open-rotate, 180deg);
}

:where([ui-accordion~="leading-icon"] summary) {
  justify-content: start;
}

:where([ui-accordion~="leading-icon"] summary):before {
  order: 0;
}

/* src/card.css */
:where([ui-card]) {
  box-shadow: 0 0 32px oklch(from var(--neutral-950) l c h / 2%);
  border: 1px solid var(--neutral-200);
  border-radius: 1rem;
  background-color: var(--neutral-100);
  padding: 1.5rem;
}

:where([ui-card]):where(a) {
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

:where([ui-card]):where(a):hover {
  background-color: var(--neutral-50);
}

:where([ui-card]):where(a):active {
  background-color: color-mix(in oklch, var(--neutral-50), var(--white));
}

:where([ui-card]):where([ui-card~="white"]) {
  background-color: var(--white);
}

:where([ui-card]):where([ui-card~="white"]):where(a):hover {
  background-color: var(--neutral-50);
}

:where([ui-card]):where([ui-card~="white"]):where(a):active {
  background-color: color-mix(in oklch, var(--neutral-50), var(--white));
}

:where([ui-card]):where([ui-card~="bleed"]) {
  margin-inline-start: calc(-1.5rem - 2px);
  margin-inline-end: calc(-1.5rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="xs"]) {
  margin-inline-start: calc(-.25rem - 2px);
  margin-inline-end: calc(-.25rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="sm"]) {
  margin-inline-start: calc(-.5rem - 2px);
  margin-inline-end: calc(-.5rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="md"]) {
  margin-inline-start: calc(-1rem - 2px);
  margin-inline-end: calc(-1rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="lg"]) {
  margin-inline-start: calc(-1.5rem - 2px);
  margin-inline-end: calc(-1.5rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="xl"]) {
  margin-inline-start: calc(-2.5rem - 2px);
  margin-inline-end: calc(-2.5rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="2xl"]) {
  margin-inline-start: calc(-4rem - 2px);
  margin-inline-end: calc(-4rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="3xl"]) {
  margin-inline-start: calc(-6rem - 2px);
  margin-inline-end: calc(-6rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="4xl"]) {
  margin-inline-start: calc(-8rem - 2px);
  margin-inline-end: calc(-8rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="5xl"]) {
  margin-inline-start: calc(-12rem - 2px);
  margin-inline-end: calc(-12rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="6xl"]) {
  margin-inline-start: calc(-16rem - 2px);
  margin-inline-end: calc(-16rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-xs"]) {
  margin-inline-start: calc(-.25rem - 2px);
  margin-inline-end: calc(-.25rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-sm"]) {
  margin-inline-start: calc(-.5rem - 2px);
  margin-inline-end: calc(-.5rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-md"]) {
  margin-inline-start: calc(-1rem - 2px);
  margin-inline-end: calc(-1rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-lg"]) {
  margin-inline-start: calc(-1.5rem - 2px);
  margin-inline-end: calc(-1.5rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-xl"]) {
  margin-inline-start: calc(-2.5rem - 2px);
  margin-inline-end: calc(-2.5rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-2xl"]) {
  margin-inline-start: calc(-4rem - 2px);
  margin-inline-end: calc(-4rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-3xl"]) {
  margin-inline-start: calc(-6rem - 2px);
  margin-inline-end: calc(-6rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-4xl"]) {
  margin-inline-start: calc(-8rem - 2px);
  margin-inline-end: calc(-8rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-5xl"]) {
  margin-inline-start: calc(-12rem - 2px);
  margin-inline-end: calc(-12rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="inline-6xl"]) {
  margin-inline-start: calc(-16rem - 2px);
  margin-inline-end: calc(-16rem - 2px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-xs"]) {
  margin-left: calc(-.25rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-sm"]) {
  margin-left: calc(-.5rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-md"]) {
  margin-left: calc(-1rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-lg"]) {
  margin-left: calc(-1.5rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-xl"]) {
  margin-left: calc(-2.5rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-2xl"]) {
  margin-left: calc(-4rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-3xl"]) {
  margin-left: calc(-6rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-4xl"]) {
  margin-left: calc(-8rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-5xl"]) {
  margin-left: calc(-12rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="left-6xl"]) {
  margin-left: calc(-16rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-xs"]) {
  margin-right: calc(-.25rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-sm"]) {
  margin-right: calc(-.5rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-md"]) {
  margin-right: calc(-1rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-lg"]) {
  margin-right: calc(-1.5rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-xl"]) {
  margin-right: calc(-2.5rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-2xl"]) {
  margin-right: calc(-4rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-3xl"]) {
  margin-right: calc(-6rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-4xl"]) {
  margin-right: calc(-8rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-5xl"]) {
  margin-right: calc(-12rem - 1px);
}

:where([ui-card]):where([ui-card~="bleed"][ui-padding~="right-6xl"]) {
  margin-right: calc(-16rem - 1px);
}

/* src/button.css */
:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ) {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: .25em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--white), inset 0 -2px 4px -1px var(--neutral-200), 0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-400);
  border-bottom-color: var(--neutral-500);
  border-radius: 8px;
  background: linear-gradient(to bottom, var(--neutral-150), var(--neutral-250));
  padding: 6px 16px;
  min-height: 42px;
  color: var(--neutral-950);
  font-weight: 500;
  font-size: 1rem;
  user-select: none;
  text-decoration: none;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where(:hover) {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where(:active) {
  box-shadow: inset 0 -2px 4px -1px var(--neutral-150), 0 4px 8px -4px oklch(from var(--black) l c h / 10%);
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-150));
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where(:has(:checked)) {
  box-shadow: inset 0 -2px 4px -1px var(--neutral-150), 0 4px 8px -4px oklch(from var(--black) l c h / 10%);
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-150));
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-400);
  background: var(--neutral-300);
  color: var(--neutral-500);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([aria-busy="true"]) {
  --ui-loading-color: var(--black);
  position: relative;
  box-shadow: inset 0 -2px 4px -1px var(--neutral-150), 0 4px 8px -4px oklch(from var(--black) l c h / 10%);
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-150));
  pointer-events: none;
  color: #0000;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([aria-busy="true"]):where( >  > *) {
  opacity: 0;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([aria-busy="true"]):after {
  display: block;
  position: absolute;
  mask-image: var(--ui-icon-spinner);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  animation: ui-loading 1s linear infinite;
  margin: auto;
  inset: 0;
  background-color: var(--ui-loading-color);
  aspect-ratio: 1;
  width: 1.25em;
  content: "";
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="primary"]) {
  box-shadow: inset 0 1px 0 0 var( --primary-500), inset 0 -2px 4px -1px var( --primary-900), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-900);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-900));
  color: var( --primary-50);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="primary"]):where(:hover) {
  background: linear-gradient(to bottom, var( --primary-750), var( --primary-850));
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="primary"]):where(:active) {
  box-shadow: inset 0 -2px 4px -1px var( --primary-900), 0 4px 8px -4px oklch(from var(--black) l c h / 30%);
  background: linear-gradient(to bottom, var( --primary-650), var( --primary-750));
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="primary"]):where(:has(:checked)) {
  box-shadow: inset 0 -2px 4px -1px var( --primary-900), 0 4px 8px -4px oklch(from var(--black) l c h / 30%);
  background: linear-gradient(to bottom, var( --primary-650), var( --primary-750));
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="primary"]):where(:disabled) {
  box-shadow: none;
  border-color: var(--neutral-900);
  background: oklch(from var( --primary-800) l calc(c * .25) h);
  color: oklch(from var( --primary-300) l calc(c * .25) h);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="primary"]):where([aria-busy="true"]) {
  --ui-loading-color: var(--white);
  box-shadow: inset 0 -2px 4px -1px var( --primary-900), 0 4px 8px -4px oklch(from var(--black) l c h / 30%);
  background: linear-gradient(to bottom, var( --primary-700), var( --primary-800));
  color: #0000;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="tertiary"]) {
  box-shadow: none;
  border-color: #0000;
  background: none;
  color: var(--neutral-900);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="tertiary"]):where(:hover) {
  box-shadow: none;
  border-color: oklch(from var(--neutral-950) l c h / 6%);
  background: oklch(from var(--neutral-950) l c h / 3%);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="tertiary"]):where(:active) {
  box-shadow: none;
  border-color: oklch(from var(--neutral-950) l c h / 5%);
  background: oklch(from var(--neutral-950) l c h / 2%);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="tertiary"]):where(:has(:checked)) {
  box-shadow: none;
  border-color: oklch(from var(--neutral-950) l c h / 5%);
  background: oklch(from var(--neutral-950) l c h / 2%);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="tertiary"]):where(:disabled) {
  box-shadow: none;
  border-color: oklch(from var(--neutral-950) l c h / 5%);
  background: oklch(from var(--neutral-950) l c h / 2%);
  color: var(--neutral-400);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="tertiary"]):where([aria-busy="true"]) {
  --ui-loading-color: var(--neutral-800);
  border-color: oklch(from var(--neutral-950) l c h / 5%);
  background: oklch(from var(--neutral-950) l c h / 2%);
  color: #0000;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="xs"]) {
  --ui-button-size: 12px;
  border-radius: 4px;
  padding: 1px 6px;
  min-height: 24px;
  font-size: .75rem;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="sm"]) {
  --ui-button-size: 16px;
  border-radius: 6px;
  padding: 2px 8px;
  min-height: 30px;
  font-size: .875rem;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="lg"]) {
  --ui-button-size: 24px;
  border-radius: 10px;
  padding: 8px 24px;
  min-height: 54px;
  font-size: 1.125rem;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="xl"]) {
  --ui-button-size: 32px;
  border-radius: 10px;
  padding: 8px 28px;
  min-height: 64px;
  font-size: 1.125rem;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="wide"]) {
  padding-right: 32px;
  padding-left: 32px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="wide"][ui-button~="xs"]) {
  padding-right: 16px;
  padding-left: 16px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="wide"][ui-button~="sm"]) {
  padding-right: 20px;
  padding-left: 20px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="wide"][ui-button~="md"]) {
  padding-right: 32px;
  padding-left: 32px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="wide"][ui-button~="lg"]) {
  padding-right: 40px;
  padding-left: 40px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="wide"][ui-button~="xl"]) {
  padding-right: 48px;
  padding-left: 48px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="block"]) {
  width: 100%;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="square"]) {
  padding: 3px;
  aspect-ratio: 1;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="square"][ui-button~="xs"]) {
  padding: 1px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="square"][ui-button~="sm"]) {
  padding: 2px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="square"][ui-button~="lg"]) {
  padding: 4px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="square"][ui-button~="xl"]) {
  padding: 5px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="circle"]) {
  border-radius: 50%;
  padding: 3px;
  aspect-ratio: 1;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="circle"][ui-button~="xs"]) {
  padding: 1px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="circle"][ui-button~="sm"]) {
  padding: 2px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="circle"][ui-button~="lg"]) {
  padding: 4px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="circle"][ui-button~="xl"]) {
  padding: 5px;
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="inline"]) {
  margin: -8px;
  box-shadow: none;
  border-color: #0000;
  background: none;
  padding: 8px;
  color: var(--neutral-900);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="inline"]):where(:hover) {
  box-shadow: none;
  border-color: #0000;
  background: none;
  color: var( --primary-800);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="inline"]):where(:active) {
  box-shadow: none;
  border-color: #0000;
  background: none;
  color: var( --primary-600);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="inline"]):where(:has(:checked)) {
  box-shadow: none;
  border-color: #0000;
  background: none;
  color: var( --primary-600);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="inline"]):where(:disabled) {
  box-shadow: none;
  border-color: #0000;
  background: none;
  color: var(--neutral-400);
}

:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"], ):where([ui-button~="inline"]):where([aria-busy="true"]) {
  --ui-loading-color: var(--neutral-800);
  box-shadow: none;
  border-color: #0000;
  background: none;
  color: #0000;
}

:where(input[type="checkbox"][ui-button]:not([ui-off])) {
  appearance: none;
  width: auto;
}

:where(input[type="checkbox"][ui-button]:not([ui-off])):after {
  content: attr(aria-label);
}

:where(input[type="checkbox"][ui-button]:not([ui-off])):where(:checked) {
  box-shadow: inset 0 2px 6px oklch(from var(--black) l c h / 22%), inset 0 -1px 0 var(--neutral-150);
  border-color: var(--neutral-500);
  background: var(--neutral-300);
  color: var(--neutral-850);
}

:where(input[type="checkbox"][ui-button]:not([ui-off])):where(:checked):where([ui-button~="primary"]) {
  box-shadow: inset 0 0 0 1px oklch(from var(--black) l c h / 35%), inset 0 2px 8px oklch(from var(--black) l c h / 55%), inset 0 -1px 0 var( --primary-250);
  border-color: var( --primary-950);
  background: var( --primary-900);
  color: var( --primary-100);
}

:where(input[type="checkbox"][ui-button]:not([ui-off])):where(:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

:where(input[type="radio"][ui-button]:not([ui-off])) {
  appearance: none;
  width: auto;
}

:where(input[type="radio"][ui-button]:not([ui-off])):after {
  content: attr(aria-label);
}

:where(input[type="radio"][ui-button]:not([ui-off])):where(:checked) {
  box-shadow: inset 0 2px 6px oklch(from var(--black) l c h / 22%), inset 0 -1px 0 var(--neutral-150);
  border-color: var(--neutral-500);
  background: var(--neutral-300);
  color: var(--neutral-850);
}

:where(input[type="radio"][ui-button]:not([ui-off])):where(:checked):where([ui-button~="primary"]) {
  box-shadow: inset 0 0 0 1px oklch(from var(--black) l c h / 35%), inset 0 2px 8px oklch(from var(--black) l c h / 55%), inset 0 -1px 0 var( --primary-250);
  border-color: var( --primary-950);
  background: var( --primary-900);
  color: var( --primary-100);
}

:where(input[type="radio"][ui-button]:not([ui-off])):where(:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* src/dialog.css */
:where(dialog[ui-dialog]) {
  display: none;
  transition: transform .2s ease-out, opacity .2s ease-out;
  margin: auto;
  box-shadow: inset 0 0 0 1px var(--neutral-200), 0 8px 8px -8px oklch(from var(--black) l c h / 30%);
  border: none;
  border-radius: 12px;
  background: var(--white);
  padding: 0;
  width: 800px;
  max-width: 90vw;
  max-height: 90dvh;
  overflow: hidden;
  color: var(--neutral-900);
}

:where(dialog[ui-dialog]):where([open]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  :where(dialog[ui-dialog]) {
    transform: translateY(-50px);
    opacity: 0;
  }
}

:where(dialog[ui-dialog]):where([ui-dialog~="xs"]) {
  width: 400px;
}

:where(dialog[ui-dialog]):where([ui-dialog~="sm"]) {
  width: 600px;
}

:where(dialog[ui-dialog]):where([ui-dialog~="lg"]) {
  width: 1200px;
}

:where(dialog[ui-dialog]):where([ui-dialog~="xl"]) {
  width: 1600px;
}

:where(dialog[ui-dialog]):where([ui-dialog~="left"]) {
  opacity: 1;
  transition: transform .2s ease-out;
  border-radius: 12px;
  height: calc(100dvh - 2rem);
  max-height: calc(100dvh - 2rem);
}

:where(dialog[ui-dialog]):where([ui-dialog~="right"]) {
  opacity: 1;
  transition: transform .2s ease-out;
  border-radius: 12px;
  height: calc(100dvh - 2rem);
  max-height: calc(100dvh - 2rem);
}

:where(dialog[ui-dialog]):where([ui-dialog~="right"]) {
  margin: 1rem 1rem 1rem auto;
}

:where(dialog[ui-dialog]):where([ui-dialog~="right"][open]) {
  transform: translateX(0);
}

:where(dialog[ui-dialog]):where([ui-dialog~="left"]) {
  margin: 1rem auto 1rem 1rem;
}

:where(dialog[ui-dialog]):where([ui-dialog~="left"][open]) {
  transform: translateX(0);
}

:where(dialog[ui-dialog]):where([ui-dialog~="right"][ui-dialog~="edge"]) {
  margin: 0 0 0 auto;
  border-radius: 0;
  height: 100dvh;
  max-height: 100dvh;
}

:where(dialog[ui-dialog]):where([ui-dialog~="left"][ui-dialog~="edge"]) {
  margin: 0 auto 0 0;
  border-radius: 0;
  height: 100dvh;
  max-height: 100dvh;
}

@starting-style {
  :where(dialog[ui-dialog]):where([ui-dialog~="right"]) {
    transform: translateX(100%);
  }

  :where(dialog[ui-dialog]):where([ui-dialog~="left"]) {
    transform: translateX(-100%);
  }
}

:where(dialog[ui-dialog]):where([ui-dialog~="top"]) {
  opacity: 1;
  transition: transform .2s ease-out;
  border-radius: 12px;
  max-width: calc(100% - 2rem);
  max-height: calc(90dvh - 2rem);
}

:where(dialog[ui-dialog]):where([ui-dialog~="bottom"]) {
  opacity: 1;
  transition: transform .2s ease-out;
  border-radius: 12px;
  max-width: calc(100% - 2rem);
  max-height: calc(90dvh - 2rem);
}

:where(dialog[ui-dialog]):where([ui-dialog~="top"]) {
  margin: 1rem auto auto;
}

:where(dialog[ui-dialog]):where([ui-dialog~="top"][open]) {
  transform: translateY(0);
}

:where(dialog[ui-dialog]):where([ui-dialog~="bottom"]) {
  margin: auto auto 1rem;
}

:where(dialog[ui-dialog]):where([ui-dialog~="bottom"][open]) {
  transform: translateY(0);
}

:where(dialog[ui-dialog]):where([ui-dialog~="top"][ui-dialog~="edge"]) {
  margin: 0 auto auto;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
}

:where(dialog[ui-dialog]):where([ui-dialog~="top"][ui-dialog~="edge"][open]) {
  transform: translateY(0);
}

:where(dialog[ui-dialog]):where([ui-dialog~="bottom"][ui-dialog~="edge"]) {
  margin: auto auto 0;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
}

:where(dialog[ui-dialog]):where([ui-dialog~="bottom"][ui-dialog~="edge"][open]) {
  transform: translateY(0);
}

@starting-style {
  :where(dialog[ui-dialog]):where([ui-dialog~="top"]):not([ui-dialog~="edge"]) {
    transform: translateY(-100%);
  }

  :where(dialog[ui-dialog]):where([ui-dialog~="bottom"]):not([ui-dialog~="edge"]) {
    transform: translateY(100%);
  }

  :where(dialog[ui-dialog]):where([ui-dialog~="top"][ui-dialog~="edge"]) {
    transform: translateY(-100%);
  }

  :where(dialog[ui-dialog]):where([ui-dialog~="bottom"][ui-dialog~="edge"]) {
    transform: translateY(100%);
  }
}

:where(dialog[ui-dialog])::backdrop {
  opacity: 1;
  backdrop-filter: blur(2px);
  transition: opacity .2s ease-out, backdrop-filter .2s ease-out;
  transition-behavior: allow-discrete;
  background: oklch(from var(--black) l c h / 20%);
}

@starting-style {
  :where(dialog[ui-dialog])::backdrop {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

:where(dialog[ui-dialog] > header) {
  padding: 24px 24px 8px;
}

:where(dialog[ui-dialog] > footer) {
  padding: 8px 24px 24px;
}

:where(dialog[ui-dialog~="left"] > footer) {
  margin-top: auto;
}

:where(dialog[ui-dialog~="right"] > footer) {
  margin-top: auto;
}

:where(dialog[ui-dialog~="top"] > footer) {
  margin-top: auto;
}

:where(dialog[ui-dialog~="bottom"] > footer) {
  margin-top: auto;
}

:where(dialog[ui-dialog~="top"] > :not(header):not(footer)) {
  flex: 1 1 0;
  min-height: 0;
}

:where(dialog[ui-dialog~="bottom"] > :not(header):not(footer)) {
  flex: 1 1 0;
  min-height: 0;
}

:where(dialog[ui-dialog] > :not(header):not(footer)) {
  flex: 0 auto;
  padding: 8px 24px;
  overflow-y: auto;
}

:where(dialog[ui-dialog~="left"] > :not(header):not(footer)) {
  flex: 1 1 0;
  min-height: 0;
}

:where(dialog[ui-dialog~="right"] > :not(header):not(footer)) {
  flex: 1 1 0;
  min-height: 0;
}

:where(body:has(dialog[ui-dialog][open])) {
  overflow: hidden;
}

:where(body:has(dialog[ui-dialog~="allow-page-scroll"][open])) {
  overflow: auto;
}

/* src/menu.css */
:where([ui-menu]) {
  position: relative;
  anchor-scope: --menu-trigger;
  anchor-name: --menu-trigger;
}

:where([ui-menu] > [role="menu"]) {
  position-anchor: --menu-trigger;
  position: fixed;
  margin: 0;
  inset: auto;
  box-shadow: 0 4px 12px oklch(from var(--black) l c h / 10%);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background-color: var(--white);
  min-width: max-content;
  list-style: none;
}

:where([ui-menu] > [role="menu"]:popover-open) {
  display: flex;
  flex-direction: column;
}

:where([ui-menu] > [role="menu"] > [role="menuitem"]) {
  display: flex;
  justify-content: flex-start;
  align-items:  center;
  gap: 8px;
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: none;
  padding: 8px 16px;
  color: var(--neutral-900);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}

:where([ui-menu] > [role="menu"] > [role="menuitem"]):where(:has( > .ui-icon)) {
  display: flex;
  justify-content: flex-start;
  align-items:  center;
  gap: 8px;
}

:where([ui-menu] > [role="menu"] > [role="menuitem"]):where(:hover) {
  box-shadow: none;
  background: var(--neutral-50);
  color: inherit;
}

:where([ui-menu] > [role="menu"] > [role="menuitem"]):where(:active) {
  box-shadow: none;
  background: var(--neutral-100);
  color: inherit;
}

:where([ui-menu] > [role="menu"] > [role="menuitem"]):where(:disabled) {
  cursor: default;
  color: var(--neutral-400);
}

:where([ui-menu] > [role="menu"] > [role="menuitemcheckbox"]) {
  display: flex;
  justify-content: flex-start;
  align-items:  center;
  gap: 8px;
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: none;
  padding: 8px 16px;
  color: var(--neutral-900);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}

:where([ui-menu] > [role="menu"] > [role="menuitemcheckbox"]):where(:has( > .ui-icon)) {
  display: flex;
  justify-content: flex-start;
  align-items:  center;
  gap: 8px;
}

:where([ui-menu] > [role="menu"] > [role="menuitemcheckbox"]):where(:hover) {
  box-shadow: none;
  background: var(--neutral-50);
  color: inherit;
}

:where([ui-menu] > [role="menu"] > [role="menuitemcheckbox"]):where(:active) {
  box-shadow: none;
  background: var(--neutral-100);
  color: inherit;
}

:where([ui-menu] > [role="menu"] > [role="menuitemcheckbox"]):where(:disabled) {
  cursor: default;
  color: var(--neutral-400);
}

:where([ui-menu] > [role="menu"] > [role="menuitemradio"]) {
  display: flex;
  justify-content: flex-start;
  align-items:  center;
  gap: 8px;
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: none;
  padding: 8px 16px;
  color: var(--neutral-900);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}

:where([ui-menu] > [role="menu"] > [role="menuitemradio"]):where(:has( > .ui-icon)) {
  display: flex;
  justify-content: flex-start;
  align-items:  center;
  gap: 8px;
}

:where([ui-menu] > [role="menu"] > [role="menuitemradio"]):where(:hover) {
  box-shadow: none;
  background: var(--neutral-50);
  color: inherit;
}

:where([ui-menu] > [role="menu"] > [role="menuitemradio"]):where(:active) {
  box-shadow: none;
  background: var(--neutral-100);
  color: inherit;
}

:where([ui-menu] > [role="menu"] > [role="menuitemradio"]):where(:disabled) {
  cursor: default;
  color: var(--neutral-400);
}

:where([ui-menu] > [role="menu"] > hr) {
  border: none;
  border-top: 1px solid var(--neutral-200);
  padding: 0;
}

:where([ui-menu] > [role="menu"]) {
  position-area: block-end;
  position-try-fallbacks: --bottom-to-top;
}

:where([ui-menu="bottom-left"] > [role="menu"]) {
  position-area: block-end span-inline-start;
  position-try-fallbacks: --bottom-left-fallback, --bottom-left-fallback-2, --bottom-left-fallback-3;
}

:where([ui-menu~="bottom-right"] > [role="menu"]) {
  position-area: block-end span-inline-end;
  position-try-fallbacks: --bottom-right-fallback, --bottom-right-fallback-2, --bottom-right-fallback-3;
}

:where([ui-menu~="top"] > [role="menu"]) {
  position-area: block-start;
  position-try-fallbacks: --top-to-bottom;
}

:where([ui-menu="top-left"] > [role="menu"]) {
  position-area: block-start span-inline-start;
  position-try-fallbacks: --top-left-fallback, --top-left-fallback-2, --top-left-fallback-3;
}

:where([ui-menu~="top-right"] > [role="menu"]) {
  position-area: block-start span-inline-end;
  position-try-fallbacks: --top-right-fallback, --top-right-fallback-2, --top-right-fallback-3;
}

:where([ui-menu~="left"] > [role="menu"]) {
  position-area: inline-start center;
  position-try-fallbacks: --left-to-right;
}

:where([ui-menu="left-top"] > [role="menu"]) {
  position-area: inline-start span-block-start;
  position-try-fallbacks: --left-top-fallback, --left-top-fallback-2, --left-top-fallback-3;
}

:where([ui-menu~="left-bottom"] > [role="menu"]) {
  position-area: inline-start span-block-end;
  position-try-fallbacks: --left-bottom-fallback, --left-bottom-fallback-2, --left-bottom-fallback-3;
}

:where([ui-menu~="right"] > [role="menu"]) {
  position-area: inline-end center;
  position-try-fallbacks: --right-to-left;
}

:where([ui-menu~="right-top"] > [role="menu"]) {
  position-area: inline-end span-block-start;
  position-try-fallbacks: --right-top-fallback, --right-top-fallback-2, --right-top-fallback-3;
}

:where([ui-menu~="right-bottom"] > [role="menu"]) {
  position-area: inline-end span-block-end;
  position-try-fallbacks: --right-bottom-fallback, --right-bottom-fallback-2, --right-bottom-fallback-3;
}

@position-try --bottom-to-top {
  position-area: block-start;
}

@position-try --top-to-bottom {
  position-area: block-end;
}

@position-try --left-to-right {
  position-area: inline-end center;
}

@position-try --right-to-left {
  position-area: inline-start center;
}

@position-try --bottom-left-fallback {
  position-area: block-end span-inline-end;
}

@position-try --bottom-left-fallback-2 {
  position-area: block-start span-inline-start;
}

@position-try --bottom-left-fallback-3 {
  position-area: block-start span-inline-end;
}

@position-try --bottom-right-fallback {
  position-area: block-end span-inline-start;
}

@position-try --bottom-right-fallback-2 {
  position-area: block-start span-inline-end;
}

@position-try --bottom-right-fallback-3 {
  position-area: block-start span-inline-start;
}

@position-try --top-left-fallback {
  position-area: block-start span-inline-end;
}

@position-try --top-left-fallback-2 {
  position-area: block-end span-inline-start;
}

@position-try --top-left-fallback-3 {
  position-area: block-end span-inline-end;
}

@position-try --top-right-fallback {
  position-area: block-start span-inline-start;
}

@position-try --top-right-fallback-2 {
  position-area: block-end span-inline-end;
}

@position-try --top-right-fallback-3 {
  position-area: block-end span-inline-start;
}

@position-try --left-top-fallback {
  position-area: inline-start span-block-end;
}

@position-try --left-top-fallback-2 {
  position-area: inline-end span-block-start;
}

@position-try --left-top-fallback-3 {
  position-area: inline-end span-block-end;
}

@position-try --left-bottom-fallback {
  position-area: inline-start span-block-start;
}

@position-try --left-bottom-fallback-2 {
  position-area: inline-end span-block-end;
}

@position-try --left-bottom-fallback-3 {
  position-area: inline-end span-block-start;
}

@position-try --right-top-fallback {
  position-area: inline-end span-block-end;
}

@position-try --right-top-fallback-2 {
  position-area: inline-start span-block-start;
}

@position-try --right-top-fallback-3 {
  position-area: inline-start span-block-end;
}

@position-try --right-bottom-fallback {
  position-area: inline-end span-block-start;
}

@position-try --right-bottom-fallback-2 {
  position-area: inline-start span-block-end;
}

@position-try --right-bottom-fallback-3 {
  position-area: inline-start span-block-start;
}

/* src/tooltip.css */
:where([ui-tooltip]) {
  display: inline-flex;
  position: relative;
  anchor-scope: --tooltip-anchor;
  align-items:  center;
  gap: .35rem;
}

:where([ui-tooltip] > [ui-button]) {
  position: relative;
  anchor-name: --tooltip-anchor;
}

:where([ui-tooltip] > a[ui-button]) {
  position: relative;
  anchor-name: --tooltip-anchor;
}

:where([ui-tooltip] > [role="tooltip"]) {
  position: fixed;
  position-anchor: --tooltip-anchor;
  position-area: block-start center;
  transform: translateY(-4px);
  opacity: 0;
  transition: opacity .12s, transform .15s;
  margin: 0;
  inset: auto;
  box-shadow: 0 8px 20px oklch(from var(--black) l c h / 16%);
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  background: var(--neutral-900);
  padding: 8px 10px;
  min-width: 100px;
  max-width: 280px;
  pointer-events: none;
  color: var(--white);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

:where([ui-tooltip~="bottom"] > [role="tooltip"]) {
  position-area: block-end center;
  transform: translateY(4px);
}

:where([ui-tooltip~="top"] > [role="tooltip"]) {
  position-area: block-start center;
  transform: translateY(-4px);
}

:where([ui-tooltip~="left"] > [role="tooltip"]) {
  position-area: inline-start center;
  transform: translateX(-4px);
}

:where([ui-tooltip~="right"] > [role="tooltip"]) {
  position-area: inline-end center;
  transform: translateX(4px);
}

@media (hover: hover) {
  :where([ui-tooltip]:hover > [role="tooltip"]) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  @starting-style {
    :where([ui-tooltip]:hover > [role="tooltip"]) {
      transform: translateY(-4px);
      opacity: 0;
    }
  }

  :where([ui-tooltip~="bottom"]:hover > [role="tooltip"]) {
    transform: translateY(0);
  }

  @starting-style {
    :where([ui-tooltip~="bottom"]:hover > [role="tooltip"]) {
      transform: translateY(4px);
    }
  }

  :where([ui-tooltip~="top"]:hover > [role="tooltip"]) {
    transform: translateY(0);
  }

  @starting-style {
    :where([ui-tooltip~="top"]:hover > [role="tooltip"]) {
      transform: translateY(-4px);
    }
  }

  :where([ui-tooltip~="left"]:hover > [role="tooltip"]) {
    transform: translateX(0);
  }

  @starting-style {
    :where([ui-tooltip~="left"]:hover > [role="tooltip"]) {
      transform: translateX(-4px);
    }
  }

  :where([ui-tooltip~="right"]:hover > [role="tooltip"]) {
    transform: translateX(0);
  }

  @starting-style {
    :where([ui-tooltip~="right"]:hover > [role="tooltip"]) {
      transform: translateX(4px);
    }
  }
}

:where([ui-tooltip] [ui-button~="square"]) {
  padding-right: .65rem;
  padding-left: .65rem;
}

/* src/checkbox.css */
:where(.ui-flex > input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where(.ui-flex > input[type="checkbox"]:not(:-moz-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where(.ui-flex > input[type="checkbox"]:not(:is([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[type="checkbox"]:not(:-moz-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[type="checkbox"]:not(:is([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--white), inset 0 -2px 4px -1px var(--neutral-200), 0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-400);
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--neutral-150), var(--neutral-250));
  width: 20px;
  height: 20px;
  user-select: none;
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):hover {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):user-valid {
  border-color: var(--success-700);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch])))[aria-invalid="false"] {
  border-color: var(--success-700);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):user-invalid {
  border-color: var(--error-700);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch])))[aria-invalid="true"] {
  border-color: var(--error-700);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):checked {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):indeterminate {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):checked:after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
  rotate: 40deg;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--white);
  width: 4px;
  height: 9px;
  content: "";
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):indeterminate:after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: none;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: var(--white);
  width: 10px;
  height: 0;
  content: "";
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):disabled {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):disabled:after {
  border-color: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):checked:disabled {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):indeterminate:disabled {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):checked:disabled:after {
  border-color: var(--neutral-400);
}

:where(input[type="checkbox"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):indeterminate:disabled:after {
  border-color: var(--neutral-400);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--white), inset 0 -2px 4px -1px var(--neutral-200), 0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-400);
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--neutral-150), var(--neutral-250));
  width: 20px;
  height: 20px;
  user-select: none;
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):hover {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):user-valid {
  border-color: var(--success-700);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch])))[aria-invalid="false"] {
  border-color: var(--success-700);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):user-invalid {
  border-color: var(--error-700);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch])))[aria-invalid="true"] {
  border-color: var(--error-700);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):checked {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):indeterminate {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):checked:after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
  rotate: 40deg;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--white);
  width: 4px;
  height: 9px;
  content: "";
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):indeterminate:after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: none;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: var(--white);
  width: 10px;
  height: 0;
  content: "";
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):disabled {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):disabled:after {
  border-color: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):checked:disabled {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):indeterminate:disabled {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):checked:disabled:after {
  border-color: var(--neutral-400);
}

:where(input[type="checkbox"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):indeterminate:disabled:after {
  border-color: var(--neutral-400);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--white), inset 0 -2px 4px -1px var(--neutral-200), 0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-400);
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--neutral-150), var(--neutral-250));
  width: 20px;
  height: 20px;
  user-select: none;
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):hover {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):user-valid {
  border-color: var(--success-700);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch])))[aria-invalid="false"] {
  border-color: var(--success-700);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):user-invalid {
  border-color: var(--error-700);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch])))[aria-invalid="true"] {
  border-color: var(--error-700);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):checked {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):indeterminate {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):checked:after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
  rotate: 40deg;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--white);
  width: 4px;
  height: 9px;
  content: "";
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):indeterminate:after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: none;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: var(--white);
  width: 10px;
  height: 0;
  content: "";
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):disabled {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):disabled:after {
  border-color: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):checked:disabled {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):indeterminate:disabled {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):checked:disabled:after {
  border-color: var(--neutral-400);
}

:where(input[type="checkbox"]:not(:is([ui-off], [ui-button], [ui-switch]))):indeterminate:disabled:after {
  border-color: var(--neutral-400);
}

/* src/radio.css */
:where(.ui-flex > input[type="radio"]:not(:-webkit-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where(.ui-flex > input[type="radio"]:not(:-moz-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where(.ui-flex > input[type="radio"]:not(:is([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[type="radio"]:not(:-webkit-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[type="radio"]:not(:-moz-any([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[type="radio"]:not(:is([ui-off], [ui-switch]))[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--white), inset 0 -2px 4px -1px var(--neutral-200), 0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-400);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--neutral-150), var(--neutral-250));
  width: 20px;
  height: 20px;
  user-select: none;
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:hover) {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:user-valid) {
  border-color: var(--success-700);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where([aria-invalid="false"]) {
  border-color: var(--success-700);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:user-invalid) {
  border-color: var(--error-700);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where([aria-invalid="true"]) {
  border-color: var(--error-700);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:checked) {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:checked):after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--white);
  width: 8px;
  height: 8px;
  content: "";
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:disabled):after {
  background-color: var(--neutral-500);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:checked):where(:disabled) {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="radio"]:not(:-webkit-any([ui-off], [ui-button], [ui-switch]))):where(:checked):where(:disabled):after {
  background-color: var(--neutral-400);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--white), inset 0 -2px 4px -1px var(--neutral-200), 0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-400);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--neutral-150), var(--neutral-250));
  width: 20px;
  height: 20px;
  user-select: none;
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:hover) {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:user-valid) {
  border-color: var(--success-700);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where([aria-invalid="false"]) {
  border-color: var(--success-700);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:user-invalid) {
  border-color: var(--error-700);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where([aria-invalid="true"]) {
  border-color: var(--error-700);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:checked) {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:checked):after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--white);
  width: 8px;
  height: 8px;
  content: "";
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:disabled):after {
  background-color: var(--neutral-500);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:checked):where(:disabled) {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="radio"]:not(:-moz-any([ui-off], [ui-button], [ui-switch]))):where(:checked):where(:disabled):after {
  background-color: var(--neutral-400);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--white), inset 0 -2px 4px -1px var(--neutral-200), 0 4px 8px -4px oklch(from var(--black) l c h / 20%);
  border: 1px solid var(--neutral-400);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--neutral-150), var(--neutral-250));
  width: 20px;
  height: 20px;
  user-select: none;
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:hover) {
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:user-valid) {
  border-color: var(--success-700);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where([aria-invalid="false"]) {
  border-color: var(--success-700);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:user-invalid) {
  border-color: var(--error-700);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where([aria-invalid="true"]) {
  border-color: var(--error-700);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:checked) {
  box-shadow: inset 0 1px 0 0 var( --primary-700), inset 0 -2px 4px -1px var( --primary-950), 0 4px 8px -4px oklch(from var(--black) l c h / 50%);
  border: 1px solid var( --primary-950);
  background: linear-gradient(to bottom, var( --primary-800), var( --primary-950));
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:checked):after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--white);
  width: 8px;
  height: 8px;
  content: "";
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:disabled):after {
  background-color: var(--neutral-500);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:checked):where(:disabled) {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[type="radio"]:not(:is([ui-off], [ui-button], [ui-switch]))):where(:checked):where(:disabled):after {
  background-color: var(--neutral-400);
}

/* src/switch.css */
:where(label:has( > input[ui-switch][type="checkbox"]:not([ui-off]))) {
  display: flex;
  align-items:  center;
  gap: .5rem;
  cursor: pointer;
}

:where(label:has( > input[ui-switch][type="radio"]:not([ui-off]))) {
  display: flex;
  align-items:  center;
  gap: .5rem;
  cursor: pointer;
}

:where(label:has( > input[ui-switch][type="checkbox"]:not([ui-off])[disabled])) {
  cursor: default;
  color: var(--neutral-600);
}

:where(label:has( > input[ui-switch][type="radio"]:not([ui-off])[disabled])) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[ui-switch][type="checkbox"]:not([ui-off]) + label) {
  cursor: pointer;
}

:where([ui-row] input[ui-switch][type="radio"]:not([ui-off]) + label) {
  cursor: pointer;
}

:where([ui-row] input[ui-switch][type="checkbox"]:not([ui-off])[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where([ui-row] input[ui-switch][type="radio"]:not([ui-off])[disabled] + label) {
  cursor: default;
  color: var(--neutral-600);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])) {
  --ui-switch-thumb-size: 18px;
  --ui-switch-thumb-offset: 2px;
  position: relative;
  flex-shrink: 0;
  appearance: none;
  transition: background-color .2s, border-color .2s;
  cursor: pointer;
  border: 1px solid var(--neutral-400);
  border-radius: 999px;
  background: var(--neutral-200);
  width: calc(var(--ui-switch-thumb-size) * 2 + var(--ui-switch-thumb-offset) * 2);
  height: calc(var(--ui-switch-thumb-size)  + var(--ui-switch-thumb-offset) * 2 + 2px);
  user-select: none;
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where([ui-switch~="xs"]) {
  --ui-switch-thumb-size: 10px;
  --ui-switch-thumb-offset: 0px;
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where([ui-switch~="sm"]) {
  --ui-switch-thumb-size: 13px;
  --ui-switch-thumb-offset: 1px;
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where([ui-switch~="lg"]) {
  --ui-switch-thumb-size: 28px;
  --ui-switch-thumb-offset: 3px;
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where([ui-switch~="xl"]) {
  --ui-switch-thumb-size: 40px;
  --ui-switch-thumb-offset: 4px;
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):before {
  position: absolute;
  top: var(--ui-switch-thumb-offset);
  left: var(--ui-switch-thumb-offset);
  transition: left .2s;
  box-shadow: 0 1px 2px oklch(from var(--black) l c h / 20%), 0 2px 4px oklch(from var(--black) l c h / 10%);
  border-radius: 50%;
  background: var(--white);
  width: var(--ui-switch-thumb-size);
  height: var(--ui-switch-thumb-size);
  content: "";
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):after {
  display: none;
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:hover) {
  background: var(--neutral-150);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:user-valid) {
  border-color: var(--success-700);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where([aria-invalid="false"]) {
  border-color: var(--success-700);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:user-invalid) {
  border-color: var(--error-700);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where([aria-invalid="true"]) {
  border-color: var(--error-700);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:checked) {
  border: 1px solid var( --primary-950);
  background: var( --primary-900);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:checked):before {
  left: calc(100% - var(--ui-switch-thumb-size)  - var(--ui-switch-thumb-offset));
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:checked):where(:hover) {
  background: var( --primary-850);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:disabled):before {
  background: var(--neutral-150);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:checked):where(:disabled) {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[ui-switch][type="checkbox"]:not([ui-off])):where(:checked):where(:disabled):before {
  background: var(--neutral-400);
}

:where(input[ui-switch][type="radio"]:not([ui-off])) {
  --ui-switch-thumb-size: 18px;
  --ui-switch-thumb-offset: 2px;
  position: relative;
  flex-shrink: 0;
  appearance: none;
  transition: background-color .2s, border-color .2s;
  cursor: pointer;
  border: 1px solid var(--neutral-400);
  border-radius: 999px;
  background: var(--neutral-200);
  width: calc(var(--ui-switch-thumb-size) * 2 + var(--ui-switch-thumb-offset) * 2);
  height: calc(var(--ui-switch-thumb-size)  + var(--ui-switch-thumb-offset) * 2 + 2px);
  user-select: none;
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where([ui-switch~="xs"]) {
  --ui-switch-thumb-size: 10px;
  --ui-switch-thumb-offset: 0px;
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where([ui-switch~="sm"]) {
  --ui-switch-thumb-size: 13px;
  --ui-switch-thumb-offset: 1px;
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where([ui-switch~="lg"]) {
  --ui-switch-thumb-size: 28px;
  --ui-switch-thumb-offset: 3px;
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where([ui-switch~="xl"]) {
  --ui-switch-thumb-size: 40px;
  --ui-switch-thumb-offset: 4px;
}

:where(input[ui-switch][type="radio"]:not([ui-off])):before {
  position: absolute;
  top: var(--ui-switch-thumb-offset);
  left: var(--ui-switch-thumb-offset);
  transition: left .2s;
  box-shadow: 0 1px 2px oklch(from var(--black) l c h / 20%), 0 2px 4px oklch(from var(--black) l c h / 10%);
  border-radius: 50%;
  background: var(--white);
  width: var(--ui-switch-thumb-size);
  height: var(--ui-switch-thumb-size);
  content: "";
}

:where(input[ui-switch][type="radio"]:not([ui-off])):after {
  display: none;
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:hover) {
  background: var(--neutral-150);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:user-valid) {
  border-color: var(--success-700);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where([aria-invalid="false"]) {
  border-color: var(--success-700);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:user-invalid) {
  border-color: var(--error-700);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where([aria-invalid="true"]) {
  border-color: var(--error-700);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:checked) {
  border: 1px solid var( --primary-950);
  background: var( --primary-900);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:checked):before {
  left: calc(100% - var(--ui-switch-thumb-size)  - var(--ui-switch-thumb-offset));
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:checked):where(:hover) {
  background: var( --primary-850);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:disabled) {
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  background: var(--neutral-200);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:disabled):before {
  background: var(--neutral-150);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:checked):where(:disabled) {
  box-shadow: none;
  border-color: var(--neutral-600);
  background: var(--neutral-500);
}

:where(input[ui-switch][type="radio"]:not([ui-off])):where(:checked):where(:disabled):before {
  background: var(--neutral-400);
}

/* src/badge.css */
:where([ui-badge]) {
  display: inline-flex;
  align-items:  center;
  transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s;
  box-shadow: 0 1px 2px oklch(from var(--black) l c h / .06);
  border: 1px solid var(--neutral-400);
  border-radius: 8px;
  background: var(--neutral-200);
  padding: 6px 10px;
  color: var(--neutral-900);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}

:where([ui-badge]):where([ui-badge~="xs"]) {
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .625rem;
}

:where([ui-badge]):where([ui-badge~="sm"]) {
  border-radius: 6px;
  padding: 4px 8px;
  font-size: .75rem;
}

:where([ui-badge]):where([ui-badge~="lg"]) {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1rem;
}

:where([ui-badge]):where([ui-badge~="xl"]) {
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 1.125rem;
}

:where([ui-badge]):where([ui-badge~="brand"]) {
  border-color: var( --primary-300);
  background: var( --primary-100);
  color: var( --primary-900);
}

:where([ui-badge]):where([ui-badge~="accent"]) {
  border-color: var( --secondary-300);
  background: var( --secondary-100);
  color: var( --secondary-900);
}

:where([ui-badge]):where([ui-badge~="error"]) {
  border-color: var(--error-300);
  background: var(--error-100);
  color: var(--error-900);
}

:where([ui-badge]):where([ui-badge~="warning"]) {
  border-color: var(--warning-300);
  background: var(--warning-100);
  color: var(--warning-900);
}

:where([ui-badge]):where([ui-badge~="success"]) {
  border-color: var(--success-300);
  background: var(--success-100);
  color: var(--success-900);
}

:where(a[ui-badge], button[ui-badge]) {
  cursor: pointer;
}

:where(a[ui-badge], button[ui-badge]):not([ui-badge~="brand"]):not([ui-badge~="accent"]):not([ui-badge~="error"]):not([ui-badge~="warning"]):not([ui-badge~="success"]) {
  box-shadow: inset 0 1px 0 0 var(--white), 0 1px 2px oklch(from var(--black) l c h / .08);
  border-color: var(--neutral-400);
  background: linear-gradient(to bottom, var(--neutral-100), var(--neutral-200));
  color: var(--neutral-900);
}

:where(a[ui-badge], button[ui-badge]):not([ui-badge~="brand"]):not([ui-badge~="accent"]):not([ui-badge~="error"]):not([ui-badge~="warning"]):not([ui-badge~="success"]):where(:hover) {
  box-shadow: inset 0 1px 0 0 var(--white), 0 1px 2px oklch(from var(--black) l c h / .06);
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-150));
}

:where(a[ui-badge], button[ui-badge]):not([ui-badge~="brand"]):not([ui-badge~="accent"]):not([ui-badge~="error"]):not([ui-badge~="warning"]):not([ui-badge~="success"]):where(:active) {
  box-shadow: inset 0 1px 0 0 var(--white), 0 1px 2px oklch(from var(--black) l c h / .04);
  background: linear-gradient(to bottom, var(--neutral-50), var(--neutral-100));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="brand"]) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .4), 0 1px 2px oklch(from var(--black) l c h / .08);
  border-color: var( --primary-400);
  background: linear-gradient(to bottom, var( --primary-50), var( --primary-200));
  color: var( --primary-900);
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="brand"]):where(:hover) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .5), 0 1px 2px oklch(from var(--black) l c h / .06);
  background: linear-gradient(to bottom, var( --primary-50), var( --primary-150));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="brand"]):where(:active) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .6), 0 1px 2px oklch(from var(--black) l c h / .04);
  border-color: var( --primary-400);
  background: linear-gradient(to bottom, var( --primary-50), var( --primary-100));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="accent"]) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .4), 0 1px 2px oklch(from var(--black) l c h / .08);
  border-color: var( --secondary-400);
  background: linear-gradient(to bottom, var( --secondary-50), var( --secondary-200));
  color: var( --secondary-900);
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="accent"]):where(:hover) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .5), 0 1px 2px oklch(from var(--black) l c h / .06);
  background: linear-gradient(to bottom, var( --secondary-50), var( --secondary-150));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="accent"]):where(:active) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .6), 0 1px 2px oklch(from var(--black) l c h / .04);
  border-color: var( --secondary-400);
  background: linear-gradient(to bottom, var( --secondary-50), var( --secondary-100));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="error"]) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .4), 0 1px 2px oklch(from var(--black) l c h / .08);
  border-color: var(--error-400);
  background: linear-gradient(to bottom, var(--error-50), var(--error-200));
  color: var(--error-900);
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="error"]):where(:hover) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .5), 0 1px 2px oklch(from var(--black) l c h / .06);
  background: linear-gradient(to bottom, var(--error-50), var(--error-150));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="error"]):where(:active) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .6), 0 1px 2px oklch(from var(--black) l c h / .04);
  border-color: var(--error-400);
  background: linear-gradient(to bottom, var(--error-50), var(--error-100));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="warning"]) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .4), 0 1px 2px oklch(from var(--black) l c h / .08);
  border-color: var(--warning-400);
  background: linear-gradient(to bottom, var(--warning-50), var(--warning-200));
  color: var(--warning-900);
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="warning"]):where(:hover) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .5), 0 1px 2px oklch(from var(--black) l c h / .06);
  background: linear-gradient(to bottom, var(--warning-50), var(--warning-150));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="warning"]):where(:active) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .6), 0 1px 2px oklch(from var(--black) l c h / .04);
  border-color: var(--warning-400);
  background: linear-gradient(to bottom, var(--warning-50), var(--warning-100));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="success"]) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .4), 0 1px 2px oklch(from var(--black) l c h / .08);
  border-color: var(--success-400);
  background: linear-gradient(to bottom, var(--success-50), var(--success-200));
  color: var(--success-900);
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="success"]):where(:hover) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .5), 0 1px 2px oklch(from var(--black) l c h / .06);
  background: linear-gradient(to bottom, var(--success-50), var(--success-150));
}

:where(a[ui-badge], button[ui-badge]):where([ui-badge~="success"]):where(:active) {
  box-shadow: inset 0 1px 0 0 oklch(from var(--white) l c h / .6), 0 1px 2px oklch(from var(--black) l c h / .04);
  border-color: var(--success-400);
  background: linear-gradient(to bottom, var(--success-50), var(--success-100));
}

/* src/field.css */
:where([ui-field]) > :where(label) {
  display: block;
  margin-bottom: .25rem;
  font-weight: 500;
}

:where([ui-field]) > :where(p:not([role])) {
  margin-top: .125rem;
  color: var(--neutral-600);
  font-size: .875rem;
}

:where([ui-field]) > :where(p[role="error"]) {
  display: none;
  margin-top: .125rem;
  color: var(--error-700);
  font-size: .875rem;
}

:where([ui-field]) > :where(p[role="status"]) {
  display: none;
  margin-top: .125rem;
  color: var(--success-700);
  font-size: .875rem;
}

:where([ui-field]):where(:has(p[role="status"]):has(:user-valid, [aria-invalid="false"])) :where(label) {
  color: var(--success-800);
}

:where([ui-field]):where(:has(p[role="status"]):has(:user-valid, [aria-invalid="false"])) > :where(p[role="status"]) {
  display: revert;
}

:where([ui-field]):where(:has(p[role="status"]):has(:user-valid, [aria-invalid="false"])) > :where(p:not([role])) {
  display: none;
}

:where([ui-field]):where(:has(p[role="error"]):has(:user-invalid, [aria-invalid="true"])) :where(label) {
  color: var(--error-800);
}

:where([ui-field]):where(:has(p[role="error"]):has(:user-invalid, [aria-invalid="true"])) > :where(p[role="error"]) {
  display: revert;
}

:where([ui-field]):where(:has(p[role="error"]):has(:user-invalid, [aria-invalid="true"])) > :where(p:not([role])) {
  display: none;
}

/* src/group.css */
:where([ui-group]) {
  display: inline-flex;
}

:where([ui-group] > :not(:last-child)) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

:where([ui-group] > :not(:first-child)) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

:where([ui-group] > [ui-menu]:not(:last-child) > button[popovertarget]) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

:where([ui-group] > [ui-menu]:not(:first-child) > button[popovertarget]) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

:where([ui-group~="block"]) {
  display: flex;
  width: 100%;
}

:where([ui-group~="block"]) > * {
  flex: 1;
}

/* src/container.css */
:where([ui-container]) {
  container-type: inline-size;
  padding-inline-start: max(50% - 450px, 24px);
  padding-inline-end: max(50% - 450px, 24px);
}

:where([ui-container~="xs"]) {
  padding-inline-start: max(50% - 200px, 24px);
  padding-inline-end: max(50% - 200px, 24px);
}

:where([ui-container~="sm"]) {
  padding-inline-start: max(50% - 300px, 24px);
  padding-inline-end: max(50% - 300px, 24px);
}

:where([ui-container~="lg"]) {
  padding-inline-start: max(50% - 600px, 24px);
  padding-inline-end: max(50% - 600px, 24px);
}

:where([ui-container~="xl"]) {
  padding-inline-start: max(50% - 800px, 24px);
  padding-inline-end: max(50% - 800px, 24px);
}

:where([ui-container~="full"]) {
  padding-inline-start: 24px;
  padding-inline-end: 24px;
}

/* src/row.css */
:where([ui-row]) {
  display: flex;
  flex-direction: row;
  min-width: 0;
}

:where([ui-row~="x-start"]) {
  justify-content: flex-start;
}

:where([ui-row~="x-end"]) {
  justify-content: flex-end;
}

:where([ui-row~="x-center"]) {
  justify-content: center;
}

:where([ui-row~="x-between"]) {
  justify-content: space-between;
}

:where([ui-row~="x-around"]) {
  justify-content: space-around;
}

:where([ui-row~="x-evenly"]) {
  justify-content: space-evenly;
}

:where([ui-row~="y-start"]) {
  align-items:  flex-start;
}

:where([ui-row~="y-end"]) {
  align-items:  flex-end;
}

:where([ui-row~="y-center"]) {
  align-items:  center;
}

:where([ui-row~="y-stretch"]) {
  align-items: stretch;
}

:where([ui-row~="gap-xs"]) {
  gap: .25rem;
}

:where([ui-row~="gap-sm"]) {
  gap: .5rem;
}

:where([ui-row~="gap-md"]) {
  gap: 1rem;
}

:where([ui-row~="gap-lg"]) {
  gap: 1.5rem;
}

:where([ui-row~="gap-xl"]) {
  gap: 2.5rem;
}

:where([ui-row~="gap-2xl"]) {
  gap: 4rem;
}

:where([ui-row~="gap-3xl"]) {
  gap: 6rem;
}

:where([ui-row~="gap-4xl"]) {
  gap: 8rem;
}

:where([ui-row~="gap-5xl"]) {
  gap: 12rem;
}

:where([ui-row~="gap-6xl"]) {
  gap: 16rem;
}

:where([ui-row~="wrap"]) {
  flex-wrap: wrap;
}

:where([ui-row~="inline"]) {
  display: inline-flex;
  align-items: baseline;
}

/* src/column.css */
:where([ui-column]) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:where([ui-column~="x-start"]) {
  align-items:  flex-start;
}

:where([ui-column~="x-end"]) {
  align-items:  flex-end;
}

:where([ui-column~="x-center"]) {
  align-items:  center;
}

:where([ui-column~="x-stretch"]) {
  align-items: stretch;
}

:where([ui-column~="y-start"]) {
  justify-content: flex-start;
}

:where([ui-column~="y-end"]) {
  justify-content: flex-end;
}

:where([ui-column~="y-center"]) {
  justify-content: center;
}

:where([ui-column~="y-between"]) {
  justify-content: space-between;
}

:where([ui-column~="y-around"]) {
  justify-content: space-around;
}

:where([ui-column~="y-evenly"]) {
  justify-content: space-evenly;
}

:where([ui-column~="y-stretch"]) {
  justify-content: stretch;
}

:where([ui-column~="gap-xs"]) {
  gap: .25rem;
}

:where([ui-column~="gap-sm"]) {
  gap: .5rem;
}

:where([ui-column~="gap-md"]) {
  gap: 1rem;
}

:where([ui-column~="gap-lg"]) {
  gap: 1.5rem;
}

:where([ui-column~="gap-xl"]) {
  gap: 2.5rem;
}

:where([ui-column~="gap-2xl"]) {
  gap: 4rem;
}

:where([ui-column~="gap-3xl"]) {
  gap: 6rem;
}

:where([ui-column~="gap-4xl"]) {
  gap: 8rem;
}

:where([ui-column~="gap-5xl"]) {
  gap: 12rem;
}

:where([ui-column~="gap-6xl"]) {
  gap: 16rem;
}

/* src/margin.css */
:where([ui-margin~="xs"]) {
  margin: .25rem;
}

:where([ui-margin~="sm"]) {
  margin: .5rem;
}

:where([ui-margin~="md"]) {
  margin: 1rem;
}

:where([ui-margin~="lg"]) {
  margin: 1.5rem;
}

:where([ui-margin~="xl"]) {
  margin: 2.5rem;
}

:where([ui-margin~="2xl"]) {
  margin: 4rem;
}

:where([ui-margin~="3xl"]) {
  margin: 6rem;
}

:where([ui-margin~="4xl"]) {
  margin: 8rem;
}

:where([ui-margin~="5xl"]) {
  margin: 12rem;
}

:where([ui-margin~="6xl"]) {
  margin: 16rem;
}

:where([ui-margin~="block-xs"]) {
  margin-block-start: .25rem;
  margin-block-end: .25rem;
}

:where([ui-margin~="block-sm"]) {
  margin-block-start: .5rem;
  margin-block-end: .5rem;
}

:where([ui-margin~="block-md"]) {
  margin-block-start: 1rem;
  margin-block-end: 1rem;
}

:where([ui-margin~="block-lg"]) {
  margin-block-start: 1.5rem;
  margin-block-end: 1.5rem;
}

:where([ui-margin~="block-xl"]) {
  margin-block-start: 2.5rem;
  margin-block-end: 2.5rem;
}

:where([ui-margin~="block-2xl"]) {
  margin-block-start: 4rem;
  margin-block-end: 4rem;
}

:where([ui-margin~="block-3xl"]) {
  margin-block-start: 6rem;
  margin-block-end: 6rem;
}

:where([ui-margin~="block-4xl"]) {
  margin-block-start: 8rem;
  margin-block-end: 8rem;
}

:where([ui-margin~="block-5xl"]) {
  margin-block-start: 12rem;
  margin-block-end: 12rem;
}

:where([ui-margin~="block-6xl"]) {
  margin-block-start: 16rem;
  margin-block-end: 16rem;
}

:where([ui-margin~="inline-xs"]) {
  margin-inline-start: .25rem;
  margin-inline-end: .25rem;
}

:where([ui-margin~="inline-sm"]) {
  margin-inline-start: .5rem;
  margin-inline-end: .5rem;
}

:where([ui-margin~="inline-md"]) {
  margin-inline-start: 1rem;
  margin-inline-end: 1rem;
}

:where([ui-margin~="inline-lg"]) {
  margin-inline-start: 1.5rem;
  margin-inline-end: 1.5rem;
}

:where([ui-margin~="inline-xl"]) {
  margin-inline-start: 2.5rem;
  margin-inline-end: 2.5rem;
}

:where([ui-margin~="inline-2xl"]) {
  margin-inline-start: 4rem;
  margin-inline-end: 4rem;
}

:where([ui-margin~="inline-3xl"]) {
  margin-inline-start: 6rem;
  margin-inline-end: 6rem;
}

:where([ui-margin~="inline-4xl"]) {
  margin-inline-start: 8rem;
  margin-inline-end: 8rem;
}

:where([ui-margin~="inline-5xl"]) {
  margin-inline-start: 12rem;
  margin-inline-end: 12rem;
}

:where([ui-margin~="inline-6xl"]) {
  margin-inline-start: 16rem;
  margin-inline-end: 16rem;
}

:where([ui-margin~="top-xs"]) {
  margin-top: .25rem;
}

:where([ui-margin~="top-sm"]) {
  margin-top: .5rem;
}

:where([ui-margin~="top-md"]) {
  margin-top: 1rem;
}

:where([ui-margin~="top-lg"]) {
  margin-top: 1.5rem;
}

:where([ui-margin~="top-xl"]) {
  margin-top: 2.5rem;
}

:where([ui-margin~="top-2xl"]) {
  margin-top: 4rem;
}

:where([ui-margin~="top-3xl"]) {
  margin-top: 6rem;
}

:where([ui-margin~="top-4xl"]) {
  margin-top: 8rem;
}

:where([ui-margin~="top-5xl"]) {
  margin-top: 12rem;
}

:where([ui-margin~="top-6xl"]) {
  margin-top: 16rem;
}

:where([ui-margin~="bottom-xs"]) {
  margin-bottom: .25rem;
}

:where([ui-margin~="bottom-sm"]) {
  margin-bottom: .5rem;
}

:where([ui-margin~="bottom-md"]) {
  margin-bottom: 1rem;
}

:where([ui-margin~="bottom-lg"]) {
  margin-bottom: 1.5rem;
}

:where([ui-margin~="bottom-xl"]) {
  margin-bottom: 2.5rem;
}

:where([ui-margin~="bottom-2xl"]) {
  margin-bottom: 4rem;
}

:where([ui-margin~="bottom-3xl"]) {
  margin-bottom: 6rem;
}

:where([ui-margin~="bottom-4xl"]) {
  margin-bottom: 8rem;
}

:where([ui-margin~="bottom-5xl"]) {
  margin-bottom: 12rem;
}

:where([ui-margin~="bottom-6xl"]) {
  margin-bottom: 16rem;
}

:where([ui-margin~="left-xs"]) {
  margin-left: .25rem;
}

:where([ui-margin~="left-sm"]) {
  margin-left: .5rem;
}

:where([ui-margin~="left-md"]) {
  margin-left: 1rem;
}

:where([ui-margin~="left-lg"]) {
  margin-left: 1.5rem;
}

:where([ui-margin~="left-xl"]) {
  margin-left: 2.5rem;
}

:where([ui-margin~="left-2xl"]) {
  margin-left: 4rem;
}

:where([ui-margin~="left-3xl"]) {
  margin-left: 6rem;
}

:where([ui-margin~="left-4xl"]) {
  margin-left: 8rem;
}

:where([ui-margin~="left-5xl"]) {
  margin-left: 12rem;
}

:where([ui-margin~="left-6xl"]) {
  margin-left: 16rem;
}

:where([ui-margin~="right-xs"]) {
  margin-right: .25rem;
}

:where([ui-margin~="right-sm"]) {
  margin-right: .5rem;
}

:where([ui-margin~="right-md"]) {
  margin-right: 1rem;
}

:where([ui-margin~="right-lg"]) {
  margin-right: 1.5rem;
}

:where([ui-margin~="right-xl"]) {
  margin-right: 2.5rem;
}

:where([ui-margin~="right-2xl"]) {
  margin-right: 4rem;
}

:where([ui-margin~="right-3xl"]) {
  margin-right: 6rem;
}

:where([ui-margin~="right-4xl"]) {
  margin-right: 8rem;
}

:where([ui-margin~="right-5xl"]) {
  margin-right: 12rem;
}

:where([ui-margin~="right-6xl"]) {
  margin-right: 16rem;
}

/* src/padding.css */
:where([ui-padding~="xs"]) {
  padding: .25rem;
}

:where([ui-padding~="sm"]) {
  padding: .5rem;
}

:where([ui-padding~="md"]) {
  padding: 1rem;
}

:where([ui-padding~="lg"]) {
  padding: 1.5rem;
}

:where([ui-padding~="xl"]) {
  padding: 2.5rem;
}

:where([ui-padding~="2xl"]) {
  padding: 4rem;
}

:where([ui-padding~="3xl"]) {
  padding: 6rem;
}

:where([ui-padding~="4xl"]) {
  padding: 8rem;
}

:where([ui-padding~="5xl"]) {
  padding: 12rem;
}

:where([ui-padding~="6xl"]) {
  padding: 16rem;
}

:where([ui-padding~="block-xs"]) {
  padding-block-start: .25rem;
  padding-block-end: .25rem;
}

:where([ui-padding~="block-sm"]) {
  padding-block-start: .5rem;
  padding-block-end: .5rem;
}

:where([ui-padding~="block-md"]) {
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}

:where([ui-padding~="block-lg"]) {
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
}

:where([ui-padding~="block-xl"]) {
  padding-block-start: 2.5rem;
  padding-block-end: 2.5rem;
}

:where([ui-padding~="block-2xl"]) {
  padding-block-start: 4rem;
  padding-block-end: 4rem;
}

:where([ui-padding~="block-3xl"]) {
  padding-block-start: 6rem;
  padding-block-end: 6rem;
}

:where([ui-padding~="block-4xl"]) {
  padding-block-start: 8rem;
  padding-block-end: 8rem;
}

:where([ui-padding~="block-5xl"]) {
  padding-block-start: 12rem;
  padding-block-end: 12rem;
}

:where([ui-padding~="block-6xl"]) {
  padding-block-start: 16rem;
  padding-block-end: 16rem;
}

:where([ui-padding~="inline-xs"]) {
  padding-inline-start: .25rem;
  padding-inline-end: .25rem;
}

:where([ui-padding~="inline-sm"]) {
  padding-inline-start: .5rem;
  padding-inline-end: .5rem;
}

:where([ui-padding~="inline-md"]) {
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
}

:where([ui-padding~="inline-lg"]) {
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

:where([ui-padding~="inline-xl"]) {
  padding-inline-start: 2.5rem;
  padding-inline-end: 2.5rem;
}

:where([ui-padding~="inline-2xl"]) {
  padding-inline-start: 4rem;
  padding-inline-end: 4rem;
}

:where([ui-padding~="inline-3xl"]) {
  padding-inline-start: 6rem;
  padding-inline-end: 6rem;
}

:where([ui-padding~="inline-4xl"]) {
  padding-inline-start: 8rem;
  padding-inline-end: 8rem;
}

:where([ui-padding~="inline-5xl"]) {
  padding-inline-start: 12rem;
  padding-inline-end: 12rem;
}

:where([ui-padding~="inline-6xl"]) {
  padding-inline-start: 16rem;
  padding-inline-end: 16rem;
}

:where([ui-padding~="top-xs"]) {
  padding-top: .25rem;
}

:where([ui-padding~="top-sm"]) {
  padding-top: .5rem;
}

:where([ui-padding~="top-md"]) {
  padding-top: 1rem;
}

:where([ui-padding~="top-lg"]) {
  padding-top: 1.5rem;
}

:where([ui-padding~="top-xl"]) {
  padding-top: 2.5rem;
}

:where([ui-padding~="top-2xl"]) {
  padding-top: 4rem;
}

:where([ui-padding~="top-3xl"]) {
  padding-top: 6rem;
}

:where([ui-padding~="top-4xl"]) {
  padding-top: 8rem;
}

:where([ui-padding~="top-5xl"]) {
  padding-top: 12rem;
}

:where([ui-padding~="top-6xl"]) {
  padding-top: 16rem;
}

:where([ui-padding~="bottom-xs"]) {
  padding-bottom: .25rem;
}

:where([ui-padding~="bottom-sm"]) {
  padding-bottom: .5rem;
}

:where([ui-padding~="bottom-md"]) {
  padding-bottom: 1rem;
}

:where([ui-padding~="bottom-lg"]) {
  padding-bottom: 1.5rem;
}

:where([ui-padding~="bottom-xl"]) {
  padding-bottom: 2.5rem;
}

:where([ui-padding~="bottom-2xl"]) {
  padding-bottom: 4rem;
}

:where([ui-padding~="bottom-3xl"]) {
  padding-bottom: 6rem;
}

:where([ui-padding~="bottom-4xl"]) {
  padding-bottom: 8rem;
}

:where([ui-padding~="bottom-5xl"]) {
  padding-bottom: 12rem;
}

:where([ui-padding~="bottom-6xl"]) {
  padding-bottom: 16rem;
}

:where([ui-padding~="left-xs"]) {
  padding-left: .25rem;
}

:where([ui-padding~="left-sm"]) {
  padding-left: .5rem;
}

:where([ui-padding~="left-md"]) {
  padding-left: 1rem;
}

:where([ui-padding~="left-lg"]) {
  padding-left: 1.5rem;
}

:where([ui-padding~="left-xl"]) {
  padding-left: 2.5rem;
}

:where([ui-padding~="left-2xl"]) {
  padding-left: 4rem;
}

:where([ui-padding~="left-3xl"]) {
  padding-left: 6rem;
}

:where([ui-padding~="left-4xl"]) {
  padding-left: 8rem;
}

:where([ui-padding~="left-5xl"]) {
  padding-left: 12rem;
}

:where([ui-padding~="left-6xl"]) {
  padding-left: 16rem;
}

:where([ui-padding~="right-xs"]) {
  padding-right: .25rem;
}

:where([ui-padding~="right-sm"]) {
  padding-right: .5rem;
}

:where([ui-padding~="right-md"]) {
  padding-right: 1rem;
}

:where([ui-padding~="right-lg"]) {
  padding-right: 1.5rem;
}

:where([ui-padding~="right-xl"]) {
  padding-right: 2.5rem;
}

:where([ui-padding~="right-2xl"]) {
  padding-right: 4rem;
}

:where([ui-padding~="right-3xl"]) {
  padding-right: 6rem;
}

:where([ui-padding~="right-4xl"]) {
  padding-right: 8rem;
}

:where([ui-padding~="right-5xl"]) {
  padding-right: 12rem;
}

:where([ui-padding~="right-6xl"]) {
  padding-right: 16rem;
}

/* src/shadow.css */
:where([ui-shadow]) {
  box-shadow: 0 4px 6px -1px oklch(from var(--neutral-950) l c h / 6%), 0 2px 4px -2px oklch(from var(--neutral-950) l c h / 6%);
}

:where([ui-shadow~="xs"]) {
  box-shadow: 0 1px 2px 0 oklch(from var(--neutral-950) l c h / 6%);
}

:where([ui-shadow~="sm"]) {
  box-shadow: 0 1px 3px 0 oklch(from var(--neutral-950) l c h / 6%), 0 1px 2px -1px oklch(from var(--neutral-950) l c h / 6%);
}

:where([ui-shadow~="lg"]) {
  box-shadow: 0 10px 15px -3px oklch(from var(--neutral-950) l c h / 6%), 0 4px 6px -4px oklch(from var(--neutral-950) l c h / 6%);
}

:where([ui-shadow~="xl"]) {
  box-shadow: 0 20px 25px -5px oklch(from var(--neutral-950) l c h / 6%), 0 8px 10px -6px oklch(from var(--neutral-950) l c h / 6%);
}

/* src/main.css */