/* Faunder UI core 0.5.16 */

/* Faunder UI: base styles for light and dark with neutral and status palettes. */
@layer core, theme;
@layer core {
/* library/foundations/palette.css */
/* Faunder UI palette: neutral and status colors. */
:root {
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --neutral-50: oklch(98% 0 0);
  --neutral-100: oklch(96% 0 0);
  --neutral-200: oklch(90% 0 0);
  --neutral-300: oklch(84% 0 0);
  --neutral-400: oklch(66% 0 0);
  --neutral-500: oklch(50% 0 0);
  --neutral-600: oklch(40% 0 0);
  --neutral-700: oklch(30% 0 0);
  --neutral-800: oklch(24% 0 0);
  --neutral-900: oklch(16% 0 0);
  --neutral-950: oklch(12% 0 0);
  --error-50: oklch(97.65% 0.0054 17.38);
  --error-100: oklch(92.04% 0.0192 17.717);
  --error-200: oklch(84.02% 0.0347 18.334);
  --error-300: oklch(77.56% 0.0753 19.571);
  --error-400: oklch(69.45% 0.1110 22.216);
  --error-500: oklch(61.47% 0.1309 25.331);
  --error-600: oklch(51.97% 0.1244 27.325);
  --error-700: oklch(40.95% 0.0959 27.518);
  --error-800: oklch(30.00% 0.0651 26.899);
  --error-900: oklch(20.10% 0.0444 25.723);
  --error-950: oklch(13.31% 0.0304 26.042);
  --warning-50: oklch(97.65% 0.0054 102.212);
  --warning-100: oklch(92.04% 0.0192 103.193);
  --warning-200: oklch(84.02% 0.0347 101.54);
  --warning-300: oklch(77.56% 0.0753 98.111);
  --warning-400: oklch(69.45% 0.1110 91.936);
  --warning-500: oklch(61.47% 0.1309 86.047);
  --warning-600: oklch(51.97% 0.1244 75.834);
  --warning-700: oklch(40.95% 0.0959 66.442);
  --warning-800: oklch(30.00% 0.0651 61.907);
  --warning-900: oklch(20.10% 0.0444 57.708);
  --warning-950: oklch(13.31% 0.0304 53.813);
  --success-50: oklch(97.65% 0.0054 155.826);
  --success-100: oklch(92.04% 0.0192 156.743);
  --success-200: oklch(84.02% 0.0347 155.995);
  --success-300: oklch(77.56% 0.0753 154.449);
  --success-400: oklch(69.45% 0.1110 151.711);
  --success-500: oklch(61.47% 0.1309 149.579);
  --success-600: oklch(51.97% 0.1244 149.214);
  --success-700: oklch(40.95% 0.0959 150.069);
  --success-800: oklch(30.00% 0.0651 151.328);
  --success-900: oklch(20.10% 0.0444 152.535);
  --success-950: oklch(13.31% 0.0304 152.934);
  --info-50: oklch(97.65% 0.0054 236.62);
  --info-100: oklch(92.04% 0.0192 236.824);
  --info-200: oklch(84.02% 0.0347 230.902);
  --info-300: oklch(77.56% 0.0753 230.318);
  --info-400: oklch(69.45% 0.1110 232.661);
  --info-500: oklch(61.47% 0.1309 237.323);
  --info-600: oklch(51.97% 0.1244 241.966);
  --info-700: oklch(40.95% 0.0959 242.749);
  --info-800: oklch(30.00% 0.0651 240.79);
  --info-900: oklch(20.10% 0.0444 240.876);
  --info-950: oklch(13.31% 0.0304 243.157);
}

}
@layer core {
/* library/foundations/color-attributes.css */
/* Resolve ui-color names to steps from a matching palette. */
:where([ui-color]) {
  --_ui-color-50: var(ident(-- attr(ui-color type(<custom-ident>)) "-50"), var(--neutral-50));
  --_ui-color-100: var(ident(-- attr(ui-color type(<custom-ident>)) "-100"), var(--neutral-100));
  --_ui-color-200: var(ident(-- attr(ui-color type(<custom-ident>)) "-200"), var(--neutral-200));
  --_ui-color-300: var(ident(-- attr(ui-color type(<custom-ident>)) "-300"), var(--neutral-300));
  --_ui-color-400: var(ident(-- attr(ui-color type(<custom-ident>)) "-400"), var(--neutral-400));
  --_ui-color-500: var(ident(-- attr(ui-color type(<custom-ident>)) "-500"), var(--neutral-500));
  --_ui-color-600: var(ident(-- attr(ui-color type(<custom-ident>)) "-600"), var(--neutral-600));
  --_ui-color-700: var(ident(-- attr(ui-color type(<custom-ident>)) "-700"), var(--neutral-700));
  --_ui-color-800: var(ident(-- attr(ui-color type(<custom-ident>)) "-800"), var(--neutral-800));
  --_ui-color-900: var(ident(-- attr(ui-color type(<custom-ident>)) "-900"), var(--neutral-900));
  --_ui-color-950: var(ident(-- attr(ui-color type(<custom-ident>)) "-950"), var(--neutral-950));
}

}
@layer core {
/* library/foundations/reset.css */
/* Faunder UI reset. Color mode is inherited and changes only at explicit boundaries. */
:where(*, *::before, *::after) {
  box-sizing: border-box;
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

:where(*:not(h1, h2, h3, h4, h5, h6), [ui-off], *::before, *::after) {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}

/* Component display rules must not reveal content hidden by native HTML. */
:where([hidden]:not([hidden="until-found" i])) {
  display: none !important;
}

:where(:root, [ui-color-scheme="light"]) {
  color-scheme: light;
}
:where([ui-color-scheme="dark"]) {
  color-scheme: dark;
}
:where(body, [ui-color-scheme="light"], [ui-color-scheme="dark"]) {
  background: light-dark(var(--white), var(--black));
  color: light-dark(var(--black), var(--white));
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

}
@layer core {
/* library/foundations/focus.css */
/* Faunder UI focus: black/white light/dark color pairs. */
:where(:focus-visible:not([ui-off])) {
  outline: 2px solid light-dark(var(--black), var(--white));
  outline-offset: 2px;
}

}
@layer core {
/* library/components/seperator.css */

/* Faunder UI separators: neutral colors with light/dark pairs. */
:where(hr:not([ui-off])) {
  border: none;
  background: light-dark(var(--neutral-300), var(--neutral-600));
  height: 1px;
}

:where([ui-seperator][role="separator"][aria-orientation="horizontal"]:not([ui-off])) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 1.25rem;
  margin-block: -0.5rem;
  color: light-dark(oklch(55.2% 0.016 285.938), oklch(70.5% 0.015 286.067));
  font-size: 0.875rem;

  &::before, &::after {
    flex: 1 1 0;
    border-block-start: 1px solid light-dark(oklch(92% 0.004 286.32), color-mix(in oklch, var(--white) 15%, transparent));
    content: "";
  }

  &:where(:not(:has(> span)))::after {
    display: none;
  }

  & > :where(span) {
    padding-inline: 0.5rem;
  }
}

:where([ui-seperator][role="separator"][aria-orientation="vertical"]:not([ui-off])) {
  align-self: stretch;
  flex: 0 0 1px;
  width: 1px;
  min-height: 1rem;
  margin-inline: 0.25rem;
  background: light-dark(var(--neutral-300), var(--neutral-600));
}

}
@layer core {
/* library/components/icon.css */



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  UI-ICON (mask-image based icons)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Spinner SVG – jaettu napin loading-tilan kanssa */
: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");
 }

/* Nimetyt core-ikonit. */
:where([ui-icon~="spinner"]) {
  --ui-icon: var(--_ui-icon-spinner);
}
: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~="checkmark"]) {
  --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m20%206-11%2011-5-5%22%2F%3E%3C%2Fsvg%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~="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(svg[ui-icon~="spinner"], img[ui-icon~="spinner"], span[ui-icon~="spinner"]) {
  animation: ui-loading 1s linear infinite;
}
:where(i[ui-icon~="spinner"]) {
  animation: ui-loading 1s linear infinite;
}
:where(i[ui-icon~="spinner"])::before {
  transform: rotate(0deg);
}
:where(button[ui-icon~="spinner"], a[ui-icon~="spinner"], [ui-button][ui-icon~="spinner"])::before {
  animation: ui-loading 1s linear infinite;
}

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

:where([ui-icon]) {
  /* <i ui-icon> – mask icon (empty, icon name in attribute) */
  &:where(i) {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
    vertical-align: middle;
    width: calc(var(--ui-icon-size, 20px) + 2px);
    height: calc(var(--ui-icon-size, 20px) + 2px);
    margin: -1px;
    padding: 1px;
    overflow: hidden;
    border-radius: 0.01px;
    &::before {
      position: absolute;
      inset: 1px;
      mask: var(--ui-icon, none) center / contain no-repeat;
      background-color: currentColor;
      box-shadow: 0 0 1px transparent;
      content: "";
    }
  }

  /* <svg ui-icon> */
  &:where(svg) {
    fill: currentColor;
    width: var(--ui-icon-size, 20px);
    height: var(--ui-icon-size, 20px);
  }

  /* <img ui-icon> */
  &:where(img) {
    width: var(--ui-icon-size, 20px);
    height: var(--ui-icon-size, 20px);
    object-fit: contain;
  }

  /* <span ui-icon> – text/emoji icon (element has content) */
  &:where(span) {
    width: var(--ui-icon-size, 20px);
    height: var(--ui-icon-size, 20px);
    font-size: var(--ui-icon-size, 20px);
    line-height: 1;
  }

  /* Button */
  &:where([ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]) {
    &::before {
      display: inline-block;
      flex-shrink: 0;
      box-sizing: content-box;
      padding: 1px;
      margin-inline: -1px;
      mask: var(--ui-icon, none) center / contain no-repeat;
      mask-origin: content-box;
      mask-clip: content-box;
      background-color: currentColor;
      box-shadow: 0 0 1px transparent;
      width: var(--ui-icon-size, 20px);
      height: var(--ui-icon-size, 20px);
      content: "";
    }

    &:where([ui-icon~="-"])::before {
      background-color: transparent;
    }

    &[ui-icon~="trailing"]::before {
      order: 1;
    }

    &:where([ui-button~="xs"])::before { --ui-icon-size: 14px; }
    &:where([ui-button~="sm"])::before { --ui-icon-size: 18px; }
    &:where([ui-button~="lg"])::before { --ui-icon-size: 24px; }
  }

  /* Sizes */
  &:where([ui-icon~="xs"]) { --ui-icon-size: 14px; }
  &:where([ui-icon~="sm"]) { --ui-icon-size: 18px; }
  &:where([ui-icon~="lg"]) { --ui-icon-size: 24px; }
  &:where([ui-icon~="xl"]) { --ui-icon-size: 32px; }
  &:where([ui-icon~="2xl"]) { --ui-icon-size: 40px; }
  &:where([ui-icon~="3xl"]) { --ui-icon-size: 48px; }
  &:where([ui-icon~="4xl"]) { --ui-icon-size: 56px; }
  &:where([ui-icon~="5xl"]) { --ui-icon-size: 64px; }
  &:where([ui-icon~="6xl"]) { --ui-icon-size: 80px; }

}

@media (prefers-reduced-motion: reduce) {
  :where(svg[ui-icon~="spinner"], img[ui-icon~="spinner"], span[ui-icon~="spinner"]) {
    animation: none;
  }
  :where(i[ui-icon~="spinner"]) { animation: none; }
  :where(button[ui-icon~="spinner"], a[ui-icon~="spinner"], [ui-button][ui-icon~="spinner"])::before {
    animation: none;
  }
}

}
@layer core {
/* library/utilities/inline.css */

/* Faunder UI inline elements: neutral colors with light/dark pairs. */
:where(strong:not([ui-off])), :where(b:not([ui-off])) {
  font-weight: 600;
}
:where(em:not([ui-off])), :where(i:not([ui-off])) {
  font-style: italic;
}
:where(small:not([ui-off])) {
  font-size: 0.875rem;
}
:where(mark:not([ui-off])) {
  background-color: light-dark(var(--neutral-200), var(--neutral-600));
  padding: 2px 4px;
}
:where(del:not([ui-off])), :where(s:not([ui-off])) {
  text-decoration: line-through;
}
:where(ins:not([ui-off])), :where(u:not([ui-off])) {
  text-decoration: underline;
}
:where(sub:not([ui-off])) {
  vertical-align: sub;
  font-size: 0.75em;
  line-height: 0;
}
:where(sup:not([ui-off])) {
  vertical-align: super;
  font-size: 0.75em;
  line-height: 0;
}
:where(abbr:not([ui-off])) {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
}
:where(q:not([ui-off])) {
  quotes: "«" "»" "‹" "›";
  &::before {
    content: open-quote;
  }
  &::after {
    content: close-quote;
  }
}
:where(cite:not([ui-off])) {
  font-style: italic;
}
:where(samp:not([ui-off])) {
  font-size: 0.875em;
  font-family: ui-monospace, monospace;
}
:where(var:not([ui-off])) {
  font-style: italic;
  font-size: 0.875em;
  font-family: ui-monospace, monospace;
}

}
@layer core {
/* library/components/code.css */

/* Faunder UI code: muted code surfaces and CSS-only block composition. */
:where(code:not([ui-off]):not(pre > code), pre:not([ui-off]):has(> code)) {
  font-size: 0.875em;
  font-family: ui-monospace, monospace;
}

:where(code:not([ui-off]):not(pre > code)) {
  border-radius: 0.25rem;
  background-color: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-800), var(--neutral-100));
  padding: 2px 6px;
}

:where(pre:not([ui-off]):has(> code)) {
  overflow: hidden;
  border: 0;
  border-radius: 0.625rem;
  background-color: light-dark(
    color-mix(in oklch, var(--neutral-100) 50%, transparent),
    color-mix(in oklch, var(--neutral-800) 50%, transparent)
  );
  color: light-dark(var(--neutral-900), var(--neutral-100));
  padding: 16px;
  white-space: pre-wrap;
  overflow-wrap: break-word;

  & > :where(code) {
    display: block;
  }

  &:where([ui-code-block~="scroll"]) {
    overflow: auto;
    white-space: pre;
    overflow-wrap: normal;
  }

  &:where([ui-code-block~="wrap"]) {
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  &:where([ui-code-block~="sm"]) {
    padding: 12px;
    font-size: 0.75rem;
  }

  &:where([ui-code-block~="destructive"]) {
    background-color: light-dark(
      color-mix(in oklch, var(--error-600) 6%, transparent),
      color-mix(in oklch, var(--error-400) 10%, transparent)
    );
  }
}

:where(pre[ui-code-block~="outline"]:not([ui-off]):has(> code)) {
  border: 1px solid light-dark(color-mix(in oklch, var(--neutral-200) 78%, var(--white) 22%), color-mix(in oklch, var(--white) 10%, transparent));
}

/* A figure supplies an optional filename/header and footer around a code block. */
:where(figure[ui-code-block]) {
  overflow: hidden;
  border: 0;
  border-radius: 0.625rem;
  background-color: light-dark(
    color-mix(in oklch, var(--neutral-100) 50%, transparent),
    color-mix(in oklch, var(--neutral-800) 50%, transparent)
  );
  color: light-dark(var(--neutral-900), var(--neutral-100));
}

:where(figure[ui-code-block~="outline"]) {
  border: 1px solid light-dark(color-mix(in oklch, var(--neutral-200) 78%, var(--white) 22%), color-mix(in oklch, var(--white) 10%, transparent));
}

:where(figure[ui-code-block] > figcaption) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-block-end: 1px solid light-dark(color-mix(in oklch, var(--neutral-200) 78%, var(--white) 22%), color-mix(in oklch, var(--white) 10%, transparent));
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

:where(figure[ui-code-block] > figcaption label) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.75rem;
  font-weight: 400;
  cursor: pointer;
}

:where(figure[ui-code-block] > figcaption input[ui-code-wrap]) {
  margin: 0;
}

:where(figure[ui-code-block] > pre:not([ui-off]):has(> code)) {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 1rem;
}

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

:where(figure[ui-code-block] > pre:not([ui-off])[ui-code-block~="wrap"]) {
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

:where(figure[ui-code-block] > pre[ui-code-block~="sm"]) {
  padding: 0.75rem;
}

:where(figure[ui-code-block]:has(> pre[ui-code-block~="destructive"])) {
  background-color: light-dark(
    color-mix(in oklch, var(--error-600) 6%, transparent),
    color-mix(in oklch, var(--error-400) 10%, transparent)
  );
}

:where(figure[ui-code-block] > footer) {
  border-block-start: 1px solid light-dark(color-mix(in oklch, var(--neutral-200) 78%, var(--white) 22%), color-mix(in oklch, var(--white) 10%, transparent));
  padding: 0.75rem 1rem;
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.75rem;
}

/* A checked native control wraps the block; an unchecked one scrolls it. */
:where(figure[ui-code-block]:has(> figcaption input[ui-code-wrap]:checked) > pre:not([ui-off], [ui-code-block~="scroll"])) {
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

:where(figure[ui-code-block]:has(> figcaption input[ui-code-wrap]:not(:checked)) > pre:not([ui-off], [ui-code-block~="wrap"])) {
  overflow: auto;
  white-space: pre;
  overflow-wrap: normal;
}

:where(figure[ui-code-block]:has(> figcaption input[ui-code-wrap]:not(:checked)) > pre > code:not([ui-off])) {
  width: max-content;
  min-width: 100%;
}

}
@layer core {
/* library/components/code-highlight.css */

/* Optional line layout, line emphasis, diff markers and syntax token colors. */
:where(pre[ui-code-highlight~="outline"]:not([ui-off]):has(> code)) {
  border: 1px solid light-dark(
    color-mix(in oklch, var(--neutral-200) 78%, var(--white) 22%),
    color-mix(in oklch, var(--white) 10%, transparent)
  );
}

:where(pre[ui-code-highlight]:not([ui-off]):has(> code > [ui-code-line]) > code:not([ui-off])) {
  white-space: normal;
}

:where(pre[ui-code-highlight]:not([ui-off]):has(> code > [ui-code-line]) > code:not([ui-off]) > [ui-code-line]) {
  position: relative;
  display: block;
  white-space: pre-wrap;
}

:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off])) {
  counter-reset: ui-code-line;
}

:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line]) {
  counter-increment: ui-code-line;
  padding-inline-start: 4.25em;
}

:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line] > [aria-hidden="true"]:first-child) {
  position: absolute;
  inset-inline-start: 0;
  width: 2.5em;
  color: light-dark(var(--neutral-500), var(--neutral-400));
  text-align: end;
  user-select: none;
}

:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line] > [aria-hidden="true"]:first-child)::before {
  content: counter(ui-code-line);
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="highlighted"]) {
  background-color: light-dark(
    color-mix(in oklch, var(--neutral-500) 8%, transparent),
    color-mix(in oklch, var(--neutral-400) 14%, transparent)
  );
  box-shadow: inset 2px 0 light-dark(var(--neutral-500), var(--neutral-400));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="added"], pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="removed"]) {
  padding-inline-start: 1.5em;
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="added"]) {
  background-color: light-dark(
    color-mix(in oklch, oklch(52% 0.14 150) 9%, transparent),
    color-mix(in oklch, oklch(74% 0.14 150) 14%, transparent)
  );
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="removed"]) {
  background-color: light-dark(
    color-mix(in oklch, var(--error-600) 8%, transparent),
    color-mix(in oklch, var(--error-400) 14%, transparent)
  );
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="added"])::before {
  position: absolute;
  inset-inline-start: 0;
  content: "+";
  color: light-dark(oklch(40% 0.13 150), oklch(75% 0.13 150));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="removed"])::before {
  position: absolute;
  inset-inline-start: 0;
  content: "−";
  color: light-dark(var(--error-600), var(--error-400));
}

:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="added"], pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="removed"]) {
  padding-inline-start: 4.25em;
}

:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="added"] > [aria-hidden="true"]:first-child, pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="removed"] > [aria-hidden="true"]:first-child) {
  inset-inline-start: 0;
}

:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="added"])::before,
:where(pre[ui-code-highlight~="numbers"]:not([ui-off]) > code:not([ui-off]) > [ui-code-line="removed"])::before {
  inset-inline-start: 3em;
}

/* Style manual tokens and common PrismJS token classes; highlighting stays external. */
:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(
  [ui-code-token="keyword"],
  .token.keyword,
  .token.atrule,
  .token.important
)) {
  color: light-dark(oklch(52% 0.19 25), oklch(76% 0.15 350));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(
  [ui-code-token="string"],
  .token.string,
  .token.char,
  .token.attr-value,
  .token.url,
  .token.regex,
  .token.inserted
)) {
  color: light-dark(oklch(43% 0.13 150), oklch(75% 0.14 155));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(
  [ui-code-token="function"],
  .token.function,
  .token.class-name,
  .token.builtin
)) {
  color: light-dark(oklch(48% 0.15 280), oklch(78% 0.12 285));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(
  [ui-code-token="number"],
  .token.number,
  .token.boolean,
  .token.constant,
  .token.symbol
)) {
  color: light-dark(oklch(52% 0.16 60), oklch(78% 0.15 70));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(
  [ui-code-token="property"],
  .token.property,
  .token.tag,
  .token.attr-name,
  .token.selector,
  .token.variable
)) {
  color: light-dark(oklch(47% 0.13 235), oklch(76% 0.13 230));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(
  [ui-code-token="comment"],
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata
)) {
  color: light-dark(var(--neutral-500), var(--neutral-400));
  font-style: italic;
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) .token.deleted) {
  color: light-dark(var(--error-600), var(--error-400));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(
  .token.operator,
  .token.punctuation,
  .token.entity
)) {
  color: light-dark(var(--neutral-600), var(--neutral-300));
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) .token.url) {
  text-decoration: underline;
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) .token.namespace) {
  opacity: 0.7;
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) :is(.token.bold, .token.important)) {
  font-weight: 700;
}

:where(pre[ui-code-highlight]:not([ui-off]) > code:not([ui-off]) .token.italic) {
  font-style: italic;
}

}
@layer core {
/* library/components/kbd.css */

/* The native kbd element represents a key or key combination. */
:where(kbd:not([ui-off])) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 0.375rem;
  background: light-dark(var(--neutral-100), var(--neutral-800));
  padding: 0.125rem 0.375rem;
  color: light-dark(var(--neutral-800), var(--neutral-100));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  box-shadow: 0 1px 0 color-mix(in oklch, var(--black) 8%, transparent);
}

}
@layer core {
/* library/components/link.css */

/* Faunder UI links: black/white light/dark color pairs. */
:where( a:not([ui-off]):not([ui-button]):not([ui-card]),
  [ui-link]:not([ui-off]):not([ui-button]):not([ui-card]) ) {
  color: light-dark(var(--black), var(--white));
  text-decoration: underline;
  &:where([ui-link~="inherit"]) {
    color: inherit;
  }
  &:where(:hover) {
    color: light-dark(var(--neutral-600), var(--neutral-400));
  }
  &:where(:active) {
    color: var(--neutral-500);
  }
}

}
@layer core {
/* library/components/list.css */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  LISTS
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

:where(ul:not([ui-off]), ol:not([ui-off])) {
  padding-inline-start: 40px;
}

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


}
@layer core {
/* library/components/input.css */

/* Faunder UI input: field styling with Faunder's attribute API. */
: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-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="file"],
  input[list],
  textarea,
  select) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid light-dark(
    oklch(92% 0.004 286.32),
    color-mix(in oklch, var(--white) 15%, transparent)
  );
  border-radius: 0.5rem;
  background: light-dark(transparent, color-mix(in oklch, var(--white) 4.5%, transparent));
  padding: 4px 10px;
  color: light-dark(oklch(14.1% 0.005 285.823), oklch(98.5% 0 0));
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 color-mix(in oklch, var(--black) 5%, transparent);
  transition: color 150ms, box-shadow 150ms;
  outline: none;

  &:where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) {
    height: 40px;
  }
  &:where(textarea) {
    min-height: 4rem;
    padding-block: 8px;
    resize: none;
  }
  &:where(:focus-visible) {
    border-color: light-dark(var(--neutral-500), var(--neutral-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }
  &:where(:user-invalid, [aria-invalid="true"]) {
    border-color: light-dark(
      var(--error-600),
      var(--error-400)
    );
    &:where(:focus-visible) {
      box-shadow: 0 0 0 3px light-dark(
        color-mix(in oklch, var(--error-600) 20%, transparent),
        color-mix(in oklch, var(--error-400) 40%, transparent)
      );
    }
  }
  &:where(:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }
  &::placeholder {
    color: light-dark(oklch(55.2% 0.016 285.938), oklch(70.5% 0.015 286.067));
    opacity: 1;
  }
  &::file-selector-button {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
  }
}

@supports (-webkit-touch-callout: none) {
  /* Avoid iOS WebKit's intrinsic sizing; the native picker still opens. */
  :where(
    input[type="date"]:not([ui-off]),
    input[type="datetime-local"]:not([ui-off]),
    input[type="month"]:not([ui-off]),
    input[type="week"]:not([ui-off]),
    input[type="time"]:not([ui-off])
  ) {
    -webkit-appearance: none;
    appearance: none;
  }
}

@media (min-width: 48rem) {
  :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-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="file"],
    input[list],
    textarea,
    select) {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :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-local"], input[type="month"],
    input[type="week"], input[type="time"], input[type="file"], input[list], textarea, select) {
    transition: none;
  }
}

}
@layer core {
/* library/components/textarea.css */

/* A semantic wrapper for a textarea with optional header and footer content. */
:where([ui-textarea]) {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid light-dark(
    oklch(92% 0.004 286.32),
    color-mix(in oklch, var(--white) 15%, transparent)
  );
  border-radius: 0.5rem;
  background: light-dark(transparent, color-mix(in oklch, var(--white) 4.5%, transparent));
  color: light-dark(oklch(14.1% 0.005 285.823), oklch(98.5% 0 0));
  box-shadow: 0 1px 2px 0 color-mix(in oklch, var(--black) 5%, transparent);
  transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}

:where([ui-textarea] > textarea) {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 4rem;
  margin: 0;
  padding: 0.75rem 0.625rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  outline: none;
  resize: none;
}

:where([ui-textarea] > textarea)::placeholder {
  color: light-dark(oklch(55.2% 0.016 285.938), oklch(70.5% 0.015 286.067));
}

:where([ui-textarea] > header, [ui-textarea] > footer) {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  gap: 0.5rem;
  color: light-dark(oklch(55.2% 0.016 285.938), oklch(70.5% 0.015 286.067));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  user-select: none;
}

:where([ui-textarea] > header) {
  padding: 0.75rem 0.625rem 0;
  border-block-end: 1px solid light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 10%, transparent));
}

:where([ui-textarea] > footer) {
  padding: 0 0.625rem 0.75rem;
  border-block-start: 1px solid light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 10%, transparent));
}

:where([ui-textarea]:has(> textarea:focus-visible)) {
  border-color: light-dark(var(--neutral-500), var(--neutral-400));
  box-shadow: 0 0 0 3px light-dark(
    color-mix(in oklch, var(--neutral-500) 50%, transparent),
    color-mix(in oklch, var(--neutral-400) 50%, transparent)
  );
}

:where([ui-textarea]:has(> textarea:is(:user-invalid, [aria-invalid="true"]))) {
  border-color: light-dark(var(--error-600), var(--error-400));
}

:where([ui-textarea]:has(> textarea:focus-visible:is(:user-invalid, [aria-invalid="true"]))) {
  box-shadow: 0 0 0 3px light-dark(
    color-mix(in oklch, var(--error-600) 20%, transparent),
    color-mix(in oklch, var(--error-400) 40%, transparent)
  );
}

:where([ui-textarea]:has(> textarea:disabled)) {
  cursor: not-allowed;
}

:where([ui-textarea~="auto-height"] > textarea) {
  field-sizing: content;
}

:where([ui-textarea~="resize"], [ui-textarea~="resize-x"], [ui-textarea~="resize-y"]) {
  overflow: auto;
}

:where([ui-textarea~="resize"]) {
  resize: both;
}

:where([ui-textarea~="resize-x"]) {
  resize: horizontal;
}

:where([ui-textarea~="resize-y"]) {
  resize: vertical;
}

}
@layer core {
/* library/components/select.css */

/* Keep the browser's native select picker and use a text-colored CSS chevron. */
:where(select:not([ui-off])) {
  appearance: none;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  border-radius: 0.625rem;
  padding-block: 4px;
  padding-inline: 10px 32px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

:where(select:not([ui-off]):dir(rtl)) {
  background-position: left 17px center, left 12px center;
  padding-inline: 32px 10px;
}

:where(select:not([ui-off]):hover:not(:disabled)) {
  background-color: light-dark(
    transparent,
    color-mix(in oklch, var(--white) 7.5%, transparent)
  );
}

:where(select:not([ui-off]):has(> option:checked[value=""])) {
  color: light-dark(var(--neutral-500), var(--neutral-400));
}

}
@layer core {
/* library/components/accordion.css */

/* Faunder UI accordion: native disclosure styling and behavior. */
:where([ui-accordion]) {
  display: flex;
  flex-direction: column;
  width: 100%;
}

:where([ui-accordion]:not([ui-off]) > details:not([hidden], [ui-off]):not(:nth-last-child(1 of details:not([hidden], [ui-off])))) {
  border-block-end: 1px solid light-dark(
    oklch(92% 0.004 286.32),
    color-mix(in oklch, var(--white) 15%, transparent)
  );
}

:where([ui-accordion]:not([ui-off]) > details:not([ui-off])) {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where([ui-accordion]:not([ui-off]) > details:not([ui-off]) > :not(summary):last-child) {
  padding-block-end: 0.625rem;
}

:where([ui-accordion]:not([ui-off]) > details:not([ui-off]) > summary:not([ui-off])) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding-block: 0.625rem;
  text-align: start;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  &:where(:hover) {
    text-decoration: underline;
  }

  &:where(:focus-visible) {
    border-color: light-dark(var(--neutral-500), var(--neutral-400));
    outline: none;
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }

  &::after {
    flex: 0 0 1rem;
    margin-inline-start: auto;
    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='black' 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;
    background-color: light-dark(
      oklch(55.2% 0.016 285.938),
      oklch(70.5% 0.015 286.067)
    );
    width: 1rem;
    height: 1rem;
    content: "";
  }
}

:where([ui-accordion]:not([ui-off]) > details[inert]:not([ui-off]) > summary:not([ui-off])) {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

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

:where([ui-accordion]:not([ui-off]) > details:not([ui-off]))::details-content {
  block-size: 0;
  overflow-y: clip;
  opacity: 0;
}

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

:where([ui-accordion~="leading-icon"]:not([ui-off]) > details:not([ui-off]) > summary:not([ui-off])) {
  justify-content: flex-start;

  &::after {
    order: -1;
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
  }
}

:where([ui-accordion~="bordered"]:not([ui-off])) {
  border: 1px solid light-dark(
    oklch(92% 0.004 286.32),
    color-mix(in oklch, var(--white) 15%, transparent)
  );
  border-radius: 0.5rem;
}

:where([ui-accordion~="bordered"]:not([ui-off]) > details:not([ui-off]) > summary:not([ui-off])) {
  padding-inline: 0.75rem;
}

:where([ui-accordion~="bordered"]:not([ui-off]) > details:not([ui-off]) > :not(summary, [ui-off])) {
  padding-inline: 0.75rem;
}

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

  :where([ui-accordion]:not([ui-off]) > details:not([ui-off]))::details-content {
    transition: block-size 200ms ease, opacity 200ms ease;
  }

  :where([ui-accordion]:not([ui-off]) > details:not([ui-off]) > summary:not([ui-off]))::after {
    transition: rotate 200ms ease;
  }
}

}
@layer core {
/* library/components/collapsible.css */

/* Collapsible styles a native details/summary disclosure without runtime code. */
:where(details[ui-collapsible]:not([ui-off])) {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where(details[ui-collapsible]:not([ui-off]) > summary:not([ui-off])) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms;

  &::-webkit-details-marker { display: none; }

  &::after {
    flex: 0 0 1rem;
    margin-inline-start: auto;
    width: 1rem;
    height: 1rem;
    background: light-dark(var(--neutral-600), var(--neutral-300));
    mask: var(
      --ui-icon,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    ) center / contain no-repeat;
    content: "";
    transition: rotate 150ms;
  }

  @media (hover: hover) {
    &:where(:hover) { background: light-dark(var(--neutral-100), var(--neutral-800)); }
  }

  &:where(:focus-visible) {
    outline: none;
    border-color: light-dark(var(--neutral-500), var(--neutral-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }
}

:where(details[ui-collapsible][open]:not([ui-off]) > summary:not([ui-off]))::after {
  rotate: 180deg;
}

:where(details[ui-collapsible]:not([ui-off]) > :not(summary, [ui-off])) {
  padding: 0.5rem 0.75rem 0.75rem;
  color: light-dark(var(--neutral-600), var(--neutral-300));
}

:where(details[ui-collapsible][inert]:not([ui-off]) > summary:not([ui-off])) {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :where(details[ui-collapsible]:not([ui-off])) { interpolate-size: allow-keywords; }
    details[ui-collapsible]:not([ui-off])::details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      transition: block-size 200ms ease, opacity 200ms ease;
    }
    details[ui-collapsible][open]:not([ui-off])::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(details[ui-collapsible]:not([ui-off]) > summary:not([ui-off]),
    details[ui-collapsible]:not([ui-off]) > summary:not([ui-off])::after) {
    transition: none;
  }
}

}
@layer core {
/* library/components/alert.css */

/* Alert callout structure adapted to native HTML.
   Default and destructive are the upstream variants. No JavaScript required. */
:where([ui-alert]) {
  --ui-alert-foreground: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
  --ui-alert-description-foreground: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  position: relative;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  align-items: start;
  gap: 0.125rem 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ui-alert-border-color, light-dark(oklch(92.2% 0 0), color-mix(in oklch, var(--white) 10%, transparent)));
  border-radius: 0.625rem;
  background-color: var(--ui-alert-background, light-dark(var(--white), oklch(20.5% 0 0)));
  padding: 0.75rem 1rem;
  color: var(--ui-alert-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where([ui-alert][ui-color]) {
  --ui-alert-background: light-dark(var(--_ui-color-50), var(--_ui-color-950));
  --ui-alert-border-color: light-dark(var(--_ui-color-200), var(--_ui-color-800));
  --ui-alert-foreground: light-dark(var(--_ui-color-800), var(--_ui-color-100));
  --ui-alert-description-foreground: light-dark(var(--_ui-color-700), var(--_ui-color-200));
}

/* Also handle a simple text-only alert without a wrapper. */
:where([ui-alert]:not(:has(> *))) {
  display: block;
}

:where([ui-alert]:has(> [data-alert-action])) {
  padding-inline-end: 5.5rem;
}

:where([ui-alert] > [data-alert-action]) {
  position: absolute;
  inset-block-start: 0.375rem;
  inset-inline-end: 0.5rem;
}

:where([ui-alert]:has(> :is(svg, i[ui-icon]))) {
  grid-template-columns: 1rem minmax(0, 1fr);
  column-gap: 0.75rem;
}

:where([ui-alert] > :is(svg, i[ui-icon])) {
  grid-column: 1;
  grid-row: 1;
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
  transform: translateY(0.125rem);
  color: currentColor;
}

/* A strong title or explicitly composed ui-heading replaces AlertTitle's data slot. */
:where([ui-alert] > :is(strong, [ui-heading])) {
  grid-column: 2;
  min-width: 0;
  min-height: 1rem;
}

:where([ui-alert] > strong) {
  font-weight: 500;
}

/* Native p or div replaces AlertDescription's data slot. */
:where([ui-alert] > :is(p, div)) {
  grid-column: 2;
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  min-width: 0;
  color: var(--ui-alert-description-foreground);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

:where([ui-alert] > p, [ui-alert] > div > p) {
  line-height: 1.625;
}

:where([ui-alert~="destructive"]) {
  --ui-alert-foreground: light-dark(var(--error-600), var(--error-400));
  --ui-alert-description-foreground: light-dark(
    color-mix(in oklch, var(--error-600) 90%, transparent),
    color-mix(in oklch, var(--error-400) 90%, transparent)
  );
}

}
@layer core {
/* library/components/item.css */

/* Item: compact row dimensions with semantic HTML.
   Only the item root has ui-item. Children use native HTML elements. */
:where([ui-item]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 1rem;
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: start;
  text-decoration: none;
  outline: none;
  transition: background-color 100ms, border-color 100ms, box-shadow 100ms;
}
:where([ui-item~="outline"]) {
  border-color: light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 15%, transparent));
}
:where([ui-item~="muted"]) {
  background-color: light-dark(
    color-mix(in oklch, var(--neutral-100) 50%, transparent),
    color-mix(in oklch, var(--neutral-800) 50%, transparent)
  );
}
/* Faunder UI adds xs alongside sm and the default size. */
:where([ui-item~="sm"]) {
  gap: 0.625rem;
  padding: 0.75rem 1rem;
}
:where([ui-item~="xs"]) {
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}

/* Rendering Item as an anchor replaces asChild/render without JS. */
:where(a[ui-item]) {
  cursor: pointer;
  text-decoration: none;
}
@media (hover: hover) {
  :where(a[ui-item]:hover) {
    background-color: light-dark(
      color-mix(in oklch, var(--neutral-100) 50%, transparent),
      color-mix(in oklch, var(--neutral-800) 50%, transparent)
    );
  }
}
:where([ui-item]:focus-visible) {
  border-color: light-dark(var(--neutral-500), var(--neutral-400));
  box-shadow: 0 0 0 3px light-dark(
    color-mix(in oklch, var(--neutral-500) 50%, transparent),
    color-mix(in oklch, var(--neutral-400) 50%, transparent)
  );
}
:where([ui-item][aria-disabled="true"]) {
  opacity: 0.5;
  pointer-events: none;
}

/* ItemMedia: direct SVG (default), framed icon, image, avatar or avatar group. */
:where([ui-item] > :is(svg, i[ui-icon]):first-child) {
  display: block;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
:where([ui-item~="icon"] > :is(svg, i[ui-icon]):first-child) {
  width: 2rem;
  height: 2rem;
  border: 1px solid light-dark(var(--neutral-200), var(--neutral-700));
  border-radius: 0.375rem;
  padding: 0.4375rem;
  background-color: light-dark(var(--neutral-100), var(--neutral-800));
}
:where([ui-item] > :is(img, picture, figure):first-child) {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  overflow: hidden;
  border-radius: 0.375rem;
}
:where([ui-item] > img:first-child, [ui-item] > picture:first-child > img, [ui-item] > figure:first-child > img) {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
}
:where([ui-item~="avatar"] > :is(img, picture, figure, abbr):first-child, [ui-item~="avatar"] > picture:first-child > img, [ui-item~="avatar"] > figure:first-child > img) {
  border-radius: 50%;
}
:where([ui-item] > abbr:first-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: light-dark(var(--neutral-100), var(--neutral-800));
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
:where([ui-item] > ul:first-child) {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  list-style: none;
}
:where([ui-item] > ul:first-child > li) {
  padding: 0;
  margin: 0;
  list-style: none;
}
:where([ui-item] > ul:first-child > li + li) {
  margin-inline-start: -0.5rem;
}
:where([ui-item] > ul:first-child > li > :is(img, abbr)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border: 2px solid light-dark(var(--white), var(--neutral-900));
  border-radius: 50%;
  background: light-dark(var(--neutral-100), var(--neutral-800));
  font-size: 0.75rem;
  text-decoration: none;
  position: relative;
}

/* Media is top-aligned and nudged 2px when a description is present. */
:where([ui-item]:has(> div > p) > :is(svg, i[ui-icon], img, picture, figure, abbr, ul):first-child) {
  align-self: flex-start;
  transform: translateY(0.125rem);
}

/* ItemContent, title and two-line description. */
:where([ui-item] > div) {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
:where([ui-item] > div + div) {
  flex: 0 0 auto;
}
:where([ui-item] > div > p) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  text-wrap: balance;
}
:where([ui-item] > div > p > a) {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
@media (hover: hover) {
  :where([ui-item] > div > p > a:hover) {
    color: light-dark(var(--neutral-900), var(--neutral-100));
  }
}

/* ItemActions: one direct action or a semantic list of commands. */
:where([ui-item] > :is(button, time, output)) {
  flex: 0 0 auto;
}
:where([ui-item] > :is(time, output)) {
  color: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  font-size: 0.875rem;
}
:where([ui-item] > menu) {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
:where([ui-item] > menu > li) {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where([ui-item] > :is(svg, i[ui-icon]):last-child:not(:first-child)) {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

/* ItemHeader / ItemFooter: full-width regions. */
:where([ui-item] > :is(header, footer)) {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
:where([ui-item] > header > img) {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.375rem;
  object-fit: cover;
}
:where([ui-item] > footer) {
  margin-block-start: 0;
}

/* Item groups use a valid native ul/li with li > hr. */
:where(ul:has(> li[ui-item])) {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(ul:has(> li[ui-item]) > li) {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(ul:has(> li[ui-item]) > li[role="presentation"] > hr:not([ui-off])) {
  margin: 0;
  border: 0;
  border-block-start: 1px solid light-dark(var(--neutral-200), var(--neutral-700));
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-item]) { transition: none; }
}

}
@layer core {
/* library/components/breadcrumb.css */

/* Breadcrumb geometry using semantic nav > ol > li.
   Only the root gets a ui-* attribute. Decorative separators are generated in CSS. */
:where([ui-breadcrumb]) {
  --_ui-breadcrumb-muted: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  --_ui-breadcrumb-foreground: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
  display: block;
  min-width: 0;
}
:where([ui-breadcrumb] > ol) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--_ui-breadcrumb-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow-wrap: break-word;
}
@media (min-width: 40rem) {
  :where([ui-breadcrumb] > ol) { gap: 0.625rem; }
  /* Original has a 10px list gap on desktop on both sides of a separator. */
  :where([ui-breadcrumb] > ol > li + li:not([role="presentation"]))::before {
    margin-inline-end: 0.25rem;
  }
}

:where([ui-breadcrumb] > ol > li) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Automatically generate the default 14px Lucide ChevronRight separators. */
:where([ui-breadcrumb] > ol > li + li:not([role="presentation"]))::before {
  display: inline-block;
  flex: 0 0 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
  content: "";
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
:where([ui-breadcrumb] > ol > li[role="presentation"] + li)::before {
  display: none;
}
/* If an explicit separator is used, it is a decorative li, not an item. */
:where([ui-breadcrumb] > ol > li[role="presentation"]) {
  flex: 0 0 auto;
  pointer-events: none;
}
:where([ui-breadcrumb] > ol > li[role="presentation"] > svg) {
  display: block;
  flex: 0 0 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
}
:where([ui-breadcrumb] > ol > li[role="presentation"] + li) {
  gap: 0;
}

/* Optional slash root token uses exactly the same list anatomy. */
:where([ui-breadcrumb~="slash"] > ol > li + li:not([role="presentation"]))::before {
  flex-basis: auto;
  width: auto;
  height: auto;
  mask-image: none;
  background: transparent;
  content: "/";
}
:where([ui-breadcrumb]:dir(rtl) > ol > li + li:not([role="presentation"]))::before {
  transform: scaleX(-1);
}
:where([ui-breadcrumb~="slash"]:dir(rtl) > ol > li + li:not([role="presentation"]))::before {
  transform: none;
}

/* A native anchor is the equivalent of BreadcrumbLink, including asChild. */
:where([ui-breadcrumb] > ol > li > a) {
  color: var(--_ui-breadcrumb-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
@media (hover: hover) {
  :where([ui-breadcrumb] > ol > li > a:hover) {
    color: var(--_ui-breadcrumb-foreground);
    text-decoration: none;
  }
}
:where([ui-breadcrumb] > ol > li > a:focus-visible) {
  border-radius: 0.125rem;
  outline: 2px solid light-dark(var(--neutral-500), var(--neutral-400));
  outline-offset: 3px;
}

/* Current page is not a link. Both placements of aria-current are valid. */
:where([ui-breadcrumb] > ol > li[aria-current="page"],
       [ui-breadcrumb] > ol > li > [aria-current="page"]) {
  color: var(--_ui-breadcrumb-foreground);
  font-weight: 400;
}

/* Ellipsis, equivalent to BreadcrumbEllipsis, is decorative unless it opens details. */
:where([ui-breadcrumb] > ol > li > span[aria-hidden="true"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 1;
  font-size: 1.25rem;
  letter-spacing: 0;
}

/* Native details + summary replaces the optional collapsed-pages dropdown.
   The disclosure is keyboard-accessible and works without a JS runtime. */
:where([ui-breadcrumb] > ol > li > details) {
  position: relative;
  flex: 0 0 auto;
}
:where([ui-breadcrumb] > ol > li > details > summary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1.25rem;
  border-radius: 0.25rem;
  color: var(--_ui-breadcrumb-muted);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
:where([ui-breadcrumb] > ol > li > details > summary)::-webkit-details-marker {
  display: none;
}
:where([ui-breadcrumb] > ol > li > details > summary > svg) {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
}
:where([ui-breadcrumb] > ol > li > details > summary > span[aria-hidden="true"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  line-height: 1;
}
:where([ui-breadcrumb] > ol > li > details > summary:hover) {
  color: var(--_ui-breadcrumb-foreground);
}
:where([ui-breadcrumb] > ol > li > details > summary:focus-visible) {
  outline: 2px solid light-dark(var(--neutral-500), var(--neutral-400));
  outline-offset: 3px;
}
:where([ui-breadcrumb] > ol > li > details > ul) {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  box-sizing: border-box;
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.375rem;
  border: 1px solid light-dark(var(--neutral-200), var(--neutral-700));
  border-radius: 0.5rem;
  background: light-dark(var(--white), var(--neutral-900));
  box-shadow: 0 6px 16px color-mix(in oklch, var(--black) 12%, transparent);
  list-style: none;
  color: light-dark(var(--neutral-900), var(--neutral-100));
  text-align: start;
}
:where([ui-breadcrumb] > ol > li > details:not([open]) > ul) {
  display: none;
}
:where([ui-breadcrumb] > ol > li > details > ul > li) {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where([ui-breadcrumb] > ol > li > details > ul > li > a) {
  display: block;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
:where([ui-breadcrumb] > ol > li > details > ul > li > a:hover,
       [ui-breadcrumb] > ol > li > details > ul > li > a:focus-visible) {
  background: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-950), var(--neutral-50));
  outline: none;
}

/* The responsive recipe shows intermediate links on desktop and a disclosure
   of those same links below 768px. This avoids any app-specific JS. */
@media (min-width: 48rem) {
  :where([ui-breadcrumb~="responsive"] > ol > li:has(> details)) {
    display: none;
  }
}
@media (max-width: 47.999rem) {
  :where([ui-breadcrumb~="responsive"] > ol > li:not(:first-child):not(:has(> details)):not(:nth-last-child(-n+2))) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-breadcrumb] > ol > li > a) { transition: none; }
}

}
@layer core {
/* library/components/card.css */

/* Faunder UI card: semantic layout with Faunder's attribute API. */
:where([ui-card]) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  border: 0;
  border-radius: 0.75rem;
  padding-block: 1rem;
  background-color: light-dark(var(--white), oklch(0.21 0.006 285.885));
  color: light-dark(oklch(0.141 0.005 285.823), oklch(0.985 0 0));
  box-shadow: 0 0 0 1px light-dark(
    color-mix(in oklch, oklch(0.141 0.005 285.823) 10%, transparent),
    color-mix(in oklch, oklch(0.985 0 0) 10%, transparent)
  );

  &:where([ui-card~="sm"]) {
    gap: 0.75rem;
    padding-block: 0.75rem;
  }

  &:where(:has(> footer)) {
    padding-block-end: 0;
  }

  &:where(:has(> :is(img, picture, video, figure):first-child)) {
    padding-block-start: 0;
  }

  &:where(a) {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
  }

  &:where(a[href]) {
    transition: background-color 150ms ease;

    @media (hover: hover) {
      &:where(:hover) {
        background-color: light-dark(
          oklch(98% 0 0),
          color-mix(in oklch, oklch(0.21 0.006 285.885) 96%, oklch(100% 0 0))
        );
      }
    }

    &:where(:active) {
      background-color: light-dark(
        oklch(96% 0 0),
        color-mix(in oklch, oklch(0.21 0.006 285.885) 92%, oklch(100% 0 0))
      );
    }
  }
}

:where([ui-card] > header) {
  container-name: card-header;
  container-type: inline-size;
  display: grid;
  grid-auto-rows: min-content;
  align-items: start;
  gap: 0.25rem;
  border-start-start-radius: 0.75rem;
  border-start-end-radius: 0.75rem;
  padding-inline: 1rem;

  &:where(:has(> p)) {
    grid-template-rows: auto auto;
  }

  &:where(:has(> button, > a)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

:where([ui-card~="sm"] > header) {
  padding-inline: 0.75rem;
}

:where([ui-card] > header > :is(button, a)) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}

:where([ui-card] > :not(header, footer, img, picture, video, figure)) {
  padding-inline: 1rem;
}

:where([ui-card~="sm"] > :not(header, footer, img, picture, video, figure)) {
  padding-inline: 0.75rem;
}

:where([ui-card] > footer) {
  display: flex;
  align-items: center;
  border-block-start: 1px solid light-dark(
    oklch(0.92 0.004 286.32),
    color-mix(in oklch, var(--white) 10%, transparent)
  );
  border-end-start-radius: 0.75rem;
  border-end-end-radius: 0.75rem;
  padding: 1rem;
  background-color: light-dark(
    color-mix(in oklch, oklch(0.967 0.001 286.375) 50%, transparent),
    color-mix(in oklch, oklch(0.274 0.006 286.033) 50%, transparent)
  );
}

:where([ui-card~="sm"] > footer) {
  padding: 0.75rem;
}

:where([ui-card] > img, [ui-card] > picture, [ui-card] > video, [ui-card] > figure) {
  display: block;
  width: 100%;
  max-width: 100%;
}

:where([ui-card] > figure) {
  margin: 0;
}

:where([ui-card] > img:first-child, [ui-card] > picture:first-child > img, [ui-card] > figure:first-child > img) {
  border-start-start-radius: 0.75rem;
  border-start-end-radius: 0.75rem;
}

:where([ui-card] > img:last-child, [ui-card] > picture:last-child > img, [ui-card] > figure:last-child > img) {
  border-end-start-radius: 0.75rem;
  border-end-end-radius: 0.75rem;
}

:where([ui-card] > img, [ui-card] > picture > img, [ui-card] > figure > img, [ui-card] > video) {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-card] a[href]) { transition: none; }
}

}
@layer core {
/* library/components/button.css */

/* Faunder UI buttons: attribute-based variants and sizes. */
:where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button]:not(input[type="checkbox"], input[type="radio"]),
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-900), var(--neutral-50));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: all 150ms;

  &:where(:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }
  &:where(:disabled) { opacity: 0.5; pointer-events: none; }
  &:where(:active:not([aria-haspopup])) { transform: translateY(1px); }
  &:where([aria-invalid="true"]) {
    border-color: light-dark(
      var(--error-600),
      color-mix(in oklch, var(--error-400) 50%, transparent)
    );
    &:where(:focus-visible) {
      box-shadow: 0 0 0 3px light-dark(
        color-mix(in oklch, var(--error-600) 20%, transparent),
        color-mix(in oklch, var(--error-400) 40%, transparent)
      );
    }
  }

  &:where(:has(> svg)) { padding-inline: 12px; }
  & > svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
  &:where([ui-button~="xs"]) > svg { width: 12px; height: 12px; }
  &:where([ui-icon])::before { width: 16px; height: 16px; }
  &:where([ui-button~="xs"][ui-icon])::before { width: 12px; height: 12px; }

  &:where([aria-busy="true"]:not(input[type="button"], input[type="submit"], input[type="reset"])) {
    position: relative;
    /* Keep child text in the accessibility tree while hiding it visually. */
    & > * { opacity: 0; }
    &::before { opacity: 0; }
    &::after {
      position: absolute;
      inset: 0;
      width: 1.25em;
      height: 1.25em;
      box-sizing: content-box;
      padding: 1px;
      overflow: hidden;
      border-radius: 0.01px;
      aspect-ratio: 1;
      margin: auto;
      background: light-dark(var(--neutral-900), var(--neutral-50));
      mask: var(--_ui-icon-spinner) center / contain no-repeat;
      mask-origin: content-box;
      mask-clip: content-box;
      box-shadow: 0 0 1px transparent;
      animation: ui-loading 1s linear infinite;
      content: "";
    }
  }

  &:where([ui-button~="primary"]) {
    background: light-dark(var(--neutral-900), var(--neutral-50));
    color: light-dark(var(--neutral-50), var(--neutral-900));
    &:where([aria-busy="true"])::after { background: light-dark(var(--neutral-50), var(--neutral-900)); }
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(
          var(--neutral-800),
          var(--neutral-200)
        );
      }
    }
  }

  &:where([ui-button~="outline"], label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="outline"]:not([ui-off]))) {
    border-color: light-dark(var(--neutral-300), color-mix(in oklch, var(--white) 15%, transparent));
    background: light-dark(var(--white), color-mix(in oklch, var(--white) 4.5%, transparent));
    color: light-dark(var(--neutral-950), var(--neutral-50));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--neutral-100), color-mix(in oklch, var(--white) 7.5%, transparent));
      }
    }
  }

  &:where([ui-button~="secondary"]),
  &:where(:not([ui-button~="primary"], [ui-button~="ghost"], [ui-button~="outline"], [ui-button~="inline"], [ui-button~="link"], [aria-busy="true"])):not(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="outline"]:not([ui-off]))):not(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="ghost"]:not([ui-off]))) {
    background: light-dark(var(--_ui-color-100, var(--neutral-100)), var(--_ui-color-800, var(--neutral-800)));
    color: light-dark(var(--_ui-color-900, var(--neutral-900)), var(--_ui-color-50, var(--neutral-50)));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(
          color-mix(in oklch, var(--_ui-color-100, var(--neutral-100)), var(--_ui-color-900, var(--neutral-900)) 5%),
          color-mix(in oklch, var(--_ui-color-800, var(--neutral-800)), var(--_ui-color-50, var(--neutral-50)) 5%)
        );
      }
    }
    &:where([aria-expanded="true"]) { background: light-dark(var(--_ui-color-100, var(--neutral-100)), var(--_ui-color-800, var(--neutral-800))); }
  }

  &:where([ui-button~="ghost"], label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="ghost"]:not([ui-off]))) {
    background: transparent;
    color: light-dark(var(--neutral-900), var(--neutral-50));
    @media (hover: hover) {
      &:where(:hover) {
        background: light-dark(var(--neutral-100), color-mix(in oklch, var(--neutral-800) 50%, transparent));
      }
    }
    &:where([aria-expanded="true"]) { background: light-dark(var(--neutral-100), var(--neutral-800)); }
    &:where([aria-busy="true"])::after { background: light-dark(var(--neutral-900), var(--neutral-50)); }
  }

  &:where([ui-button~="link"]) {
    background: transparent;
    padding-inline: 0;
    color: light-dark(var(--neutral-900), var(--neutral-50));
    text-underline-offset: 4px;
    @media (hover: hover) { &:where(:hover) { text-decoration: underline; } }
  }

  &:where([ui-button~="inline"]) {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    color: inherit;
    @media (hover: hover) {
      &:where(:hover) {
        background: transparent;
        color: light-dark(var(--neutral-800), var(--neutral-200));
      }
    }
    &:where(:active) {
      background: transparent;
      color: light-dark(var(--neutral-700), var(--neutral-300));
    }
    &:where(:disabled, [aria-busy="true"]) {
      background: transparent;
    }
  }

  &:where([aria-busy="true"]:not(input[type="button"], input[type="submit"], input[type="reset"])) {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  &:where([ui-button~="xs"]) { height: 24px; min-height: 24px; padding: 2px 8px; font-size: 0.75rem; line-height: 1rem; gap: 4px; }
  &:where([ui-button~="sm"]) { height: 36px; min-height: 36px; padding: 4px 12px; font-size: 0.875rem; gap: 6px; }
  &:where([ui-button~="lg"]) { height: 44px; min-height: 44px; padding: 8px 24px; }
  &:where([ui-button~="block"]) { width: 100%; }
  &:where([ui-button~="wide"]) { padding-inline: 32px; }
  &:where([ui-button~="wide"][ui-button~="xs"]) { padding-inline: 16px; }
  &:where([ui-button~="wide"][ui-button~="sm"]) { padding-inline: 20px; }
  &:where([ui-button~="wide"][ui-button~="lg"]) { padding-inline: 40px; }

  &:where([ui-button~="circle"]) {
    width: 40px;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
  }
  &:where([ui-button~="square"]) { border-radius: 4px; }
  &:where([ui-button~="circle"][ui-button~="xs"]) { width: 24px; }
  &:where([ui-button~="circle"][ui-button~="sm"]) { width: 36px; }
  &:where([ui-button~="circle"][ui-button~="lg"]) { width: 44px; }
  &:where([ui-button~="rounded"]) { border-radius: 9999px; }

  &:where([ui-icon]:empty) {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }
  &:where([ui-icon~="xs"]:empty) { width: 24px; min-width: 24px; height: 24px; min-height: 24px; }
  &:where([ui-icon~="sm"]:empty) { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  &:where([ui-icon~="lg"]:empty) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  &:where([ui-icon~="xl"]:empty) { width: 64px; min-width: 64px; height: 64px; min-height: 64px; }
  &:where([ui-button~="xs"]:has(> svg)) { padding-inline: 6px; }
  &:where([ui-button~="sm"]:has(> svg)) { padding-inline: 10px; }
  &:where([ui-button~="lg"]:has(> svg)) { padding-inline: 16px; }
  &:where([ui-button~="link"]:not([ui-button~="wide"])) { padding-inline: 0; }
}

/* A named palette colors the button while its variant controls the treatment. */
:where([ui-color]:is([ui-button]:not(input[type="checkbox"], input[type="radio"]), button, input[type="button"], input[type="submit"], input[type="reset"]):not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  background: light-dark(var(--_ui-color-100), var(--_ui-color-900));
  color: light-dark(var(--_ui-color-900), var(--_ui-color-50));
  &:where(:focus-visible) {
    border-color: light-dark(var(--_ui-color-500), var(--_ui-color-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--_ui-color-500) 35%, transparent),
      color-mix(in oklch, var(--_ui-color-400) 40%, transparent)
    );
  }
  @media (hover: hover) {
    &:where(:hover) {
      background: light-dark(
        color-mix(in oklch, var(--_ui-color-100), var(--_ui-color-900) 5%),
        color-mix(in oklch, var(--_ui-color-900), var(--_ui-color-50) 5%)
      );
    }
  }
  &:where([aria-expanded="true"]) { background: light-dark(var(--_ui-color-100), var(--_ui-color-900)); }
}

:where([ui-color][ui-button~="primary"]:not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  background: light-dark(var(--_ui-color-900), var(--_ui-color-600));
  color: var(--_ui-color-50);
  @media (hover: hover) {
    &:where(:hover) { background: light-dark(var(--_ui-color-800), var(--_ui-color-700)); }
  }
}

:where([ui-color][ui-button~="outline"]:not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  border-color: light-dark(var(--_ui-color-300), var(--_ui-color-700));
  background: light-dark(var(--white), color-mix(in oklch, var(--white) 4.5%, transparent));
  color: light-dark(var(--_ui-color-900), var(--_ui-color-50));
  @media (hover: hover) {
    &:where(:hover) { background: light-dark(var(--_ui-color-100), color-mix(in oklch, var(--white) 7.5%, transparent)); }
  }
}

:where([ui-color][ui-button~="ghost"]:not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  background: transparent;
  color: light-dark(var(--_ui-color-900), var(--_ui-color-50));
  @media (hover: hover) {
    &:where(:hover) { background: light-dark(var(--_ui-color-100), color-mix(in oklch, var(--_ui-color-900) 50%, transparent)); }
  }
  &:where([aria-expanded="true"]) { background: light-dark(var(--_ui-color-100), var(--_ui-color-900)); }
}

:where([ui-color][ui-button~="link"]:not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  background: transparent;
  color: light-dark(var(--_ui-color-900), var(--_ui-color-50));
}

:where([ui-color][ui-button~="inline"]:not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  background: transparent;
  color: inherit;
  @media (hover: hover) {
    &:where(:hover) { color: light-dark(var(--_ui-color-800), var(--_ui-color-200)); }
  }
  &:where(:active) { color: light-dark(var(--_ui-color-700), var(--_ui-color-300)); }
}

:where([ui-color][aria-busy="true"]:is([ui-button]:not(input[type="checkbox"], input[type="radio"]), button, input[type="button"], input[type="submit"], input[type="reset"]):not([ui-off], [ui-link])) {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: light-dark(var(--_ui-color-100), var(--_ui-color-900));
  &::after { background: light-dark(var(--_ui-color-900), var(--_ui-color-50)); }
  &:where([ui-button~="primary"]) {
    background: light-dark(var(--_ui-color-900), var(--_ui-color-600));
    &::after { background: var(--_ui-color-50); }
  }
  &:where([ui-button~="outline"]) {
    border-color: light-dark(var(--_ui-color-300), var(--_ui-color-700));
    background: light-dark(var(--white), color-mix(in oklch, var(--white) 4.5%, transparent));
  }
  &:where([ui-button~="ghost"], [ui-button~="link"], [ui-button~="inline"]) {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(:not([ui-off]):not([ui-link]):not([ui-badge])):where([ui-button]:not(input[type="checkbox"], input[type="radio"]),
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]) {
    transition: none;
  }

  :where([aria-busy="true"]:is(button, input[type="button"], input[type="submit"], input[type="reset"], [ui-button]))::after {
    animation: none;
  }
}

}
@layer core {
/* library/components/badge.css */

/* Faunder UI badge: compact variants. */
:where([ui-badge]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: fit-content;
  height: 20px;
  gap: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 2rem;
  padding: 2px 8px;
  background: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-900), var(--neutral-50));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms;

  &:where(button) { cursor: pointer; }
  &:where(button:disabled) { opacity: 0.5; pointer-events: none; }

  &:where(:has(> :is(svg, [ui-icon]):first-child)) { padding-inline-start: 6px; }
  &:where(:has(> :is(svg, [ui-icon]):last-child)) { padding-inline-end: 6px; }

  &:where([ui-badge~="solid"]) {
    background: light-dark(var(--neutral-900), var(--neutral-50));
    color: light-dark(var(--neutral-50), var(--neutral-900));
  }

  &:where([ui-badge~="outline"]) {
    border-color: light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 10%, transparent));
    background: transparent;
    color: light-dark(var(--neutral-900), var(--neutral-50));
  }

  &:where(:focus-visible) {
    outline: none;
    border-color: light-dark(var(--neutral-500), var(--neutral-400));
    box-shadow: 0 0 0 3px light-dark(color-mix(in oklch, var(--neutral-500) 50%, transparent), color-mix(in oklch, var(--neutral-400) 50%, transparent));
  }

  &:where([aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
    &:where(:focus-visible) {
      box-shadow: 0 0 0 3px light-dark(color-mix(in oklch, var(--error-600) 20%, transparent), color-mix(in oklch, var(--error-400) 40%, transparent));
    }
  }

  @media (hover: hover) {
    &:where(:is(a, button):hover:not([ui-badge~="solid"], [ui-badge~="outline"])) {
      background: light-dark(
        color-mix(in oklch, var(--neutral-100), var(--neutral-900) 5%),
        color-mix(in oklch, var(--neutral-800), var(--neutral-50) 5%)
      );
    }
    &:where(:is(a, button)[ui-badge~="solid"]:hover) {
      background: light-dark(var(--neutral-800), var(--neutral-200));
    }
    &:where(:is(a, button)[ui-badge~="outline"]:hover) {
      background: light-dark(var(--neutral-100), var(--neutral-800));
      color: light-dark(var(--neutral-500), var(--neutral-400));
    }
  }
}

/* A named palette follows the badge's visual variant. */
:where([ui-badge][ui-color]) {
  background: light-dark(var(--_ui-color-100), var(--_ui-color-800));
  color: light-dark(var(--_ui-color-900), var(--_ui-color-50));
}

:where([ui-badge~="solid"][ui-color]) {
  background: light-dark(var(--_ui-color-900), var(--_ui-color-50));
  color: light-dark(var(--_ui-color-50), var(--_ui-color-900));
}

:where([ui-badge~="outline"][ui-color]) {
  border-color: light-dark(var(--_ui-color-200), var(--_ui-color-800));
  background: transparent;
  color: light-dark(var(--_ui-color-800), var(--_ui-color-100));
}

:where([ui-badge][ui-color]:focus-visible) {
  border-color: light-dark(var(--_ui-color-500), var(--_ui-color-400));
  box-shadow: 0 0 0 3px light-dark(
    color-mix(in oklch, var(--_ui-color-500) 50%, transparent),
    color-mix(in oklch, var(--_ui-color-400) 50%, transparent)
  );
}

@media (hover: hover) {
  :where(:is(a, button)[ui-badge][ui-color]:hover:not([ui-badge~="solid"], [ui-badge~="outline"])) {
    background: light-dark(
      color-mix(in oklch, var(--_ui-color-100), var(--_ui-color-900) 5%),
      color-mix(in oklch, var(--_ui-color-800), var(--_ui-color-50) 5%)
    );
  }

  :where(:is(a, button)[ui-badge~="solid"][ui-color]:hover) {
    background: light-dark(var(--_ui-color-800), var(--_ui-color-200));
  }

  :where(:is(a, button)[ui-badge~="outline"][ui-color]:hover) {
    background: light-dark(var(--_ui-color-100), var(--_ui-color-800));
    color: light-dark(var(--_ui-color-500), var(--_ui-color-400));
  }

}

:where([ui-badge] > svg, [ui-badge] > [ui-icon]) {
  --ui-icon-size: 12px;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-badge]) { transition: none; }
}

}
@layer core {
/* library/components/avatar.css */

/* Avatar: a circular image or initials with optional status. */
:where([ui-avatar]:not([ui-off], ul[ui-avatar~="group"])) {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-600), var(--neutral-300));
  font-size: 0.875rem;
  line-height: 1;
  vertical-align: middle;
  isolation: isolate;
  user-select: none;
}

:where([ui-avatar]:not([ui-off], ul[ui-avatar~="group"]))::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: inherit;
  opacity: 0.35;
  pointer-events: none;
  content: "";
}

:where([ui-avatar][ui-color]:not([ui-off], ul[ui-avatar~="group"])) {
  background: light-dark(var(--_ui-color-100), var(--_ui-color-800));
  color: light-dark(var(--_ui-color-900), var(--_ui-color-50));
}

:where([ui-avatar][ui-color]:not([ui-off], ul[ui-avatar~="group"]))::after {
  border-color: light-dark(var(--_ui-color-300), var(--_ui-color-700));
}

:where([ui-avatar]:not([ui-off], ul[ui-avatar~="group"]) > img) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

:where([ui-avatar]:not([ui-off], ul[ui-avatar~="group"]) > abbr) {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  font-size: inherit;
  font-weight: 500;
  text-decoration: none;
}

:where([ui-avatar~="sm"]:not([ui-off], ul[ui-avatar~="group"])) {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}

:where([ui-avatar~="lg"]:not([ui-off], ul[ui-avatar~="group"])) {
  width: 2.5rem;
  height: 2.5rem;
}

:where([ui-avatar]:not([ui-off], ul[ui-avatar~="group"]) > [role="status"]) {
  position: absolute;
  z-index: 2;
  inset-inline-end: 0;
  inset-block-end: 0;
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: light-dark(var(--neutral-900), var(--neutral-100));
  color: light-dark(var(--white), var(--neutral-950));
  font-size: 0;
  box-shadow: 0 0 0 2px light-dark(var(--white), var(--neutral-950));
}

:where([ui-avatar~="sm"]:not([ui-off], ul[ui-avatar~="group"]) > [role="status"]) {
  width: 0.5rem;
  height: 0.5rem;
}

:where([ui-avatar~="sm"]:not([ui-off], ul[ui-avatar~="group"]) > [role="status"] [ui-icon]) {
  display: none;
}

:where([ui-avatar~="lg"]:not([ui-off], ul[ui-avatar~="group"]) > [role="status"]) {
  width: 0.75rem;
  height: 0.75rem;
}

:where([ui-avatar]:not([ui-off], ul[ui-avatar~="group"]) > [role="status"] [ui-icon]) {
  width: 0.5rem;
  height: 0.5rem;
}

:where(button[ui-avatar]:not([ui-off])) {
  appearance: none;
  min-height: 0;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(ul[ui-avatar~="group"]:not([ui-off])) {
  display: flex;
  align-items: center;
  padding: 0;
  list-style: none;
}

:where(ul[ui-avatar~="group"]:not([ui-off]) > li) {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-inline-start: -0.5rem;
  border-radius: 50%;
}

:where(ul[ui-avatar~="group"]:not([ui-off]) > li:first-child) {
  margin-inline-start: 0;
}

:where(ul[ui-avatar~="group"]:not([ui-off]) > li:has(> [ui-avatar]:not([ui-off]))) {
  width: auto;
  height: auto;
}

:where(ul[ui-avatar~="group"]:not([ui-off]) > li > [ui-avatar]:not([ui-off])) {
  box-shadow: 0 0 0 2px light-dark(var(--white), var(--neutral-950));
}

:where(ul[ui-avatar~="group"]:not([ui-off]) > li:not(:has(> [ui-avatar]))) {
  background: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-600), var(--neutral-300));
  font-size: 0.875rem;
  line-height: 1;
  box-shadow: 0 0 0 2px light-dark(var(--white), var(--neutral-950));
}

:where(ul[ui-avatar~="group"]:not([ui-off]):has(> li > [ui-avatar~="sm"]:not([ui-off])) > li:not(:has(> [ui-avatar]))) {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}

:where(ul[ui-avatar~="group"]:not([ui-off]):has(> li > [ui-avatar~="lg"]:not([ui-off])) > li:not(:has(> [ui-avatar]))) {
  width: 2.5rem;
  height: 2.5rem;
}

:where(ul[ui-avatar~="group"]:not([ui-off]) > li:not(:has(> [ui-avatar])) [ui-icon]) {
  width: 1rem;
  height: 1rem;
}

:where(ul[ui-avatar~="group"]:not([ui-off]):has(> li > [ui-avatar~="sm"]:not([ui-off])) > li:not(:has(> [ui-avatar])) [ui-icon]) {
  width: 0.75rem;
  height: 0.75rem;
}

:where(ul[ui-avatar~="group"]:not([ui-off]):has(> li > [ui-avatar~="lg"]:not([ui-off])) > li:not(:has(> [ui-avatar])) [ui-icon]) {
  width: 1.25rem;
  height: 1.25rem;
}

}
@layer core {
/* library/components/attachment.css */

/* Attachment: file and image cards expressed with native HTML. */
:where([ui-attachment]:not([ui-off])) {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid light-dark(oklch(92.2% 0 0), color-mix(in oklch, oklch(98.5% 0 0) 10%, transparent));
  border-radius: 0.75rem;
  background-color: light-dark(oklch(100% 0 0), oklch(20.5% 0.006 285.885));
  color: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
  font-size: 0.875rem;
  transition: background-color 150ms;
}

:where([ui-attachment]:not([ui-off])[data-state="idle"]) {
  border-style: dashed;
}

:where([ui-attachment]:not([ui-off])[data-state="error"]) {
  border-color: light-dark(
    color-mix(in oklch, var(--error-600) 30%, transparent),
    color-mix(in oklch, var(--error-400) 30%, transparent)
  );
}

:where([ui-attachment]:not([ui-off]):not([data-orientation="vertical"])) {
  min-width: 10rem;
}

:where([ui-attachment]:not([ui-off])[data-size="sm"]) {
  gap: 0.625rem;
  font-size: 0.75rem;
}

:where([ui-attachment]:not([ui-off])[data-size="xs"]) {
  gap: 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
}

:where([ui-attachment]:not([ui-off])[data-orientation="vertical"]) {
  width: 7.5rem;
  flex-direction: column;
}

@media (hover: hover) {
  :where([ui-attachment]:not([ui-off]):has(> a, > button):hover) {
    background-color: light-dark(
      color-mix(in oklch, oklch(97% 0.001 286.375) 50%, transparent),
      color-mix(in oklch, oklch(27.4% 0.006 286.033) 50%, transparent)
    );
  }
}

:where([ui-attachment]:not([ui-off]):focus-within) {
  box-shadow: 0 0 0 1px light-dark(
    color-mix(in oklch, oklch(70.8% 0 0) 50%, transparent),
    color-mix(in oklch, oklch(55.6% 0 0) 50%, transparent)
  );
}

:where([ui-attachment] [data-attachment-media]:not([ui-off])) {
  position: relative;
  display: flex;
  width: 2.5rem;
  flex: 0 0 auto;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: light-dark(oklch(97% 0.001 286.375), oklch(27.4% 0.006 286.033));
  padding: 0.5rem;
  color: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
}

:where([ui-attachment][data-orientation="vertical"] [data-attachment-media]:not([ui-off])) {
  width: 100%;
}

:where([ui-attachment][data-size="sm"] [data-attachment-media]:not([ui-off])) {
  width: 2rem;
  padding: 0.375rem;
}

:where([ui-attachment][data-size="xs"] [data-attachment-media]:not([ui-off])) {
  width: 1.75rem;
  border-radius: 0.375rem;
  padding: 0.25rem;
}

:where([ui-attachment][data-state="error"] [data-attachment-media]:not([ui-off])) {
  background-color: light-dark(
    color-mix(in oklch, var(--error-600) 10%, transparent),
    color-mix(in oklch, var(--error-400) 10%, transparent)
  );
  color: light-dark(var(--error-600), var(--error-400));
}

:where([ui-attachment] [data-attachment-media][data-variant="image"]:not([ui-off])) {
  opacity: 0.6;
  padding: 0.75rem;
}

:where([ui-attachment]:not([data-state]) [data-attachment-media][data-variant="image"]:not([ui-off]),
  [ui-attachment][data-state="done"] [data-attachment-media][data-variant="image"]:not([ui-off]),
  [ui-attachment][data-state="idle"] [data-attachment-media][data-variant="image"]:not([ui-off])) {
  opacity: 1;
}

:where([ui-attachment] [data-attachment-media][data-variant="image"] > img:not([ui-off])) {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

:where([ui-attachment] [data-attachment-media] > [ui-icon]:not([ui-off])) {
  --ui-icon-size: 1rem;
}

:where([ui-attachment][data-orientation="vertical"] [data-attachment-media] > [ui-icon]:not([ui-off])) {
  --ui-icon-size: 1.5rem;
}

:where([ui-attachment][data-size="xs"] [data-attachment-media] > [ui-icon]:not([ui-off])) {
  --ui-icon-size: 0.875rem;
}

:where([ui-attachment] [data-attachment-content]:not([ui-off])) {
  max-width: 100%;
  min-width: 0;
  flex: 1 1 0%;
  padding: 0.5rem 0.625rem;
  line-height: 1.25;
}

:where([ui-attachment][data-size="sm"] [data-attachment-content]:not([ui-off])) {
  padding: 0.375rem 0.5rem;
}

:where([ui-attachment][data-size="xs"] [data-attachment-content]:not([ui-off])) {
  padding: 0.25rem 0.375rem;
}

:where([ui-attachment][data-orientation="vertical"] [data-attachment-content]:not([ui-off])) {
  width: 7.5rem;
  padding-inline: 0.25rem;
}

:where([ui-attachment] [data-attachment-title]:not([ui-off])) {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where([ui-attachment][data-state="uploading"] [data-attachment-title]:not([ui-off]),
  [ui-attachment][data-state="processing"] [data-attachment-title]:not([ui-off])) {
  --_attachment-shimmer-spread: calc(3ch + 40px);
  --_attachment-shimmer-base: currentColor;
  --_attachment-shimmer-highlight: color-mix(in oklch, currentColor 20%, transparent);
  background-image: linear-gradient(
    110deg,
    var(--_attachment-shimmer-base) calc(50% - var(--_attachment-shimmer-spread)),
    color-mix(in oklch, var(--_attachment-shimmer-highlight), var(--_attachment-shimmer-base) 50%) calc(50% - var(--_attachment-shimmer-spread) * 0.5),
    var(--_attachment-shimmer-highlight) 50%,
    color-mix(in oklch, var(--_attachment-shimmer-highlight), var(--_attachment-shimmer-base) 50%) calc(50% + var(--_attachment-shimmer-spread) * 0.5),
    var(--_attachment-shimmer-base) calc(50% + var(--_attachment-shimmer-spread))
  );
  background-clip: text;
  background-repeat: no-repeat;
  background-size: calc(200% + var(--_attachment-shimmer-spread) * 2) 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ui-attachment-shimmer 2s linear infinite;
}

:where([ui-attachment][data-state="uploading"] [data-attachment-title]:not([ui-off]),
  [ui-attachment][data-state="processing"] [data-attachment-title]:not([ui-off])):dir(rtl) {
  animation-direction: reverse;
}

:where([ui-attachment] [data-attachment-description]:not([ui-off])) {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.125rem;
  overflow: hidden;
  color: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  font-size: 0.75rem;
  line-height: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where([ui-attachment][data-state="error"] [data-attachment-description]:not([ui-off])) {
  color: light-dark(
    color-mix(in oklch, var(--error-600) 80%, transparent),
    color-mix(in oklch, var(--error-400) 80%, transparent)
  );
}

:where([ui-attachment] [data-attachment-actions]:not([ui-off])) {
  position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

:where([ui-attachment][data-orientation="vertical"] [data-attachment-actions]:not([ui-off])) {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  gap: 0.25rem;
}

:where([ui-attachment] [data-attachment-actions] > button[ui-button]:not([ui-off])) {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  border-radius: 0.375rem;
}

:where([ui-attachment] [data-attachment-actions] > button[ui-button] > [ui-icon]:not([ui-off])) {
  --ui-icon-size: 0.75rem;
}

:where([ui-attachment] > [data-attachment-trigger]:not([ui-off])) {
  position: absolute;
  z-index: 10;
  inset: 0;
  outline: none;
}

:where([ui-attachment-group]:not([ui-off])) {
  --_attachment-fade-start: min(12%, 2.5rem);
  --_attachment-fade-end: min(12%, 2.5rem);
  --attachment-fade-start: 0px;
  --attachment-fade-end: 0px;
  --_attachment-fade-mask: linear-gradient(
    to right,
    transparent 0,
    #000 var(--attachment-fade-start),
    #000 calc(100% - var(--attachment-fade-end)),
    transparent 100%
  );
  display: flex;
  min-width: 0;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block: 0.25rem;
  scroll-padding-inline: 0.25rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: var(--_attachment-fade-mask);
  mask-image: var(--_attachment-fade-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:where([ui-attachment-group]:not([ui-off])::-webkit-scrollbar) {
  display: none;
}

:where([ui-attachment-group]:not([ui-off]) > [ui-attachment]:not([ui-off])) {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

:where([ui-attachment-group]:not([ui-off]):dir(rtl)) {
  --_attachment-fade-mask: linear-gradient(
    to left,
    transparent 0,
    #000 var(--attachment-fade-start),
    #000 calc(100% - var(--attachment-fade-end)),
    transparent 100%
  );
}

@supports not (animation-timeline: scroll()) {
  :where([ui-attachment-group]:not([ui-off])) {
    --attachment-fade-start: var(--_attachment-fade-start);
    --attachment-fade-end: var(--_attachment-fade-end);
  }
}

@supports (animation-timeline: scroll()) {
  @property --attachment-fade-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --attachment-fade-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @keyframes ui-attachment-fade-reveal-start {
    from { --attachment-fade-start: 0px; }
    to { --attachment-fade-start: var(--_attachment-fade-start); }
  }

  @keyframes ui-attachment-fade-reveal-end {
    from { --attachment-fade-end: var(--_attachment-fade-end); }
    to { --attachment-fade-end: 0px; }
  }

  :where([ui-attachment-group]:not([ui-off])) {
    animation:
      ui-attachment-fade-reveal-start 1ms ease-in-out,
      ui-attachment-fade-reveal-end 1ms ease-in-out;
    animation-timeline: scroll(self inline), scroll(self inline);
    animation-range:
      0 6rem,
      calc(100% - 6rem) 100%;
    animation-fill-mode: both;
  }
}

@keyframes ui-attachment-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-attachment][data-state="uploading"] [data-attachment-title]:not([ui-off]),
    [ui-attachment][data-state="processing"] [data-attachment-title]:not([ui-off])) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}

}
@layer core {
/* library/utilities/aspect-ratio.css */

/* Aspect ratio */
:where([ui-aspect-ratio]:not([ui-off])) {
  display: block;
  position: relative;
  margin: 0;
  overflow: hidden;
}

:where([ui-aspect-ratio~="1:1"]:not([ui-off])) {
  aspect-ratio: 1;
}

:where([ui-aspect-ratio~="5:4"]:not([ui-off])) {
  aspect-ratio: 5 / 4;
}

:where([ui-aspect-ratio~="4:3"]:not([ui-off])) {
  aspect-ratio: 4 / 3;
}

:where([ui-aspect-ratio~="3:2"]:not([ui-off])) {
  aspect-ratio: 3 / 2;
}

:where([ui-aspect-ratio~="2:1"]:not([ui-off])) {
  aspect-ratio: 2 / 1;
}

:where([ui-aspect-ratio~="16:10"]:not([ui-off])) {
  aspect-ratio: 16 / 10;
}

:where([ui-aspect-ratio~="16:9"]:not([ui-off])) {
  aspect-ratio: 16 / 9;
}

:where([ui-aspect-ratio~="21:9"]:not([ui-off])) {
  aspect-ratio: 21 / 9;
}

:where([ui-aspect-ratio~="32:9"]:not([ui-off])) {
  aspect-ratio: 32 / 9;
}

:where([ui-aspect-ratio~="1.66:1"]:not([ui-off])) {
  aspect-ratio: 1.66 / 1;
}

:where([ui-aspect-ratio~="1.85:1"]:not([ui-off])) {
  aspect-ratio: 1.85 / 1;
}

:where([ui-aspect-ratio~="2.35:1"]:not([ui-off])) {
  aspect-ratio: 2.35 / 1;
}

:where([ui-aspect-ratio~="2.39:1"]:not([ui-off])) {
  aspect-ratio: 2.39 / 1;
}

:where([ui-aspect-ratio~="4:5"]:not([ui-off])) {
  aspect-ratio: 4 / 5;
}

:where([ui-aspect-ratio~="3:4"]:not([ui-off])) {
  aspect-ratio: 3 / 4;
}

:where([ui-aspect-ratio~="2:3"]:not([ui-off])) {
  aspect-ratio: 2 / 3;
}

:where([ui-aspect-ratio~="5:7"]:not([ui-off])) {
  aspect-ratio: 5 / 7;
}

:where([ui-aspect-ratio~="9:16"]:not([ui-off])) {
  aspect-ratio: 9 / 16;
}

:where([ui-aspect-ratio~="1:1.4142"]:not([ui-off])) {
  aspect-ratio: 1 / 1.4142;
}

:where([ui-aspect-ratio~="1.4142:1"]:not([ui-off])) {
  aspect-ratio: 1.4142 / 1;
}

:where([ui-aspect-ratio~="17:22"]:not([ui-off])) {
  aspect-ratio: 17 / 22;
}

:where([ui-aspect-ratio~="22:17"]:not([ui-off])) {
  aspect-ratio: 22 / 17;
}

:where([ui-aspect-ratio]:not([ui-off])) > :where(img, video, iframe) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

:where([ui-aspect-ratio]:not([ui-off])) > :where(img, video) {
  object-fit: cover;
}

}
@layer core {
/* library/components/carousel.css */

:where(ul[ui-carousel]:not([ui-off])) {
  --_ui-carousel-gap: 1rem;
  --_ui-carousel-previous-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --_ui-carousel-next-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --_ui-carousel-previous-vertical-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --_ui-carousel-next-vertical-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  anchor-name: --ui-carousel;
  anchor-scope: --ui-carousel;
  position: relative;
  display: flex;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: auto;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  list-style: none;
}

:where(ul[ui-carousel][ui-color-scheme="dark"]:not([ui-off]), [ui-color-scheme="dark"] ul[ui-carousel]:not([ui-off])) {
  --_ui-carousel-previous-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --_ui-carousel-next-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --_ui-carousel-previous-vertical-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --_ui-carousel-next-vertical-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:where(ul[ui-carousel]:not([ui-off]))::-webkit-scrollbar {
  display: none;
}

:where(ul[ui-carousel~="xs"]:not([ui-off])) {
  max-inline-size: 20rem;
}

:where(ul[ui-carousel~="sm"]:not([ui-off])) {
  max-inline-size: 24rem;
}

:where(ul[ui-carousel~="md"]:not([ui-off])) {
  max-inline-size: 28rem;
}

:where(ul[ui-carousel~="lg"]:not([ui-off])) {
  max-inline-size: 32rem;
}

:where(ul[ui-carousel~="gap-sm"]:not([ui-off])) {
  --_ui-carousel-gap: 0.5rem;
}

:where(ul[ui-carousel~="gap-lg"]:not([ui-off])) {
  --_ui-carousel-gap: 1.5rem;
}

:where(ul[ui-carousel~="gap-responsive"]:not([ui-off])) {
  --_ui-carousel-gap: 0.5rem;
}

@media (min-width: 48rem) {
  :where(ul[ui-carousel~="gap-responsive"]:not([ui-off])) {
    --_ui-carousel-gap: 1rem;
  }
}

:where(ul[ui-carousel]:not([ui-off]) > li) {
  flex: 0 0 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0.25rem;
  padding-inline-start: calc(var(--_ui-carousel-gap) + 0.25rem);
  scroll-margin-inline-start: calc(0rem - var(--_ui-carousel-gap));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

:where(ul[ui-carousel]:not([ui-off]) > li:first-child) {
  margin-inline-start: calc(0rem - var(--_ui-carousel-gap));
}

:where(ul[ui-carousel~="2"]:not([ui-off]) > li) {
  flex-basis: 50%;
}

:where(ul[ui-carousel~="3"]:not([ui-off]) > li) {
  flex-basis: 33.333333%;
}

:where(ul[ui-carousel~="responsive"]:not([ui-off]) > li) {
  flex-basis: 100%;
}

@media (min-width: 40rem) {
  :where(ul[ui-carousel~="responsive"]:not([ui-off]) > li) {
    flex-basis: 50%;
  }
}

@media (min-width: 64rem) {
  :where(ul[ui-carousel~="responsive"]:not([ui-off]) > li) {
    flex-basis: 33.333333%;
  }
}

:where(ul[ui-carousel~="center"]:not([ui-off]) > li) {
  scroll-margin-inline-start: 0;
  scroll-snap-align: center;
}

:where(ul[ui-carousel~="vertical"]:not([ui-off])) {
  flex-direction: column;
  block-size: 20rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-block: contain;
  scroll-snap-type: block mandatory;
}

:where(ul[ui-carousel~="vertical"]:not([ui-off]) > li) {
  flex-basis: 100%;
  inline-size: 100%;
  padding-block-start: calc(var(--_ui-carousel-gap) + 0.25rem);
  scroll-margin-inline-start: 0;
  scroll-margin-block-start: calc(0rem - var(--_ui-carousel-gap));
}

:where(ul[ui-carousel~="vertical"]:not([ui-off]) > li:first-child) {
  margin-block-start: calc(0rem - var(--_ui-carousel-gap));
  margin-inline-start: 0;
}

:where(ul[ui-carousel~="vertical"][ui-carousel~="2"]:not([ui-off]) > li) {
  flex-basis: 50%;
}

:where(ul[ui-carousel~="vertical"][ui-carousel~="3"]:not([ui-off]) > li) {
  flex-basis: 33.333333%;
}

:where(ul[ui-carousel~="vertical"][ui-carousel~="responsive"]:not([ui-off]) > li) {
  flex-basis: 100%;
}

:where(ul[ui-carousel~="vertical"][ui-carousel~="center"]:not([ui-off]) > li) {
  scroll-margin-block-start: 0;
  scroll-snap-align: center;
}

@supports (position-anchor: --ui-carousel) and (anchor-name: --ui-carousel) {
  @supports selector(::scroll-button(inline-start)) {
    :where(ul[ui-carousel]:not([ui-off]))::scroll-button(inline-start),
    :where(ul[ui-carousel]:not([ui-off]))::scroll-button(inline-end) {
      position: fixed;
      position-anchor: --ui-carousel;
      z-index: 1;
      display: grid;
      place-items: center;
      inline-size: 2rem;
      block-size: 2rem;
      border: 1px solid light-dark(var(--neutral-300), color-mix(in oklch, var(--white) 15%, transparent));
      border-radius: 50%;
      background-color: light-dark(var(--white), color-mix(in oklch, var(--white) 4.5%, transparent));
      color: light-dark(var(--neutral-600), var(--neutral-300));
      background-image: var(--_ui-carousel-previous-icon);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1rem 1rem;
      box-shadow: 0 1px 2px color-mix(in oklch, var(--black) 8%, transparent);
      cursor: pointer;
    }

    :where(ul[ui-carousel]:not([ui-off]))::scroll-button(inline-start) {
      content: "" / "Previous slide";
      inset-block-start: anchor(center);
      inset-inline-start: calc(anchor(start) - 3rem);
      translate: 0 -50%;
    }

    :where(ul[ui-carousel]:not([ui-off]))::scroll-button(inline-end) {
      content: "" / "Next slide";
      background-image: var(--_ui-carousel-next-icon);
      inset-block-start: anchor(center);
      inset-inline-start: calc(anchor(end) + 1rem);
      translate: 0 -50%;
    }

    :where(ul[ui-carousel]:dir(rtl):not([ui-off]))::scroll-button(inline-start) {
      content: "" / "Previous slide";
      background-image: var(--_ui-carousel-next-icon);
      inset-inline-start: auto;
      inset-inline-end: auto;
      left: calc(anchor(right) + 1rem);
      right: auto;
    }

    :where(ul[ui-carousel]:dir(rtl):not([ui-off]))::scroll-button(inline-end) {
      content: "" / "Next slide";
      background-image: var(--_ui-carousel-previous-icon);
      inset-inline-start: auto;
      inset-inline-end: auto;
      left: calc(anchor(left) - 3rem);
      right: auto;
    }

    :where(ul[ui-carousel]:not([ui-off]))::scroll-button(*):disabled {
      opacity: 0.45;
      cursor: default;
    }

    @media (hover: hover) {
      :where(ul[ui-carousel]:not([ui-off]))::scroll-button(*):hover:not(:disabled) {
        background-color: light-dark(var(--neutral-100), color-mix(in oklch, var(--white) 7.5%, transparent));
      }
    }

    :where(ul[ui-carousel~="vertical"]:not([ui-off]))::scroll-button(inline-start),
    :where(ul[ui-carousel~="vertical"]:not([ui-off]))::scroll-button(inline-end) {
      content: none;
    }

    @supports selector(::scroll-button(block-start)) {
      :where(ul[ui-carousel]:not([ui-off]))::scroll-button(block-start),
      :where(ul[ui-carousel]:not([ui-off]))::scroll-button(block-end) {
        position: fixed;
        position-anchor: --ui-carousel;
        z-index: 1;
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        border: 1px solid light-dark(var(--neutral-300), color-mix(in oklch, var(--white) 15%, transparent));
        border-radius: 50%;
        background-color: light-dark(var(--white), color-mix(in oklch, var(--white) 4.5%, transparent));
        color: light-dark(var(--neutral-600), var(--neutral-300));
        background-image: var(--_ui-carousel-previous-icon);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 1rem 1rem;
        box-shadow: 0 1px 2px color-mix(in oklch, var(--black) 8%, transparent);
        cursor: pointer;
      }

      :where(ul[ui-carousel~="vertical"]:not([ui-off]))::scroll-button(block-start) {
        content: "" / "Previous slide";
        background-image: var(--_ui-carousel-previous-vertical-icon);
        inset-block-start: calc(anchor(start) - 3rem);
        inset-inline-start: anchor(center);
        translate: -50% 0;
      }

      :where(ul[ui-carousel~="vertical"]:not([ui-off]))::scroll-button(block-end) {
        content: "" / "Next slide";
        background-image: var(--_ui-carousel-next-vertical-icon);
        inset-block-start: calc(anchor(end) + 1rem);
        inset-inline-start: anchor(center);
        translate: -50% 0;
      }

      :where(ul[ui-carousel]:not([ui-carousel~="vertical"], [ui-off]))::scroll-button(block-start),
      :where(ul[ui-carousel]:not([ui-carousel~="vertical"], [ui-off]))::scroll-button(block-end) {
        content: none;
      }
    }
  }
}

@supports (scroll-marker-group: after) and (position-anchor: --ui-carousel) and (anchor-name: --ui-carousel) {
  @supports selector(ul::scroll-marker-group) and selector(li::scroll-marker) and selector(li::scroll-marker:target-current) {
    :where(ul[ui-carousel]:not([ui-off])) {
      scroll-marker-group: after;
    }

    :where(ul[ui-carousel]:not([ui-off]))::scroll-marker-group {
      position: fixed;
      position-anchor: --ui-carousel;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      inset-block-start: calc(anchor(end) + 1rem);
      inset-inline-start: anchor(center);
      translate: -50% 0;
    }

    :where(ul[ui-carousel]:not([ui-off]) > li)::scroll-marker {
      content: "" / attr(data-carousel-label);
      display: block;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      overflow: hidden;
      border: 1px solid light-dark(var(--neutral-500), var(--neutral-400));
      border-radius: 50%;
      background-color: transparent;
      padding: 0;
    }

    :where(ul[ui-carousel]:not([ui-off]) > li)::scroll-marker:target-current {
      border-color: light-dark(var(--neutral-800), var(--neutral-200));
      background-color: light-dark(var(--neutral-800), var(--neutral-200));
    }
  }
}

:where([data-faunder-carousel-polyfill]) {
  --_ui-carousel-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --_ui-carousel-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --_ui-carousel-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --_ui-carousel-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  position: relative;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-inline: auto;
}

:where([data-faunder-carousel-polyfill][data-carousel-size="xs"]) {
  max-inline-size: 20rem;
}

:where([data-faunder-carousel-polyfill][data-carousel-size="sm"]) {
  max-inline-size: 24rem;
}

:where([data-faunder-carousel-polyfill][data-carousel-size="md"]) {
  max-inline-size: 28rem;
}

:where([data-faunder-carousel-polyfill][data-carousel-size="lg"]) {
  max-inline-size: 32rem;
}

:where([data-faunder-carousel-viewport]) {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
}

:where([data-faunder-carousel-viewport] > ul[ui-carousel]:not([ui-off])) {
  inline-size: 100%;
  max-inline-size: 100%;
}

:where([data-faunder-carousel-viewport] > [data-faunder-carousel-arrow]) {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  translate: 0 -50%;
}

:where([data-faunder-carousel-viewport] > [data-faunder-carousel-arrow="previous"]) {
  inset-inline-start: -3rem;
}

:where([data-faunder-carousel-viewport] > [data-faunder-carousel-arrow="next"]) {
  inset-inline-end: -3rem;
}

[data-faunder-carousel-arrow="previous"] {
  --ui-icon: var(--_ui-carousel-arrow-left);
}

[data-faunder-carousel-arrow="next"] {
  --ui-icon: var(--_ui-carousel-arrow-right);
}

[data-faunder-carousel-polyfill]:dir(rtl) [data-faunder-carousel-arrow="previous"] {
  --ui-icon: var(--_ui-carousel-arrow-right);
}

[data-faunder-carousel-polyfill]:dir(rtl) [data-faunder-carousel-arrow="next"] {
  --ui-icon: var(--_ui-carousel-arrow-left);
}

:where([data-faunder-carousel-viewport]:has(> ul[ui-carousel~="vertical"]) > [data-faunder-carousel-arrow]) {
  inset-inline-start: 50%;
  inset-inline-end: auto;
  translate: -50% 0;
}

:where([data-faunder-carousel-viewport]:has(> ul[ui-carousel~="vertical"]) > [data-faunder-carousel-arrow="previous"]) {
  inset-block-start: -3rem;
}

:where([data-faunder-carousel-viewport]:has(> ul[ui-carousel~="vertical"]) > [data-faunder-carousel-arrow="next"]) {
  inset-block-start: auto;
  inset-block-end: -3rem;
}

[data-faunder-carousel-viewport]:has(> ul[ui-carousel~="vertical"]) > [data-faunder-carousel-arrow="previous"] {
  --ui-icon: var(--_ui-carousel-arrow-up);
}

[data-faunder-carousel-viewport]:has(> ul[ui-carousel~="vertical"]) > [data-faunder-carousel-arrow="next"] {
  --ui-icon: var(--_ui-carousel-arrow-down);
}

:where([data-faunder-carousel-markers]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-block-start: 1rem;
}

:where([data-faunder-carousel-markers] > [data-faunder-carousel-marker]) {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

:where([data-faunder-carousel-marker] > span) {
  display: block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border: 1px solid light-dark(var(--neutral-500), var(--neutral-400));
  border-radius: 50%;
  background: transparent;
}

:where([data-faunder-carousel-marker][aria-current="true"] > span) {
  border-color: light-dark(var(--neutral-800), var(--neutral-200));
  background: light-dark(var(--neutral-800), var(--neutral-200));
}

:where([data-faunder-carousel-polyfill]:has(> [data-faunder-carousel-viewport] > ul[ui-carousel][ui-off])) {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  :where(ul[ui-carousel]:not([ui-off])) {
    scroll-behavior: smooth;
  }
}

}
@layer core {
/* library/components/chat.css */

/* Chat conversation layout and message surfaces. */
:where(section[ui-chat]:not([ui-off])) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat]:not([ui-off])) {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0.5rem;
  color: light-dark(var(--neutral-900), var(--neutral-50));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat~="end"]:not([ui-off])) {
  flex-direction: row-reverse;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat] > [ui-avatar]:not([ui-off])) {
  align-self: flex-end;
  flex: none;
  overflow: hidden;
  background-color: light-dark(var(--neutral-100), var(--neutral-800));
  color: light-dark(var(--neutral-500), var(--neutral-400));
  font-size: 0.75rem;
  font-weight: 500;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat] > [ui-avatar]:not([ui-off])::after) {
  display: none;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat] > :not([ui-avatar], [ui-off])) {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 0.625rem;
  overflow-wrap: break-word;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat] > :not([ui-avatar], [ui-off]) > :is(header, footer)) {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  padding-inline: 0.75rem;
  color: light-dark(var(--neutral-500), var(--neutral-400));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat~="end"] > :not([ui-avatar], [ui-off]) > :is(header, footer, p)) {
  align-self: flex-end;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat~="end"] > :not([ui-avatar], [ui-off]) > footer) {
  justify-content: flex-end;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat] > :not([ui-avatar], [ui-off]) > p:not([ui-off])) {
  inline-size: fit-content;
  max-inline-size: min(34rem, 90%);
  margin: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 12%, transparent));
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem;
  border-end-end-radius: 1rem;
  border-end-start-radius: 0.25rem;
  background: light-dark(var(--neutral-100), var(--neutral-900));
  color: inherit;
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat~="end"] > :not([ui-avatar], [ui-off]) > p:not([ui-off])) {
  margin-inline-start: auto;
  border-end-start-radius: 1rem;
  border-end-end-radius: 0.25rem;
  background: light-dark(var(--neutral-200), var(--neutral-800));
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat] > :not([ui-avatar], [ui-off]) > p[ui-color]:not([ui-off])) {
  border-color: light-dark(var(--_ui-color-200), var(--_ui-color-800));
  background: light-dark(var(--_ui-color-100), var(--_ui-color-900));
  color: light-dark(var(--_ui-color-900), var(--_ui-color-50));
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat~="end"] > :not([ui-avatar], [ui-off]) > p[ui-color]:not([ui-off])) {
  border-color: light-dark(var(--_ui-color-300), var(--_ui-color-700));
  background: light-dark(var(--_ui-color-200), var(--_ui-color-800));
}

:where(section[ui-chat]:not([ui-off]) > article[ui-chat]:has(footer) > [ui-avatar]:not([ui-off])) {
  transform: translateY(-2rem);
}

}
@layer core {
/* library/components/calendar.css */

/* Calendar grid with native single- or multiple-date controls. */
:where([ui-calendar]:not([ui-off])) {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  inline-size: min(100%, 22rem);
}

:where([ui-calendar]:not([ui-off]) > header) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

:where([ui-calendar]:not([ui-off]) > table) {
  inline-size: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
}

:where([ui-calendar]:not([ui-off]) th) {
  padding-block: 0.375rem;
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.75rem;
  font-weight: 500;
}

:where([ui-calendar]:not([ui-off]) td) {
  padding-block: 0.125rem;
  text-align: center;
  vertical-align: middle;
}

:where([ui-calendar]:not([ui-off])) td > label {
  display: grid;
  position: relative;
  place-items: center;
  margin-inline: auto;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
}

:where([ui-calendar]:not([ui-off])) td > label > input[ui-off] {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  appearance: none;
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  cursor: inherit;
}

:where([ui-calendar]:not([ui-off])) td > label:has(> input:checked) > span {
  background: light-dark(var(--neutral-900), var(--neutral-50));
  color: light-dark(var(--neutral-50), var(--neutral-900));
}

:where([ui-calendar]:not([ui-off])) td > label:has(> input[type="checkbox"]) > span[ui-button~="circle"] {
  border-radius: 0.375rem;
}

:where([ui-calendar]:not([ui-off])) td > label > input:focus-visible + span {
  outline: 2px solid light-dark(var(--neutral-600), var(--neutral-300));
  outline-offset: 2px;
}

:where([ui-calendar]:not([ui-off])) td > label:has(> input:disabled) {
  cursor: not-allowed;
}

:where([ui-calendar]:not([ui-off])) td > label > input:disabled + span {
  opacity: 0.5;
}

}
@layer core {
/* library/components/dialog.css */

/* Faunder UI dialog: themed surface with native behavior and placement options. */
:where(dialog[ui-dialog]) {
  --_ui-dialog-size: 24rem;
  box-sizing: border-box;
  position: fixed;
  inset: 50% auto auto 50%;
  display: none;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(100% - 2rem);
  max-width: var(--_ui-dialog-size);
  max-height: calc(100dvh - 2rem);
  margin: 0;
  overflow: auto;
  border: 0;
  border-radius: 0.75rem;
  padding: 1rem;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  background-color: light-dark(var(--white), oklch(0.205 0 0));
  color: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: 0 0 0 1px light-dark(oklch(0.145 0 0 / 10%), oklch(0.985 0 0 / 10%));
  transition:
    opacity 100ms ease,
    transform 100ms ease,
    display 100ms allow-discrete,
    overlay 100ms allow-discrete;

  &:where([ui-dialog~="sheet"]) {
    border-radius: 0;
  }

  &:where([open]) {
    display: grid;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  &:where([ui-dialog~="xs"]) {
    --_ui-dialog-size: 20rem;
  }

  &:where([ui-dialog~="sm"]) {
    --_ui-dialog-size: 37.5rem;
  }

  &:where([ui-dialog~="md"]) {
    --_ui-dialog-size: 50rem;
  }

  &:where([ui-dialog~="lg"]) {
    --_ui-dialog-size: 75rem;
  }

  &:where([ui-dialog~="xl"]) {
    --_ui-dialog-size: 100rem;
  }

}

:where(dialog[ui-dialog~="left"], dialog[ui-dialog~="right"],
  dialog[ui-dialog~="top"], dialog[ui-dialog~="bottom"]) {
  transition:
    opacity 450ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    display 450ms allow-discrete,
    overlay 450ms allow-discrete;
}

:where(dialog[ui-dialog~="left"]) {
  inset: 0.5rem auto 0.5rem 0.5rem;
  width: min(75vw, var(--_ui-dialog-size));
  max-width: var(--_ui-dialog-size);
  max-height: none;
  height: calc(100dvh - 1rem);
  transform: translateX(-100%);

  &:where([open]) {
    transform: translateX(0);
  }
}

:where(dialog[ui-dialog~="right"]) {
  inset: 0.5rem 0.5rem 0.5rem auto;
  width: min(75vw, var(--_ui-dialog-size));
  max-width: var(--_ui-dialog-size);
  max-height: none;
  height: calc(100dvh - 1rem);
  transform: translateX(100%);

  &:where([open]) {
    transform: translateX(0);
  }
}

:where(dialog[ui-dialog~="top"]) {
  inset: 0.5rem 0.5rem auto;
  width: calc(100% - 1rem);
  max-width: none;
  max-height: calc(100dvh - 6rem);
  transform: translateY(-100%);

  &:where([open]) {
    transform: translateY(0);
  }
}

:where(dialog[ui-dialog~="bottom"]) {
  inset: auto 0.5rem 0.5rem;
  width: calc(100% - 1rem);
  max-width: none;
  max-height: calc(100dvh - 6rem);
  transform: translateY(100%);

  &:where([open]) {
    transform: translateY(0);
  }
}

:where(dialog[ui-dialog~="sheet"]) {
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    display 200ms allow-discrete,
    overlay 200ms allow-discrete;
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="left"], dialog[ui-dialog~="sheet"][ui-dialog~="right"]) {
  inset-block: 0;
  height: 100dvh;
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="left"]) {
  left: 0;
  right: auto;
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="right"]) {
  left: auto;
  right: 0;
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="top"]) {
  inset: 0 0 auto;
  width: 100%;
  max-width: 100%;
  max-height: 100dvh;
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="bottom"]) {
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 100dvh;
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="left"], dialog[ui-dialog~="sheet"][ui-dialog~="right"]) {
  width: min(75vw, var(--_ui-dialog-size));
  max-width: var(--_ui-dialog-size);
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="left"]) {
  transform: translateX(-2.5rem);

  &:where([open]) {
    transform: translateX(0);
  }
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="right"]) {
  transform: translateX(2.5rem);

  &:where([open]) {
    transform: translateX(0);
  }
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="top"]) {
  inset-inline: 0;
  max-height: 100dvh;
  transform: translateY(-2.5rem);

  &:where([open]) {
    transform: translateY(0);
  }
}

:where(dialog[ui-dialog~="sheet"][ui-dialog~="bottom"]) {
  inset-inline: 0;
  max-height: 100dvh;
  transform: translateY(2.5rem);

  &:where([open]) {
    transform: translateY(0);
  }
}

@starting-style {
  :where(dialog[ui-dialog][open]) {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
  }

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

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

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

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

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

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

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

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

:where(dialog[ui-dialog] > header) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

:where(dialog[ui-dialog] > header > p) {
  color: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where(dialog[ui-dialog] > button[command="close"]:not([ui-off])) {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  border-radius: 0.5rem;
  padding: 0;
}

:where(dialog[ui-dialog] > [role="region"]) {
  max-height: 70vh;
  overflow-y: auto;
  margin-inline: -1rem;
  padding-inline: 1rem;
  overscroll-behavior: contain;
}

:where(dialog[ui-dialog] > footer) {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 0.5rem;
  margin-inline: -1rem;
  margin-block-end: -1rem;
  border-block-start: 1px solid light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
  border-end-start-radius: 0.75rem;
  border-end-end-radius: 0.75rem;
  padding: 1rem;
  background-color: light-dark(
    color-mix(in oklch, oklch(0.97 0 0) 50%, transparent),
    color-mix(in oklch, oklch(0.269 0 0) 50%, transparent)
  );
}

:where(dialog[ui-dialog~="sheet"] > footer) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

@media (min-width: 40rem) {
  :where(dialog[ui-dialog] > footer) {
    flex-direction: row;
    justify-content: flex-end;
  }
}

:where(dialog[ui-dialog] > footer button:not([ui-button~="xs"], [ui-button~="sm"], [ui-button~="lg"], [ui-button~="wide"])) {
  height: 2rem;
  min-height: 2rem;
  border-radius: 0.625rem;
  padding-block: 0.375rem;
  padding-inline: 0.625rem;
}

:where(dialog[ui-dialog])::backdrop {
  opacity: 0;
  background: oklch(0 0 0 / 10%);
  backdrop-filter: blur(4px);
  transition:
    opacity 100ms ease,
    display 100ms allow-discrete,
    overlay 100ms allow-discrete;
}

:where(dialog[ui-dialog][open])::backdrop {
  opacity: 1;
}

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

:where(dialog[ui-dialog~="left"]::backdrop, dialog[ui-dialog~="right"]::backdrop,
  dialog[ui-dialog~="top"]::backdrop, dialog[ui-dialog~="bottom"]::backdrop) {
  transition:
    opacity 450ms cubic-bezier(0.32, 0.72, 0, 1),
    display 450ms allow-discrete,
    overlay 450ms allow-discrete;
}

:where(dialog[ui-dialog~="sheet"])::backdrop {
  transition:
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
    display 150ms allow-discrete,
    overlay 150ms allow-discrete;
}

:where(dialog[ui-dialog~="left"][open], dialog[ui-dialog~="right"][open],
  dialog[ui-dialog~="top"][open], dialog[ui-dialog~="bottom"][open]) {
  display: flex;
  flex-direction: column;
}

:where(dialog[ui-dialog~="left"] > *:not(header):not(footer):not(button[command="close"]:not([ui-off])),
  dialog[ui-dialog~="right"] > *:not(header):not(footer):not(button[command="close"]:not([ui-off]))) {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

:where(dialog[ui-dialog~="top"] > *:not(header):not(footer):not(button[command="close"]:not([ui-off])),
  dialog[ui-dialog~="bottom"] > *:not(header):not(footer):not(button[command="close"]:not([ui-off]))) {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

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

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

@media (prefers-reduced-motion: reduce) {
  :where(dialog[ui-dialog]),
  :where(dialog[ui-dialog])::backdrop {
    transition: none;
    backdrop-filter: none;
  }
}

}
@layer core {
/* library/components/description-list.css */

/* Description List: semantic term/value pairs with a compact vertical default. */
:where(dl[ui-description-list]:not([ui-off])) {
  display: grid;
  gap: 1rem;
}

:where(dl[ui-description-list]:not([ui-off]) > div:not([ui-off])) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  min-width: 0;
}

:where(dl[ui-description-list]:not([ui-off]) dt:not([ui-off])) {
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where(dl[ui-description-list]:not([ui-off]) dd:not([ui-off])) {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(dl[ui-description-list~="horizontal"]:not([ui-off]) > div:not([ui-off])) {
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
  align-items: baseline;
  gap: 1rem;
}

@media (max-width: 40rem) {
  :where(dl[ui-description-list~="horizontal"]:not([ui-off]) > div:not([ui-off])) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

}
@layer core {
/* library/components/popover.css */

/* Faunder UI popover: native Popover API behavior with a themed surface. */
:where([ui-popover]:not([ui-off]) > [popover]:not([ui-off])) {
  --_ui-popover-area: block-end;
  --_ui-popover-justify-self: anchor-center;
  --_ui-popover-align-self: anchor-center;

  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 1rem;
  width: min(18rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  margin: auto;
  border: 1px solid light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
  border-radius: 0.625rem;
  padding: 1rem;
  background-color: light-dark(var(--white), oklch(0.205 0 0));
  color: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow:
    0 4px 6px -1px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 30%)),
    0 2px 4px -2px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 30%));
  opacity: 0;
  transform: scale(0.95);
  transform-origin: center top;
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    display 120ms allow-discrete,
    overlay 120ms allow-discrete;

  &:where(:popover-open) {
    display: flex;
    opacity: 1;
    transform: scale(1);
  }

  @supports (position-area: block-end) {
    inset: auto;
    margin: 0;
    position-area: var(--_ui-popover-area);
    justify-self: var(--_ui-popover-justify-self);
    align-self: var(--_ui-popover-align-self);
    position-try-fallbacks: flip-block, flip-inline;
  }

}

@supports (position-area: block-end) {
  :where([ui-popover]:not([ui-off]) > [popover]:not([ui-off])) {
    margin-block-start: 0.25rem;
  }

  :where([ui-popover]:not([ui-off])[ui-popover~="top"] > [popover]:not([ui-off])) {
    margin-block-start: 0;
    margin-block-end: 0.25rem;
  }

  :where([ui-popover]:not([ui-off])[ui-popover~="left"] > [popover]:not([ui-off])) {
    margin-block-start: 0;
    margin-right: 0.25rem;
  }

  :where([ui-popover]:not([ui-off])[ui-popover~="right"] > [popover]:not([ui-off])) {
    margin-block-start: 0;
    margin-left: 0.25rem;
  }
}

:where([ui-popover]:not([ui-off]) > [popover]:not([ui-off]) > header) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

:where([ui-popover]:not([ui-off]) > [popover]:not([ui-off]) > header > p) {
  color: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@starting-style {
  :where([ui-popover]:not([ui-off]) > [popover]:not([ui-off]):popover-open) {
    opacity: 0;
    transform: scale(0.95);
  }
}

:where([ui-popover]:not([ui-off])[ui-popover~="top"] > [popover]:not([ui-off])) {
  --_ui-popover-area: block-start;
  transform-origin: center bottom;
}

:where([ui-popover]:not([ui-off])[ui-popover~="bottom"][ui-popover~="start"] > [popover]:not([ui-off]),
  [ui-popover]:not([ui-off]):not([ui-popover~="top"], [ui-popover~="left"], [ui-popover~="right"], [ui-popover~="bottom"])[ui-popover~="start"] > [popover]:not([ui-off])) {
  --_ui-popover-area: block-end span-inline-end;
  --_ui-popover-justify-self: start;
  transform-origin: left top;
}

:where([ui-popover]:not([ui-off])[ui-popover~="bottom"][ui-popover~="end"] > [popover]:not([ui-off]),
  [ui-popover]:not([ui-off]):not([ui-popover~="top"], [ui-popover~="left"], [ui-popover~="right"], [ui-popover~="bottom"])[ui-popover~="end"] > [popover]:not([ui-off])) {
  --_ui-popover-area: block-end span-inline-start;
  --_ui-popover-justify-self: end;
  transform-origin: right top;
}

:where([ui-popover]:not([ui-off])[ui-popover~="top"][ui-popover~="start"] > [popover]:not([ui-off])) {
  --_ui-popover-area: block-start span-inline-end;
  --_ui-popover-justify-self: start;
  transform-origin: left bottom;
}

:where([ui-popover]:not([ui-off])[ui-popover~="top"][ui-popover~="end"] > [popover]:not([ui-off])) {
  --_ui-popover-area: block-start span-inline-start;
  --_ui-popover-justify-self: end;
  transform-origin: right bottom;
}

:where([ui-popover]:not([ui-off])[ui-popover~="left"] > [popover]:not([ui-off])) {
  --_ui-popover-area: left;
  transform-origin: right center;
}

:where([ui-popover]:not([ui-off])[ui-popover~="right"] > [popover]:not([ui-off])) {
  --_ui-popover-area: right;
  transform-origin: left center;
}

:where([ui-popover]:not([ui-off])[ui-popover~="left"][ui-popover~="start"] > [popover]:not([ui-off]),
  [ui-popover]:not([ui-off])[ui-popover~="right"][ui-popover~="start"] > [popover]:not([ui-off])) {
  --_ui-popover-area: right span-top;
  --_ui-popover-align-self: start;
  transform-origin: left top;
}

:where([ui-popover]:not([ui-off])[ui-popover~="left"][ui-popover~="end"] > [popover]:not([ui-off]),
  [ui-popover]:not([ui-off])[ui-popover~="right"][ui-popover~="end"] > [popover]:not([ui-off])) {
  --_ui-popover-area: right span-bottom;
  --_ui-popover-align-self: end;
  transform-origin: left bottom;
}

:where([ui-popover]:not([ui-off])[ui-popover~="left"][ui-popover~="start"] > [popover]:not([ui-off])) {
  --_ui-popover-area: left span-bottom;
  transform-origin: right top;
}

:where([ui-popover]:not([ui-off])[ui-popover~="left"][ui-popover~="end"] > [popover]:not([ui-off])) {
  --_ui-popover-area: left span-top;
  transform-origin: right bottom;
}

:where([ui-popover]:not([ui-off])[ui-popover~="top"][ui-popover~="start"]:dir(rtl) > [popover]:not([ui-off])) {
  transform-origin: right bottom;
}

:where([ui-popover]:not([ui-off])[ui-popover~="top"][ui-popover~="end"]:dir(rtl) > [popover]:not([ui-off])) {
  transform-origin: left bottom;
}

:where([ui-popover]:not([ui-off])[ui-popover~="bottom"][ui-popover~="start"]:dir(rtl) > [popover]:not([ui-off])) {
  transform-origin: right top;
}

:where([ui-popover]:not([ui-off])[ui-popover~="bottom"][ui-popover~="end"]:dir(rtl) > [popover]:not([ui-off])) {
  transform-origin: left top;
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-popover]:not([ui-off]) > [popover]:not([ui-off])) {
    transition: none;
  }
}

}
@layer core {
/* library/components/pagination.css */

/* Pagination */
:where(nav[ui-pagination]:not([ui-off])) {
  display: flex;
  justify-content: center;
  inline-size: 100%;
}

:where(nav[ui-pagination]:not([ui-off])) > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(nav[ui-pagination]:not([ui-off])) > ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(nav[ui-pagination]:not([ui-off])) a {
  display: inline-flex;
  min-inline-size: 2.25rem;
  block-size: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-inline: 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: light-dark(var(--neutral-900), var(--neutral-100));
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

:where(nav[ui-pagination]:not([ui-off])) a[aria-current="page"] {
  border-color: light-dark(var(--neutral-200), var(--neutral-700));
  background: light-dark(var(--white), var(--neutral-950));
  box-shadow: 0 1px 2px light-dark(color-mix(in oklch, var(--black) 8%, transparent), color-mix(in oklch, var(--black) 24%, transparent));
}

:where(nav[ui-pagination]:not([ui-off])) :is(a, span)[aria-disabled="true"] {
  color: light-dark(var(--neutral-400), var(--neutral-600));
  pointer-events: none;
}

@media (hover: hover) {
  :where(nav[ui-pagination]:not([ui-off])) a:not([aria-current="page"], [aria-disabled="true"]):hover {
    background: light-dark(var(--neutral-100), var(--neutral-800));
  }
}

:where(nav[ui-pagination]:not([ui-off])) a:focus-visible {
  outline: 2px solid light-dark(var(--neutral-500), var(--neutral-400));
  outline-offset: 2px;
}

:where(nav[ui-pagination]:not([ui-off])) li > span {
  display: inline-flex;
  min-inline-size: 2rem;
  block-size: 2.25rem;
  align-items: center;
  justify-content: center;
  color: light-dark(var(--neutral-500), var(--neutral-400));
  font-size: 0.875rem;
}

:where(nav[ui-pagination]:not([ui-off])) li > span[aria-disabled="true"] {
  min-inline-size: 2.25rem;
  block-size: 2.25rem;
  padding-inline: 0.625rem;
  color: light-dark(var(--neutral-400), var(--neutral-600));
  white-space: nowrap;
}

}
@layer core {
/* library/components/progress.css */

/* Progress uses the native progress element and its built-in accessible value. */
:where(progress[ui-progress]:not([ui-off])) {
  appearance: none;
  display: block;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border: 0;
  border-radius: 9999px;
  background: light-dark(var(--neutral-200), var(--neutral-800));
  color: light-dark(var(--neutral-900), var(--neutral-50));
  vertical-align: middle;
}

:where(progress[ui-progress]:not([ui-off]))::-webkit-progress-bar {
  border-radius: 9999px;
  background: light-dark(var(--neutral-200), var(--neutral-800));
}

:where(progress[ui-progress]:not([ui-off]))::-webkit-progress-value {
  border-radius: 9999px;
  background: currentColor;
}

:where(progress[ui-progress]:not([ui-off]))::-moz-progress-bar {
  border-radius: 9999px;
  background: currentColor;
}

:where(progress[ui-progress][ui-color]:not([ui-off])) {
  color: light-dark(var(--_ui-color-600), var(--_ui-color-300));
}

}
@layer core {
/* library/components/menu.css */

/* A composable menu layout for native links and controls. */
:where([ui-menu]:not([ui-off])) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  inline-size: max-content;
  min-inline-size: min(8rem, 100%);
  max-inline-size: min(24rem, calc(100vw - 1rem));
  max-block-size: calc(100dvh - 1rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 12%, transparent));
  border-radius: 0.375rem;
  padding: 0.25rem;
  --_ui-menu-surface-background: light-dark(var(--white), oklch(0.205 0 0));
  background: var(--_ui-menu-surface-background);
  color: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  box-shadow:
    0 4px 6px -1px oklch(0 0 0 / 10%),
    0 2px 4px -2px oklch(0 0 0 / 10%),
    0 0 0 1px light-dark(oklch(0.145 0 0 / 10%), oklch(0.985 0 0 / 10%));
  font-size: 0.875rem;
  line-height: 1.25rem;
  --_ui-menu-position-area: block-end span-inline-end;
  --_ui-menu-justify-self: start;
  --_ui-menu-align-self: start;
}

:where([ui-menu~="bottom-center"]:not([ui-off])) {
  --_ui-menu-position-area: block-end;
  --_ui-menu-justify-self: center;
}

:where([ui-menu~="bottom-right"]:not([ui-off])) {
  --_ui-menu-position-area: block-end span-inline-start;
  --_ui-menu-justify-self: end;
}

:where([ui-menu~="top-left"]:not([ui-off])) {
  --_ui-menu-position-area: block-start span-inline-end;
  --_ui-menu-align-self: end;
}

:where([ui-menu~="top"]:not([ui-off])) {
  --_ui-menu-position-area: block-start;
  --_ui-menu-justify-self: center;
  --_ui-menu-align-self: end;
}

:where([ui-menu~="top-right"]:not([ui-off])) {
  --_ui-menu-position-area: block-start span-inline-start;
  --_ui-menu-justify-self: end;
  --_ui-menu-align-self: end;
}

:where([ui-menu~="left"]:not([ui-off])) {
  --_ui-menu-position-area: left;
  --_ui-menu-justify-self: center;
  --_ui-menu-align-self: center;
}

:where([ui-menu~="left-top"]:not([ui-off])) {
  --_ui-menu-position-area: left;
  --_ui-menu-justify-self: center;
  --_ui-menu-align-self: start;
}

:where([ui-menu~="left-bottom"]:not([ui-off])) {
  --_ui-menu-position-area: left;
  --_ui-menu-justify-self: center;
  --_ui-menu-align-self: end;
}

:where([ui-menu~="right"]:not([ui-off])) {
  --_ui-menu-position-area: right;
  --_ui-menu-justify-self: center;
  --_ui-menu-align-self: center;
}

:where([ui-menu~="right-top"]:not([ui-off])) {
  --_ui-menu-position-area: right;
  --_ui-menu-justify-self: center;
  --_ui-menu-align-self: start;
}

:where([ui-menu~="right-bottom"]:not([ui-off])) {
  --_ui-menu-position-area: right;
  --_ui-menu-justify-self: center;
  --_ui-menu-align-self: end;
}

:where([ui-menu][popover]:not([ui-off])) {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: auto;
  opacity: 0;
  transform: scale(0.95);
  transform-origin: left top;
  transition:
    opacity 100ms ease,
    transform 100ms ease,
    translate 100ms ease,
    overlay 100ms allow-discrete;
}

:where([ui-menu][popover]:popover-open) {
  opacity: 1;
  transform: scale(1);
  translate: 0 0;
}

@supports (position-area: block-end) {
  :where([ui-menu][popover]:not([ui-off])) {
    inset: auto;
    margin: 0;
    position-area: var(--_ui-menu-position-area, block-end span-inline-end);
    justify-self: var(--_ui-menu-justify-self, start);
    align-self: var(--_ui-menu-align-self, start);
    position-try-fallbacks: flip-block, flip-inline;
    margin-block-start: 0.25rem;
  }
}

@supports (min-width: anchor-size(width)) {
  :where([ui-menu][popover]:not([ui-off])) {
    min-inline-size: min(calc(100vw - 1rem), max(8rem, anchor-size(width)));
  }
}

@starting-style {
  :where([ui-menu][popover]:popover-open) {
    opacity: 0;
    transform: scale(0.95);
    translate: 0 -0.5rem;
  }
}

:where([ui-menu~="unframed"]:not([ui-off])) {
  border: 0;
  border-radius: 0;
  padding: 0;
  --_ui-menu-surface-background: transparent;
  background: var(--_ui-menu-surface-background);
  color: inherit;
  box-shadow: none;
}

:where([ui-menu]:has(> details[open]):not([ui-off])) {
  max-block-size: none;
  overflow: visible;
}

:where([ui-menu][popover]:not(:popover-open):not([ui-off])) {
  display: none;
}

:where([ui-menu][popover]:popover-open:not([ui-off])) {
  display: flex;
}

:where([ui-menu] > header:not([ui-off])) {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
}

:where([ui-menu] > :is(section, [role="group"]):not([ui-off])) {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

:where([ui-menu]) input[type="radio"]:not([ui-off]) {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

:where([ui-menu] :is(button, a, summary):not([ui-off])) {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 2rem;
  height: auto;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  line-height: 1.25rem;
  text-align: start;
  text-decoration: none;
  transform: none;
  transition: background-color 100ms ease, color 100ms ease, outline-color 100ms ease;
  cursor: default;
}

:where([ui-menu]) > details:not([ui-off]) {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  min-inline-size: 0;
}

:where([ui-menu]) details > summary:not([ui-off]) {
  list-style: none;
  cursor: pointer;
}

:where([ui-menu]) details > summary:not([ui-off])::-webkit-details-marker {
  display: none;
}

:where([ui-menu]) details > summary:not([ui-off])::after {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  flex: 0 0 auto;
  margin-inline-start: auto;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

:where([ui-menu]) details[open] > summary:not([ui-off])::after {
  transform: rotate(135deg);
}

:where([ui-menu]) details > summary:dir(rtl):not([ui-off])::after {
  transform: rotate(-45deg);
}

:where([ui-menu]) details[open] > summary:dir(rtl):not([ui-off])::after {
  transform: rotate(-135deg);
}

:where([ui-menu] details > [role="group"]:not([ui-off])) {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: calc(100% + 0.375rem);
  min-inline-size: 11rem;
  max-inline-size: min(16rem, calc(100vw - 2rem));
  margin: 0;
  border: 1px solid light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 12%, transparent));
  border-radius: 0.5rem;
  padding: 0.375rem;
  background: var(--_ui-menu-submenu-background, var(--_ui-menu-surface-background));
  box-shadow:
    0 16px 32px -16px oklch(0 0 0 / 28%),
    0 2px 6px oklch(0 0 0 / 12%);
}

:where([ui-menu]) details:not([open]) > [role="group"]:not([ui-off]) {
  display: none;
}

:where([ui-menu]) details[open] > summary:not([ui-off]) {
  background: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  color: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
}

@media (max-width: 40rem) {
  :where([ui-menu]:has(> details[open]):not([ui-off])) {
    max-block-size: calc(100dvh - 1rem);
    overflow: auto;
  }

  :where([ui-menu]) details[open] > [role="group"]:not([ui-off]) {
    position: static;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block-start: 0.25rem;
    margin-inline: 0.25rem;
    box-shadow: none;
  }
}

@media (hover: hover) {
  :where([ui-menu] :is(button, a, summary):not(:disabled, [aria-disabled="true"], [data-disabled], [ui-off]):hover) {
    background: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
    color: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
  }
}

:where([ui-menu] :is(button, a, summary):not([ui-off]):focus-visible) {
  outline: 2px solid light-dark(var(--neutral-500), var(--neutral-400));
  outline-offset: -2px;
  background: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  color: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
}

:where([ui-menu] :is(button, a)[ui-color]:not([ui-off])) {
  color: light-dark(var(--_ui-color-600), var(--_ui-color-400));
}

:where([ui-menu] :is(button, a)[ui-color]:focus-visible) {
  background: light-dark(
    color-mix(in oklch, var(--_ui-color-600) 10%, transparent),
    color-mix(in oklch, var(--_ui-color-400) 20%, transparent)
  );
  color: light-dark(var(--_ui-color-600), var(--_ui-color-400));
}

@media (hover: hover) {
  :where([ui-menu] :is(button, a)[ui-color]:not(:disabled, [aria-disabled="true"], [data-disabled], [ui-off]):hover) {
    background: light-dark(var(--_ui-color-50), var(--_ui-color-800));
    color: light-dark(var(--_ui-color-600), var(--_ui-color-300));
  }
}

:where([ui-menu] :is(button, a, summary):is(:disabled, [aria-disabled="true"], [data-disabled])) {
  opacity: 0.5;
}

:where([ui-menu] label:has(> input:is([type="checkbox"], [type="radio"]))) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  line-height: 1.25rem;
  cursor: pointer;
}

@media (hover: hover) {
  :where([ui-menu] label:has(> input:is([type="checkbox"], [type="radio"])):hover) {
    background: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  }
}

:where([ui-menu] label:has(> input:is([type="checkbox"], [type="radio"]):disabled)) {
  opacity: 0.5;
  cursor: not-allowed;
}

:where([ui-menu] kbd) {
  margin-inline-start: auto;
}

:where([ui-menu] :is(button, a, summary) :is(i[ui-icon], svg)) {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
  pointer-events: none;
}

:where([ui-menu] > hr:not([ui-off])) {
  box-sizing: border-box;
  inline-size: auto;
  block-size: 1px;
  min-block-size: 1px;
  flex: 0 0 auto;
  margin: 0.25rem 0;
  border: 0;
  padding: 0;
  background: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
}

:where([ui-menu]:not([ui-menu~="unframed"]) > hr:not([ui-off])) {
  margin-inline: -0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-menu] :is(button, a, summary):not([ui-off])) {
    transition-duration: 0ms;
  }

  :where([ui-menu]) details > summary:not([ui-off])::after {
    transition-duration: 0ms;
  }

  :where([ui-menu][popover]:not([ui-off])) {
    transition-duration: 0ms;
  }
}

}
@layer core {
/* library/components/checkbox.css */

/* Faunder UI checkbox: Base Nova sizing and states with Faunder's native input API. */
:where(input[type="checkbox"]:not([ui-off], [ui-switch], [ui-toggle])[disabled] + label:not([ui-off]),
  label:not([ui-off]):has(> input[type="checkbox"]:not([ui-off], [ui-switch], [ui-toggle])[disabled]),
  label:not([ui-off]):has(+ input[type="checkbox"]:not([ui-off], [ui-switch], [ui-toggle])[disabled])) {
  cursor: default;
  color: var(--neutral-500);
}
:where(input[type="checkbox"]:not([ui-off], [ui-switch], [ui-toggle])) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  border: 1px solid light-dark(
    oklch(92% 0.004 286.32),
    color-mix(in oklch, var(--white) 15%, transparent)
  );
  border-radius: 4px;
  background: light-dark(transparent, color-mix(in oklch, var(--white) 4.5%, transparent));
  width: 16px;
  height: 16px;
  user-select: none;
  transition: border-color 150ms, background-color 150ms, box-shadow 150ms;

  &:where(:checked), &:where(:indeterminate) {
    border-color: light-dark(var(--neutral-900), var(--neutral-50));
    background: light-dark(var(--neutral-900), var(--neutral-50));
  }

  &:where(:checked)::after {
    position: absolute;
    inset: 0;
    margin: auto;
    background: light-dark(var(--white), var(--neutral-950));
    width: 14px;
    height: 14px;
    content: "";
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017%20l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  &:where(:indeterminate)::after {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 1px;
    background: light-dark(var(--white), var(--neutral-950));
    width: 8px;
    height: 2px;
    content: "";
  }

  &:where(:user-invalid), &:where([aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
  }

  &:where(:focus-visible) {
    border-color: light-dark(var(--neutral-500), var(--neutral-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }

  &:where(:user-invalid:focus-visible, [aria-invalid="true"]:focus-visible) {
    border-color: light-dark(var(--error-600), var(--error-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--error-600) 20%, transparent),
      color-mix(in oklch, var(--error-400) 40%, transparent)
    );
  }

  &:where(:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
  }

}

@media (prefers-reduced-motion: reduce) {
  :where(input[type="checkbox"]:not([ui-off], [ui-switch], [ui-toggle])) { transition: none; }
}

}
@layer core {
/* library/components/radio.css */

/* Faunder UI radio: Base Nova sizing and states with Faunder's native input API. */
:where(input[type="radio"]:not([ui-off], [ui-switch], [ui-toggle])[disabled] + label:not([ui-off]),
  label:not([ui-off]):has(> input[type="radio"]:not([ui-off], [ui-switch], [ui-toggle])[disabled]),
  label:not([ui-off]):has(+ input[type="radio"]:not([ui-off], [ui-switch], [ui-toggle])[disabled])) {
  cursor: default;
  color: var(--neutral-500);
}
:where(input[type="radio"]:not([ui-off], [ui-switch], [ui-toggle])) {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  appearance: none;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  border: 1px solid light-dark(
    oklch(92% 0.004 286.32),
    color-mix(in oklch, var(--white) 15%, transparent)
  );
  border-radius: 50%;
  background: light-dark(transparent, color-mix(in oklch, var(--white) 4.5%, transparent));
  width: 16px;
  height: 16px;
  user-select: none;

  &:where(:checked) {
    border-color: light-dark(var(--neutral-900), var(--neutral-50));
    background: light-dark(var(--neutral-900), var(--neutral-50));
  }

  &:where(:checked)::after {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: light-dark(var(--white), var(--neutral-950));
    width: 7px;
    height: 7px;
    content: "";
  }

  &:where(:user-invalid), &:where([aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
  }

  &:where(:focus-visible) {
    border-color: light-dark(var(--neutral-500), var(--neutral-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }

  &:where(:user-invalid:focus-visible, [aria-invalid="true"]:focus-visible) {
    border-color: light-dark(var(--error-600), var(--error-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--error-600) 20%, transparent),
      color-mix(in oklch, var(--error-400) 40%, transparent)
    );
  }

  &:where(:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

}
@layer core {
/* library/components/slider.css */

/* Slider styles one native range input; the browser supplies keyboard and form behavior. */
:where(input[type="range"][ui-slider]:not([ui-off])) {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 4rem;
  height: 1.25rem;
  margin: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  padding: 0;
  color: light-dark(var(--neutral-900), var(--neutral-50));
  cursor: pointer;
  touch-action: pan-y;
  outline: none;
}

:where(input[type="range"][ui-slider]:not([ui-off]))::-webkit-slider-runnable-track {
  height: 0.25rem;
  border-radius: 9999px;
  background: light-dark(var(--neutral-200), var(--neutral-800));
}

:where(input[type="range"][ui-slider]:not([ui-off]))::-moz-range-track {
  height: 0.25rem;
  border-radius: 9999px;
  background: light-dark(var(--neutral-200), var(--neutral-800));
}

:where(input[type="range"][ui-slider]:not([ui-off]))::-moz-range-progress {
  height: 0.25rem;
  border-radius: 9999px;
  background: light-dark(var(--neutral-900), var(--neutral-50));
}

:where(input[type="range"][ui-slider]:not([ui-off]))::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.375rem;
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 9999px;
  background: light-dark(var(--white), var(--neutral-50));
  box-shadow: 0 1px 2px color-mix(in oklch, var(--black) 15%, transparent);
}

:where(input[type="range"][ui-slider]:not([ui-off]))::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 9999px;
  background: light-dark(var(--white), var(--neutral-50));
  box-shadow: 0 1px 2px color-mix(in oklch, var(--black) 15%, transparent);
}

:where(input[type="range"][ui-slider]:not([ui-off]):focus-visible) {
  outline: 2px solid light-dark(var(--neutral-500), var(--neutral-400));
  outline-offset: 3px;
}

:where(input[type="range"][ui-slider~="vertical"]:not([ui-off])) {
  width: 1.25rem;
  height: 10rem;
  writing-mode: vertical-lr;
  direction: rtl;
  touch-action: pan-x;
}

:where(input[type="range"][ui-slider]:not([ui-off]):disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

}
@layer core {
/* library/components/skeleton.css */

/* Skeleton uses fixed presets so examples need no inline sizing. */
:where([ui-skeleton]:not([ui-off])) {
  display: block;
  width: 100%;
  height: 0.875rem;
  min-width: 0;
  border-radius: 0.375rem;
  background: light-dark(var(--neutral-200), var(--neutral-800));
  animation: ui-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

:where([ui-skeleton="text-medium"]:not([ui-off])) {
  width: 82%;
}

:where([ui-skeleton="text-short"]:not([ui-off])) {
  width: 58%;
}

:where([ui-skeleton="heading"]:not([ui-off])) {
  width: 12rem;
  height: 1.25rem;
}

:where([ui-skeleton="avatar"]:not([ui-off])) {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

@keyframes ui-skeleton-pulse {
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-skeleton]:not([ui-off])) { animation: none; }
}

}
@layer core {
/* library/components/status-dot.css */

/* Status Dot: a decorative visual indicator; pair it with a text label. */
:where([ui-status-dot]:not([ui-off])) {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: light-dark(var(--neutral-600), var(--neutral-400));
  vertical-align: middle;
}

:where([ui-status-dot~="sm"]:not([ui-off])) {
  width: 0.375rem;
  height: 0.375rem;
}

:where([ui-status-dot~="lg"]:not([ui-off])) {
  width: 0.625rem;
  height: 0.625rem;
}

:where([ui-status-dot][ui-color]:not([ui-off])) {
  background-color: light-dark(var(--_ui-color-600), var(--_ui-color-400));
}

}
@layer core {
/* library/components/scroll-area.css */

/* Scroll area */
:where([ui-scroll-area]:not([ui-off])) {
  display: block;
  max-inline-size: 100%;
  block-size: 12rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: light-dark(var(--neutral-400), var(--neutral-600)) transparent;
  scrollbar-width: thin;
}

:where([ui-scroll-area~="sm"]:not([ui-off])) {
  block-size: 8rem;
}

:where([ui-scroll-area~="md"]:not([ui-off])) {
  block-size: 12rem;
}

:where([ui-scroll-area~="lg"]:not([ui-off])) {
  block-size: 20rem;
}

:where([ui-scroll-area~="vertical"]:not([ui-off])) {
  overflow-x: hidden;
  overflow-y: auto;
}

:where([ui-scroll-area~="horizontal"]:not([ui-off])) {
  block-size: auto;
  min-block-size: 3rem;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

:where([ui-scroll-area~="both"]:not([ui-off])) {
  overflow: auto;
}

:where([ui-scroll-area]:not([ui-off]))::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

:where([ui-scroll-area]:not([ui-off]))::-webkit-scrollbar-track {
  background: transparent;
}

:where([ui-scroll-area]:not([ui-off]))::-webkit-scrollbar-corner {
  background: transparent;
}

:where([ui-scroll-area]:not([ui-off]))::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: light-dark(var(--neutral-400), var(--neutral-600));
  background-clip: padding-box;
}

:where([ui-scroll-area]:not([ui-off])):focus-visible {
  outline: 1px solid light-dark(var(--neutral-500), var(--neutral-400));
  outline-offset: 0;
  box-shadow: 0 0 0 3px light-dark(
    color-mix(in oklch, var(--neutral-500) 50%, transparent),
    color-mix(in oklch, var(--neutral-400) 50%, transparent)
  );
}

}
@layer core {
/* library/components/switch.css */

/* Switch: styled native, form-capable checkbox. */
:where(input[type="checkbox"][ui-switch]:not([ui-off])) {
  --_ui-switch-thumb-size: 14px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  vertical-align: middle;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: light-dark(oklch(92.2% 0 0), color-mix(in oklch, var(--white) 12%, transparent));
  width: 32px;
  height: 18.4px;
  color: transparent;
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;

  &:where([ui-switch~="xs"]) {
    --_ui-switch-thumb-size: 6px;
    width: 16px;
    height: 12px;
  }

  &:where([ui-switch~="sm"]) {
    --_ui-switch-thumb-size: 10px;
    width: 24px;
    height: 14px;
  }

  &:where([ui-switch~="lg"]) {
    --_ui-switch-thumb-size: 18px;
    width: 40px;
    height: 22px;
  }

  &:where([ui-switch~="xl"]) {
    --_ui-switch-thumb-size: 22px;
    width: 48px;
    height: 26px;
  }

  &::before {
    position: absolute;
    top: 50%;
    inset-inline-start: 1px;
    border-radius: 9999px;
    background: light-dark(var(--white), var(--neutral-50));
    width: var(--_ui-switch-thumb-size);
    height: var(--_ui-switch-thumb-size);
    content: "";
    transform: translateY(-50%);
    transition: transform 150ms ease;
  }

  &::after {
    position: absolute;
    inset: -0.5rem -0.75rem;
    content: "";
  }

  &:where(:checked) {
    background: light-dark(var(--neutral-900), var(--neutral-50));
  }

  &:where(:checked)::before {
    background: light-dark(var(--white), var(--neutral-950));
    transform: translateX(100%) translateY(-50%);
  }

  &:where(:focus-visible) {
    border-color: light-dark(var(--neutral-600), var(--neutral-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-600) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }

  &:where(:user-invalid, [aria-invalid="true"]) {
    border-color: light-dark(var(--error-600), var(--error-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--error-600) 20%, transparent),
      color-mix(in oklch, var(--error-400) 40%, transparent)
    );
  }

  &:where(:user-invalid:focus-visible, [aria-invalid="true"]:focus-visible) {
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--error-600) 20%, transparent),
      color-mix(in oklch, var(--error-400) 40%, transparent)
    );
  }

  &:where(:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

:where(input[type="checkbox"][ui-switch]:not([ui-off]):dir(rtl):checked)::before {
  transform: translateX(-100%) translateY(-50%);
}

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

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

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

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

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

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

:where(label:has(> [ui-field]):has(input[type="checkbox"][ui-switch]:focus-visible) input[type="checkbox"][ui-switch]:not([ui-off]):focus-visible) {
  border-color: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(input[type="checkbox"][ui-switch]:not([ui-off])) { transition: none; }
  :where(input[type="checkbox"][ui-switch]:not([ui-off])::before) { transition: none; }
}

}
@layer core {
/* library/components/toggle.css */

/* A native checkbox styled as a two-state button. */
:where(label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, box-shadow 150ms;

  &:where(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:checked:not([ui-off]))) {
    background: light-dark(
      oklch(from var(--neutral-100) calc(l - 2%) c h),
      oklch(from var(--neutral-800) calc(l - 2%) c h)
    );
    box-shadow: inset 0 0 0 1px light-dark(var(--neutral-300), var(--neutral-600));
  }

  &:where(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="outline"]:checked:not([ui-off]))) {
    box-shadow: 0 1px 0 light-dark(
      color-mix(in oklch, var(--neutral-950) 16%, transparent),
      color-mix(in oklch, var(--black) 24%, transparent)
    );
  }

  &:where(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:focus-visible:not([ui-off]))) {
    z-index: 1;
    outline: none;
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }

  &:where(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:disabled:not([ui-off]))) {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:where(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="sm"]:not([ui-off]))) {
    height: 36px;
    min-height: 36px;
    padding: 4px 12px;
    gap: 6px;
  }

  &:where(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="lg"]:not([ui-off]))) {
    height: 44px;
    min-height: 44px;
    padding: 8px 24px;
  }
}

:where(label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off])) > :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off])) {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  :where(label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))) { transition: none; }
}

}
@layer core {
/* library/components/tooltip.css */

/* Tooltip */
:where([ui-tooltip]:not([ui-off])) {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

:where([ui-tooltip~="card"]:not([ui-off])) {
  display: inline-grid;
  justify-items: start;
}

:where([ui-tooltip]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  position: absolute;
  z-index: 50;
  inset-block-end: calc(100% + 0.375rem);
  inset-inline-start: 50%;
  inline-size: max-content;
  max-inline-size: min(16rem, 80vw);
  padding: 0.375rem 0.625rem;
  border: 1px solid light-dark(var(--neutral-800), var(--neutral-200));
  border-radius: 0.375rem;
  background: light-dark(var(--neutral-900), var(--neutral-100));
  box-shadow: 0 2px 8px color-mix(in oklch, var(--black) 18%, transparent);
  color: light-dark(var(--neutral-50), var(--neutral-900));
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 120ms ease 180ms, visibility 0s linear 300ms;
}

:where([ui-tooltip~="card"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  display: block;
  inset-block-start: calc(100% + 0.5rem);
  inset-block-end: auto;
  inset-inline-start: 0;
  inline-size: min(18rem, calc(100vw - 2rem));
  max-inline-size: none;
  padding: 1rem;
  border: 1px solid light-dark(
    var(--neutral-200),
    color-mix(in oklch, var(--white) 14%, transparent)
  );
  border-radius: 0.625rem;
  background: light-dark(var(--white), var(--neutral-950));
  box-shadow: 0 8px 24px light-dark(oklch(0% 0 0 / 10%), oklch(0% 0 0 / 30%));
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: start;
  transform: none;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

:where([ui-tooltip~="card"]:not([ui-off])) > [role="tooltip"]:not([ui-off])::before {
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  block-size: 0.5rem;
  content: "";
}

:where([ui-tooltip~="bottom"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  inset-block-start: calc(100% + 0.375rem);
  inset-block-end: auto;
}

:where([ui-tooltip~="left"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: auto;
  right: calc(100% + 0.375rem);
  transform: translateY(-50%);
}

:where([ui-tooltip~="right"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: calc(100% + 0.375rem);
  right: auto;
  transform: translateY(-50%);
}

:where([ui-tooltip~="card"][ui-tooltip~="top"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  inset-block-start: auto;
  inset-block-end: calc(100% + 0.5rem);
  inset-inline-start: 0;
  transform: none;
}

:where([ui-tooltip~="card"][ui-tooltip~="bottom"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  inset-block-start: calc(100% + 0.5rem);
  inset-block-end: auto;
  inset-inline-start: 0;
  transform: none;
}

:where([ui-tooltip~="card"][ui-tooltip~="left"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: auto;
  right: calc(100% + 0.5rem);
  transform: translateY(-50%);
}

:where([ui-tooltip~="card"][ui-tooltip~="right"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: calc(100% + 0.5rem);
  right: auto;
  transform: translateY(-50%);
}

:where([ui-tooltip]:not([ui-off]):hover) > [role="tooltip"]:not([ui-off]),
:where([ui-tooltip]:not([ui-off]):focus-within) > [role="tooltip"]:not([ui-off]),
:where([ui-tooltip~="card"][open]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  opacity: 1;
  visibility: visible;
}

:where([ui-tooltip~="card"]:not([ui-off]):hover) > [role="tooltip"]:not([ui-off]),
:where([ui-tooltip~="card"]:not([ui-off]):focus-within) > [role="tooltip"]:not([ui-off]),
:where([ui-tooltip~="card"][open]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
  pointer-events: auto;
}

:where([ui-tooltip]:not([ui-off]):focus-within) > [role="tooltip"]:not([ui-off]) {
  transition-delay: 0s;
}

:where([ui-tooltip~="card"] > [role="tooltip"] > :first-child) {
  margin-block-start: 0;
}

:where([ui-tooltip~="card"] > [role="tooltip"] > :last-child) {
  margin-block-end: 0;
}

@supports (position-area: bottom) and (anchor-scope: --ui-tooltip-trigger) {
  :where([ui-tooltip~="card"]:not([ui-off])) {
    anchor-scope: --ui-tooltip-trigger;
  }

  :where([ui-tooltip~="card"]:not([ui-off]) > :first-child) {
    anchor-name: --ui-tooltip-trigger;
  }

  :where([ui-tooltip~="card"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
    position: fixed;
    inset: auto;
    position-anchor: --ui-tooltip-trigger;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
  }

  :where([ui-tooltip~="card"][ui-tooltip~="top"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
    position-area: block-start span-inline-end;
  }

  :where([ui-tooltip~="card"][ui-tooltip~="bottom"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
    position-area: block-end span-inline-end;
  }

  :where([ui-tooltip~="card"][ui-tooltip~="left"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
    position-area: inline-start span-block-end;
  }

  :where([ui-tooltip~="card"][ui-tooltip~="right"]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
    position-area: inline-end span-block-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-tooltip]:not([ui-off])) > [role="tooltip"]:not([ui-off]) {
    transition: none;
  }
}

}
@layer core {
/* library/components/toast.css */

/* A notification list stays in document flow unless a position token is set. */
:where(ul[ui-toast]) {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  width: min(24rem, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(ul[ui-toast][popover]) {
  display: none;
}

:where(ul[ui-toast][popover]:popover-open) {
  display: grid;
}

:where(ul[ui-toast~="top-left"],
  ul[ui-toast~="top-center"],
  ul[ui-toast~="top-right"],
  ul[ui-toast~="bottom-left"],
  ul[ui-toast~="bottom-center"],
  ul[ui-toast~="bottom-right"]) {
  position: fixed;
  z-index: 110;
  inset: auto;
  width: min(24rem, calc(100vw - 2rem));
  margin: 0;
  pointer-events: none;
}

:where(ul[ui-toast~="top-left"]) {
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
}

:where(ul[ui-toast~="top-center"]) {
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
}

:where(ul[ui-toast~="top-right"]) {
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
}

:where(ul[ui-toast~="bottom-left"]) {
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
}

:where(ul[ui-toast~="bottom-center"]) {
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
}

:where(ul[ui-toast~="bottom-right"]) {
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
}

:where(ul[ui-toast] > li) {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
  border: 1px solid light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 14%, transparent));
  border-radius: 0.625rem;
  padding: 1rem;
  background-color: light-dark(var(--white), var(--neutral-950));
  color: inherit;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 24px light-dark(oklch(0% 0 0 / 10%), oklch(0% 0 0 / 30%));
  pointer-events: auto;
}

:where(ul[ui-toast] > li[hidden]) {
  display: none;
}

:where(ul[ui-toast] > li[ui-color]) {
  border-color: light-dark(var(--_ui-color-200), var(--_ui-color-800));
  background-color: light-dark(var(--_ui-color-50), var(--_ui-color-950));
  color: light-dark(var(--_ui-color-800), var(--_ui-color-100));
}

:where(ul[ui-toast] > li > header:has(> button[ui-icon="x"])) {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

:where(ul[ui-toast] > li > header > button[ui-icon="x"]) {
  flex: none;
  margin-inline-start: auto;
}

:where(ul[ui-toast] > li > :last-child) {
  margin-block-end: 0;
}

:where(ul[ui-toast] > li p) {
  margin-block: 0;
}

}
@layer core {
/* library/components/trace.css */

:where([ui-trace]:not([ui-off])) {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where([ui-trace]:not([ui-off]) > :has(> [ui-trace-line])) {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  text-align: start;
}

:where([ui-trace]:not([ui-off]) > a:has(> [ui-trace-line])) {
  color: inherit;
  text-decoration: none;
}

:where([ui-trace-line]:not([ui-off])) {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  color: light-dark(var(--neutral-500), var(--neutral-400));
  line-height: 1.25rem;
  transition: color 150ms;
}

:where([ui-trace]:not([ui-off]) > a:hover > [ui-trace-line]:not([ui-trace-line~="error"]),
  [ui-trace]:not([ui-off]) > button:hover > [ui-trace-line]:not([ui-trace-line~="error"])) {
  color: light-dark(var(--neutral-900), var(--neutral-100));
}

:where([ui-trace-icon]:not([ui-off])) {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

:where([ui-trace-icon]:not([ui-off]) > [ui-icon]) {
  --ui-icon-size: 1rem;
}

:where([ui-trace-title]:not([ui-off])) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where([ui-trace-description]:not([ui-off])) {
  flex: 0 0 auto;
  color: color-mix(in oklch, currentColor 70%, transparent);
  font-variant-numeric: tabular-nums;
}

:where([ui-trace-line~="error"]:not([ui-off])) {
  color: light-dark(var(--error-600), var(--error-400));
}

:where([ui-trace-line~="pending"]:not([ui-off])) {
  opacity: 0.6;
}

:where(details[ui-trace-collapsible]:not([ui-off])) {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
}

:where(summary[ui-trace-collapsible-trigger]:not([ui-off])) {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  color: light-dark(var(--neutral-500), var(--neutral-400));
  cursor: pointer;
  list-style: none;
  text-align: start;
  transition: color 150ms;
}

:where(summary[ui-trace-collapsible-trigger]:not([ui-off]))::-webkit-details-marker {
  display: none;
}

:where(summary[ui-trace-collapsible-trigger]:not([ui-off]))::marker {
  content: "";
}

:where(summary[ui-trace-collapsible-trigger]:not([ui-off]):hover:not(:has([ui-trace-line~="error"]))) {
  color: light-dark(var(--neutral-900), var(--neutral-100));
}

:where(summary[ui-trace-collapsible-trigger]:not([ui-off]):hover > [ui-trace-line]:not([ui-trace-line~="error"])) {
  color: light-dark(var(--neutral-900), var(--neutral-100));
}

:where(summary[ui-trace-collapsible-trigger]:not([ui-off]):has([ui-trace-line~="error"])) {
  color: light-dark(var(--error-600), var(--error-400));
}

:where(details[ui-trace-collapsible][open] > summary[ui-trace-collapsible-trigger] > [ui-icon]) {
  rotate: 90deg;
}

:where(details[ui-trace-collapsible] > summary[ui-trace-collapsible-trigger] > [ui-icon]) {
  flex: 0 0 auto;
  transition: rotate 150ms;
}

:where([ui-trace-collapsible-content]:not([ui-off])) {
  min-width: 0;
  margin-block-start: 0.5rem;
  margin-inline-start: 1.5rem;
  padding-block: 0.5rem;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid light-dark(var(--neutral-200), color-mix(in oklch, var(--white) 14%, transparent));
  color: light-dark(var(--neutral-500), var(--neutral-400));
  overflow-wrap: anywhere;
}

:where([ui-trace-line~="running"]:not([ui-off]) > [ui-trace-title]:not([ui-off])) {
  color: transparent;
  background-image: linear-gradient(
    100deg,
    light-dark(var(--neutral-700), var(--neutral-200)) 0%,
    light-dark(var(--neutral-700), var(--neutral-200)) 38%,
    color-mix(in oklch, light-dark(var(--neutral-700), var(--neutral-200)) 80%, light-dark(var(--neutral-400), var(--neutral-100))) 50%,
    light-dark(var(--neutral-700), var(--neutral-200)) 62%,
    light-dark(var(--neutral-700), var(--neutral-200)) 100%
  );
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: ui-trace-shimmer 1.8s linear infinite;
}

@keyframes ui-trace-shimmer {
  to { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-trace-line~="running"]:not([ui-off]) > [ui-trace-title]:not([ui-off])) {
    color: light-dark(var(--neutral-700), var(--neutral-200));
    background-image: none;
    animation: none;
  }

  :where(details[ui-trace-collapsible] > summary[ui-trace-collapsible-trigger] > [ui-icon]) {
    transition: none;
  }
}

}
@layer core {
/* library/components/field.css */

/* Faunder UI field primitives share consistent spacing and validation states. */
:where([ui-field-group]) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;

  &:where([ui-field-group] [ui-field-group]) {
    gap: 1rem;
  }
}

:where([ui-field]) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;

  &:where([data-invalid], :has([aria-invalid="true"], :user-invalid)) {
    color: light-dark(var(--error-600), var(--error-400));
  }

  &:where([ui-field~="horizontal"]) {
    flex-direction: row;
    align-items: center;

    & > :where(label) {
      flex: 1 1 auto;
    }

    & > :where(div:has(> p)) {
      align-self: flex-start;
    }

    & > :where(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
      flex: 1 1 0;
      width: 100%;
      min-width: 0;
    }
  }
}

:where([ui-field] > div:has(> p)) {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  line-height: 1.375;
}

:where([ui-field] > label:not([ui-off]), label:not([ui-off]):has(> [ui-field])) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

:where([ui-field]:not([ui-field~="horizontal"], [ui-off])) > :where(label:not([ui-off])) {
  width: 100%;
}

:where([ui-field~="horizontal"]:not([ui-off])) > :where(label:not([ui-off])) {
  width: fit-content;
}

:where([ui-field] > div:has(> p) > :first-child:not(label)) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375;
}

:where([ui-field]:not([ui-off]) p:not([role="alert"], [ui-off])) {
  margin: 0;
  color: light-dark(oklch(55.2% 0.016 285.938), oklch(70.5% 0.015 286.067));
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
  text-align: start;

  & :where(a) {
    text-decoration: underline;
    text-underline-offset: 0.25rem;

    &:where(:hover) {
      color: var(--neutral-500);
    }
  }
}

:where([ui-field~="horizontal"]) p:not([role="alert"]) {
  text-wrap: balance;
}

:where([ui-field] [role="alert"]) {
  display: none;
  margin: 0;
  color: light-dark(var(--error-600), var(--error-400));
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;

  &:where([hidden]) {
    display: none;
  }

  & > :where(ul) {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    margin-inline-start: 1rem;
    padding: 0;
    list-style: disc;
  }
}

:where([ui-field~="horizontal"]) > :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
  flex: 1 1 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

:where([ui-field]:is([data-invalid], :has([aria-invalid="true"], :user-invalid))) :where([role="alert"]:not([hidden])) {
  display: block;
}

:where(label:has(> [ui-field])) {
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  border: 1px solid light-dark(oklch(92% 0.004 286.32), color-mix(in oklch, var(--white) 15%, transparent));
  border-radius: 0.5rem;
  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;

  & > :where([ui-field]) {
    padding: 0.625rem;
  }

  &:where(:has(:checked)) {
    border-color: light-dark(color-mix(in oklch, var(--neutral-500) 30%, transparent), color-mix(in oklch, var(--neutral-400) 20%, transparent));
    background-color: light-dark(color-mix(in oklch, var(--neutral-500) 5%, transparent), color-mix(in oklch, var(--neutral-400) 10%, transparent));
  }

  &:where(:has(:focus-visible)) {
    border-color: light-dark(var(--neutral-500), var(--neutral-400));
    box-shadow: 0 0 0 3px light-dark(
      color-mix(in oklch, var(--neutral-500) 50%, transparent),
      color-mix(in oklch, var(--neutral-400) 50%, transparent)
    );
  }

  &:where(:has(:disabled), :has([data-disabled="true"])) {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@media (hover: hover) {
  :where(label:has(> [ui-field]):not(:has(:disabled, [data-disabled="true"]))) {
    &:where(:hover) {
      background-color: light-dark(var(--neutral-50), color-mix(in oklch, var(--white) 4.5%, transparent));
    }
    &:where(:has(:checked):hover) {
      background-color: light-dark(color-mix(in oklch, var(--neutral-500) 5%, transparent), color-mix(in oklch, var(--neutral-400) 10%, transparent));
    }
  }
}

:where([ui-field]:not([ui-off]):has(> :disabled)) > :where(label:not([ui-off])) {
  opacity: 0.5;
}

:where([ui-field]:not([ui-off]):has(> :disabled)) > :where(div:has(> p) > :first-child:not([ui-off])) {
  opacity: 0.5;
}

:where([ui-field]:not([ui-off]):has(> :disabled)) > :where(label:not([ui-off])) {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  :where(label:has(> [ui-field])) { transition: none; }
}

}
@layer core {
/* library/components/group.css */

/* A horizontal group joins the borders and corners of its visible direct children. */
:where([ui-group]:not([ui-off])) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 36px;
  --_ui-group-radius: 0.375rem;
  --_ui-group-border: light-dark(
    oklch(92% 0.004 286.32),
    color-mix(in oklch, var(--white) 15%, transparent)
  );
  border: 1px solid var(--_ui-group-border);
  border-radius: var(--_ui-group-radius);
  background: light-dark(transparent, color-mix(in oklch, var(--white) 4.5%, transparent));
  color: light-dark(oklch(14.1% 0.005 285.823), oklch(98.5% 0 0));
  vertical-align: middle;
}

:where([ui-group]:not([ui-off]):has(:focus-visible)) {
  border-color: light-dark(var(--neutral-500), var(--neutral-400));
}

:where([ui-group]:not([ui-off]):has(:is(input, textarea, select):is(:user-invalid, [aria-invalid="true"]))) {
  border-color: light-dark(var(--error-600), var(--error-400));
}

:where([ui-group]:not([ui-off]):has(:is(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="button"], [type="submit"], [type="reset"]),
  textarea,
  select
):not([ui-off], [popover]))) {
  --_ui-group-radius: 0.5rem;
}

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

:where([ui-group~="equal"]:not([ui-off])) {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

:where([ui-group~="equal"][ui-group~="block"]:not([ui-off])) {
  display: grid;
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover])) {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  height: auto;
  align-self: stretch;
  border-radius: inherit;
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover], [ui-border]):not(:has(> :is(
  input[type="checkbox"], input[type="radio"]
)[ui-toggle]:not([ui-off])))) {
  border: 0;
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover]):not(:is(
  button, a[ui-button], input[type="button"], input[type="submit"], input[type="reset"], [ui-button]
)):not(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))):not(:focus-visible)) {
  box-shadow: none;
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover]):focus-visible) {
  z-index: 10;
}

/* Text segments keep the shared surface; add ui-padding to a segment when needed. */
:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover]):not(:is(
  button, input, select, textarea, [ui-button], [role="separator"]
)):not(:is(i[ui-icon], svg[ui-icon], img[ui-icon], span[ui-icon])):not(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off])))) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

[ui-group]:not([ui-off]) > [ui-text~="muted"]:not([hidden], [ui-off], [popover]) {
  color: light-dark(var(--neutral-600), var(--neutral-400));
}

/* Toggle labels stay native toggle segments and retain their checked, hover and focus states. */
:where([ui-group]:not([ui-off]) > label:not([hidden], [ui-off]):has(> :is(
  input[type="checkbox"], input[type="radio"]
)[ui-toggle]:not([ui-off]))) {
  min-height: 36px;
  border: 1px solid transparent;
}

:where([ui-group]:not([ui-off]) > label:not([hidden], [ui-off]):has(> :is(
  input[type="checkbox"], input[type="radio"]
)[ui-toggle~="outline"]:not([ui-off]))) {
  border-color: light-dark(var(--neutral-300), color-mix(in oklch, var(--white) 15%, transparent));
}

/* Associated labels can join a neighboring field as inline text. */
:where([ui-group]:not([ui-off]) > label[for]:not([hidden], [ui-off]):has(+ :is(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="button"], [type="submit"], [type="reset"]), textarea, select
))) {
  border-inline-end-width: 0;
}

:where([ui-group]:not([ui-off]) > :is(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="button"], [type="submit"], [type="reset"]), textarea, select
):not([hidden], [ui-off]):has(+ label[for]:not([hidden], [ui-off]))) {
  border-inline-end-width: 0;
}

:where([ui-group]:not([ui-off]) > :is(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="button"], [type="submit"], [type="reset"]), textarea, select
):not([hidden], [ui-off]) + label[for]:not([hidden], [ui-off])) {
  background: transparent;
}

:where([ui-group]:not([ui-off]) > :is(i, svg, img, span)[ui-icon]) {
  box-sizing: border-box;
  width: max(36px, calc(var(--ui-icon-size, 16px) + 20px));
  height: auto;
  min-height: max(36px, calc(var(--ui-icon-size, 16px) + 20px));
  border: 0;
  color: light-dark(var(--neutral-600), var(--neutral-400));
}

:where([ui-group] > :is(i, svg, img, span)[ui-icon]:not([ui-icon~="xs"], [ui-icon~="sm"], [ui-icon~="lg"], [ui-icon~="xl"], [ui-icon~="2xl"], [ui-icon~="3xl"], [ui-icon~="4xl"], [ui-icon~="5xl"], [ui-icon~="6xl"])) {
  --ui-icon-size: 16px;
}

/* Paint the icon on its pseudo-element so it does not mask the group's shared surface. */
:where([ui-group]:not([ui-off]) > i[ui-icon]) {
  isolation: isolate;
  background-color: transparent;
  mask-image: none;
}

:where([ui-group]:not([ui-off]) > i[ui-icon])::before {
  position: absolute;
  inset: auto;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--ui-icon-size, 16px);
  height: var(--ui-icon-size, 16px);
  transform: translate(-50%, -50%);
  mask-image: var(--ui-icon, none);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
  content: "";
}

/* Text fields grow while buttons, icons and labels keep their natural width. */
:where([ui-group]:not([ui-off]) > input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="button"], [type="submit"], [type="reset"]):not([ui-off], [popover])) {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  height: auto;
}

:where([ui-group]:not([ui-off]) > textarea:not([ui-off], [popover])) {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

:where([ui-group]:not([ui-off]) > select:not([ui-off], [popover])) {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 36px;
  align-self: stretch;
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover]):has(~ :not([hidden], [ui-off], [popover]))) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover], [ui-border]):not(:nth-child(1 of :not([hidden], [ui-off], [popover])))) {
  border-inline-start-width: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover]):nth-child(1 of :not([hidden], [ui-off], [popover]))) {
  border-start-start-radius: var(--_ui-group-radius);
  border-end-start-radius: var(--_ui-group-radius);
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover]):nth-last-child(1 of :not([hidden], [ui-off], [popover]))) {
  border-start-end-radius: var(--_ui-group-radius);
  border-end-end-radius: var(--_ui-group-radius);
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover], [ui-border], [role="separator"]):has(+ :is(
  button, a[ui-button], input[type="button"], input[type="submit"], input[type="reset"],
  label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))
):not([hidden], [ui-off], [popover]))) {
  border-inline-end-width: 0;
}

:where([ui-group]:not([ui-off]) > label:not([hidden], [ui-off], [popover], [ui-border]):has(> :is(
  input[type="checkbox"], input[type="radio"]
)[ui-toggle]:not([ui-off])):has(+ :not([hidden], [ui-off], [popover]))) {
  border-inline-end-width: 0;
}

/* Add a separator on the side where a button meets another group segment. */
:where([ui-group]:not([ui-off]) > :is(
  button, a[ui-button], input[type="button"], input[type="submit"], input[type="reset"],
  label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))
):not([hidden], [ui-off], [popover], [ui-border]) + :not([hidden], [ui-off], [popover], [ui-border], [role="separator"])) {
  border-inline-start: 1px solid color-mix(in oklch, currentColor 10%, transparent);
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover], [ui-border], [role="separator"]):not(:is(
  button, a[ui-button], input[type="button"], input[type="submit"], input[type="reset"],
  label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))
)) + :is(
  button, a[ui-button], input[type="button"], input[type="submit"], input[type="reset"],
  label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))
):not([hidden], [ui-off], [popover], [ui-border])) {
  border-inline-start: 1px solid color-mix(in oklch, currentColor 10%, transparent);
}

:where([ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover], [ui-border], [role="separator"]) + :is(
  button, a[ui-button], input[type="button"], input[type="submit"], input[type="reset"]
)[ui-button~="primary"]:not([hidden], [ui-off], [popover], [ui-border])) {
  border-inline-start-color: color-mix(in oklch, currentColor 25%, transparent);
}

:where([ui-group]:not([ui-off]) > [ui-seperator][role="separator"]:not([popover], [ui-off])) {
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  border-inline-start: 1px solid color-mix(in oklch, currentColor 10%, transparent);
  background: transparent;
}

:where([ui-group] > [hidden]) {
  display: none;
}

}
@layer core {
/* library/utilities/border.css */

/* Border utility: neutral by default, with optional strength and side tokens. */
:where([ui-border]) {
  --_ui-border-width: 1px;
  --_ui-border-style: solid;
  --_ui-border-subtle-color: color-mix(in oklch, currentColor 10%, transparent);
  --_ui-border-strong-color: color-mix(in oklch, currentColor 25%, transparent);
  --_ui-border-color: light-dark(var(--neutral-300), var(--neutral-700));
  border: var(--_ui-border-width) var(--_ui-border-style) var(--_ui-border-color);
}

:where([ui-border~="subtle"]) {
  --_ui-border-color: var(--_ui-border-subtle-color);
}

:where([ui-border~="strong"]) {
  --_ui-border-color: var(--_ui-border-strong-color);
}

/* Any direction token switches the default all-sides border to selected sides. */
:where([ui-border~="top"], [ui-border~="right"], [ui-border~="bottom"], [ui-border~="left"], [ui-border~="block"], [ui-border~="inline"]) {
  border-width: 0;
}

:where([ui-border~="top"]) { border-top-width: var(--_ui-border-width); }
:where([ui-border~="right"]) { border-right-width: var(--_ui-border-width); }
:where([ui-border~="bottom"]) { border-bottom-width: var(--_ui-border-width); }
:where([ui-border~="left"]) { border-left-width: var(--_ui-border-width); }
:where([ui-border~="block"]) { border-block-width: var(--_ui-border-width); }
:where([ui-border~="inline"]) { border-inline-width: var(--_ui-border-width); }

/* Off tokens override all-sides and directional borders. */
:where([ui-border~="off"]) { border-width: 0; }
:where([ui-border~="top-off"]) { border-top-width: 0; }
:where([ui-border~="right-off"]) { border-right-width: 0; }
:where([ui-border~="bottom-off"]) { border-bottom-width: 0; }
:where([ui-border~="left-off"]) { border-left-width: 0; }
:where([ui-border~="block-off"]) { border-block-width: 0; }
:where([ui-border~="inline-off"]) { border-inline-width: 0; }

}
@layer core {
/* library/components/tabs.css */

/* A native radio group with the default and line tab appearances. */
:where([ui-tabs]:not([ui-off])) {
  display: inline-flex;
  width: fit-content;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: .625rem;
  background: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
  padding: 3px;
  color: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
}
:where([ui-tabs~="vertical"]:not([ui-off])) {
  height: fit-content;
  flex-direction: column;
}
:where([ui-tabs~="line"]:not([ui-off])) {
  gap: .25rem;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
:where([ui-tabs]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]))) {
  position: relative;
  display: inline-flex;
  height: calc(100% - 1px);
  min-height: 0;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: transparent;
  padding: .25rem .5rem;
  color: light-dark(color-mix(in oklch, oklch(0% 0 0) 60%, transparent), oklch(70.8% 0 0));
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms;
}
/* Keep radios accessible and keyboard-focusable while the label supplies their appearance. */
:where([ui-tabs]:not([ui-off]) > label:not([ui-off]) > input[type="radio"]:not([ui-off])) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:where([ui-tabs]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]):not(:disabled)):hover) {
  color: light-dark(oklch(0% 0 0), oklch(98.5% 0 0));
}
:where([ui-tabs]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]):disabled)) {
  opacity: .5;
  cursor: not-allowed;
}
:where([ui-tabs]:not([ui-off]) > label:not([ui-off]) > [ui-icon]) {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  pointer-events: none;
}
:where([ui-tabs~="vertical"]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]))) {
  width: 100%;
  justify-content: flex-start;
}
:where([ui-tabs]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]):checked)) {
  border-color: light-dark(transparent, color-mix(in oklch, oklch(100% 0 0) 15%, transparent));
  background: light-dark(oklch(100% 0 0), color-mix(in oklch, oklch(100% 0 0) 4.5%, transparent));
  color: light-dark(oklch(0% 0 0), oklch(98.5% 0 0));
  box-shadow: 0 1px 2px light-dark(color-mix(in oklch, oklch(0% 0 0) 10%, transparent), transparent);
}
:where([ui-tabs~="line"]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]))) {
  border-color: transparent;
  border-radius: .5rem;
  background: transparent;
  box-shadow: none;
}
:where([ui-tabs~="line"]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]):checked)) {
  color: light-dark(oklch(0% 0 0), oklch(98.5% 0 0));
}
:where([ui-tabs~="line"]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off])))::after {
  position: absolute;
  background: currentColor;
  opacity: 0;
  transition: opacity 150ms;
  content: "";
}
:where([ui-tabs~="line"]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]):checked))::after {
  opacity: 1;
}
:where([ui-tabs~="line"]:not([ui-tabs~="vertical"]):not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off])))::after {
  inset-inline: 0;
  inset-block-end: -5px;
  height: 2px;
}
:where([ui-tabs~="vertical"][ui-tabs~="line"]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off])))::after {
  inset-block: 0;
  inset-inline-end: -5px;
  width: 2px;
}

:where([ui-tabs]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]):focus-visible)) {
  z-index: 1;
  outline: 1px solid light-dark(oklch(70.8% 0 0), oklch(55.6% 0 0));
  outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in oklch, light-dark(oklch(70.8% 0 0), oklch(55.6% 0 0)) 50%, transparent);
}

@media (forced-colors: active) {
  :where([ui-tabs]:not([ui-off]) > label:not([ui-off]):has(> input[type="radio"]:not([ui-off]):checked)) {
    border-color: Highlight;
    color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-tabs]:not([ui-off]) > label:not([ui-off])) { transition: none; }
  :where([ui-tabs~="line"]:not([ui-off]) > label:not([ui-off])::after) { transition: none; }
}

}
@layer core {
/* library/components/table.css */

/* Table: consistent spacing and neutral states on native table markup. */
:where([ui-table]) {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

:where([ui-table] > table) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  caption-side: bottom;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: start;
}

:where([ui-table] caption) {
  margin-top: 1rem;
  color: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

:where([ui-table] tr) {
  border-bottom: 1px solid light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / 10%));
}

:where([ui-table] th) {
  height: 2.5rem;
  padding: 0 0.5rem;
  color: inherit;
  font-weight: 500;
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
}

:where([ui-table] td) {
  padding: 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
}

:where([ui-table] th:has([role="checkbox"]), [ui-table] td:has([role="checkbox"])) {
  padding-inline-end: 0;
}

:where([ui-table] th > [role="checkbox"], [ui-table] td > [role="checkbox"]) {
  transform: translateY(2px);
}

:where([ui-table] tbody tr:last-child, [ui-table] tfoot > tr:last-child) {
  border-bottom: 0;
}

:where([ui-table] tfoot) {
  border-top: 1px solid light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / 10%));
  background: color-mix(in oklch, light-dark(oklch(97% 0 0), oklch(26.9% 0 0)) 50%, transparent);
  font-weight: 500;
}

:where([ui-table] tr[data-state="selected"]) {
  background: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
}

:where([ui-table] tr:has([aria-expanded="true"])) {
  background: color-mix(in oklch, light-dark(oklch(97% 0 0), oklch(26.9% 0 0)) 50%, transparent);
}

@media (hover: hover) {
  :where([ui-table] tr) {
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

    &:where(:hover) {
      background: color-mix(in oklch, light-dark(oklch(97% 0 0), oklch(26.9% 0 0)) 50%, transparent);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-table] tr) { transition: none; }
}

}
@layer core {
/* library/components/input-otp.css */

:where([ui-input-otp]) {
  --_otp-frame-width: auto;
  --_otp-leading-offset: calc((2rem - 1ch) / 2);
  --_otp-radius: 0.5rem;
  position: relative;
  display: grid;
  gap: 0.375rem;
  max-inline-size: 18rem;
}

:where([ui-input-otp]:has(> input[maxlength="4"])) {
  --_otp-frame-width: calc(8rem + 2px);
  inline-size: var(--_otp-frame-width);
}

:where([ui-input-otp]:has(> input[maxlength="5"])) {
  --_otp-frame-width: calc(10rem + 2px);
  inline-size: var(--_otp-frame-width);
}

:where([ui-input-otp]:has(> input[maxlength="6"])) {
  --_otp-frame-width: calc(12rem + 2px);
  inline-size: var(--_otp-frame-width);
}

:where([ui-input-otp]:has(> input[maxlength="7"])) {
  --_otp-frame-width: calc(14rem + 2px);
  inline-size: var(--_otp-frame-width);
}

:where([ui-input-otp]:has(> input[maxlength="8"])) {
  --_otp-frame-width: calc(16rem + 2px);
  inline-size: var(--_otp-frame-width);
}

:where([ui-input-otp]:has(> input[maxlength="4"],
  > input[maxlength="5"],
  > input[maxlength="6"],
  > input[maxlength="7"],
  > input[maxlength="8"]))::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  z-index: 0;
  inline-size: var(--_otp-frame-width);
  block-size: 40px;
  box-sizing: border-box;
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: var(--_otp-radius);
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(2rem - 1px),
    light-dark(var(--neutral-300), var(--neutral-700)) calc(2rem - 1px) 2rem
  );
  background-size: 2rem 100%;
  background-repeat: repeat-x;
  content: "";
  pointer-events: none;
}

:where([ui-input-otp] input[maxlength="4"],
  [ui-input-otp] input[maxlength="5"],
  [ui-input-otp] input[maxlength="6"],
  [ui-input-otp] input[maxlength="7"],
  [ui-input-otp] input[maxlength="8"]) {
  position: relative;
  z-index: 1;
  /* Keep trailing letter spacing inside the input scrollport at the maxlength. */
  inline-size: calc(var(--_otp-frame-width) + var(--_otp-leading-offset));
  max-inline-size: none;
  padding-block: 0;
  padding-inline-start: var(--_otp-leading-offset);
  padding-inline-end: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  /* The extra width is invisible; the wrapper pseudo-element draws the fixed frame. */
  clip-path: inset(0 var(--_otp-leading-offset) 0 0);
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(2rem - 1ch);
  text-align: left;
  direction: ltr;
}

:where([ui-input-otp]:focus-within)::after {
  border-color: light-dark(var(--neutral-500), var(--neutral-400));
  box-shadow: 0 0 0 3px light-dark(
    color-mix(in oklch, var(--neutral-500) 50%, transparent),
    color-mix(in oklch, var(--neutral-400) 50%, transparent)
  );
}

:where([ui-input-otp]:has(> input:is(:user-invalid, [aria-invalid="true"])))::after {
  border-color: light-dark(var(--error-600), var(--error-400));
}

:where([ui-input-otp]:has(> input:is(:user-invalid, [aria-invalid="true"])):focus-within)::after {
  box-shadow: 0 0 0 3px light-dark(
    color-mix(in oklch, var(--error-600) 20%, transparent),
    color-mix(in oklch, var(--error-400) 40%, transparent)
  );
}

:where([ui-input-otp]:has(> input:disabled))::after {
  opacity: 0.5;
}

}
@layer core {
/* library/components/menubar.css */

/* A compact, persistent command bar that composes native popover menus. */
:where([ui-menubar]:not([ui-off])) {
  display: block;
  inline-size: fit-content;
  max-inline-size: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:where([ui-menubar]:not([ui-off]) > ul:not([ui-off])) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  inline-size: fit-content;
  max-inline-size: 100%;
  block-size: 2.25rem;
  margin: 0;
  border: 1px solid light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
  border-radius: 0.375rem;
  padding: 0.25rem;
  background: light-dark(var(--white), oklch(0.145 0 0));
  color: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  box-shadow: 0 1px 2px 0 light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%));
  list-style: none;
}

:where([ui-menubar]:not([ui-off]) > ul:not([ui-off]) > li:not([ui-off])) {
  position: relative;
  flex: 0 0 auto;
  list-style: none;
}

:where([ui-menubar]:not([ui-off]) > ul:not([ui-off]) > li:not([ui-off]) > button[ui-button~="ghost"]:not([ui-off])) {
  block-size: 1.75rem;
  min-block-size: 1.75rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

:where([ui-menubar]:not([ui-off]) > ul:not([ui-off]) > li:not([ui-off]) > button[ui-button~="ghost"]:has(+ [ui-menu][popover]:popover-open):not([ui-off])) {
  background: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  color: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
}

:where([ui-menubar]:not([ui-off]) [ui-menu][popover]:not([ui-off])) {
  min-inline-size: min(12rem, calc(100vw - 1rem));
}

@supports (position-area: block-end) {
  :where([ui-menubar]:not([ui-off]) [ui-menu][popover]:not([ui-off])) {
    margin-block-start: 0.5rem;
  }
}

@media (max-width: 40rem) {
  :where([ui-menubar]:not([ui-off]) > ul:not([ui-off])) {
    flex-wrap: wrap;
    block-size: auto;
  }
}

}
@layer core {
/* library/components/resizable.css */

:where([ui-resizable]) {
  min-inline-size: 8rem;
  min-block-size: 5rem;
  max-inline-size: 100%;
  max-block-size: 60vh;
  overflow: auto;
  padding: 1rem;
  border: 1px solid light-dark(var(--neutral-300), color-mix(in oklch, var(--white) 22%, transparent));
  border-radius: 0.5rem;
  background: light-dark(var(--neutral-50), var(--neutral-950));
  resize: both;
}

:where([ui-resizable~="horizontal"]) {
  resize: horizontal;
}

:where([ui-resizable~="vertical"]) {
  resize: vertical;
}

}
@layer core {
/* library/components/heading.css */

/* Semantic headings and ui-heading share the same default typography. */
:where(h1, h2, h3, h4, h5, h6, [ui-heading]):where(:not([ui-off])) {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;

  &:where([ui-heading~="xs"]) {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  &:where([ui-heading~="sm"]) {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  &:where([ui-heading~="md"]) {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  &:where([ui-heading~="lg"]) {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  &:where([ui-heading~="xl"]) {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  &:where([ui-heading~="2xl"], [ui-heading~="xxl"]) {
    font-size: 2.25rem;
    line-height: 1.1;
  }

  &:where([ui-heading~="3xl"]) {
    font-size: 2.75rem;
    line-height: 1.1;
  }

  &:where([ui-heading~="4xl"]) {
    font-size: 3.25rem;
    line-height: 1.05;
  }

  &:where([ui-heading~="5xl"]) {
    font-size: 4rem;
    line-height: 1.05;
  }

  &:where([ui-heading~="6xl"]) {
    font-size: 5rem;
    line-height: 1;
  }

}

}
@layer core {
/* library/utilities/text.css */

/* The ui-text typography role uses the body-text scale on every element. */
:where([ui-text]):where(:not([ui-off])) {
  &:where(:not([ui-heading], h1, h2, h3, h4, h5, h6)) {
    font-size: inherit;
    line-height: 1.5;
  }

  &:where([ui-text~="xs"]) {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  &:where([ui-text~="sm"]) {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  &:where([ui-text~="md"]) {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  &:where([ui-text~="lg"]) {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  &:where([ui-text~="xl"]) {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  &:where([ui-text~="2xl"], [ui-text~="xxl"]) {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  &:where([ui-text~="3xl"]) {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  &:where([ui-text~="4xl"]) {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  &:where([ui-text~="5xl"]) {
    font-size: 3rem;
    line-height: 1;
  }

  &:where([ui-text~="6xl"]) {
    font-size: 3.75rem;
    line-height: 1;
  }

  &:where([ui-text~="normal"]) { font-weight: 400; }
  &:where([ui-text~="medium"]) { font-weight: 500; }
  &:where([ui-text~="semibold"]) { font-weight: 600; }
  &:where([ui-text~="bold"]) { font-weight: 700; }
  &:where([ui-text~="muted"]) {
    color: light-dark(var(--neutral-600), var(--neutral-400));
  }

  &:where([ui-text~="left"]) { text-align: left; }
  &:where([ui-text~="center"]) { text-align: center; }
  &:where([ui-text~="right"]) { text-align: right; }
}

}
@layer core {
/* library/components/typeset.css */

/* Typeset gives long-form HTML a consistent scale and vertical rhythm. */
:where([ui-typeset]:not([ui-off])) {
  font-size: 1rem;
  line-height: 1.75;
}

:where([ui-typeset]:not([ui-off]) :is(p, ul, ol, blockquote, pre, figure, table, hr:not([ui-off]))) {
  margin-block: 0;
}

:where([ui-typeset]:not([ui-off]) > :not(:first-child)) {
  margin-block-start: 1.25rem;
}

:where([ui-typeset]:not([ui-off]) :is(p, ul, ol, blockquote, pre, figure, table, hr:not([ui-off])) + :is(p, ul, ol, blockquote, pre, figure, table, hr:not([ui-off]))) {
  margin-block-start: 1.25rem;
}

:where([ui-typeset]:not([ui-off]) :is(h1, h2, h3, h4, h5, h6):not([ui-heading], [ui-off])) {
  margin-block-start: 2rem;
  margin-block-end: 0.75rem;
}

:where([ui-typeset]:not([ui-off]) :is(h1, h2, h3, h4, h5, h6):first-child:not([ui-heading], [ui-off])) {
  margin-block-start: 0;
}

:where([ui-typeset]:not([ui-off]) :is(ul, ol)) {
  padding-inline-start: 1.5rem;
}

:where([ui-typeset]:not([ui-off]) li + li) {
  margin-block-start: 0.375rem;
}

:where([ui-typeset]:not([ui-off]) blockquote) {
  border-inline-start: 2px solid light-dark(var(--neutral-300), var(--neutral-700));
  padding-inline-start: 1rem;
  color: light-dark(var(--neutral-700), var(--neutral-300));
}

:where([ui-typeset]:not([ui-off]) figure) {
  display: grid;
  gap: 0.5rem;
}

:where([ui-typeset]:not([ui-off]) img) {
  max-inline-size: 100%;
  block-size: auto;
}

:where([ui-typeset]:not([ui-off]) figcaption) {
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.875rem;
  line-height: 1.5;
}

:where([ui-typeset]:not([ui-off]) table) {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}

:where([ui-typeset]:not([ui-off]) th, [ui-typeset]:not([ui-off]) td) {
  border-block-end: 1px solid light-dark(var(--neutral-200), var(--neutral-800));
  padding: 0.5rem;
  text-align: start;
  vertical-align: top;
}

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

:where([ui-typeset]:not([ui-off]) hr:not([ui-off])) {
  block-size: 1px;
  background: light-dark(var(--neutral-200), var(--neutral-800));
}

}
@layer core {
/* library/components/stepper.css */

/* Stepper: prior steps are complete relative to the semantically marked current step. */
:where(ol[ui-stepper]:not([ui-off])) {
  display: flex;
  gap: 0;
  padding: 0;
  list-style: none;
  counter-reset: ui-stepper;
}

:where(ol[ui-stepper]:not([ui-off]) > li:not([ui-off])) {
  position: relative;
  display: grid;
  flex: 1 1 0;
  grid-template-rows: 2rem auto;
  gap: 0.5rem;
  min-width: 0;
  padding-inline-end: 1rem;
  counter-increment: ui-stepper;
}

:where(ol[ui-stepper]:not([ui-off]) > li:not([ui-off]))::before {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-600));
  border-radius: 50%;
  background: light-dark(var(--white), var(--neutral-950));
  color: light-dark(var(--neutral-700), var(--neutral-300));
  content: counter(ui-stepper);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

:where(ol[ui-stepper]:not([ui-off]) > li:not([ui-off]):not(:last-child))::after {
  position: absolute;
  inset-block-start: 0.9375rem;
  inset-inline-start: 2rem;
  inset-inline-end: -1rem;
  height: 2px;
  background: light-dark(var(--neutral-200), var(--neutral-700));
  content: "";
  pointer-events: none;
}

:where(ol[ui-stepper]:not([ui-off]) > li[aria-current="step"]:not([ui-off]))::before {
  border-color: light-dark(var(--neutral-900), var(--neutral-100));
  background: light-dark(var(--neutral-900), var(--neutral-100));
  color: light-dark(var(--white), var(--neutral-900));
}

:where(ol[ui-stepper]:not([ui-off]) > li:not([ui-off]):has(~ li[aria-current="step"]:not([ui-off])))::before {
  border-color: light-dark(var(--success-700), var(--success-700));
  background: var(--success-700);
  color: var(--white);
}

:where(ol[ui-stepper]:not([ui-off]) > li:not([ui-off]):has(~ li[aria-current="step"]:not([ui-off])):not(:last-child))::after {
  background: light-dark(var(--success-600), var(--success-500));
}

:where(ol[ui-stepper]:not([ui-off]) > li > :is(span, a):not([ui-off])) {
  grid-row: 2;
  min-width: 0;
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
}

:where(ol[ui-stepper]:not([ui-off]) > li[aria-current="step"] > :is(span, a):not([ui-off])) {
  color: light-dark(var(--neutral-900), var(--neutral-100));
  font-weight: 600;
}

:where(ol[ui-stepper]:not([ui-off]) > li > :is(span, a) > small:not([ui-off])) {
  display: block;
  margin-block-start: 0.125rem;
  color: light-dark(var(--neutral-600), var(--neutral-400));
  font-size: 0.75rem;
  font-weight: 400;
}

:where(ol[ui-stepper~="vertical"]:not([ui-off])) {
  flex-direction: column;
}

:where(ol[ui-stepper~="vertical"]:not([ui-off]) > li:not([ui-off])) {
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-rows: minmax(2rem, auto);
  align-items: center;
  gap: 0.75rem;
  padding-inline-end: 0;
  padding-block-end: 1rem;
}

:where(ol[ui-stepper~="vertical"]:not([ui-off]) > li:not([ui-off]))::before {
  grid-column: 1;
  grid-row: 1;
}

:where(ol[ui-stepper~="vertical"]:not([ui-off]) > li:not([ui-off]):not(:last-child))::after {
  inset-block-start: 2rem;
  inset-block-end: -1rem;
  inset-inline-start: 0.9375rem;
  inset-inline-end: auto;
  width: 2px;
  height: auto;
}

:where(ol[ui-stepper~="vertical"]:not([ui-off]) > li > :is(span, a):not([ui-off])) {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

@media (max-width: 40rem) {
  :where(ol[ui-stepper]:not([ui-off]):not([ui-stepper~="vertical"])) {
    flex-direction: column;
  }

  :where(ol[ui-stepper]:not([ui-off]):not([ui-stepper~="vertical"]) > li:not([ui-off])) {
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-rows: minmax(2rem, auto);
    align-items: center;
    gap: 0.75rem;
    padding-inline-end: 0;
    padding-block-end: 1rem;
  }

  :where(ol[ui-stepper]:not([ui-off]):not([ui-stepper~="vertical"]) > li:not([ui-off]))::before {
    grid-column: 1;
    grid-row: 1;
  }

  :where(ol[ui-stepper]:not([ui-off]):not([ui-stepper~="vertical"]) > li:not([ui-off]):not(:last-child))::after {
    inset-block-start: 2rem;
    inset-block-end: -1rem;
    inset-inline-start: 0.9375rem;
    inset-inline-end: auto;
    width: 2px;
    height: auto;
  }

  :where(ol[ui-stepper]:not([ui-off]):not([ui-stepper~="vertical"]) > li > :is(span, a):not([ui-off])) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
}

}
@layer core {
/* library/utilities/container.css */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  CONTAINER COMPONENT
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Container component - ui-container attribute */
:where([ui-container]) {
  --ui-container-min-padding: clamp(16px, 4%, 48px);
  container-type: inline-size;
  padding-inline: max(calc(50% - 900px / 2), var(--ui-container-min-padding));
}

:where([ui-container~="xs"]) {
  padding-inline: max(calc(50% - 400px / 2), var(--ui-container-min-padding));
}

:where([ui-container~="sm"]) {
  padding-inline: max(calc(50% - 600px / 2), var(--ui-container-min-padding));
}

:where([ui-container~="lg"]) {
  padding-inline: max(calc(50% - 1200px / 2), var(--ui-container-min-padding));
}

:where([ui-container~="xl"]) {
  padding-inline: max(calc(50% - 1600px / 2), var(--ui-container-min-padding));
}

:where([ui-container~="full"]) {
  padding-inline: var(--ui-container-min-padding);
}

}
@layer core {
/* library/utilities/row.css */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  ROW UTILITY (ui-row attribute)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Base row; no default gap. min-width: 0 so it can shrink in flex/grid and overflow works. */
:where([ui-row]) {
  display: flex;
  flex-direction: row;
  min-width: 0;
}

/* X-axis (justify-content in row) */
: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;
}

/* Y-axis (align-items in row) */
: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;
}

/* Gap sizes */
:where([ui-row~="gap-xs"]) {
  gap: 0.25rem;
}

:where([ui-row~="gap-sm"]) {
  gap: 0.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;
}

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

/* Inline row */
:where([ui-row~="inline"]) {
  display: inline-flex;
}

}
@layer core {
/* library/utilities/column.css */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  COLUMN UTILITY (ui-column attribute)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Base column; no default gap. min-width: 0 so it can shrink in flex/grid and pre/code overflow works. */
:where([ui-column]) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* X-axis (align-items in column - horizontal alignment) */
: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;
}

/* Y-axis (justify-content in column - vertical spacing) */
: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;
}

/* Gap sizes */
:where([ui-column~="gap-xs"]) {
  gap: 0.25rem;
}

:where([ui-column~="gap-sm"]) {
  gap: 0.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;
}

}
@layer core {
/* library/utilities/margin.css */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  MARGIN UTILITY (ui-margin attribute)
  Koot samat kuin column/row gap: xs–6xl
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Kaikki suunnat – pelkkä koko (esim. ui-margin="2xl") */
:where([ui-margin~="xs"]) { margin: 0.25rem; }
:where([ui-margin~="sm"]) { margin: 0.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; }

/* block (top + bottom) */
:where([ui-margin~="block-0"]) { margin-block: 0; }
:where([ui-margin~="block-xs"]) { margin-block: 0.25rem; }
:where([ui-margin~="block-sm"]) { margin-block: 0.5rem; }
:where([ui-margin~="block-md"]) { margin-block: 1rem; }
:where([ui-margin~="block-lg"]) { margin-block: 1.5rem; }
:where([ui-margin~="block-xl"]) { margin-block: 2.5rem; }
:where([ui-margin~="block-2xl"]) { margin-block: 4rem; }
:where([ui-margin~="block-3xl"]) { margin-block: 6rem; }
:where([ui-margin~="block-4xl"]) { margin-block: 8rem; }
:where([ui-margin~="block-5xl"]) { margin-block: 12rem; }
:where([ui-margin~="block-6xl"]) { margin-block: 16rem; }

/* inline (left + right) */
:where([ui-margin~="inline-xs"]) { margin-inline: 0.25rem; }
:where([ui-margin~="inline-sm"]) { margin-inline: 0.5rem; }
:where([ui-margin~="inline-md"]) { margin-inline: 1rem; }
:where([ui-margin~="inline-lg"]) { margin-inline: 1.5rem; }
:where([ui-margin~="inline-xl"]) { margin-inline: 2.5rem; }
:where([ui-margin~="inline-2xl"]) { margin-inline: 4rem; }
:where([ui-margin~="inline-3xl"]) { margin-inline: 6rem; }
:where([ui-margin~="inline-4xl"]) { margin-inline: 8rem; }
:where([ui-margin~="inline-5xl"]) { margin-inline: 12rem; }
:where([ui-margin~="inline-6xl"]) { margin-inline: 16rem; }

/* top */
:where([ui-margin~="top-xs"]) { margin-top: 0.25rem; }
:where([ui-margin~="top-sm"]) { margin-top: 0.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; }

/* bottom */
:where([ui-margin~="bottom-xs"]) { margin-bottom: 0.25rem; }
:where([ui-margin~="bottom-sm"]) { margin-bottom: 0.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; }

/* left */
:where([ui-margin~="left-xs"]) { margin-left: 0.25rem; }
:where([ui-margin~="left-sm"]) { margin-left: 0.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; }

/* right */
:where([ui-margin~="right-xs"]) { margin-right: 0.25rem; }
:where([ui-margin~="right-sm"]) { margin-right: 0.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; }

/* Remove all margin, a logical axis, or a physical side. Off tokens override sizes. */
:where([ui-margin~="off"]) { margin: 0; }
:where([ui-margin~="block-off"]) { margin-block: 0; }
:where([ui-margin~="inline-off"]) { margin-inline: 0; }
:where([ui-margin~="top-off"]) { margin-top: 0; }
:where([ui-margin~="right-off"]) { margin-right: 0; }
:where([ui-margin~="bottom-off"]) { margin-bottom: 0; }
:where([ui-margin~="left-off"]) { margin-left: 0; }

}
@layer core {
/* library/utilities/padding.css */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  PADDING UTILITY (ui-padding)
  Sama skaala kuin ui-margin: xs, sm, md, lg, xl, 2xl–6xl
  Suunnat: top, right, bottom, left, block, inline tai pelkkä koko = kaikki puolet
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Kaikki puolet */
:where([ui-padding~="xs"]) { padding: 0.25rem; }
:where([ui-padding~="sm"]) { padding: 0.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; }

/* block (top + bottom) */
:where([ui-padding~="block-xs"]) { padding-block: 0.25rem; }
:where([ui-padding~="block-sm"]) { padding-block: 0.5rem; }
:where([ui-padding~="block-md"]) { padding-block: 1rem; }
:where([ui-padding~="block-lg"]) { padding-block: 1.5rem; }
:where([ui-padding~="block-xl"]) { padding-block: 2.5rem; }
:where([ui-padding~="block-2xl"]) { padding-block: 4rem; }
:where([ui-padding~="block-3xl"]) { padding-block: 6rem; }
:where([ui-padding~="block-4xl"]) { padding-block: 8rem; }
:where([ui-padding~="block-5xl"]) { padding-block: 12rem; }
:where([ui-padding~="block-6xl"]) { padding-block: 16rem; }

/* inline (left + right) */
:where([ui-padding~="inline-xs"]) { padding-inline: 0.25rem; }
:where([ui-padding~="inline-sm"]) { padding-inline: 0.5rem; }
:where([ui-padding~="inline-md"]) { padding-inline: 1rem; }
:where([ui-padding~="inline-lg"]) { padding-inline: 1.5rem; }
:where([ui-padding~="inline-xl"]) { padding-inline: 2.5rem; }
:where([ui-padding~="inline-2xl"]) { padding-inline: 4rem; }
:where([ui-padding~="inline-3xl"]) { padding-inline: 6rem; }
:where([ui-padding~="inline-4xl"]) { padding-inline: 8rem; }
:where([ui-padding~="inline-5xl"]) { padding-inline: 12rem; }
:where([ui-padding~="inline-6xl"]) { padding-inline: 16rem; }

/* top */
:where([ui-padding~="top-xs"]) { padding-top: 0.25rem; }
:where([ui-padding~="top-sm"]) { padding-top: 0.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; }

/* bottom */
:where([ui-padding~="bottom-xs"]) { padding-bottom: 0.25rem; }
:where([ui-padding~="bottom-sm"]) { padding-bottom: 0.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; }

/* left */
:where([ui-padding~="left-xs"]) { padding-left: 0.25rem; }
:where([ui-padding~="left-sm"]) { padding-left: 0.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; }

/* right */
:where([ui-padding~="right-xs"]) { padding-right: 0.25rem; }
:where([ui-padding~="right-sm"]) { padding-right: 0.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; }

/* Remove all padding, a logical axis, or a physical side. Off tokens override sizes. */
:where([ui-padding~="off"]) { padding: 0; }
:where([ui-padding~="block-off"]) { padding-block: 0; }
:where([ui-padding~="inline-off"]) { padding-inline: 0; }
:where([ui-padding~="top-off"]) { padding-top: 0; }
:where([ui-padding~="right-off"]) { padding-right: 0; }
:where([ui-padding~="bottom-off"]) { padding-bottom: 0; }
:where([ui-padding~="left-off"]) { padding-left: 0; }

}
@layer core {
/* library/utilities/shadow.css */

/* Faunder UI shadows use theme palette tokens for neutral and tinted variants. */
:where([ui-shadow]) {
  --_ui-shadow-color: var(--black);
  --_ui-shadow-opacity: 1;
  --_ui-shadow-top-opacity: 1;
  box-shadow: 0 -1px 4px oklch(from var(--_ui-shadow-color) l c h / calc(3% * var(--_ui-shadow-top-opacity))),
    0 4px 6px -1px oklch(from var(--_ui-shadow-color) l c h / calc(7% * var(--_ui-shadow-opacity))),
    0 2px 4px -2px oklch(from var(--_ui-shadow-color) l c h / calc(7% * var(--_ui-shadow-opacity)));
}
:where([ui-shadow~="neutral"]) {
  --_ui-shadow-color: var(--neutral-700, var(--black));
}

:where([ui-shadow~="error"]) {
  --_ui-shadow-color: var(--error-700);
}

:where([ui-shadow~="warning"]) {
  --_ui-shadow-color: var(--warning-700, var(--black));
}

:where([ui-shadow~="success"]) {
  --_ui-shadow-color: var(--success-700, var(--black));
}

:where([ui-shadow~="info"]) {
  --_ui-shadow-color: var(--info-700, var(--black));
}

:where([ui-shadow~="subtle"]) {
  --_ui-shadow-opacity: 0.65;
}
:where([ui-shadow~="strong"]) {
  --_ui-shadow-opacity: 1.4;
  --_ui-shadow-top-opacity: 1.4;
}
:where([ui-shadow~="xs"]) {
  box-shadow: 0 -1px 4px oklch(from var(--_ui-shadow-color) l c h / calc(3% * var(--_ui-shadow-top-opacity))),
    0 1px 2px 0 oklch(from var(--_ui-shadow-color) l c h / calc(7% * var(--_ui-shadow-opacity)));
}
:where([ui-shadow~="sm"]) {
  box-shadow: 0 -1px 4px oklch(from var(--_ui-shadow-color) l c h / calc(3% * var(--_ui-shadow-top-opacity))),
    0 1px 3px 0 oklch(from var(--_ui-shadow-color) l c h / calc(7% * var(--_ui-shadow-opacity))),
    0 1px 2px -1px oklch(from var(--_ui-shadow-color) l c h / calc(7% * var(--_ui-shadow-opacity)));
}
:where([ui-shadow~="lg"]) {
  box-shadow: 0 -1px 5px oklch(from var(--_ui-shadow-color) l c h / calc(3% * var(--_ui-shadow-top-opacity))),
    0 10px 15px -3px oklch(from var(--_ui-shadow-color) l c h / calc(7% * var(--_ui-shadow-opacity))),
    0 4px 6px -4px oklch(from var(--_ui-shadow-color) l c h / calc(7% * var(--_ui-shadow-opacity)));
}
:where([ui-shadow~="xl"]) {
  box-shadow: 0 -2px 7px oklch(from var(--_ui-shadow-color) l c h / calc(3% * var(--_ui-shadow-top-opacity))),
    0 20px 25px -5px oklch(from var(--_ui-shadow-color) l c h / calc(6% * var(--_ui-shadow-opacity))),
    0 8px 10px -6px oklch(from var(--_ui-shadow-color) l c h / calc(6% * var(--_ui-shadow-opacity)));
}
:where([ui-shadow~="2xl"]) {
  box-shadow: 0 -2px 9px oklch(from var(--_ui-shadow-color) l c h / calc(2.5% * var(--_ui-shadow-top-opacity))),
    0 25px 50px -12px oklch(from var(--_ui-shadow-color) l c h / calc(5.5% * var(--_ui-shadow-opacity))),
    0 12px 24px -8px oklch(from var(--_ui-shadow-color) l c h / calc(5.5% * var(--_ui-shadow-opacity)));
}
:where([ui-shadow~="3xl"]) {
  box-shadow: 0 -3px 12px oklch(from var(--_ui-shadow-color) l c h / calc(2% * var(--_ui-shadow-top-opacity))),
    0 35px 60px -15px oklch(from var(--_ui-shadow-color) l c h / calc(5% * var(--_ui-shadow-opacity))),
    0 18px 32px -10px oklch(from var(--_ui-shadow-color) l c h / calc(5% * var(--_ui-shadow-opacity)));
}

}