/* Faunder UI classic 0.5.16 */
/* Classic theme for both light and dark. Load after Faunder UI. */
@layer core, theme;
@layer theme {
/* library/themes/classic/palette.css */
/* Classic palette. Loaded only by the Classic stylesheet. */
:root {
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --neutral-50: oklch(98.5% 0.002 247.839);
  --neutral-100: oklch(96.7% 0.003 264.542);
  --neutral-200: oklch(92.8% 0.006 264.531);
  --neutral-300: oklch(87.2% 0.01 258.338);
  --neutral-400: oklch(70.7% 0.022 261.325);
  --neutral-500: oklch(55.1% 0.027 264.364);
  --neutral-600: oklch(44.6% 0.03 256.802);
  --neutral-700: oklch(36.3% 0.034 259.733);
  --neutral-800: oklch(25.8% 0.033 256.848);
  --neutral-900: oklch(18% 0.034 264.665);
  --neutral-950: oklch(10% 0.028 261.692);
  --primary-50: oklch(97.651% 0.00542 274.967);
  --primary-100: oklch(92.043% 0.01921 263.005);
  --primary-200: oklch(84.016% 0.03474 263.552);
  --primary-300: oklch(77.561% 0.07528 264.352);
  --primary-400: oklch(69.449% 0.11104 265.120);
  --primary-500: oklch(61.466% 0.13091 265.302);
  --primary-600: oklch(51.968% 0.12441 264.986);
  --primary-700: oklch(40.947% 0.09587 265.972);
  --primary-800: oklch(30.001% 0.06508 267.286);
  --primary-900: oklch(20.098% 0.04436 267.727);
  --primary-950: oklch(13.314% 0.03035 270.585);
}

}
@layer theme {
/* library/themes/classic/reset.css */
/* Classic surfaces follow the inherited color mode from Faunder UI. */
:where(body, [ui-color-scheme="light"], [ui-color-scheme="dark"]) {
  background: light-dark(var(--white), var(--primary-950));
  color: light-dark(var(--neutral-800), var(--primary-50));
  font-family: system-ui, sans-serif;
}

}
@layer theme {
/* library/themes/classic/focus.css */
/* Classic focus: light/dark appearance. */
:where(:focus-visible:not([ui-off])) {
  outline: 2px solid light-dark(oklch(from var(--primary-500) l calc(c * 0.75) h), var(--primary-300));
  outline-offset: 2px;
}

}
@layer theme {
/* library/themes/classic/seperator.css */
/* Classic separator: light/dark appearance. */
:where(hr:not([ui-off])) {
  border: none;
  background: light-dark(var(--neutral-200), var(--neutral-700));
}

}
@layer theme {
/* library/themes/classic/inline.css */
/* Classic inline: light/dark appearance. */
: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(mark:not([ui-off])) {
  background-color: light-dark(var(--neutral-50), var(--neutral-800));
  color: light-dark(currentColor, var(--neutral-100));
}
: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(abbr:not([ui-off])) {
  text-decoration: underline;
  text-decoration-style: dotted;
}
:where(cite:not([ui-off])) {
  font-style: italic;
}
:where(samp:not([ui-off])) {
  font-family: ui-monospace, monospace;
}
:where(var:not([ui-off])) {
  font-style: italic;
  font-family: ui-monospace, monospace;
}

}
@layer theme {
/* library/themes/classic/kbd.css */
/* Classic keyboard key styling. */
:where(kbd:not([ui-off])) {
  box-shadow: 0 1px 0 light-dark(oklch(from var(--neutral-800) l c h / 10%), oklch(from var(--neutral-950) l c h / 30%));
  border-color: light-dark(var(--neutral-200), var(--neutral-700));
  border-radius: 4px;
  background: light-dark(var(--neutral-50), var(--neutral-900));
  color: light-dark(currentColor, var(--neutral-100));
}

}
@layer theme {
/* library/themes/classic/code.css */
/* Classic code: rounded corners. */
:where(code:not([ui-off]):not(pre > code)) {
  border-radius: 4px;
}
:where(pre:not([ui-off]):has(> code)) {
  border-radius: 12px;
}

}
@layer theme {
/* library/themes/classic/link.css */
/* Classic link: light/dark appearance. */
: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(--primary-800), var(--primary-300));
  text-decoration: underline;
  &:where(:hover) {
    color: light-dark(var(--primary-600), var(--primary-200));
  }
  &:where(:active) {
    color: light-dark(var(--primary-500), var(--primary-100));
  }
  &:where([ui-link~="inherit"]) {
    color: inherit;
    &:where(:hover) {
      color: light-dark(var(--primary-600), var(--primary-200));
    }
    &:where(:active) {
      color: light-dark(var(--primary-500), var(--primary-100));
    }
  }
}

}
@layer theme {
/* library/themes/classic/font.css */
/* Classic headings use Lora; ui-text keeps the inherited body typography. */
:where(h1, h2, h3, h4, h5, h6, [ui-heading]):where(:not([ui-off], [ui-text])) {
  font-family: "Lora", Georgia, serif;
  letter-spacing: -0.025em;
}

:where(h1, h2, h3, h4, h5, h6, [ui-heading]):where(:not(
  [ui-off],
  [ui-text],
  [ui-heading~="normal"],
  [ui-heading~="medium"],
  [ui-heading~="semibold"],
  [ui-heading~="bold"]
)) {
  font-weight: 400;
}

}
@layer theme {
/* library/themes/classic/input.css */
/* Classic input: light/dark appearance. */
:where(:not([ui-button]):not([ui-off])):where(input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[list],
  textarea,
  select) {
  box-shadow:
    inset 0 4px 8px -4px light-dark(var(--neutral-100), var(--neutral-950)),
    0 4px 12px -4px light-dark(oklch(from var(--black) l c h / 5%), oklch(from var(--black) l c h / 16%));
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 8px;
  background-color: light-dark(var(--white), var(--neutral-900));
  color: light-dark(var(--neutral-800), var(--neutral-100));
  font-family: inherit;
  text-decoration: none;
  &:where(:hover) {
    border-color: light-dark(var(--neutral-300), var(--neutral-600));
  }
  &:where(:user-invalid), &:where([aria-invalid="true"]) {
    border-color: var(--error-600);
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-950));
    color: light-dark(
      color-mix(in oklch, var(--neutral-500) 89%, var(--neutral-600)),
      color-mix(in oklch, var(--neutral-500) 88%, var(--neutral-400))
    );
  }
  &::placeholder {
    color: light-dark(var(--neutral-400), var(--neutral-500));
  }
  &:where(:disabled)::placeholder {
    color: var(--neutral-400);
  }
}

: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"]) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

}
@layer theme {
/* library/themes/classic/textarea.css */
:where([ui-textarea]) {
  border-color: light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 8px;
  background: light-dark(var(--white), var(--neutral-900));
  color: light-dark(var(--neutral-800), var(--neutral-100));
  box-shadow:
    inset 0 4px 8px -4px light-dark(var(--neutral-100), var(--neutral-950)),
    0 4px 12px -4px light-dark(oklch(from var(--black) l c h / 5%), oklch(from var(--black) l c h / 16%));
}

:where([ui-textarea] > textarea) {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  outline: none;
}

:where([ui-textarea] > header, [ui-textarea] > footer) {
  color: light-dark(var(--neutral-500), var(--neutral-400));
}

: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)) {
  border-color: light-dark(var(--neutral-200), var(--neutral-800));
  background: light-dark(var(--neutral-100), var(--neutral-950));
  color: light-dark(var(--neutral-500), var(--neutral-400));
  box-shadow: none;
}

}
@layer theme {
/* library/themes/classic/select.css */
/* Classic select inherits Faunder UI's chevron, which follows currentColor. */
:where(select:not([ui-off])) {
  &:where(:disabled) {
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background-color: light-dark(var(--neutral-100), var(--neutral-950));
    color: light-dark(var(--neutral-400), var(--neutral-500));
  }
}

}
@layer theme {
/* library/themes/classic/accordion.css */
/* Classic accordion: light/dark appearance. */
:where([ui-accordion] details) {
  &::details-content {
    transition: content-visibility 0.25s ease-out allow-discrete, opacity 0.25s ease-out, block-size 0.25s ease-out;
  }
  &:where(:not(:first-child)) {
    border-top: 1px solid light-dark(var(--neutral-100), var(--neutral-700));
  }
  & :where(summary):where(:not([ui-heading], [ui-text])) {
    font-weight: 600;
    &:where([disabled]) {
      color: light-dark(var(--neutral-500), var(--neutral-400));
    }
    &::before {
      transition: rotate 200ms ease;
      background-color: currentColor;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([ui-accordion] details)::details-content,
  :where([ui-accordion] details summary::before) {
    transition: none;
  }
}

}
@layer theme {
/* library/themes/classic/card.css */
/* Classic card: light/dark appearance. */
:where([ui-card]) {
  box-shadow: 0 0 32px oklch(from var(--neutral-900) l c h / 2%);
  border: 1px solid light-dark(var(--neutral-100), var(--neutral-800));
  border-radius: 1rem;
  background-color: light-dark(var(--white), var(--neutral-900));
  color: light-dark(currentColor, var(--neutral-100));
  &:where([ui-card~="neutral"]) {
    border-color: light-dark(var(--neutral-200), color-mix(in oklch, var(--neutral-800) 60%, var(--neutral-700) 40%));
    background-color: light-dark(var(--neutral-100), color-mix(in oklch, var(--neutral-900) 60%, var(--neutral-800) 40%));
  }
  &:where([ui-card~="outline"]) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-300), var(--neutral-700));
    background-color: transparent;
  }
  &:where(a):hover {
    background-color:
      light-dark(
        color-mix(in oklch, var(--white) 25%, var(--neutral-50)),
        color-mix(in oklch, var(--neutral-900) 75%, var(--neutral-800))
      );
  }
  &:where(a[ui-card~="neutral"]):hover {
    background-color:
      light-dark(
        color-mix(in oklch, var(--neutral-100), var(--neutral-200)),
        color-mix(in oklch, var(--neutral-900) 30%, var(--neutral-800) 70%)
      );
  }
  &:where(a[ui-card~="outline"]):hover {
    background-color: light-dark(var(--neutral-50), var(--neutral-800));
  }
  &:where(a):active {
    background-color: light-dark(var(--white), var(--neutral-900));
  }
  &:where(a[ui-card~="neutral"]):active {
    background-color: light-dark(var(--neutral-100), color-mix(in oklch, var(--neutral-900) 60%, var(--neutral-800) 40%));
  }
  &:where(a[ui-card~="outline"]):active {
    background-color: light-dark(var(--neutral-100), var(--neutral-800));
  }
}
:where([ui-card] > img:first-child,
  [ui-card] > picture:first-child,
  [ui-card] > video:first-child,
  [ui-card] > figure:first-child) {
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem;
}
:where([ui-card] > img:last-child,
  [ui-card] > picture:last-child,
  [ui-card] > video:last-child,
  [ui-card] > figure:last-child) {
  border-end-start-radius: 1rem;
  border-end-end-radius: 1rem;
}

}
@layer theme {
/* library/themes/classic/item.css */
/* A linked Item is a complete clickable row, not a text link. */
:where(a[ui-item], a[ui-item]:hover, a[ui-item]:active) {
  color: inherit;
  text-decoration: none;
}

}
@layer theme {
/* library/themes/classic/breadcrumb.css */
/* Breadcrumb links should remain muted navigation links, not generic body links. */
:where([ui-breadcrumb] > ol > li > a) {
  color: light-dark(var(--neutral-500), var(--neutral-400));
  text-decoration: none;
}
:where([ui-breadcrumb] > ol > li > a:hover) {
  color: light-dark(var(--neutral-900), var(--neutral-100));
  text-decoration: none;
}
:where([ui-breadcrumb] > ol > li > details > ul > li > a) {
  color: light-dark(var(--neutral-900), var(--neutral-100));
  text-decoration: none;
}
:where([ui-breadcrumb] > ol > li > details > ul > li > a:hover,
       [ui-breadcrumb] > ol > li > details > ul > li > a:focus-visible) {
  color: light-dark(var(--neutral-950), var(--neutral-50));
  text-decoration: none;
}

}
@layer theme {
/* library/themes/classic/button.css */
/* Classic button: light/dark appearance. */
:where(:not([ui-off]):not([ui-link])):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]))) {
  box-shadow:
    inset 0 1px 0 0 light-dark(color-mix(in oklch, var(--_ui-color-50, var(--white)) 50%, transparent), color-mix(in oklch, var(--_ui-color-700, var(--neutral-700)) 50%, transparent)),
    inset 0 -2px 4px -1px light-dark(var(--_ui-color-100, var(--neutral-100)), var(--_ui-color-950, var(--neutral-950))),
    0 4px 12px -4px light-dark(oklch(from var(--black) l c h / 8%), oklch(from var(--black) l c h / 18%));
  border: 1px solid light-dark(var(--_ui-color-300, var(--neutral-300)), var(--_ui-color-800, var(--neutral-800)));
  border-radius: 8px;
  background:
    linear-gradient(
      to bottom,
      light-dark(var(--_ui-color-100, var(--neutral-100)), var(--_ui-color-800, var(--neutral-800))),
      light-dark(var(--_ui-color-200, var(--neutral-200)), var(--_ui-color-900, var(--neutral-900)))
    );
  color: light-dark(var(--_ui-color-800, var(--neutral-800)), var(--_ui-color-100, var(--neutral-100)));
  font-weight: 500;
  text-decoration: none;
  @media (hover: hover) {
    &:where(:hover) {
      background:
        linear-gradient(
          to bottom,
          light-dark(var(--_ui-color-50, var(--neutral-50)), color-mix(in oklch, var(--_ui-color-800, var(--neutral-800)), var(--_ui-color-700, var(--neutral-700)) 50%)),
          light-dark(var(--_ui-color-100, var(--neutral-100)), color-mix(in oklch, var(--_ui-color-900, var(--neutral-900)), var(--_ui-color-800, var(--neutral-800)) 50%))
        );
    }
  }
  &:where(:active), &:where(:has(:checked)) {
    box-shadow:
      inset 0 -2px 4px -1px light-dark(var(--neutral-50), var(--neutral-950)),
      0 4px 8px -4px light-dark(oklch(from var(--neutral-950) l c h / 10%), oklch(from var(--black) l c h / 18%));
    background:
      linear-gradient(
        to bottom,
        light-dark(var(--_ui-color-50, var(--neutral-50)), var(--_ui-color-700, var(--neutral-700))),
        light-dark(var(--_ui-color-50, var(--neutral-50)), var(--_ui-color-700, var(--neutral-700)))
      );
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-300), var(--neutral-800));
    background: light-dark(var(--neutral-200), var(--neutral-900));
    color: var(--neutral-500);
  }
  &:where([aria-busy="true"]:not(input[type="button"], input[type="submit"], input[type="reset"])) {
    box-shadow:
      inset 0 -2px 4px -1px light-dark(var(--neutral-50), var(--neutral-950)),
      0 4px 8px -4px light-dark(oklch(from var(--neutral-950) l c h / 10%), oklch(from var(--black) l c h / 18%));
    background:
      linear-gradient(
        to bottom,
        light-dark(var(--neutral-50), var(--neutral-800)),
        light-dark(var(--neutral-50), var(--neutral-900))
      );
    color: transparent;
    &::after {
      background-color: light-dark(var(--neutral-950), var(--neutral-100));
    }
  }
  &:where([ui-button~="primary"]) {
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, var(--primary-400) 50%, transparent),
      inset 0 -2px 4px -1px var(--primary-700),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
    border: 1px solid var(--primary-700);
    background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
    color: var(--primary-50);
    @media (hover: hover) {
      &:where(:hover) {
        background:
          linear-gradient(
            to bottom,
            color-mix(in oklch, var(--primary-600), var(--primary-500) 50%),
            color-mix(in oklch, var(--primary-700), var(--primary-600) 50%)
          );
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      box-shadow: 0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
      background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
    }
    &:where(:disabled) {
      box-shadow: none;
      border-color: var(--neutral-800);
      background: oklch(from var(--primary-700) l calc(c * 0.25) h);
      color: oklch(from var(--primary-200) l calc(c * 0.25) h);
    }
    &:where([aria-busy="true"]:not(input[type="button"], input[type="submit"], input[type="reset"])) {
      box-shadow: inset 0 -2px 4px -1px var(--primary-700), 0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
      background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
      color: transparent;
      &::after {
        background-color: var(--white);
      }
    }
  }
  &:where([ui-button~="ghost"], label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="ghost"]:not([ui-off]))) {
    box-shadow: none;
    border: 1px solid transparent;
    background: transparent;
    color: light-dark(var(--neutral-800), var(--neutral-100));
    @media (hover: hover) {
      &:where(:hover) {
        border-color: light-dark(var(--neutral-200), transparent);
        background: light-dark(var(--neutral-100), transparent);
        color: light-dark(var(--neutral-800), var(--primary-300));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      box-shadow: none;
      border-color: light-dark(var(--neutral-200), transparent);
      background: light-dark(var(--neutral-50), transparent);
      color: light-dark(var(--neutral-800), var(--primary-200));
    }
    &:where(:disabled) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: light-dark(var(--neutral-400), var(--neutral-500));
    }
    &:where([aria-busy="true"]:not(input[type="button"], input[type="submit"], input[type="reset"])) {
      box-shadow: none;
      border-color: light-dark(var(--neutral-200), transparent);
      background: light-dark(var(--neutral-50), transparent);
      color: transparent;
      &::after {
        background-color: light-dark(var(--neutral-600), var(--neutral-200));
      }
    }
  }
  &:where([ui-button~="xs"]) {
    border-radius: 4px;
  }
  &:where([ui-button~="sm"], label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="sm"]:not([ui-off]))) {
    border-radius: 6px;
  }
  &:where([ui-button~="lg"], label:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle~="lg"]:not([ui-off]))) {
    border-radius: 10px;
  }
  &:where([ui-button~="xl"]) {
    border-radius: 10px;
  }
  &:where([ui-button~="circle"]) {
    border-radius: 50%;
  }
  &:where([ui-button~="square"]) {
    border-radius: 4px;
  }
  &:where([ui-button~="inline"]) {
    box-shadow: none;
    border-color: transparent;
    background: transparent;
    color: light-dark(var(--neutral-800), var(--neutral-100));
    @media (hover: hover) {
      &:where(:hover) {
        box-shadow: none;
        border-color: transparent;
        background: transparent;
        color: light-dark(var(--primary-700), var(--primary-300));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: light-dark(var(--primary-500), var(--primary-200));
    }
    &:where(:disabled) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: light-dark(var(--neutral-400), var(--neutral-500));
    }
    &:where([aria-busy="true"]:not(input[type="button"], input[type="submit"], input[type="reset"])) {
      box-shadow: none;
      border-color: transparent;
      background: transparent;
      color: transparent;
      &::after {
        background-color: light-dark(var(--neutral-700), var(--neutral-200));
      }
    }
  }
  &:where([ui-button~="darker"]:not([ui-button~="primary"], [ui-button~="inline"]):not(:disabled, [aria-busy="true"])) {
    border-color: light-dark(var(--neutral-400), var(--neutral-900));
    box-shadow:
      inset 0 1px 0 0 light-dark(color-mix(in oklch, var(--neutral-50) 50%, transparent), color-mix(in oklch, var(--neutral-800) 50%, transparent)),
      inset 0 -2px 4px -1px light-dark(var(--neutral-200), var(--black)),
      0 4px 12px -4px light-dark(oklch(from var(--black) l c h / 8%), oklch(from var(--black) l c h / 18%));
    background: linear-gradient(to bottom, light-dark(var(--neutral-200), var(--neutral-900)), light-dark(var(--neutral-300), var(--neutral-950)));
    @media (hover: hover) {
      &:where(:hover) {
        background: linear-gradient(to bottom, light-dark(var(--neutral-100), var(--neutral-900)), light-dark(var(--neutral-200), var(--neutral-950)));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      box-shadow:
        inset 0 -2px 4px -1px light-dark(var(--neutral-100), var(--black)),
        0 4px 8px -4px light-dark(oklch(from var(--neutral-950) l c h / 10%), oklch(from var(--black) l c h / 18%));
      background: linear-gradient(to bottom, light-dark(var(--neutral-100), var(--neutral-800)), light-dark(var(--neutral-100), var(--neutral-800)));
    }
  }
  &:where([ui-button~="lighter"]:not([ui-button~="primary"], [ui-button~="inline"]):not(:disabled, [aria-busy="true"])) {
    border-color: light-dark(var(--neutral-200), var(--neutral-700));
    box-shadow:
      inset 0 1px 0 0 light-dark(color-mix(in oklch, var(--neutral-100) 50%, transparent), color-mix(in oklch, var(--neutral-600) 50%, transparent)),
      inset 0 -2px 4px -1px light-dark(var(--neutral-50), var(--neutral-900)),
      0 4px 12px -4px light-dark(oklch(from var(--black) l c h / 8%), oklch(from var(--black) l c h / 18%));
    background: linear-gradient(to bottom, light-dark(var(--white), var(--neutral-700)), light-dark(var(--neutral-100), var(--neutral-800)));
    @media (hover: hover) {
      &:where(:hover) {
        background: linear-gradient(to bottom, light-dark(var(--white), color-mix(in oklch, var(--neutral-700), var(--neutral-600) 50%)), light-dark(var(--neutral-50), color-mix(in oklch, var(--neutral-800), var(--neutral-700) 50%)));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      box-shadow:
        inset 0 -2px 4px -1px light-dark(var(--white), var(--neutral-900)),
        0 4px 8px -4px light-dark(oklch(from var(--neutral-950) l c h / 10%), oklch(from var(--black) l c h / 18%));
      background: linear-gradient(to bottom, light-dark(var(--white), var(--neutral-600)), light-dark(var(--white), var(--neutral-600)));
    }
  }
  &:where([ui-button~="primary"][ui-button~="darker"]:not(:disabled, [aria-busy="true"])) {
    border-color: var(--primary-800);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, var(--primary-500) 50%, transparent),
      inset 0 -2px 4px -1px var(--primary-800),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
    background: linear-gradient(to bottom, var(--primary-700), var(--primary-800));
    @media (hover: hover) {
      &:where(:hover) {
        background: linear-gradient(to bottom, color-mix(in oklch, var(--primary-700), var(--primary-600) 50%), color-mix(in oklch, var(--primary-800), var(--primary-700) 50%));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      box-shadow: 0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
      background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
    }
  }
  &:where([ui-button~="primary"][ui-button~="lighter"]:not(:disabled, [aria-busy="true"])) {
    border-color: var(--primary-600);
    color: var(--black);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, var(--primary-300) 50%, transparent),
      inset 0 -2px 4px -1px var(--primary-600),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
    background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
    @media (hover: hover) {
      &:where(:hover) {
        background: linear-gradient(to bottom, color-mix(in oklch, var(--primary-500), var(--primary-400) 50%), color-mix(in oklch, var(--primary-600), var(--primary-500) 50%));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      box-shadow: 0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
      background: linear-gradient(to bottom, var(--primary-400), var(--primary-500));
    }
  }
  &:where([ui-button~="darker"][ui-button~="ghost"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-900), var(--neutral-200));
    @media (hover: hover) {
      &:where(:hover) {
        border-color: light-dark(var(--neutral-300), transparent);
        background: light-dark(var(--neutral-200), transparent);
        color: light-dark(var(--neutral-900), var(--primary-400));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      border-color: light-dark(var(--neutral-300), transparent);
      background: light-dark(var(--neutral-100), transparent);
      color: light-dark(var(--neutral-900), var(--primary-300));
    }
  }
  &:where([ui-button~="lighter"][ui-button~="ghost"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-700), var(--neutral-50));
    @media (hover: hover) {
      &:where(:hover) {
        border-color: light-dark(var(--neutral-100), transparent);
        background: light-dark(var(--white), transparent);
        color: light-dark(var(--neutral-700), var(--primary-200));
      }
    }
    &:where(:active), &:where(:has(:checked)) {
      border-color: light-dark(var(--neutral-100), transparent);
      background: light-dark(var(--neutral-50), transparent);
      color: light-dark(var(--neutral-700), var(--primary-100));
    }
  }
  &:where([ui-button~="darker"][ui-button~="inline"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-900), var(--neutral-200));
    @media (hover: hover) {
      &:where(:hover) { color: light-dark(var(--primary-800), var(--primary-400)); }
    }
    &:where(:active), &:where(:has(:checked)) { color: light-dark(var(--primary-600), var(--primary-300)); }
  }
  &:where([ui-button~="lighter"][ui-button~="inline"]):not(:disabled, [aria-busy="true"]) {
    color: light-dark(var(--neutral-700), var(--neutral-50));
    @media (hover: hover) {
      &:where(:hover) { color: light-dark(var(--primary-600), var(--primary-200)); }
    }
    &:where(:active), &:where(:has(:checked)) { color: light-dark(var(--primary-400), var(--primary-100)); }
  }
  &: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]:checked:enabled:not([ui-off]))) {
    background: linear-gradient(
      to bottom,
      light-dark(
        oklch(from var(--neutral-100) calc(l - 2%) c h),
        oklch(from var(--neutral-800) calc(l - 2%) c h)
      ),
      light-dark(
        oklch(from var(--neutral-200) calc(l - 2%) c h),
        oklch(from var(--neutral-900) calc(l - 2%) c h)
      )
    );
  }
}

/* A named palette colors the Classic button 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"])) {
  border-color: light-dark(var(--_ui-color-300), var(--_ui-color-800));
  box-shadow:
    inset 0 1px 0 0 light-dark(color-mix(in oklch, var(--_ui-color-50) 50%, transparent), color-mix(in oklch, var(--_ui-color-700) 50%, transparent)),
    inset 0 -2px 4px -1px light-dark(var(--_ui-color-100), var(--_ui-color-950)),
    0 4px 12px -4px light-dark(oklch(from var(--black) l c h / 8%), oklch(from var(--black) l c h / 18%));
  background: linear-gradient(
    to bottom,
    light-dark(var(--_ui-color-100), var(--_ui-color-800)),
    light-dark(var(--_ui-color-200), var(--_ui-color-900))
  );
  color: light-dark(var(--_ui-color-800), var(--_ui-color-100));
  &:where(:focus-visible) { outline-color: light-dark(var(--_ui-color-600), var(--_ui-color-300)); }
  @media (hover: hover) {
    &:where(:hover) {
      background: linear-gradient(
        to bottom,
        light-dark(var(--_ui-color-50), color-mix(in oklch, var(--_ui-color-800), var(--_ui-color-700) 50%)),
        light-dark(var(--_ui-color-100), color-mix(in oklch, var(--_ui-color-900), var(--_ui-color-800) 50%))
      );
    }
  }
  &:where(:active) {
    background: linear-gradient(
      to bottom,
      light-dark(var(--_ui-color-50), var(--_ui-color-700)),
      light-dark(var(--_ui-color-50), var(--_ui-color-700))
    );
  }
}

:where([ui-color][ui-button~="primary"]:not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklch, var(--_ui-color-400) 50%, transparent),
    inset 0 -2px 4px -1px var(--_ui-color-700),
    0 4px 12px -4px oklch(from var(--_ui-color-800) l c h / 8%);
  border-color: var(--_ui-color-700);
  background: linear-gradient(to bottom, var(--_ui-color-600), var(--_ui-color-700));
  color: var(--_ui-color-50);
  @media (hover: hover) {
    &:where(:hover) {
      background: linear-gradient(
        to bottom,
        color-mix(in oklch, var(--_ui-color-600), var(--_ui-color-500) 50%),
        color-mix(in oklch, var(--_ui-color-700), var(--_ui-color-600) 50%)
      );
    }
  }
  &:where(:active) {
    box-shadow: 0 4px 12px -4px oklch(from var(--_ui-color-800) l c h / 8%);
    background: linear-gradient(to bottom, var(--_ui-color-500), var(--_ui-color-600));
  }
}

: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: linear-gradient(to bottom, light-dark(var(--_ui-color-50), var(--_ui-color-800)), light-dark(var(--_ui-color-100), var(--_ui-color-900)));
  color: light-dark(var(--_ui-color-800), var(--_ui-color-100));
}

:where([ui-color][ui-button~="ghost"]:not([ui-off], [ui-link], :disabled, [aria-busy="true"])) {
  box-shadow: none;
  border-color: transparent;
  background: transparent;
  color: light-dark(var(--_ui-color-800), var(--_ui-color-100));
  @media (hover: hover) {
    &:where(:hover) {
      border-color: light-dark(var(--_ui-color-200), transparent);
      background: light-dark(var(--_ui-color-100), transparent);
      color: light-dark(var(--_ui-color-800), var(--_ui-color-300));
    }
  }
  &:where(:active) {
    border-color: light-dark(var(--_ui-color-200), transparent);
    background: light-dark(var(--_ui-color-50), transparent);
  }
}

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

: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;
  box-shadow:
    inset 0 -2px 4px -1px light-dark(var(--_ui-color-50), var(--_ui-color-950)),
    0 4px 8px -4px light-dark(oklch(from var(--_ui-color-950) l c h / 10%), oklch(from var(--black) l c h / 18%));
  background: linear-gradient(
    to bottom,
    light-dark(var(--_ui-color-50), var(--_ui-color-800)),
    light-dark(var(--_ui-color-50), var(--_ui-color-900))
  );
  &::after { background: light-dark(var(--_ui-color-950), var(--_ui-color-100)); }
  &:where([ui-button~="primary"]) {
    box-shadow: inset 0 -2px 4px -1px var(--_ui-color-700), 0 4px 12px -4px oklch(from var(--_ui-color-800) l c h / 8%);
    background: linear-gradient(to bottom, var(--_ui-color-500), var(--_ui-color-600));
    &::after { background: var(--white); }
  }
  &:where([ui-button~="ghost"], [ui-button~="link"], [ui-button~="inline"]) {
    box-shadow: none;
    border-color: light-dark(var(--_ui-color-200), transparent);
    background: light-dark(var(--_ui-color-50), transparent);
    &::after { background: light-dark(var(--_ui-color-600), var(--_ui-color-200)); }
  }
}

}
@layer theme {
/* library/themes/classic/calendar.css */
:where([ui-calendar]:not([ui-off])) td > label:has(> input:checked) > span[ui-button~="ghost"] {
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklch, var(--primary-400) 50%, transparent),
    inset 0 -2px 4px -1px var(--primary-700),
    0 4px 12px -4px oklch(from var(--primary-800) l c h / 8%);
  border: 1px solid var(--primary-700);
  background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
  color: var(--primary-50);
}

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

@media (hover: hover) {
  :where([ui-calendar]:not([ui-off])) td > label:has(> input:checked) > span[ui-button~="ghost"]:hover {
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--primary-600), var(--primary-500) 50%),
        color-mix(in oklch, var(--primary-700), var(--primary-600) 50%)
      );
  }
}

}
@layer theme {
/* library/themes/classic/dialog.css */
/* Classic dialog: light/dark appearance. */
:where(dialog[ui-dialog]) {
  transition: transform 200ms ease-out, opacity 200ms ease-out;
  box-shadow:
    inset 0 0 0 1px light-dark(var(--neutral-100), var(--neutral-800)),
    0 8px 8px -8px light-dark(oklch(from var(--black) l c h / 30%), oklch(from var(--black) l c h / 50%));
  border: none;
  border-radius: 12px;
  background: light-dark(var(--white), var(--neutral-900));
  color: light-dark(var(--neutral-800), var(--neutral-100));
  &:where([ui-dialog~="left"]), &:where([ui-dialog~="right"]) {
    border-radius: 12px;
  }
  &:where([ui-dialog~="top"]), &:where([ui-dialog~="bottom"]) {
    border-radius: 12px;
  }
  &:where([ui-dialog~="sheet"]) {
    border-radius: 0;
  }
}
:where(dialog[ui-dialog])::backdrop {
  backdrop-filter: blur(2px);
  transition: opacity 200ms ease-out, backdrop-filter 200ms ease-out;
  transition-behavior: allow-discrete;
  background: oklch(from var(--black) l c h / 20%);
}
@starting-style {
  :where(dialog[ui-dialog])::backdrop {
    backdrop-filter: blur(0px);
  }
}
:where(dialog[ui-dialog]) {
  @starting-style {
    transform: translateY(-50px);
    opacity: 0;
  }
  @starting-style {
    &:where([ui-dialog~="right"]) {
      transform: translateX(100%);
    }
    &:where([ui-dialog~="left"]) {
      transform: translateX(-100%);
    }
  }
  @starting-style {
    &:where([ui-dialog~="top"]):not([ui-dialog~="sheet"]) {
      transform: translateY(-100%);
    }
    &:where([ui-dialog~="bottom"]):not([ui-dialog~="sheet"]) {
      transform: translateY(100%);
    }
    &:where([ui-dialog~="top"][ui-dialog~="sheet"]) {
      transform: translateY(-100%);
    }
    &:where([ui-dialog~="bottom"][ui-dialog~="sheet"]) {
      transform: translateY(100%);
    }
  }
}

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

: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"]::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),
    backdrop-filter 450ms cubic-bezier(0.32, 0.72, 0, 1),
    display 450ms allow-discrete,
    overlay 450ms allow-discrete;
}

: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"])::backdrop {
  transition:
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1),
    display 150ms allow-discrete,
    overlay 150ms allow-discrete;
}

@starting-style {
  :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;
  }
}

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

}
@layer theme {
/* library/themes/classic/menu.css */
/* Classic menu surface and native action rows. */
:where([ui-menu]:not([ui-off])) {
  --_ui-menu-submenu-background: light-dark(var(--white), var(--neutral-900));
}

:where([ui-menu]:not([ui-menu~="unframed"]):not([ui-off])) {
  border-color: light-dark(var(--neutral-100), var(--neutral-800));
  border-radius: 0.5rem;
  --_ui-menu-surface-background: light-dark(var(--white), var(--neutral-900));
  color: light-dark(var(--neutral-800), var(--neutral-100));
  box-shadow: 0 4px 12px light-dark(
    oklch(from var(--black) l c h / 10%),
    oklch(from var(--black) l c h / 40%)
  );
}

:where([ui-menu] :is(button, a, summary)) {
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

:where([ui-menu] :is(button, a, summary):focus-visible) {
  outline: 2px solid light-dark(var(--neutral-600), var(--neutral-300));
  outline-offset: -2px;
  box-shadow: none;
}

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

  :where([ui-menu] :is(button, a)[ui-color]:not(:disabled, [aria-disabled="true"], [data-disabled]):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] label:has(> input:is([type="checkbox"], [type="radio"])):hover) {
    background: light-dark(var(--neutral-50), var(--neutral-800));
  }
}

:where([ui-menu] :is(button, a, summary):active) {
  transform: none;
}

:where([ui-menu] :is(button, a, summary):disabled) {
  background: transparent;
  color: light-dark(var(--neutral-400), var(--neutral-500));
}

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

}
@layer theme {
/* library/themes/classic/checkbox.css */
/* Classic checkbox: light/dark appearance. */
:where([ui-row] input[type="checkbox"]:not([ui-off],
  [ui-switch], [ui-toggle])[disabled] + label) {
  color: var(--neutral-500);
}
:where(input[type="checkbox"]:not([ui-off], [ui-switch], [ui-toggle])) {
  box-shadow:
    inset 0 1px 0 0 light-dark(var(--white), var(--neutral-700)),
    inset 0 -2px 4px -1px light-dark(var(--neutral-100), var(--neutral-950)),
    0 4px 8px -4px light-dark(oklch(from var(--black) l c h / 20%), oklch(from var(--black) l c h / 22%));
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 4px;
  background:
    linear-gradient(
      to bottom,
      light-dark(var(--neutral-50), var(--neutral-800)),
      light-dark(var(--neutral-100), var(--neutral-900))
    );
  &:where(:hover) {
    background:
      linear-gradient(
        to bottom,
        light-dark(var(--neutral-50), var(--neutral-700)),
        light-dark(var(--neutral-100), var(--neutral-800))
      );
  }
  &:where(:user-invalid), &[aria-invalid="true"] {
    border-color: var(--error-600);
  }
  &:where(:checked), &:where(:indeterminate) {
    box-shadow:
      inset 0 1px 0 0 var(--primary-500),
      inset 0 -2px 4px -1px var(--primary-700),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 5%);
    border: 1px solid var(--primary-700);
    background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
  }
  &:where(:checked):where(:hover), &:where(:indeterminate):where(:hover) {
    background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
  }
  &:where(:checked)::after {
    background: var(--white);
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: var(--white);
  }
  &:where(:indeterminate)::after {
    background: var(--white);
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: var(--white);
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-900));
  }
  &:where(:disabled)::after {
    border-color: var(--neutral-400);
  }
  &:where(:checked):where(:disabled), &:where(:indeterminate):where(:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-500), var(--neutral-700));
    background: light-dark(var(--neutral-400), var(--neutral-800));
  }
  &:where(:checked):where(:disabled)::after, &:where(:indeterminate):where(:disabled)::after {
    border-color: var(--neutral-300);
  }
}

}
@layer theme {
/* library/themes/classic/radio.css */
/* Classic radio: light/dark appearance. */
:where([ui-row] input[type="radio"]:not([ui-off],
  [ui-switch], [ui-toggle])[disabled] + label) {
  color: var(--neutral-500);
}
:where(input[type="radio"]:not([ui-off], [ui-switch], [ui-toggle])) {
  box-shadow:
    inset 0 1px 0 0 light-dark(var(--white), var(--neutral-700)),
    inset 0 -2px 4px -1px light-dark(var(--neutral-100), var(--neutral-950)),
    0 4px 8px -4px light-dark(oklch(from var(--black) l c h / 20%), oklch(from var(--black) l c h / 22%));
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 50%;
  background:
    linear-gradient(
      to bottom,
      light-dark(var(--neutral-50), var(--neutral-800)),
      light-dark(var(--neutral-100), var(--neutral-900))
    );
  &:where(:hover) {
    background:
      linear-gradient(
        to bottom,
        light-dark(var(--neutral-50), var(--neutral-700)),
        light-dark(var(--neutral-100), var(--neutral-800))
      );
  }
  &:where(:user-invalid), &:where([aria-invalid="true"]) {
    border-color: var(--error-600);
  }
  &:where(:checked) {
    box-shadow:
      inset 0 1px 0 0 var(--primary-500),
      inset 0 -2px 4px -1px var(--primary-700),
      0 4px 12px -4px oklch(from var(--primary-800) l c h / 5%);
    border: 1px solid var(--primary-700);
    background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
  }
  &:where(:checked:hover) {
    background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
  }
  &:where(:checked)::after {
    border-radius: 50%;
    background: var(--white);
  }
  &:where(:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-900));
  }
  &:where(:disabled)::after {
    background-color: var(--neutral-400);
  }
  &:where(:checked):where(:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-500), var(--neutral-700));
    background: light-dark(var(--neutral-400), var(--neutral-800));
  }
  &:where(:checked):where(:disabled)::after {
    background-color: var(--neutral-300);
  }
}

}
@layer theme {
/* library/themes/classic/switch.css */
/* Classic switch: preserve the appearance's raised controls on the dedicated API. */
:where(label:has(> input[type="checkbox"][ui-switch]:not([ui-off])[disabled])) {
  color: var(--neutral-500);
}

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

:where(input[type="checkbox"][ui-switch]:not([ui-off])) {
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
  border-radius: 999px;
  background: light-dark(var(--neutral-100), var(--neutral-800));

  &::before {
    box-shadow: 0 1px 2px oklch(from var(--black) l c h / 20%), 0 2px 4px oklch(from var(--black) l c h / 10%);
    border-radius: 50%;
    background: var(--white);
  }

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

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

  &:where(:checked) {
    border-color: var(--primary-700);
    background: var(--primary-600);
    box-shadow: 0 4px 12px -4px oklch(from var(--primary-800) l c h / 5%);

    &:where(:hover) {
      background: var(--primary-500);
    }
  }

  &:where(:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-200), var(--neutral-800));
    background: light-dark(var(--neutral-100), var(--neutral-900));

    &::before {
      background: light-dark(var(--neutral-50), var(--neutral-700));
    }
  }

  &:where(:checked:disabled) {
    box-shadow: none;
    border-color: light-dark(var(--neutral-500), var(--neutral-700));
    background: light-dark(var(--neutral-400), var(--neutral-800));

    &::before {
      background: light-dark(var(--neutral-300), var(--neutral-600));
    }
  }
}

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

}
@layer theme {
/* library/themes/classic/field.css */
/* Classic field: light/dark appearance. */
:where([ui-field]) {
  &> :where(label) {
    font-weight: 500;
  }
  &> :where(p:not([role])) {
    color: light-dark(var(--neutral-600), var(--neutral-400));
  }
  &> :where(p[role="error"]) {
    color: light-dark(var(--error-700), var(--error-300));
  }
  &:where(:has(p[role="error"]):has(:user-invalid, [aria-invalid="true"])) {
    & :where(label) {
      color: light-dark(var(--error-700), var(--error-300));
    }
  }
}

}
@layer theme {
/* library/themes/classic/group.css */
/* Group segments keep the Classic control border colors and outer radius. */
[ui-group]:not([ui-off]) {
  --_ui-group-radius: 8px;
  --_ui-group-border: light-dark(var(--neutral-300), var(--neutral-700));
  border: 1px solid var(--_ui-group-border);
  border-radius: var(--_ui-group-radius);
  background: light-dark(var(--white), var(--neutral-900));
  color: light-dark(var(--neutral-800), var(--neutral-100));
}
[ui-group]:not([ui-off]):hover { border-color: light-dark(var(--neutral-300), var(--neutral-600)); }
[ui-group]:not([ui-off]):has(:focus-visible) { border-color: light-dark(var(--neutral-500), var(--neutral-400)); }
[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));
}
[ui-group]:not([ui-off]) > :not([hidden], [ui-off]) { border-radius: inherit; }
[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;
}
[ui-group]:not([ui-off]) > :not([hidden], [ui-off], [popover], [ui-button], button, input[type="button"], input[type="submit"], input[type="reset"]):not(:focus-visible):not(:has(> :is(input[type="checkbox"], input[type="radio"])[ui-toggle]:not([ui-off]))) {
  box-shadow: none;
}
[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);
}
[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);
}
[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;
}
[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;
}
[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;
}
[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;
}
[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"]):not(:nth-child(1 of :not([hidden], [ui-off], [popover]))) {
  border-inline-start: 1px solid color-mix(in oklch, currentColor 10%, transparent);
}
[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]):not(:nth-child(1 of :not([hidden], [ui-off], [popover]))) {
  border-inline-start: 1px solid color-mix(in oklch, currentColor 10%, transparent);
}
[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]):not(:nth-child(1 of :not([hidden], [ui-off], [popover]))) {
  border-inline-start-color: color-mix(in oklch, currentColor 25%, transparent);
}
[ui-group]:not([ui-off]) > [ui-seperator][role="separator"]:not([popover], [ui-off]) {
  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;
}

}
@layer theme {
/* library/themes/classic/shadow.css */
/* Geometry and intensity come from Faunder UI; Classic supplies the shadow color. */
:where([ui-shadow]) {
  --ui-shadow-color: var(--neutral-700);
  --_ui-shadow-color: oklch(from var(--ui-shadow-color) l calc(c * 1.2) h);
}
:where([ui-shadow~="primary"]) {
  --ui-shadow-color: var(--primary-700);
}
:where([ui-shadow~="error"]) {
  --ui-shadow-color: var(--error-700);
}
:where([ui-shadow~="warning"]) {
  --ui-shadow-color: var(--warning-700);
}
:where([ui-shadow~="success"]) {
  --ui-shadow-color: var(--success-700);
}
:where([ui-shadow~="info"]) {
  --ui-shadow-color: var(--info-700);
}
:where([ui-shadow~="neutral"]) {
  --ui-shadow-color: var(--neutral-700);
}

}
@layer theme {
/* 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; }

}